| export const AdminCategoriesHeader = styled(Header)` | export const AdminCategoriesHeader = styled(Header)` | ||||
| /* top: 40px; */ | /* top: 40px; */ | ||||
| top: 0; | top: 0; | ||||
| @media (min-width: 600px) and (max-width: 900px) { | |||||
| & > div:nth-child(2) { | |||||
| display: none; | |||||
| } | |||||
| } | |||||
| @media (max-width: 600px) { | @media (max-width: 600px) { | ||||
| top: -5px; | |||||
| top: 0; | |||||
| margin-top: 0px; | margin-top: 0px; | ||||
| & > div { | & > div { | ||||
| margin-top: -10px; | |||||
| margin-top: 0; | |||||
| } | } | ||||
| & > div > div > div:nth-child(1) { | |||||
| top: 15px; | |||||
| & > div > div > div { | |||||
| top: 25px; | |||||
| left: 0; | left: 0; | ||||
| } | } | ||||
| } | } |
| `; | `; | ||||
| export const AdminLocationsHeader = styled(Header)` | export const AdminLocationsHeader = styled(Header)` | ||||
| top: 0; | top: 0; | ||||
| @media (min-width: 600px) and (max-width: 900px) { | |||||
| & > div:nth-child(2) { | |||||
| display: none; | |||||
| } | |||||
| } | |||||
| @media (max-width: 600px) { | @media (max-width: 600px) { | ||||
| top: 0px; | top: 0px; | ||||
| margin-top: 0px; | margin-top: 0px; |
| HeaderText, | HeaderText, | ||||
| NewSubcategoryButton, | NewSubcategoryButton, | ||||
| SponsoredCategoryCard, | SponsoredCategoryCard, | ||||
| SubcategoriesHeader, | |||||
| SubcategoriesList, | SubcategoriesList, | ||||
| } from "./AdminSubcategoriesPage.styled"; | } from "./AdminSubcategoriesPage.styled"; | ||||
| import { selectManualSearchString } from "../../../store/selectors/filtersSelectors"; | import { selectManualSearchString } from "../../../store/selectors/filtersSelectors"; | ||||
| method: ADD_TYPE, | method: ADD_TYPE, | ||||
| showSecondButton: true, | showSecondButton: true, | ||||
| category, | category, | ||||
| categoryId: category?._id | |||||
| categoryId: category?._id, | |||||
| }) | }) | ||||
| ); | ); | ||||
| }; | }; | ||||
| handleSearch={handleSearch} | handleSearch={handleSearch} | ||||
| placeholder={t("admin.subcategories.placeholder")} | placeholder={t("admin.subcategories.placeholder")} | ||||
| /> | /> | ||||
| <ButtonContainer onClick={goBack}> | |||||
| <ArrowButton side={"left"}></ArrowButton> | |||||
| <HeaderText>{t("admin.subcategories.goBack")}</HeaderText> | |||||
| </ButtonContainer> | |||||
| <SubcategoriesHeader> | |||||
| <ButtonContainer onClick={goBack}> | |||||
| <ArrowButton side={"left"}></ArrowButton> | |||||
| <HeaderText>{t("admin.subcategories.goBack")}</HeaderText> | |||||
| </ButtonContainer> | |||||
| <NewSubcategoryButton | |||||
| variant="contained" | |||||
| buttoncolor={selectedTheme.colors.iconYellowColor} | |||||
| textcolor={selectedTheme.colors.messageText} | |||||
| onClick={showAddSubcategoryModal} | |||||
| > | |||||
| {t("admin.subcategories.addSubcategory")} | |||||
| </NewSubcategoryButton> | |||||
| </SubcategoriesHeader> | |||||
| <AdminSubcategoriesHeader | <AdminSubcategoriesHeader | ||||
| hideSorting | hideSorting | ||||
| myOffers | myOffers | ||||
| /> | /> | ||||
| ))} | ))} | ||||
| </SubcategoriesList> | </SubcategoriesList> | ||||
| <NewSubcategoryButton | |||||
| variant="contained" | |||||
| buttoncolor={selectedTheme.colors.iconYellowColor} | |||||
| textcolor={selectedTheme.colors.messageText} | |||||
| onClick={showAddSubcategoryModal} | |||||
| > | |||||
| {t("admin.subcategories.addSubcategory")} | |||||
| </NewSubcategoryButton> | |||||
| </AdminSubcategoriesPageContainer> | </AdminSubcategoriesPageContainer> | ||||
| </> | </> | ||||
| ); | ); |
| `; | `; | ||||
| export const AdminSubcategoriesHeader = styled(Header)` | export const AdminSubcategoriesHeader = styled(Header)` | ||||
| top: 4px; | top: 4px; | ||||
| @media (min-width: 600px) and (max-width: 900px) { | |||||
| & > div:nth-child(2) { | |||||
| display: none; | |||||
| } | |||||
| } | |||||
| @media (max-width: 600px) { | @media (max-width: 600px) { | ||||
| height: 10px; | height: 10px; | ||||
| top: -65px; | top: -65px; | ||||
| margin-top: 10px; | margin-top: 10px; | ||||
| } | } | ||||
| & div div:nth-child(2) { | & div div:nth-child(2) { | ||||
| top: 22px; | |||||
| top: 57px; | |||||
| } | } | ||||
| } | } | ||||
| `; | `; | ||||
| export const AdminSubcategoriesSearchField = styled(SearchField)` | export const AdminSubcategoriesSearchField = styled(SearchField)` | ||||
| top: -15px; | top: -15px; | ||||
| @media (max-width: 900px) { | |||||
| margin-top: 72px; | |||||
| } | |||||
| @media (max-width: 600px) { | @media (max-width: 600px) { | ||||
| display: none; | display: none; | ||||
| } | } | ||||
| padding-top: 0; | padding-top: 0; | ||||
| } | } | ||||
| } | } | ||||
| ` | |||||
| `; | |||||
| export const SponsoredCategoryCard = styled(CategoryCard)` | export const SponsoredCategoryCard = styled(CategoryCard)` | ||||
| background: ${selectedTheme.colors.backgroundSponsoredColor}; | background: ${selectedTheme.colors.backgroundSponsoredColor}; | ||||
| border: 1px solid ${selectedTheme.colors.borderSponsoredColor}; | border: 1px solid ${selectedTheme.colors.borderSponsoredColor}; | ||||
| `; | `; | ||||
| export const NewSubcategoryButton = styled(PrimaryButton)` | export const NewSubcategoryButton = styled(PrimaryButton)` | ||||
| position: absolute; | |||||
| bottom: 18px; | |||||
| right: 37px; | |||||
| height: 48px; | height: 48px; | ||||
| width: 224px; | width: 224px; | ||||
| & button { | & button { | ||||
| font-weight: 700; | font-weight: 700; | ||||
| } | } | ||||
| @media (max-width: 600px) { | @media (max-width: 600px) { | ||||
| bottom: 18px; | |||||
| right: 16px; | |||||
| margin-bottom: 20px; | |||||
| } | } | ||||
| ` | |||||
| `; | |||||
| export const ButtonContainer = styled(Link)` | 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}; | |||||
| ` | |||||
| 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}; | |||||
| `; | |||||
| export const SubcategoriesHeader = styled(Box)` | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| @media (max-width: 600px) { | |||||
| flex-direction: column; | |||||
| gap: 20px; | |||||
| } | |||||
| `; |