Partly finished feature 685

src/components/Cards/ItemDetailsCard/ItemDetailsCard.styled.js

@@ -27,6 +27,7 @@ export const ItemDetailsCardContainer = styled(Container)`
   padding: 18px;
   max-width: 2000px;
   position: relative;
+  width: auto;
   ${(props) => !props.previewCard && `height: 654px;`}
   /* height: 654px; */
   /* padding-bottom: 70px; */

src/components/Cards/LabeledCard/LabeledCard.styled.js

@@ -8,6 +8,11 @@ export const LabeledCardContainer = styled(Box)`
   position: relative;
   width: ${(props) => props.width || `min-content`};
   height: ${(props) => props.height || `57px`};
+  /* max-width: 350px;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+  text-overflow: ellipsis; */
   padding: 18px;
 `;
 export const LabeledCardIconContainer = styled(Box)`

src/components/Dropdown/DropdownList/DropdownList.styled.js

@@ -36,6 +36,8 @@ export const DropdownTitle = styled(Typography)`
       : selectedTheme.coloros.primaryText};
   @media (max-width: 600px) {
     font-size: 14px;
+    width: 260px;
+    max-width: 260px;
   }
 `;
 

src/components/ItemDetails/ItemDetailsHeaderCard/OfferDetail/Category/CategoryDetail.js

@@ -16,7 +16,7 @@ const CategoryDetail = (props) => {
         <LocationIcon />
       </DetailIcon>
       <DetailText ismyprofile={props.isMyProfile}>
-        {offer.offer.location.city}
+        {offer.offer?.location?.city}
       </DetailText>
     </DetailContainer>
   );

src/components/Modals/DeleteCategory/DeleteCategory.styled.js

@@ -48,6 +48,11 @@ export const CategoryName = styled(Typography)`
   font-size: 16px;
   white-space: nowrap;
   line-height: 21px;
+  max-width: 350px;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+  text-overflow: ellipsis;
   color: ${selectedTheme.colors.primaryPurple};
 `;
 export const ReassuranceText = styled(Typography)`

src/i18n/resources/rs.js

@@ -481,6 +481,7 @@ export default {
       addSubcategory: "Dodaj podkategoriju",
       cancel: "Otkaži",
       delete: "Obriši",
+      goBack: "Nazad na sve kategorije",
       reassuranceDelete:
         "Da li ste sigurni da želite da obrišete odabranu podkategoriju?",
       edit: {

src/layouts/ItemDetailsLayout/ItemDetailsLayout.js

@@ -15,8 +15,8 @@ const ItemDetailsLayout = (props) => {
     >
       {props.children}
       <ContentRightCardContainer>
-        <Content item>{props.content}</Content>
-        <RightCard item singleOffer={props.singleOffer} profile={props.profile}>
+        <Content lg={5} item>{props.content}</Content>
+        <RightCard lg={7} item singleOffer={props.singleOffer} profile={props.profile}>
           {props.rightCard}
         </RightCard>
       </ContentRightCardContainer>

src/layouts/ItemDetailsLayout/ItemDetailsLayout.styled.js

@@ -5,7 +5,7 @@ export const ItemDetailsLayoutContainer = styled(Container)`
   /* padding-left: 36px; */
   /* padding-right: ${(props) => (props.singleOffer ? "76px" : 0)}; */
   margin: 0;
-  width: 100vw;
+  width: calc(100vw - 17px);
   max-width: 100vw;
   /* display: flex; */
   position: relative;

src/pages/AdminHomePage/AdminSubcategoriesPage/AdminSubcategoriesPage.js

@@ -9,6 +9,8 @@ import {
   AdminSubcategoriesHeader,
   AdminSubcategoriesPageContainer,
   AdminSubcategoriesSearchField,
+  ButtonContainer,
+  HeaderText,
   NewSubcategoryButton,
   SponsoredCategoryCard,
   SubcategoriesList,
@@ -24,6 +26,8 @@ import EditCategory from "../../../components/Modals/EditCategory/EditCategory";
 import useSorting from "../../../hooks/useOffers/useSorting";
 import { sortCategoriesEnum } from "../../../enums/sortEnum";
 import { adminSortMethod } from "../../../util/helpers/adminSortHelper";
+import { ArrowButton } from "../../../components/Buttons/ArrowButton/ArrowButton";
+import history from "../../../store/utils/history";
 
 const AdminSubcategoriesPage = () => {
   const { t } = useTranslation();
@@ -63,6 +67,9 @@ const AdminSubcategoriesPage = () => {
     return [];
   }, [category, manualSearchString, sorting.selectedSortOptionLocally]);
   console.log("subc", categories);
+  const goBack = () => {
+    history.goBack();
+  };
 
   return (
     <>
@@ -72,6 +79,10 @@ const AdminSubcategoriesPage = () => {
           handleSearch={handleSearch}
           placeholder={t("admin.subcategories.placeholder")}
         />
+        <ButtonContainer onClick={goBack}>
+          <ArrowButton side={"left"}></ArrowButton>
+          <HeaderText>{t("admin.subcategories.goBack")}</HeaderText>
+        </ButtonContainer>
         <AdminSubcategoriesHeader
           hideSorting
           myOffers

src/pages/AdminHomePage/AdminSubcategoriesPage/AdminSubcategoriesPage.styled.js

@@ -1,4 +1,4 @@
-import { Box } from "@mui/material";
+import { Box, Link, Typography } from "@mui/material";
 import styled from "styled-components";
 import { PrimaryButton } from "../../../components/Buttons/PrimaryButton/PrimaryButton";
 import CategoryCard from "../../../components/Cards/CategoryCard/CategoryCard";
@@ -24,12 +24,19 @@ export const AdminSubcategoriesPageContainer = styled(Box)`
 export const AdminSubcategoriesHeader = styled(Header)`
   top: 4px;
   @media (max-width: 600px) {
-    top: -10px;
+    height: 10px;
+    top: -65px;
+    &:nth-child(4) {
+      top: 4px;
+      & div:nth-child(2) {
+        margin-top: 0;
+      }
+    }
     margin-top: 18px;
-    & div {
+    & > div:nth-child(1) {
       margin-top: 10px;
     }
-    & div div:nth-child(1) {
+    & div div:nth-child(2) {
       top: 22px;
     }
   }
@@ -42,6 +49,11 @@ export const AdminSubcategoriesSearchField = styled(SearchField)`
 `;
 export const SubcategoriesList = styled(Box)`
   padding-top: 18px;
+  @media (max-width: 600px) {
+    &:nth-child(4) {
+      padding-top: 0;
+    }
+  }
 `
 export const SponsoredCategoryCard = styled(CategoryCard)`
   background: ${selectedTheme.colors.backgroundSponsoredColor};
@@ -61,3 +73,20 @@ export const NewSubcategoryButton = styled(PrimaryButton)`
     right: 16px;
   }
 `
+export const ButtonContainer = styled(Link)`
+    width:fit-content;
+    cursor:pointer;
+    display: flex;
+    justify-content: start;
+    align-items:center;
+    gap:12px;
+    text-decoration: none;
+`
+export const HeaderText = styled(Typography) `
+    font-family: ${selectedTheme.fonts.textFont};
+    line-height: 22px;
+    font-size: 16px;
+    color: ${selectedTheme.colors.primaryPurple};
+    text-decoration: none;
+    border-bottom: 1px dotted ${selectedTheme.colors.primaryPurple};
+`