@ludo.ninja/components 1.8.1 → 1.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/CreationCard/CardHead.js +9 -9
- package/dist/components/CreationCard/index.d.ts +1 -1
- package/dist/components/CreationCard/index.js +5 -8
- package/dist/components/deleteDialog/index.js +13 -15
- package/dist/components/filters/index.js +4 -5
- package/dist/components/forms/form/index.js +3 -3
- package/dist/components/forms/formsNavigation/index.js +4 -5
- package/dist/components/forms/formsTemplate/index.js +6 -6
- package/dist/components/headers/components/headerExperienceLabel/index.js +6 -6
- package/dist/components/headers/components/headerUserPic/index.js +4 -4
- package/dist/components/inviteCodesPage/wrappers/resumeCodes/index.js +9 -14
- package/dist/components/linkTabs/index.js +2 -3
- package/dist/components/linkTabs/linkTab/index.js +4 -6
- package/dist/components/navigation/index.js +5 -5
- package/dist/components/profile/MultiversXAudit/MultiversXAudit.js +5 -5
- package/dist/components/profile/aboutText/index.js +16 -21
- package/dist/components/profile/addToGalleryBtns/index.js +9 -12
- package/dist/components/profile/info/index.js +3 -3
- package/dist/components/profile/interests/index.js +2 -2
- package/dist/components/profile/profileUserCards/profileUserCard/index.js +2 -2
- package/dist/components/profile/rank/index.js +3 -3
- package/dist/components/profile/stats/index.js +2 -2
- package/dist/components/profile/wallets/index.js +2 -2
- package/dist/components/registrationPage/registrationSelection/index.js +2 -2
- package/dist/components/rewards/FAQ/index.js +8 -8
- package/dist/components/rewards/clarifications/index.js +4 -4
- package/dist/components/rewards/logoBottom/index.js +2 -2
- package/dist/components/rewards/prograssBar/index.js +2 -2
- package/dist/components/rewards/rewardsButton/index.js +2 -2
- package/dist/components/rewards/seasonBanner/index.js +3 -3
- package/dist/components/rewards/taskExpTab/index.js +7 -7
- package/dist/components/rewards/tasksGrid/index.js +4 -4
- package/dist/components/rewards/userExp/index.js +8 -8
- package/dist/components/search/SearchInputContainer.js +4 -4
- package/dist/components/search/index.js +4 -4
- package/dist/components/search/searchCloseMoreButtons/index.js +3 -3
- package/dist/components/search/searchResultCaption/index.js +2 -2
- package/dist/components/search/searchSimpleInput/index.js +5 -5
- package/dist/components/search/searchSuggestions/index.js +2 -2
- package/dist/components/search/searchSuggestions/searchSuggestionsCaption/index.js +2 -2
- package/dist/components/search/searchSuggestions/searchSuggestionsFooter/index.js +2 -2
- package/dist/components/search/searchSuggestions/searchSuggestionsItem/index.js +2 -2
- package/dist/components/search/searchSuggestions/searchSuggestionsItem/searchSuggestionsItemSkeleton/index.js +3 -3
- package/dist/components/search/searchSuggestions/searchSuggestionsNotFound/index.js +2 -2
- package/dist/components/shareDialog/index.js +3 -3
- package/dist/components/sidebar/index.js +5 -5
- package/dist/components/sidebar/sidebarInviteCodeLabel/index.js +2 -2
- package/dist/components/toTopBtn/index.js +2 -2
- package/dist/layouts/custom/styles.js +3 -3
- package/dist/modules/gallery/ui/Description.js +2 -2
- package/dist/modules/gallery/ui/PlaceholderItemsGallery.js +2 -2
- package/dist/modules/gallery/ui/STopSections.js +2 -2
- package/dist/modules/gallery/ui/chooseGalleryItems/chooseGalleryItem/index.js +2 -2
- package/dist/modules/gallery/ui/chooseGalleryItems/index.js +2 -2
- package/dist/modules/gallery/ui/createGalleryForm/index.js +2 -2
- package/dist/modules/gallery/ui/editGalleryForm/index.js +2 -2
- package/dist/modules/gallery/ui/itemsPreview/index.js +2 -2
- package/dist/system/Cards/CardCheckbox/index.js +2 -3
- package/dist/system/Cards/CardContent/CardCategory/index.js +2 -3
- package/dist/system/Cards/CardContent/CardShowMore/index.js +2 -4
- package/dist/system/Cards/CardContent/index.js +2 -4
- package/dist/system/Cards/CardHeadIcons/index.js +2 -2
- package/dist/system/Cards/CardRank/index.js +4 -4
- package/dist/system/Cards/CardsGrid/index.js +2 -2
- package/dist/system/Cards/MultiMediaCard/index.js +2 -5
- package/dist/system/Cards/RegularCard/index.js +2 -5
- package/dist/system/Cards/Styles/Head.js +2 -2
- package/dist/system/Cards/Styles/Headicons.js +2 -3
- package/dist/system/Cards/Styles/Image.js +2 -2
- package/dist/system/Cards/Styles/Likes.js +3 -4
- package/dist/system/Cards/Styles/MultiHead.js +2 -2
- package/dist/system/CardsHolderWithSkeleton/CardsHolder/CardsSkeleton/index.js +4 -4
- package/dist/system/CardsHolderWithSkeleton/CardsHolder/index.js +2 -2
- package/dist/system/CardsHolderWithSkeleton/CardsHolderLoader/index.js +5 -7
- package/dist/system/Forms/DatePicker/index.js +2 -2
- package/dist/system/Forms/ErrorLabel/index.js +2 -2
- package/dist/system/Forms/Input/index.js +2 -2
- package/dist/system/Forms/Selects/DesktopSelect/index.js +7 -9
- package/dist/system/Forms/TextArea/index.js +2 -2
- package/dist/system/Img/Userpic/index.js +6 -7
- package/dist/system/Labels/ExperienceLabel/index.js +5 -7
- package/dist/system/Modals/Modal/index.js +4 -6
- package/dist/system/Modals/ModalSidebar/index.js +4 -6
- package/dist/system/ShareIconResize.js +5 -6
- package/dist/system/Tabs/TabNavLink/index.d.ts +1 -1
- package/dist/system/Tabs/TabNavLink/index.js +4 -5
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/utils/adaptive/check4k.js +2 -2
- package/package.json +1 -1
|
@@ -34,7 +34,7 @@ exports.ToTopBtnWithCustomHandler = void 0;
|
|
|
34
34
|
var react_1 = __importStar(require("react"));
|
|
35
35
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
36
36
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
37
|
-
var
|
|
37
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
38
38
|
var colors_1 = require("@/styles/colors");
|
|
39
39
|
var z_indexes_1 = require("@/styles/mixins/z-indexes");
|
|
40
40
|
var scale_1 = require("@/utils/adaptive/scale");
|
|
@@ -45,7 +45,7 @@ var toTopBtn_svg_1 = __importDefault(require("@/public/toTopBtn/toTopBtn.svg"));
|
|
|
45
45
|
var StyledToTopBnt = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n width: 48px;\n height: 48px;\n bottom: 36px;\n right: 24px;\n z-index: ", ";\n cursor: pointer;\n padding: 5px;\n background-color: ", ";\n border-radius: 24px;\n box-shadow: 0 10px 32px -16px rgba(33, 21, 95, 0.1);\n\n &:hover {\n svg path {\n stroke: ", ";\n }\n }\n\n @media (max-width: 767px) {\n position: fixed;\n left: 0;\n right: 0;\n margin: 0 auto;\n }\n\n ", " {\n width: ", ";\n height: ", ";\n bottom: ", ";\n right: ", ";\n border-radius: ", ";\n padding: ", ";\n box-shadow: 0 ", " ", "\n ", " rgba(33, 21, 95, 0.1);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n width: 48px;\n height: 48px;\n bottom: 36px;\n right: 24px;\n z-index: ", ";\n cursor: pointer;\n padding: 5px;\n background-color: ", ";\n border-radius: 24px;\n box-shadow: 0 10px 32px -16px rgba(33, 21, 95, 0.1);\n\n &:hover {\n svg path {\n stroke: ", ";\n }\n }\n\n @media (max-width: 767px) {\n position: fixed;\n left: 0;\n right: 0;\n margin: 0 auto;\n }\n\n ", " {\n width: ", ";\n height: ", ";\n bottom: ", ";\n right: ", ";\n border-radius: ", ";\n padding: ", ";\n box-shadow: 0 ", " ", "\n ", " rgba(33, 21, 95, 0.1);\n }\n"])), z_indexes_1.zIndexToTopBtn, function (_a) {
|
|
46
46
|
var theme = _a.theme;
|
|
47
47
|
return theme.colors.toTopBtn;
|
|
48
|
-
}, colors_1.AccentColor,
|
|
48
|
+
}, colors_1.AccentColor, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(48), (0, _4k_1.adaptiveValueCalc)(48), (0, _4k_1.adaptiveValueCalc)(36), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(5), (0, _4k_1.adaptiveValueCalc)(10), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(-16));
|
|
49
49
|
var ToTopBtnIconResize = function () {
|
|
50
50
|
var windowDimensions = (0, screen_1.useWindowDimensionsWithServerInitial)().windowDimensions;
|
|
51
51
|
return (react_1.default.createElement(toTopBtn_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({ windowDimensions: windowDimensions, currentSize: 1 }) }));
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.StyledMainForms = exports.StyledMain = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
13
|
-
var
|
|
14
|
-
exports.StyledMain = styled_components_1.default.main(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 1080px;\n margin: 0 auto;\n padding-top: 124px;\n padding-bottom: 60px;\n\n ", " {\n width: 768px;\n padding-bottom: 32px;\n }\n\n ", " {\n width: 320px;\n padding-top: 80px;\n padding-bottom: 20px;\n }\n ", " {\n width: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n }\n"], ["\n width: 1080px;\n margin: 0 auto;\n padding-top: 124px;\n padding-bottom: 60px;\n\n ", " {\n width: 768px;\n padding-bottom: 32px;\n }\n\n ", " {\n width: 320px;\n padding-top: 80px;\n padding-bottom: 20px;\n }\n ", " {\n width: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n }\n"])),
|
|
15
|
-
exports.StyledMainForms = styled_components_1.default.main(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 1080px;\n margin: 0 auto;\n\n ", " {\n width: 768px;\n }\n\n ", " {\n width: 400px;\n }\n ", " {\n width: ", ";\n }\n"], ["\n width: 1080px;\n margin: 0 auto;\n\n ", " {\n width: 768px;\n }\n\n ", " {\n width: 400px;\n }\n ", " {\n width: ", ";\n }\n"])),
|
|
13
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
14
|
+
exports.StyledMain = styled_components_1.default.main(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 1080px;\n margin: 0 auto;\n padding-top: 124px;\n padding-bottom: 60px;\n\n ", " {\n width: 768px;\n padding-bottom: 32px;\n }\n\n ", " {\n width: 320px;\n padding-top: 80px;\n padding-bottom: 20px;\n }\n ", " {\n width: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n }\n"], ["\n width: 1080px;\n margin: 0 auto;\n padding-top: 124px;\n padding-bottom: 60px;\n\n ", " {\n width: 768px;\n padding-bottom: 32px;\n }\n\n ", " {\n width: 320px;\n padding-top: 80px;\n padding-bottom: 20px;\n }\n ", " {\n width: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n }\n"])), styles_1.mediaQuery.maxWidthTablet, styles_1.mediaQuery.mobile, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(1080), (0, _4k_1.adaptiveValueCalc)(124), (0, _4k_1.adaptiveValueCalc)(60));
|
|
15
|
+
exports.StyledMainForms = styled_components_1.default.main(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 1080px;\n margin: 0 auto;\n\n ", " {\n width: 768px;\n }\n\n ", " {\n width: 400px;\n }\n ", " {\n width: ", ";\n }\n"], ["\n width: 1080px;\n margin: 0 auto;\n\n ", " {\n width: 768px;\n }\n\n ", " {\n width: 400px;\n }\n ", " {\n width: ", ";\n }\n"])), styles_1.mediaQuery.maxWidthTablet, styles_1.mediaQuery.mobile, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(1080));
|
|
16
16
|
var templateObject_1, templateObject_2;
|
|
@@ -35,10 +35,10 @@ var react_1 = __importStar(require("react"));
|
|
|
35
35
|
var react_hyphen_1 = __importDefault(require("react-hyphen"));
|
|
36
36
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
37
37
|
var colors_1 = require("@ludo.ninja/ui/build/styles/colors");
|
|
38
|
-
var
|
|
38
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
39
39
|
var typography_1 = require("@/styles/typography");
|
|
40
40
|
var vars_1 = require("@/fonts/vars");
|
|
41
|
-
var SDescription = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-top: 16px;\n position: relative;\n overflow: hidden;\n\n .content {\n display: -webkit-box;\n word-break: break-word;\n -webkit-box-orient: vertical;\n white-space: normal;\n overflow: hidden;\n }\n\n .calculate {\n position: absolute;\n top: 0;\n left: 0;\n z-index: -1;\n opacity: 0;\n pointer-events: none;\n }\n\n //=======================\n .descr {\n font-family: ", ";\n word-wrap: break-word;\n ", ";\n color: ", ";\n white-space: normal;\n overflow: visible;\n text-overflow: unset;\n\n ", " {\n .descr {\n font-size: 1.4em;\n }\n }\n }\n\n .readMoreContainer {\n padding-top: 0;\n display: grid;\n grid-template-rows: 0fr;\n opacity: 0;\n pointer-events: none;\n overflow: hidden;\n\n &.show {\n transition: grid-template-rows 300ms ease-in-out,\n padding-top 300ms ease-in-out, opacity 300ms ease-in-out;\n padding-top: 4px;\n grid-template-rows: 1fr;\n opacity: 1;\n pointer-events: unset;\n }\n }\n\n .readMore {\n ", ";\n color: ", ";\n\n user-select: none;\n cursor: pointer;\n min-height: 0;\n }\n"], ["\n margin-top: 16px;\n position: relative;\n overflow: hidden;\n\n .content {\n display: -webkit-box;\n word-break: break-word;\n -webkit-box-orient: vertical;\n white-space: normal;\n overflow: hidden;\n }\n\n .calculate {\n position: absolute;\n top: 0;\n left: 0;\n z-index: -1;\n opacity: 0;\n pointer-events: none;\n }\n\n //=======================\n .descr {\n font-family: ", ";\n word-wrap: break-word;\n ", ";\n color: ", ";\n white-space: normal;\n overflow: visible;\n text-overflow: unset;\n\n ", " {\n .descr {\n font-size: 1.4em;\n }\n }\n }\n\n .readMoreContainer {\n padding-top: 0;\n display: grid;\n grid-template-rows: 0fr;\n opacity: 0;\n pointer-events: none;\n overflow: hidden;\n\n &.show {\n transition: grid-template-rows 300ms ease-in-out,\n padding-top 300ms ease-in-out, opacity 300ms ease-in-out;\n padding-top: 4px;\n grid-template-rows: 1fr;\n opacity: 1;\n pointer-events: unset;\n }\n }\n\n .readMore {\n ", ";\n color: ", ";\n\n user-select: none;\n cursor: pointer;\n min-height: 0;\n }\n"])), vars_1.dmsansFontVarCss.css, typography_1.MainText, colors_1.TextGrayColor,
|
|
41
|
+
var SDescription = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-top: 16px;\n position: relative;\n overflow: hidden;\n\n .content {\n display: -webkit-box;\n word-break: break-word;\n -webkit-box-orient: vertical;\n white-space: normal;\n overflow: hidden;\n }\n\n .calculate {\n position: absolute;\n top: 0;\n left: 0;\n z-index: -1;\n opacity: 0;\n pointer-events: none;\n }\n\n //=======================\n .descr {\n font-family: ", ";\n word-wrap: break-word;\n ", ";\n color: ", ";\n white-space: normal;\n overflow: visible;\n text-overflow: unset;\n\n ", " {\n .descr {\n font-size: 1.4em;\n }\n }\n }\n\n .readMoreContainer {\n padding-top: 0;\n display: grid;\n grid-template-rows: 0fr;\n opacity: 0;\n pointer-events: none;\n overflow: hidden;\n\n &.show {\n transition: grid-template-rows 300ms ease-in-out,\n padding-top 300ms ease-in-out, opacity 300ms ease-in-out;\n padding-top: 4px;\n grid-template-rows: 1fr;\n opacity: 1;\n pointer-events: unset;\n }\n }\n\n .readMore {\n ", ";\n color: ", ";\n\n user-select: none;\n cursor: pointer;\n min-height: 0;\n }\n"], ["\n margin-top: 16px;\n position: relative;\n overflow: hidden;\n\n .content {\n display: -webkit-box;\n word-break: break-word;\n -webkit-box-orient: vertical;\n white-space: normal;\n overflow: hidden;\n }\n\n .calculate {\n position: absolute;\n top: 0;\n left: 0;\n z-index: -1;\n opacity: 0;\n pointer-events: none;\n }\n\n //=======================\n .descr {\n font-family: ", ";\n word-wrap: break-word;\n ", ";\n color: ", ";\n white-space: normal;\n overflow: visible;\n text-overflow: unset;\n\n ", " {\n .descr {\n font-size: 1.4em;\n }\n }\n }\n\n .readMoreContainer {\n padding-top: 0;\n display: grid;\n grid-template-rows: 0fr;\n opacity: 0;\n pointer-events: none;\n overflow: hidden;\n\n &.show {\n transition: grid-template-rows 300ms ease-in-out,\n padding-top 300ms ease-in-out, opacity 300ms ease-in-out;\n padding-top: 4px;\n grid-template-rows: 1fr;\n opacity: 1;\n pointer-events: unset;\n }\n }\n\n .readMore {\n ", ";\n color: ", ";\n\n user-select: none;\n cursor: pointer;\n min-height: 0;\n }\n"])), vars_1.dmsansFontVarCss.css, typography_1.MainText, colors_1.TextGrayColor, styles_1.mediaQuery.mobile, typography_1.FH6, colors_1.AccentColor);
|
|
42
42
|
var Description = function (_a) {
|
|
43
43
|
var description = _a.description, _b = _a.lineClamp, lineClamp = _b === void 0 ? 2 : _b;
|
|
44
44
|
var container = (0, react_1.useRef)(null);
|
|
@@ -11,8 +11,8 @@ exports.PlaceholderItemsGallery = void 0;
|
|
|
11
11
|
var react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
|
|
12
12
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
13
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
14
|
-
var
|
|
15
|
-
var SWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 8px;\n display: flex;\n gap: 16px;\n\n & > :last-child {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .first {\n border-radius: 6px;\n height: 32px;\n width: 32px;\n }\n\n .second {\n border-radius: 3px;\n height: 14px;\n width: 110px;\n }\n\n .third {\n border-radius: 3px;\n height: 12px;\n width: 67px;\n }\n\n ", " {\n padding: ", ";\n gap: ", ";\n\n & > :last-child {\n gap: ", ";\n }\n\n .first {\n border-radius: ", ";\n height: ", ";\n width: ", ";\n }\n\n .second {\n border-radius: ", ";\n height: ", ";\n width: ", ";\n }\n\n .third {\n border-radius: ", ";\n height: ", ";\n width: ", ";\n }\n }\n"], ["\n padding: 8px;\n display: flex;\n gap: 16px;\n\n & > :last-child {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .first {\n border-radius: 6px;\n height: 32px;\n width: 32px;\n }\n\n .second {\n border-radius: 3px;\n height: 14px;\n width: 110px;\n }\n\n .third {\n border-radius: 3px;\n height: 12px;\n width: 67px;\n }\n\n ", " {\n padding: ", ";\n gap: ", ";\n\n & > :last-child {\n gap: ", ";\n }\n\n .first {\n border-radius: ", ";\n height: ", ";\n width: ", ";\n }\n\n .second {\n border-radius: ", ";\n height: ", ";\n width: ", ";\n }\n\n .third {\n border-radius: ", ";\n height: ", ";\n width: ", ";\n }\n }\n"])),
|
|
14
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
15
|
+
var SWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 8px;\n display: flex;\n gap: 16px;\n\n & > :last-child {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .first {\n border-radius: 6px;\n height: 32px;\n width: 32px;\n }\n\n .second {\n border-radius: 3px;\n height: 14px;\n width: 110px;\n }\n\n .third {\n border-radius: 3px;\n height: 12px;\n width: 67px;\n }\n\n ", " {\n padding: ", ";\n gap: ", ";\n\n & > :last-child {\n gap: ", ";\n }\n\n .first {\n border-radius: ", ";\n height: ", ";\n width: ", ";\n }\n\n .second {\n border-radius: ", ";\n height: ", ";\n width: ", ";\n }\n\n .third {\n border-radius: ", ";\n height: ", ";\n width: ", ";\n }\n }\n"], ["\n padding: 8px;\n display: flex;\n gap: 16px;\n\n & > :last-child {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .first {\n border-radius: 6px;\n height: 32px;\n width: 32px;\n }\n\n .second {\n border-radius: 3px;\n height: 14px;\n width: 110px;\n }\n\n .third {\n border-radius: 3px;\n height: 12px;\n width: 67px;\n }\n\n ", " {\n padding: ", ";\n gap: ", ";\n\n & > :last-child {\n gap: ", ";\n }\n\n .first {\n border-radius: ", ";\n height: ", ";\n width: ", ";\n }\n\n .second {\n border-radius: ", ";\n height: ", ";\n width: ", ";\n }\n\n .third {\n border-radius: ", ";\n height: ", ";\n width: ", ";\n }\n }\n"])), styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(3), (0, _4k_1.adaptiveValueCalc)(14), (0, _4k_1.adaptiveValueCalc)(110), (0, _4k_1.adaptiveValueCalc)(3), (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(67));
|
|
16
16
|
var PlaceholderItemsGallery = function () {
|
|
17
17
|
return (React.createElement(SWrapper, null,
|
|
18
18
|
React.createElement(react_loading_skeleton_1.default, { baseColor: "#CFD5EA", className: "first" }),
|
|
@@ -10,6 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.STopSections = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
13
|
-
var
|
|
14
|
-
exports.STopSections = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: 1080px;\n margin: 0 auto;\n padding-top: 124px;\n padding-bottom: 24px;\n\n ", " {\n width: 704px;\n }\n\n ", " {\n width: 320px;\n padding-top: 80px;\n }\n\n ", " {\n width: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n }\n"], ["\n position: relative;\n width: 1080px;\n margin: 0 auto;\n padding-top: 124px;\n padding-bottom: 24px;\n\n ", " {\n width: 704px;\n }\n\n ", " {\n width: 320px;\n padding-top: 80px;\n }\n\n ", " {\n width: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n }\n"])),
|
|
13
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
14
|
+
exports.STopSections = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: 1080px;\n margin: 0 auto;\n padding-top: 124px;\n padding-bottom: 24px;\n\n ", " {\n width: 704px;\n }\n\n ", " {\n width: 320px;\n padding-top: 80px;\n }\n\n ", " {\n width: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n }\n"], ["\n position: relative;\n width: 1080px;\n margin: 0 auto;\n padding-top: 124px;\n padding-bottom: 24px;\n\n ", " {\n width: 704px;\n }\n\n ", " {\n width: 320px;\n padding-top: 80px;\n }\n\n ", " {\n width: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n }\n"])), styles_1.mediaQuery.maxWidthTablet, styles_1.mediaQuery.mobile, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(1080), (0, _4k_1.adaptiveValueCalc)(124), (0, _4k_1.adaptiveValueCalc)(24));
|
|
15
15
|
var templateObject_1;
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
var react_1 = __importDefault(require("react"));
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
13
|
-
var
|
|
13
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
14
14
|
var colors_1 = require("@/styles/colors");
|
|
15
15
|
var typography_1 = require("@/styles/typography");
|
|
16
16
|
var vars_1 = require("@/fonts/vars");
|
|
@@ -20,7 +20,7 @@ var StyledChooseItem = styled_components_1.default.div(templateObject_1 || (temp
|
|
|
20
20
|
return props.isSelected ? colors_1.InactiveButtonColor : 'none';
|
|
21
21
|
}, function (props) { return (props.isSelected ? '#cfd5ea' : ''); }, function (props) {
|
|
22
22
|
return props.isSelected ? 'none' : colors_1.InactiveButtonColor;
|
|
23
|
-
}, typography_1.FH6, colors_1.BlackColor, vars_1.dmsansFontVarCss.css, typography_1.FH7, colors_1.TextGrayColor,
|
|
23
|
+
}, typography_1.FH6, colors_1.BlackColor, vars_1.dmsansFontVarCss.css, typography_1.FH7, colors_1.TextGrayColor, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(16));
|
|
24
24
|
// Component
|
|
25
25
|
var ChooseItem = function (_a) {
|
|
26
26
|
var galleryItem = _a.galleryItem, handleIsSelected = _a.handleIsSelected, isSelected = _a.isSelected;
|
|
@@ -62,13 +62,13 @@ var chooseGalleryItem_1 = __importDefault(require("@/modules/gallery/ui/chooseGa
|
|
|
62
62
|
var ui_1 = require("@/store/ui");
|
|
63
63
|
var useFetchMyFavorites_1 = require("@/api/server-galleries/queries/useFetchMyFavorites");
|
|
64
64
|
var useFetchMyGalleries_1 = require("@/api/server-galleries/queries/useFetchMyGalleries");
|
|
65
|
-
var
|
|
65
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
66
66
|
var colors_1 = require("@/styles/colors");
|
|
67
67
|
var typography_1 = require("@/styles/typography");
|
|
68
68
|
var MainButton_1 = __importDefault(require("@/system/Buttons/MainButton"));
|
|
69
69
|
var CardsHolderLoader_1 = __importDefault(require("@/system/CardsHolderWithSkeleton/CardsHolderLoader"));
|
|
70
70
|
// Styles
|
|
71
|
-
var StyledChooseGalleryItems = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n min-height: calc(460px - 24px);\n //position: relative;\n\n @media (min-width: 1200px) {\n min-width: 344px;\n }\n\n .head {\n margin-bottom: 20px;\n\n .tittle {\n ", ";\n color: ", ";\n margin: 0;\n }\n }\n\n .content {\n height: 234px;\n overflow-x: auto;\n margin-bottom: 55px;\n\n [data-test-id='virtuoso-item-list'] > *:not([data-index='0']) {\n padding-top: 4px;\n }\n }\n\n .favoriteBtn {\n button {\n width: 100%;\n }\n }\n\n .btns {\n margin-top: 16px;\n display: flex;\n justify-content: center;\n gap: 16px;\n\n button {\n width: 100%;\n }\n\n //button:not(:last-child) {\n // margin-right: 16px;\n //}\n }\n\n @media (max-width: 767px) {\n .content {\n width: auto;\n margin-bottom: 32px;\n }\n }\n\n ", " {\n min-height: calc(", " - ", ");\n min-width: ", ";\n\n .head {\n margin-bottom: ", ";\n }\n\n .content {\n height: ", ";\n margin-bottom: ", ";\n\n [data-test-id='virtuoso-item-list'] > *:not([data-index='0']) {\n padding-top ", ";\n }\n }\n\n .btns {\n margin-top: ", ";\n gap: ", ";\n }\n }\n"], ["\n min-height: calc(460px - 24px);\n //position: relative;\n\n @media (min-width: 1200px) {\n min-width: 344px;\n }\n\n .head {\n margin-bottom: 20px;\n\n .tittle {\n ", ";\n color: ", ";\n margin: 0;\n }\n }\n\n .content {\n height: 234px;\n overflow-x: auto;\n margin-bottom: 55px;\n\n [data-test-id='virtuoso-item-list'] > *:not([data-index='0']) {\n padding-top: 4px;\n }\n }\n\n .favoriteBtn {\n button {\n width: 100%;\n }\n }\n\n .btns {\n margin-top: 16px;\n display: flex;\n justify-content: center;\n gap: 16px;\n\n button {\n width: 100%;\n }\n\n //button:not(:last-child) {\n // margin-right: 16px;\n //}\n }\n\n @media (max-width: 767px) {\n .content {\n width: auto;\n margin-bottom: 32px;\n }\n }\n\n ", " {\n min-height: calc(", " - ", ");\n min-width: ", ";\n\n .head {\n margin-bottom: ", ";\n }\n\n .content {\n height: ", ";\n margin-bottom: ", ";\n\n [data-test-id='virtuoso-item-list'] > *:not([data-index='0']) {\n padding-top ", ";\n }\n }\n\n .btns {\n margin-top: ", ";\n gap: ", ";\n }\n }\n"])), typography_1.FH3, colors_1.BlackColor,
|
|
71
|
+
var StyledChooseGalleryItems = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n min-height: calc(460px - 24px);\n //position: relative;\n\n @media (min-width: 1200px) {\n min-width: 344px;\n }\n\n .head {\n margin-bottom: 20px;\n\n .tittle {\n ", ";\n color: ", ";\n margin: 0;\n }\n }\n\n .content {\n height: 234px;\n overflow-x: auto;\n margin-bottom: 55px;\n\n [data-test-id='virtuoso-item-list'] > *:not([data-index='0']) {\n padding-top: 4px;\n }\n }\n\n .favoriteBtn {\n button {\n width: 100%;\n }\n }\n\n .btns {\n margin-top: 16px;\n display: flex;\n justify-content: center;\n gap: 16px;\n\n button {\n width: 100%;\n }\n\n //button:not(:last-child) {\n // margin-right: 16px;\n //}\n }\n\n @media (max-width: 767px) {\n .content {\n width: auto;\n margin-bottom: 32px;\n }\n }\n\n ", " {\n min-height: calc(", " - ", ");\n min-width: ", ";\n\n .head {\n margin-bottom: ", ";\n }\n\n .content {\n height: ", ";\n margin-bottom: ", ";\n\n [data-test-id='virtuoso-item-list'] > *:not([data-index='0']) {\n padding-top ", ";\n }\n }\n\n .btns {\n margin-top: ", ";\n gap: ", ";\n }\n }\n"], ["\n min-height: calc(460px - 24px);\n //position: relative;\n\n @media (min-width: 1200px) {\n min-width: 344px;\n }\n\n .head {\n margin-bottom: 20px;\n\n .tittle {\n ", ";\n color: ", ";\n margin: 0;\n }\n }\n\n .content {\n height: 234px;\n overflow-x: auto;\n margin-bottom: 55px;\n\n [data-test-id='virtuoso-item-list'] > *:not([data-index='0']) {\n padding-top: 4px;\n }\n }\n\n .favoriteBtn {\n button {\n width: 100%;\n }\n }\n\n .btns {\n margin-top: 16px;\n display: flex;\n justify-content: center;\n gap: 16px;\n\n button {\n width: 100%;\n }\n\n //button:not(:last-child) {\n // margin-right: 16px;\n //}\n }\n\n @media (max-width: 767px) {\n .content {\n width: auto;\n margin-bottom: 32px;\n }\n }\n\n ", " {\n min-height: calc(", " - ", ");\n min-width: ", ";\n\n .head {\n margin-bottom: ", ";\n }\n\n .content {\n height: ", ";\n margin-bottom: ", ";\n\n [data-test-id='virtuoso-item-list'] > *:not([data-index='0']) {\n padding-top ", ";\n }\n }\n\n .btns {\n margin-top: ", ";\n gap: ", ";\n }\n }\n"])), typography_1.FH3, colors_1.BlackColor, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(460), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(344), (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(234), (0, _4k_1.adaptiveValueCalc)(55), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(16));
|
|
72
72
|
var GalleryItems = function (_a) {
|
|
73
73
|
var galleryItems = _a.galleryItems, loadMore = _a.loadMore, isNextLoading = _a.isNextLoading, isAdded = _a.isAdded, titleBtn = _a.titleBtn, title = _a.title, currentMyGalleryId = _a.currentMyGalleryId, setAddGallery = _a.setAddGallery, addMethod = _a.addMethod, ids = _a.ids, error = _a.error, isLoading = _a.isLoading;
|
|
74
74
|
var _b = (0, ui_1.useUiStore)(function (state) { return ({
|
|
@@ -49,14 +49,14 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
49
49
|
var type_1 = require("@ludo.ninja/ui/build/system/Alert/type");
|
|
50
50
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
51
51
|
var ui_1 = require("@/store/ui");
|
|
52
|
-
var
|
|
52
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
53
53
|
var colors_1 = require("@/styles/colors");
|
|
54
54
|
var typography_1 = require("@/styles/typography");
|
|
55
55
|
var MainButton_1 = __importDefault(require("@/system/Buttons/MainButton"));
|
|
56
56
|
var Forms_1 = require("@/system/Forms");
|
|
57
57
|
var Messages_1 = __importDefault(require("@/system/Forms/Messages"));
|
|
58
58
|
// Styles
|
|
59
|
-
var StyledCreateForm = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n min-width: 344px;\n min-height: calc(460px - 24px);\n position: relative;\n\n .head {\n margin-bottom: 20px;\n\n .tittle {\n ", ";\n color: ", ";\n margin: 0;\n }\n }\n\n .content {\n margin-bottom: 60px;\n\n .input_group {\n position: relative;\n margin-bottom: 16px;\n }\n }\n\n .btns {\n margin-top: 16px;\n display: flex;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n justify-content: center;\n gap: 16px;\n\n button {\n width: 100%;\n }\n }\n\n @media (max-width: 767px) {\n margin-right: 0;\n .content {\n width: auto;\n }\n }\n\n ", " {\n min-width: ", ";\n min-height: calc(", " - ", ");\n\n .head {\n margin-bottom: ", ";\n }\n\n .content {\n margin-bottom: ", ";\n\n .input_group {\n margin-bottom: ", ";\n }\n }\n\n .btns {\n margin-top: ", ";\n gap: ", ";\n }\n }\n"], ["\n min-width: 344px;\n min-height: calc(460px - 24px);\n position: relative;\n\n .head {\n margin-bottom: 20px;\n\n .tittle {\n ", ";\n color: ", ";\n margin: 0;\n }\n }\n\n .content {\n margin-bottom: 60px;\n\n .input_group {\n position: relative;\n margin-bottom: 16px;\n }\n }\n\n .btns {\n margin-top: 16px;\n display: flex;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n justify-content: center;\n gap: 16px;\n\n button {\n width: 100%;\n }\n }\n\n @media (max-width: 767px) {\n margin-right: 0;\n .content {\n width: auto;\n }\n }\n\n ", " {\n min-width: ", ";\n min-height: calc(", " - ", ");\n\n .head {\n margin-bottom: ", ";\n }\n\n .content {\n margin-bottom: ", ";\n\n .input_group {\n margin-bottom: ", ";\n }\n }\n\n .btns {\n margin-top: ", ";\n gap: ", ";\n }\n }\n"])), typography_1.FH3, colors_1.BlackColor,
|
|
59
|
+
var StyledCreateForm = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n min-width: 344px;\n min-height: calc(460px - 24px);\n position: relative;\n\n .head {\n margin-bottom: 20px;\n\n .tittle {\n ", ";\n color: ", ";\n margin: 0;\n }\n }\n\n .content {\n margin-bottom: 60px;\n\n .input_group {\n position: relative;\n margin-bottom: 16px;\n }\n }\n\n .btns {\n margin-top: 16px;\n display: flex;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n justify-content: center;\n gap: 16px;\n\n button {\n width: 100%;\n }\n }\n\n @media (max-width: 767px) {\n margin-right: 0;\n .content {\n width: auto;\n }\n }\n\n ", " {\n min-width: ", ";\n min-height: calc(", " - ", ");\n\n .head {\n margin-bottom: ", ";\n }\n\n .content {\n margin-bottom: ", ";\n\n .input_group {\n margin-bottom: ", ";\n }\n }\n\n .btns {\n margin-top: ", ";\n gap: ", ";\n }\n }\n"], ["\n min-width: 344px;\n min-height: calc(460px - 24px);\n position: relative;\n\n .head {\n margin-bottom: 20px;\n\n .tittle {\n ", ";\n color: ", ";\n margin: 0;\n }\n }\n\n .content {\n margin-bottom: 60px;\n\n .input_group {\n position: relative;\n margin-bottom: 16px;\n }\n }\n\n .btns {\n margin-top: 16px;\n display: flex;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n justify-content: center;\n gap: 16px;\n\n button {\n width: 100%;\n }\n }\n\n @media (max-width: 767px) {\n margin-right: 0;\n .content {\n width: auto;\n }\n }\n\n ", " {\n min-width: ", ";\n min-height: calc(", " - ", ");\n\n .head {\n margin-bottom: ", ";\n }\n\n .content {\n margin-bottom: ", ";\n\n .input_group {\n margin-bottom: ", ";\n }\n }\n\n .btns {\n margin-top: ", ";\n gap: ", ";\n }\n }\n"])), typography_1.FH3, colors_1.BlackColor, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(344), (0, _4k_1.adaptiveValueCalc)(460), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(60), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(16));
|
|
60
60
|
// Component
|
|
61
61
|
var CreateGalleryForm = function (_a) {
|
|
62
62
|
var setAddGallery = _a.setAddGallery, title = _a.title, inputPlaceHolderText = _a.inputPlaceHolderText,
|
|
@@ -85,14 +85,14 @@ var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
|
85
85
|
var store_1 = require("@/modules/gallery/store");
|
|
86
86
|
var ui_1 = require("@/store/ui");
|
|
87
87
|
var useEditGallery_1 = __importDefault(require("@/api/server-galleries/mutations/useEditGallery"));
|
|
88
|
-
var
|
|
88
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
89
89
|
var colors_1 = require("@/styles/colors");
|
|
90
90
|
var typography_1 = require("@/styles/typography");
|
|
91
91
|
var MainButton_1 = __importDefault(require("@/system/Buttons/MainButton"));
|
|
92
92
|
var Forms_1 = require("@/system/Forms");
|
|
93
93
|
var Messages_1 = __importDefault(require("@/system/Forms/Messages"));
|
|
94
94
|
// Styles
|
|
95
|
-
var StyledCreateForm = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n min-width: 344px;\n min-height: calc(460px - 24px);\n position: relative;\n\n .head {\n margin-bottom: 20px;\n\n .tittle {\n ", ";\n color: ", ";\n margin: 0;\n }\n }\n\n .content {\n margin-bottom: 60px;\n\n .input_group {\n position: relative;\n margin-bottom: 16px;\n }\n }\n\n .btns {\n margin-top: 16px;\n display: flex;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n gap: 16px;\n\n .add {\n width: 100%;\n\n & button {\n font-size: 15px;\n font-weight: 500;\n line-height: 1.47;\n\n @media (max-width: 767px) {\n font-size: 14px;\n line-height: 1.43;\n }\n }\n }\n\n .cancel {\n width: 100%;\n }\n\n & button {\n width: 100%;\n padding: 9px 0;\n }\n }\n\n @media (max-width: 767px) {\n margin-right: 0;\n .content {\n width: auto;\n }\n\n .btns {\n position: static;\n justify-content: center;\n }\n\n .add,\n .cancel {\n max-width: 140px;\n }\n }\n\n ", " {\n min-width: ", ";\n min-height: calc(", " - ", ");\n\n .head {\n margin-bottom: ", ";\n }\n\n .content {\n margin-bottom: ", ";\n\n .input_group {\n margin-bottom: ", ";\n }\n }\n\n .btns {\n margin-top: ", ";\n gap: ", ";\n\n .add {\n & button {\n font-size: ", ";\n }\n }\n\n & button {\n padding: ", " 0;\n }\n }\n }\n"], ["\n min-width: 344px;\n min-height: calc(460px - 24px);\n position: relative;\n\n .head {\n margin-bottom: 20px;\n\n .tittle {\n ", ";\n color: ", ";\n margin: 0;\n }\n }\n\n .content {\n margin-bottom: 60px;\n\n .input_group {\n position: relative;\n margin-bottom: 16px;\n }\n }\n\n .btns {\n margin-top: 16px;\n display: flex;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n gap: 16px;\n\n .add {\n width: 100%;\n\n & button {\n font-size: 15px;\n font-weight: 500;\n line-height: 1.47;\n\n @media (max-width: 767px) {\n font-size: 14px;\n line-height: 1.43;\n }\n }\n }\n\n .cancel {\n width: 100%;\n }\n\n & button {\n width: 100%;\n padding: 9px 0;\n }\n }\n\n @media (max-width: 767px) {\n margin-right: 0;\n .content {\n width: auto;\n }\n\n .btns {\n position: static;\n justify-content: center;\n }\n\n .add,\n .cancel {\n max-width: 140px;\n }\n }\n\n ", " {\n min-width: ", ";\n min-height: calc(", " - ", ");\n\n .head {\n margin-bottom: ", ";\n }\n\n .content {\n margin-bottom: ", ";\n\n .input_group {\n margin-bottom: ", ";\n }\n }\n\n .btns {\n margin-top: ", ";\n gap: ", ";\n\n .add {\n & button {\n font-size: ", ";\n }\n }\n\n & button {\n padding: ", " 0;\n }\n }\n }\n"])), typography_1.FH3, colors_1.BlackColor,
|
|
95
|
+
var StyledCreateForm = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n min-width: 344px;\n min-height: calc(460px - 24px);\n position: relative;\n\n .head {\n margin-bottom: 20px;\n\n .tittle {\n ", ";\n color: ", ";\n margin: 0;\n }\n }\n\n .content {\n margin-bottom: 60px;\n\n .input_group {\n position: relative;\n margin-bottom: 16px;\n }\n }\n\n .btns {\n margin-top: 16px;\n display: flex;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n gap: 16px;\n\n .add {\n width: 100%;\n\n & button {\n font-size: 15px;\n font-weight: 500;\n line-height: 1.47;\n\n @media (max-width: 767px) {\n font-size: 14px;\n line-height: 1.43;\n }\n }\n }\n\n .cancel {\n width: 100%;\n }\n\n & button {\n width: 100%;\n padding: 9px 0;\n }\n }\n\n @media (max-width: 767px) {\n margin-right: 0;\n .content {\n width: auto;\n }\n\n .btns {\n position: static;\n justify-content: center;\n }\n\n .add,\n .cancel {\n max-width: 140px;\n }\n }\n\n ", " {\n min-width: ", ";\n min-height: calc(", " - ", ");\n\n .head {\n margin-bottom: ", ";\n }\n\n .content {\n margin-bottom: ", ";\n\n .input_group {\n margin-bottom: ", ";\n }\n }\n\n .btns {\n margin-top: ", ";\n gap: ", ";\n\n .add {\n & button {\n font-size: ", ";\n }\n }\n\n & button {\n padding: ", " 0;\n }\n }\n }\n"], ["\n min-width: 344px;\n min-height: calc(460px - 24px);\n position: relative;\n\n .head {\n margin-bottom: 20px;\n\n .tittle {\n ", ";\n color: ", ";\n margin: 0;\n }\n }\n\n .content {\n margin-bottom: 60px;\n\n .input_group {\n position: relative;\n margin-bottom: 16px;\n }\n }\n\n .btns {\n margin-top: 16px;\n display: flex;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n gap: 16px;\n\n .add {\n width: 100%;\n\n & button {\n font-size: 15px;\n font-weight: 500;\n line-height: 1.47;\n\n @media (max-width: 767px) {\n font-size: 14px;\n line-height: 1.43;\n }\n }\n }\n\n .cancel {\n width: 100%;\n }\n\n & button {\n width: 100%;\n padding: 9px 0;\n }\n }\n\n @media (max-width: 767px) {\n margin-right: 0;\n .content {\n width: auto;\n }\n\n .btns {\n position: static;\n justify-content: center;\n }\n\n .add,\n .cancel {\n max-width: 140px;\n }\n }\n\n ", " {\n min-width: ", ";\n min-height: calc(", " - ", ");\n\n .head {\n margin-bottom: ", ";\n }\n\n .content {\n margin-bottom: ", ";\n\n .input_group {\n margin-bottom: ", ";\n }\n }\n\n .btns {\n margin-top: ", ";\n gap: ", ";\n\n .add {\n & button {\n font-size: ", ";\n }\n }\n\n & button {\n padding: ", " 0;\n }\n }\n }\n"])), typography_1.FH3, colors_1.BlackColor, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(344), (0, _4k_1.adaptiveValueCalc)(460), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(60), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(9));
|
|
96
96
|
// Component
|
|
97
97
|
var EditGalleryForm = function (_a) {
|
|
98
98
|
var title = _a.title, inputPlaceHolderText = _a.inputPlaceHolderText, galleryId = _a.galleryId, name = _a.name, description = _a.description;
|
|
@@ -37,7 +37,7 @@ var react_virtuoso_1 = require("react-virtuoso");
|
|
|
37
37
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
38
38
|
var ScreenWidth_1 = require("@ludo.ninja/ui/build/styles/ScreenWidth");
|
|
39
39
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
40
|
-
var
|
|
40
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
41
41
|
var colors_1 = require("@/styles/colors");
|
|
42
42
|
var typography_1 = require("@/styles/typography");
|
|
43
43
|
var CardImage_1 = __importDefault(require("@/system/Cards/CardMedia/CardImage"));
|
|
@@ -47,7 +47,7 @@ var screen_1 = require("@/utils/screen");
|
|
|
47
47
|
var CollectionCreationEntity_1 = __importDefault(require("@/dto/Collection/CollectionCreationEntity"));
|
|
48
48
|
// import DeleteIcon from '@/public/gallery/delete.svg';
|
|
49
49
|
// Styles
|
|
50
|
-
var StyledItemsPreview = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: 40px;\n\n .head {\n margin-bottom: 20px;\n\n .tittle {\n ", ";\n color: ", ";\n margin: 0;\n }\n }\n\n .content {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 8px;\n max-height: 302px;\n min-width: 168px;\n overflow-x: auto;\n }\n\n .content-item {\n position: relative;\n width: 80px;\n height: 80px;\n cursor: pointer;\n transition: transform 0.2s;\n transform: scale(1);\n will-change: transform;\n\n > img,\n video {\n border-radius: 6px;\n }\n\n .content-item-gallery-pic {\n border-radius: 6px;\n width: 100%;\n height: 100%;\n }\n\n .content-item-gallery-deleteIcon {\n position: absolute;\n right: 4px;\n bottom: 4px;\n transition: transform 0.2s;\n transform: scale(1);\n\n :hover {\n transform: scale(1.15);\n transition: transform 0.2s;\n }\n }\n\n &:hover {\n .content-item-gallery-deleteIcon {\n transform: scale(1.15);\n transition: transform 0.2s;\n }\n }\n }\n\n @media (max-width: 767px) {\n margin-right: 0;\n margin-bottom: 32px;\n\n .content-item {\n width: 68px;\n height: 68px;\n }\n\n .content {\n height: 144px;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n }\n\n ", " {\n margin-right: ", ";\n\n .head {\n margin-bottom: ", ";\n }\n\n .content {\n gap: ", ";\n max-height: ", ";\n min-width: ", ";\n }\n\n .content-item {\n width: ", ";\n height: ", ";\n\n > img,\n video {\n border-radius: ", ";\n }\n\n .content-item-gallery-pic {\n border-radius: ", ";\n }\n\n .content-item-gallery-deleteIcon {\n right: ", ";\n bottom: ", ";\n width: ", ";\n height: ", ";\n }\n }\n }\n"], ["\n margin-right: 40px;\n\n .head {\n margin-bottom: 20px;\n\n .tittle {\n ", ";\n color: ", ";\n margin: 0;\n }\n }\n\n .content {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 8px;\n max-height: 302px;\n min-width: 168px;\n overflow-x: auto;\n }\n\n .content-item {\n position: relative;\n width: 80px;\n height: 80px;\n cursor: pointer;\n transition: transform 0.2s;\n transform: scale(1);\n will-change: transform;\n\n > img,\n video {\n border-radius: 6px;\n }\n\n .content-item-gallery-pic {\n border-radius: 6px;\n width: 100%;\n height: 100%;\n }\n\n .content-item-gallery-deleteIcon {\n position: absolute;\n right: 4px;\n bottom: 4px;\n transition: transform 0.2s;\n transform: scale(1);\n\n :hover {\n transform: scale(1.15);\n transition: transform 0.2s;\n }\n }\n\n &:hover {\n .content-item-gallery-deleteIcon {\n transform: scale(1.15);\n transition: transform 0.2s;\n }\n }\n }\n\n @media (max-width: 767px) {\n margin-right: 0;\n margin-bottom: 32px;\n\n .content-item {\n width: 68px;\n height: 68px;\n }\n\n .content {\n height: 144px;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n }\n\n ", " {\n margin-right: ", ";\n\n .head {\n margin-bottom: ", ";\n }\n\n .content {\n gap: ", ";\n max-height: ", ";\n min-width: ", ";\n }\n\n .content-item {\n width: ", ";\n height: ", ";\n\n > img,\n video {\n border-radius: ", ";\n }\n\n .content-item-gallery-pic {\n border-radius: ", ";\n }\n\n .content-item-gallery-deleteIcon {\n right: ", ";\n bottom: ", ";\n width: ", ";\n height: ", ";\n }\n }\n }\n"])), typography_1.FH3, colors_1.BlackColor,
|
|
50
|
+
var StyledItemsPreview = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: 40px;\n\n .head {\n margin-bottom: 20px;\n\n .tittle {\n ", ";\n color: ", ";\n margin: 0;\n }\n }\n\n .content {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 8px;\n max-height: 302px;\n min-width: 168px;\n overflow-x: auto;\n }\n\n .content-item {\n position: relative;\n width: 80px;\n height: 80px;\n cursor: pointer;\n transition: transform 0.2s;\n transform: scale(1);\n will-change: transform;\n\n > img,\n video {\n border-radius: 6px;\n }\n\n .content-item-gallery-pic {\n border-radius: 6px;\n width: 100%;\n height: 100%;\n }\n\n .content-item-gallery-deleteIcon {\n position: absolute;\n right: 4px;\n bottom: 4px;\n transition: transform 0.2s;\n transform: scale(1);\n\n :hover {\n transform: scale(1.15);\n transition: transform 0.2s;\n }\n }\n\n &:hover {\n .content-item-gallery-deleteIcon {\n transform: scale(1.15);\n transition: transform 0.2s;\n }\n }\n }\n\n @media (max-width: 767px) {\n margin-right: 0;\n margin-bottom: 32px;\n\n .content-item {\n width: 68px;\n height: 68px;\n }\n\n .content {\n height: 144px;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n }\n\n ", " {\n margin-right: ", ";\n\n .head {\n margin-bottom: ", ";\n }\n\n .content {\n gap: ", ";\n max-height: ", ";\n min-width: ", ";\n }\n\n .content-item {\n width: ", ";\n height: ", ";\n\n > img,\n video {\n border-radius: ", ";\n }\n\n .content-item-gallery-pic {\n border-radius: ", ";\n }\n\n .content-item-gallery-deleteIcon {\n right: ", ";\n bottom: ", ";\n width: ", ";\n height: ", ";\n }\n }\n }\n"], ["\n margin-right: 40px;\n\n .head {\n margin-bottom: 20px;\n\n .tittle {\n ", ";\n color: ", ";\n margin: 0;\n }\n }\n\n .content {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 8px;\n max-height: 302px;\n min-width: 168px;\n overflow-x: auto;\n }\n\n .content-item {\n position: relative;\n width: 80px;\n height: 80px;\n cursor: pointer;\n transition: transform 0.2s;\n transform: scale(1);\n will-change: transform;\n\n > img,\n video {\n border-radius: 6px;\n }\n\n .content-item-gallery-pic {\n border-radius: 6px;\n width: 100%;\n height: 100%;\n }\n\n .content-item-gallery-deleteIcon {\n position: absolute;\n right: 4px;\n bottom: 4px;\n transition: transform 0.2s;\n transform: scale(1);\n\n :hover {\n transform: scale(1.15);\n transition: transform 0.2s;\n }\n }\n\n &:hover {\n .content-item-gallery-deleteIcon {\n transform: scale(1.15);\n transition: transform 0.2s;\n }\n }\n }\n\n @media (max-width: 767px) {\n margin-right: 0;\n margin-bottom: 32px;\n\n .content-item {\n width: 68px;\n height: 68px;\n }\n\n .content {\n height: 144px;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n }\n\n ", " {\n margin-right: ", ";\n\n .head {\n margin-bottom: ", ";\n }\n\n .content {\n gap: ", ";\n max-height: ", ";\n min-width: ", ";\n }\n\n .content-item {\n width: ", ";\n height: ", ";\n\n > img,\n video {\n border-radius: ", ";\n }\n\n .content-item-gallery-pic {\n border-radius: ", ";\n }\n\n .content-item-gallery-deleteIcon {\n right: ", ";\n bottom: ", ";\n width: ", ";\n height: ", ";\n }\n }\n }\n"])), typography_1.FH3, colors_1.BlackColor, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(40), (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(302), (0, _4k_1.adaptiveValueCalc)(168), (0, _4k_1.adaptiveValueCalc)(80), (0, _4k_1.adaptiveValueCalc)(80), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(24));
|
|
51
51
|
var SCardsRow = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
52
52
|
// Component
|
|
53
53
|
var useVirtuosoData = function (_a) {
|
|
@@ -33,10 +33,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
33
33
|
var react_1 = __importStar(require("react"));
|
|
34
34
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
35
35
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
36
|
-
var
|
|
37
|
-
var colors_1 = require("@/styles/colors");
|
|
36
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
38
37
|
// Styles
|
|
39
|
-
var StyledCardCheckBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n top: 16px;\n right: 16px;\n z-index: 1;\n\n .cardCheckboxLabel {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n .cardCheckboxInput {\n margin: 0;\n visibility: hidden;\n\n &:checked + span {\n border: none;\n }\n\n &:checked + span:after {\n opacity: 1;\n }\n }\n\n .cardCustomCheckbox {\n cursor: pointer;\n width: 32px;\n height: 32px;\n border: 2px solid ", ";\n background-color: #12183a33;\n border-radius: 50%;\n display: inline-block;\n position: relative;\n\n &::after {\n content: '';\n display: block;\n background-image: url('/forms/checkbox/checked.svg');\n background-size: cover;\n background-repeat: no-repeat;\n width: 32px;\n height: 32px;\n opacity: 0;\n transition: opacity 0.2s;\n }\n\n @media (max-width: 767px) {\n width: 24px;\n height: 24px;\n\n &::after {\n width: 24px;\n height: 24px;\n }\n }\n }\n }\n\n ", " {\n top: ", ";\n right: ", ";\n .cardCheckboxLabel {\n .cardCustomCheckbox {\n width: ", ";\n height: ", ";\n border-width: ", ";\n &::after {\n width: ", ";\n height: ", ";\n }\n }\n }\n }\n"], ["\n position: absolute;\n top: 16px;\n right: 16px;\n z-index: 1;\n\n .cardCheckboxLabel {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n .cardCheckboxInput {\n margin: 0;\n visibility: hidden;\n\n &:checked + span {\n border: none;\n }\n\n &:checked + span:after {\n opacity: 1;\n }\n }\n\n .cardCustomCheckbox {\n cursor: pointer;\n width: 32px;\n height: 32px;\n border: 2px solid ", ";\n background-color: #12183a33;\n border-radius: 50%;\n display: inline-block;\n position: relative;\n\n &::after {\n content: '';\n display: block;\n background-image: url('/forms/checkbox/checked.svg');\n background-size: cover;\n background-repeat: no-repeat;\n width: 32px;\n height: 32px;\n opacity: 0;\n transition: opacity 0.2s;\n }\n\n @media (max-width: 767px) {\n width: 24px;\n height: 24px;\n\n &::after {\n width: 24px;\n height: 24px;\n }\n }\n }\n }\n\n ", " {\n top: ", ";\n right: ", ";\n .cardCheckboxLabel {\n .cardCustomCheckbox {\n width: ", ";\n height: ", ";\n border-width: ", ";\n &::after {\n width: ", ";\n height: ", ";\n }\n }\n }\n }\n"])),
|
|
38
|
+
var StyledCardCheckBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n top: 16px;\n right: 16px;\n z-index: 1;\n\n .cardCheckboxLabel {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n .cardCheckboxInput {\n margin: 0;\n visibility: hidden;\n\n &:checked + span {\n border: none;\n }\n\n &:checked + span:after {\n opacity: 1;\n }\n }\n\n .cardCustomCheckbox {\n cursor: pointer;\n width: 32px;\n height: 32px;\n border: 2px solid ", ";\n background-color: #12183a33;\n border-radius: 50%;\n display: inline-block;\n position: relative;\n\n &::after {\n content: '';\n display: block;\n background-image: url('/forms/checkbox/checked.svg');\n background-size: cover;\n background-repeat: no-repeat;\n width: 32px;\n height: 32px;\n opacity: 0;\n transition: opacity 0.2s;\n }\n\n @media (max-width: 767px) {\n width: 24px;\n height: 24px;\n\n &::after {\n width: 24px;\n height: 24px;\n }\n }\n }\n }\n\n ", " {\n top: ", ";\n right: ", ";\n .cardCheckboxLabel {\n .cardCustomCheckbox {\n width: ", ";\n height: ", ";\n border-width: ", ";\n &::after {\n width: ", ";\n height: ", ";\n }\n }\n }\n }\n"], ["\n position: absolute;\n top: 16px;\n right: 16px;\n z-index: 1;\n\n .cardCheckboxLabel {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n .cardCheckboxInput {\n margin: 0;\n visibility: hidden;\n\n &:checked + span {\n border: none;\n }\n\n &:checked + span:after {\n opacity: 1;\n }\n }\n\n .cardCustomCheckbox {\n cursor: pointer;\n width: 32px;\n height: 32px;\n border: 2px solid ", ";\n background-color: #12183a33;\n border-radius: 50%;\n display: inline-block;\n position: relative;\n\n &::after {\n content: '';\n display: block;\n background-image: url('/forms/checkbox/checked.svg');\n background-size: cover;\n background-repeat: no-repeat;\n width: 32px;\n height: 32px;\n opacity: 0;\n transition: opacity 0.2s;\n }\n\n @media (max-width: 767px) {\n width: 24px;\n height: 24px;\n\n &::after {\n width: 24px;\n height: 24px;\n }\n }\n }\n }\n\n ", " {\n top: ", ";\n right: ", ";\n .cardCheckboxLabel {\n .cardCustomCheckbox {\n width: ", ";\n height: ", ";\n border-width: ", ";\n &::after {\n width: ", ";\n height: ", ";\n }\n }\n }\n }\n"])), styles_1.WhiteColor, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(2), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(32));
|
|
40
39
|
// Component
|
|
41
40
|
var CardCheckBox = function (_a) {
|
|
42
41
|
var isActiveCheckbox = _a.isActiveCheckbox, onChange = _a.onChange;
|
|
@@ -10,10 +10,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
var react_1 = __importDefault(require("react"));
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
13
|
-
var
|
|
14
|
-
var typography_1 = require("@/styles/typography");
|
|
13
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
15
14
|
// Styles
|
|
16
|
-
var StyledCardCategory = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 8px;\n\n .category {\n .label {\n ", ";\n display: inline-block;\n background: ", ";\n padding: 1px 5px;\n line-height: 1.35em;\n color: ", ";\n user-select: none;\n border-radius: 2px;\n text-transform: uppercase;\n }\n }\n\n @media (max-width: 1040px) {\n margin-top: 6px;\n }\n\n ", " {\n margin-top: ", ";\n\n .category {\n .label {\n padding: ", " ", ";\n border-radius: ", ";\n }\n }\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 8px;\n\n .category {\n .label {\n ", ";\n display: inline-block;\n background: ", ";\n padding: 1px 5px;\n line-height: 1.35em;\n color: ", ";\n user-select: none;\n border-radius: 2px;\n text-transform: uppercase;\n }\n }\n\n @media (max-width: 1040px) {\n margin-top: 6px;\n }\n\n ", " {\n margin-top: ", ";\n\n .category {\n .label {\n padding: ", " ", ";\n border-radius: ", ";\n }\n }\n }\n"])),
|
|
15
|
+
var StyledCardCategory = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 8px;\n\n .category {\n .label {\n ", ";\n display: inline-block;\n background: ", ";\n padding: 1px 5px;\n line-height: 1.35em;\n color: ", ";\n user-select: none;\n border-radius: 2px;\n text-transform: uppercase;\n }\n }\n\n @media (max-width: 1040px) {\n margin-top: 6px;\n }\n\n ", " {\n margin-top: ", ";\n\n .category {\n .label {\n padding: ", " ", ";\n border-radius: ", ";\n }\n }\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 8px;\n\n .category {\n .label {\n ", ";\n display: inline-block;\n background: ", ";\n padding: 1px 5px;\n line-height: 1.35em;\n color: ", ";\n user-select: none;\n border-radius: 2px;\n text-transform: uppercase;\n }\n }\n\n @media (max-width: 1040px) {\n margin-top: 6px;\n }\n\n ", " {\n margin-top: ", ";\n\n .category {\n .label {\n padding: ", " ", ";\n border-radius: ", ";\n }\n }\n }\n"])), styles_1.FH6, function (props) { return props.background; }, function (props) { return props.color; }, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(1), (0, _4k_1.adaptiveValueCalc)(5), (0, _4k_1.adaptiveValueCalc)(2));
|
|
17
16
|
// Component
|
|
18
17
|
var CardCategory = function (_a) {
|
|
19
18
|
var label = _a.label;
|
|
@@ -13,13 +13,11 @@ var type_1 = require("@ludo.ninja/ui/build/system/Alert/type");
|
|
|
13
13
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
14
14
|
var utils_1 = require("@ludo.ninja/utils");
|
|
15
15
|
var ui_1 = require("@/store/ui");
|
|
16
|
-
var
|
|
17
|
-
var colors_1 = require("@/styles/colors");
|
|
18
|
-
var typography_1 = require("@/styles/typography");
|
|
16
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
19
17
|
var vars_1 = require("@/fonts/vars");
|
|
20
18
|
var moreBtnVertical_svg_1 = __importDefault(require("@/public/creation/card/moreBtnVertical.svg"));
|
|
21
19
|
// Styles
|
|
22
|
-
exports.StyledCardShowMore = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .cardShowMore {\n position: relative;\n cursor: pointer;\n z-index: 100;\n\n &:before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 40px;\n height: 40px;\n z-index: -1;\n }\n\n @media (max-width: 1200px) {\n display: none;\n }\n\n &DropDown {\n font-family: ", ";\n display: none;\n position: absolute;\n background-color: white;\n top: 20px;\n left: -170px;\n width: 184px;\n box-shadow: 0px 0px 10px 5px rgba(33, 21, 95, 0.1);\n border-radius: 6px;\n padding: 8px;;\n\n &:before {\n content: '';\n display: block;\n position: absolute;\n top: -15px;\n height: 15px;\n width: 100%;\n }\n\n &Item {\n ", ";\n display: block;\n padding: 6px 0 6px 8px;\n color: #696f91;\n\n &:hover {\n border-radius: 4px;\n color: ", ";\n background-color: ", ";\n }\n }\n }\n\n &:hover > div {\n display: block;\n z-index: 100000;\n }\n ", " {\n &:before {\n width: ", ";\n height: ", ";\n }\n &DropDown {\n top: ", ";\n left:", ";\n width: ", ";\n box-shadow: 0px 0px ", " ", " rgba(33, 21, 95, 0.1);\n border-radius: ", ";\n padding: ", ";\n\n &:before {\n top: ", ";\n height: ", ";\n }\n\n &Item {\n padding: ", " 0 ", " ", ";\n &:hover {\n border-radius: ", ";\n }\n }\n }\n }\n }\n}\n"], ["\n .cardShowMore {\n position: relative;\n cursor: pointer;\n z-index: 100;\n\n &:before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 40px;\n height: 40px;\n z-index: -1;\n }\n\n @media (max-width: 1200px) {\n display: none;\n }\n\n &DropDown {\n font-family: ", ";\n display: none;\n position: absolute;\n background-color: white;\n top: 20px;\n left: -170px;\n width: 184px;\n box-shadow: 0px 0px 10px 5px rgba(33, 21, 95, 0.1);\n border-radius: 6px;\n padding: 8px;;\n\n &:before {\n content: '';\n display: block;\n position: absolute;\n top: -15px;\n height: 15px;\n width: 100%;\n }\n\n &Item {\n ", ";\n display: block;\n padding: 6px 0 6px 8px;\n color: #696f91;\n\n &:hover {\n border-radius: 4px;\n color: ", ";\n background-color: ", ";\n }\n }\n }\n\n &:hover > div {\n display: block;\n z-index: 100000;\n }\n ", " {\n &:before {\n width: ", ";\n height: ", ";\n }\n &DropDown {\n top: ", ";\n left:", ";\n width: ", ";\n box-shadow: 0px 0px ", " ", " rgba(33, 21, 95, 0.1);\n border-radius: ", ";\n padding: ", ";\n\n &:before {\n top: ", ";\n height: ", ";\n }\n\n &Item {\n padding: ", " 0 ", " ", ";\n &:hover {\n border-radius: ", ";\n }\n }\n }\n }\n }\n}\n"])), vars_1.dmsansFontVarCss.css,
|
|
20
|
+
exports.StyledCardShowMore = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .cardShowMore {\n position: relative;\n cursor: pointer;\n z-index: 100;\n\n &:before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 40px;\n height: 40px;\n z-index: -1;\n }\n\n @media (max-width: 1200px) {\n display: none;\n }\n\n &DropDown {\n font-family: ", ";\n display: none;\n position: absolute;\n background-color: white;\n top: 20px;\n left: -170px;\n width: 184px;\n box-shadow: 0px 0px 10px 5px rgba(33, 21, 95, 0.1);\n border-radius: 6px;\n padding: 8px;;\n\n &:before {\n content: '';\n display: block;\n position: absolute;\n top: -15px;\n height: 15px;\n width: 100%;\n }\n\n &Item {\n ", ";\n display: block;\n padding: 6px 0 6px 8px;\n color: #696f91;\n\n &:hover {\n border-radius: 4px;\n color: ", ";\n background-color: ", ";\n }\n }\n }\n\n &:hover > div {\n display: block;\n z-index: 100000;\n }\n ", " {\n &:before {\n width: ", ";\n height: ", ";\n }\n &DropDown {\n top: ", ";\n left:", ";\n width: ", ";\n box-shadow: 0px 0px ", " ", " rgba(33, 21, 95, 0.1);\n border-radius: ", ";\n padding: ", ";\n\n &:before {\n top: ", ";\n height: ", ";\n }\n\n &Item {\n padding: ", " 0 ", " ", ";\n &:hover {\n border-radius: ", ";\n }\n }\n }\n }\n }\n}\n"], ["\n .cardShowMore {\n position: relative;\n cursor: pointer;\n z-index: 100;\n\n &:before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 40px;\n height: 40px;\n z-index: -1;\n }\n\n @media (max-width: 1200px) {\n display: none;\n }\n\n &DropDown {\n font-family: ", ";\n display: none;\n position: absolute;\n background-color: white;\n top: 20px;\n left: -170px;\n width: 184px;\n box-shadow: 0px 0px 10px 5px rgba(33, 21, 95, 0.1);\n border-radius: 6px;\n padding: 8px;;\n\n &:before {\n content: '';\n display: block;\n position: absolute;\n top: -15px;\n height: 15px;\n width: 100%;\n }\n\n &Item {\n ", ";\n display: block;\n padding: 6px 0 6px 8px;\n color: #696f91;\n\n &:hover {\n border-radius: 4px;\n color: ", ";\n background-color: ", ";\n }\n }\n }\n\n &:hover > div {\n display: block;\n z-index: 100000;\n }\n ", " {\n &:before {\n width: ", ";\n height: ", ";\n }\n &DropDown {\n top: ", ";\n left:", ";\n width: ", ";\n box-shadow: 0px 0px ", " ", " rgba(33, 21, 95, 0.1);\n border-radius: ", ";\n padding: ", ";\n\n &:before {\n top: ", ";\n height: ", ";\n }\n\n &Item {\n padding: ", " 0 ", " ", ";\n &:hover {\n border-radius: ", ";\n }\n }\n }\n }\n }\n}\n"])), vars_1.dmsansFontVarCss.css, styles_1.TextSmall, styles_1.BlackColor, styles_1.BackgroundColorLight, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(40), (0, _4k_1.adaptiveValueCalc)(40), (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(-170), (0, _4k_1.adaptiveValueCalc)(184), (0, _4k_1.adaptiveValueCalc)(10), (0, _4k_1.adaptiveValueCalc)(5), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(-15), (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(4));
|
|
23
21
|
// Component
|
|
24
22
|
var CardShowMore = function (_a) {
|
|
25
23
|
var itemId = _a.itemId, href = _a.href;
|
|
@@ -12,13 +12,11 @@ var router_1 = require("next/router");
|
|
|
12
12
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
13
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
14
14
|
var utils_1 = require("@ludo.ninja/utils");
|
|
15
|
-
var
|
|
16
|
-
var colors_1 = require("@/styles/colors");
|
|
17
|
-
var typography_1 = require("@/styles/typography");
|
|
15
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
18
16
|
var CardShowMore_1 = __importDefault(require("@/system/Cards/CardContent/CardShowMore"));
|
|
19
17
|
var vars_1 = require("@/fonts/vars");
|
|
20
18
|
// Styles
|
|
21
|
-
var StyledCardContent = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 12px 16px;\n min-height: 94px;\n flex-grow: 1;\n justify-content: end;\n\n .cardContent {\n display: flex;\n justify-content: space-between;\n\n .cardContentWrapper {\n .mainName {\n font-family: ", ";\n ", ";\n color: ", ";\n font-size: 13px;\n margin-bottom: 0;\n }\n\n .secondName {\n font-family: ", ";\n ", ";\n color: ", ";\n font-size: 15px;\n }\n }\n }\n\n .creatorName {\n ", ";\n color: ", ";\n line-height: 1.39em;\n }\n\n @media (max-width: 1040px) {\n height: auto;\n padding: 12px;\n }\n @media (max-width: 767px) {\n min-height: 84px;\n }\n\n ", " {\n padding: ", " ", ";\n min-height: ", ";\n\n .cardContent {\n .cardContentWrapper {\n .mainName {\n font-size: ", ";\n }\n\n .secondName {\n font-size: ", ";\n }\n }\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n padding: 12px 16px;\n min-height: 94px;\n flex-grow: 1;\n justify-content: end;\n\n .cardContent {\n display: flex;\n justify-content: space-between;\n\n .cardContentWrapper {\n .mainName {\n font-family: ", ";\n ", ";\n color: ", ";\n font-size: 13px;\n margin-bottom: 0;\n }\n\n .secondName {\n font-family: ", ";\n ", ";\n color: ", ";\n font-size: 15px;\n }\n }\n }\n\n .creatorName {\n ", ";\n color: ", ";\n line-height: 1.39em;\n }\n\n @media (max-width: 1040px) {\n height: auto;\n padding: 12px;\n }\n @media (max-width: 767px) {\n min-height: 84px;\n }\n\n ", " {\n padding: ", " ", ";\n min-height: ", ";\n\n .cardContent {\n .cardContentWrapper {\n .mainName {\n font-size: ", ";\n }\n\n .secondName {\n font-size: ", ";\n }\n }\n }\n }\n"])), vars_1.dmsansFontVarCss.css,
|
|
19
|
+
var StyledCardContent = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 12px 16px;\n min-height: 94px;\n flex-grow: 1;\n justify-content: end;\n\n .cardContent {\n display: flex;\n justify-content: space-between;\n\n .cardContentWrapper {\n .mainName {\n font-family: ", ";\n ", ";\n color: ", ";\n font-size: 13px;\n margin-bottom: 0;\n }\n\n .secondName {\n font-family: ", ";\n ", ";\n color: ", ";\n font-size: 15px;\n }\n }\n }\n\n .creatorName {\n ", ";\n color: ", ";\n line-height: 1.39em;\n }\n\n @media (max-width: 1040px) {\n height: auto;\n padding: 12px;\n }\n @media (max-width: 767px) {\n min-height: 84px;\n }\n\n ", " {\n padding: ", " ", ";\n min-height: ", ";\n\n .cardContent {\n .cardContentWrapper {\n .mainName {\n font-size: ", ";\n }\n\n .secondName {\n font-size: ", ";\n }\n }\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n padding: 12px 16px;\n min-height: 94px;\n flex-grow: 1;\n justify-content: end;\n\n .cardContent {\n display: flex;\n justify-content: space-between;\n\n .cardContentWrapper {\n .mainName {\n font-family: ", ";\n ", ";\n color: ", ";\n font-size: 13px;\n margin-bottom: 0;\n }\n\n .secondName {\n font-family: ", ";\n ", ";\n color: ", ";\n font-size: 15px;\n }\n }\n }\n\n .creatorName {\n ", ";\n color: ", ";\n line-height: 1.39em;\n }\n\n @media (max-width: 1040px) {\n height: auto;\n padding: 12px;\n }\n @media (max-width: 767px) {\n min-height: 84px;\n }\n\n ", " {\n padding: ", " ", ";\n min-height: ", ";\n\n .cardContent {\n .cardContentWrapper {\n .mainName {\n font-size: ", ";\n }\n\n .secondName {\n font-size: ", ";\n }\n }\n }\n }\n"])), vars_1.dmsansFontVarCss.css, styles_1.TextSmall, styles_1.TextGrayColor, vars_1.poppinsFontVarCss.css, styles_1.FH5, styles_1.BlackColor, styles_1.TextSmall, styles_1.TextGrayColor, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(94), (0, _4k_1.adaptiveValueCalc)(13), (0, _4k_1.adaptiveValueCalc)(15));
|
|
22
20
|
// Component
|
|
23
21
|
var CardContent = function (_a) {
|
|
24
22
|
var _b;
|
|
@@ -43,7 +43,7 @@ var react_1 = __importDefault(require("react"));
|
|
|
43
43
|
var router_1 = require("next/router");
|
|
44
44
|
var store_1 = require("@/modules/user/store");
|
|
45
45
|
var ui_1 = require("@/store/ui");
|
|
46
|
-
var
|
|
46
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
47
47
|
var addCreationToFavoriteList_1 = __importDefault(require("@/components/favoriteList/add/addCreationToFavoriteList"));
|
|
48
48
|
var CardRank_1 = __importDefault(require("@/system/Cards/CardRank"));
|
|
49
49
|
var Headicons_1 = __importDefault(require("@/system/Cards/Styles/Headicons"));
|
|
@@ -62,7 +62,7 @@ var CardHeadIcons = function (_a) {
|
|
|
62
62
|
var isSignedIn = (0, store_1.useUserStore)(function (state) { return state.isSignedIn; });
|
|
63
63
|
var isLicked = isIconLiked && isSignedIn;
|
|
64
64
|
var windowWidth = (0, screen_1.getWindowDimensions)().windowWidth;
|
|
65
|
-
var isMobile = windowWidth <=
|
|
65
|
+
var isMobile = windowWidth <= styles_1.ScreenWidth.TABLET || windowWidth <= styles_1.ScreenWidth.DESKTOP;
|
|
66
66
|
var router = (0, router_1.useRouter)();
|
|
67
67
|
var isGallery = router.pathname.includes('gallery');
|
|
68
68
|
var handleClick = function (e, type) { return __awaiter(void 0, void 0, void 0, function () {
|
|
@@ -11,13 +11,13 @@ var react_1 = __importDefault(require("react"));
|
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
13
13
|
var utils_1 = require("@ludo.ninja/utils");
|
|
14
|
-
var
|
|
14
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
15
15
|
var colors_1 = require("@/styles/colors");
|
|
16
16
|
var _system_1 = require("@system");
|
|
17
17
|
// Styles
|
|
18
|
-
var StyledCardRank = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 64px;\n height: 24px;\n background-color: ", ";\n border-radius: 4px;\n padding: 5px;\n\n .rankText {\n color: ", ";\n margin-right: 4px;\n font-size: 1.3em;\n font-weight: 600;\n }\n\n .smallText {\n font-size: 1.2em;\n letter-spacing: -0.5px;\n }\n\n ", " {\n width: 43px;\n height: 18px;\n }\n\n ", " {\n width: ", ";\n height: ", ";\n border-radius: ", ";\n padding: ", ";\n\n .rankText {\n font-size: ", ";\n margin-right: ", ";\n }\n\n .smallText {\n font-size: ", ";\n letter-spacing: ", ";\n }\n }\n"], ["\n width: 64px;\n height: 24px;\n background-color: ", ";\n border-radius: 4px;\n padding: 5px;\n\n .rankText {\n color: ", ";\n margin-right: 4px;\n font-size: 1.3em;\n font-weight: 600;\n }\n\n .smallText {\n font-size: 1.2em;\n letter-spacing: -0.5px;\n }\n\n ", " {\n width: 43px;\n height: 18px;\n }\n\n ", " {\n width: ", ";\n height: ", ";\n border-radius: ", ";\n padding: ", ";\n\n .rankText {\n font-size: ", ";\n margin-right: ", ";\n }\n\n .smallText {\n font-size: ", ";\n letter-spacing: ", ";\n }\n }\n"])), colors_1.WhiteColor, colors_1.BlackColor,
|
|
19
|
-
var SBox = (0, styled_components_1.default)(_system_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 10px;\n width: 32px;\n background: ", ";\n\n ", " {\n height: ", ";\n width: ", ";\n }\n"], ["\n height: 10px;\n width: 32px;\n background: ", ";\n\n ", " {\n height: ", ";\n width: ", ";\n }\n"])), colors_1.InactiveButtonColor,
|
|
20
|
-
var RangeValue = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n background: ", ";\n height: 10px;\n width: ", ";\n border-radius: 2px 0 0 2px;\n\n ", " {\n height: ", ";\n border-radius: ", " 0 0 ", ";\n }\n"], ["\n display: block;\n background: ", ";\n height: 10px;\n width: ", ";\n border-radius: 2px 0 0 2px;\n\n ", " {\n height: ", ";\n border-radius: ", " 0 0 ", ";\n }\n"])), function (props) { return props.rankValue && (0, utils_1.getRankColor)(props.rankValue); }, function (props) { return "".concat(props.rankValue, "%"); },
|
|
18
|
+
var StyledCardRank = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 64px;\n height: 24px;\n background-color: ", ";\n border-radius: 4px;\n padding: 5px;\n\n .rankText {\n color: ", ";\n margin-right: 4px;\n font-size: 1.3em;\n font-weight: 600;\n }\n\n .smallText {\n font-size: 1.2em;\n letter-spacing: -0.5px;\n }\n\n ", " {\n width: 43px;\n height: 18px;\n }\n\n ", " {\n width: ", ";\n height: ", ";\n border-radius: ", ";\n padding: ", ";\n\n .rankText {\n font-size: ", ";\n margin-right: ", ";\n }\n\n .smallText {\n font-size: ", ";\n letter-spacing: ", ";\n }\n }\n"], ["\n width: 64px;\n height: 24px;\n background-color: ", ";\n border-radius: 4px;\n padding: 5px;\n\n .rankText {\n color: ", ";\n margin-right: 4px;\n font-size: 1.3em;\n font-weight: 600;\n }\n\n .smallText {\n font-size: 1.2em;\n letter-spacing: -0.5px;\n }\n\n ", " {\n width: 43px;\n height: 18px;\n }\n\n ", " {\n width: ", ";\n height: ", ";\n border-radius: ", ";\n padding: ", ";\n\n .rankText {\n font-size: ", ";\n margin-right: ", ";\n }\n\n .smallText {\n font-size: ", ";\n letter-spacing: ", ";\n }\n }\n"])), colors_1.WhiteColor, colors_1.BlackColor, styles_1.mediaQuery.phone, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(64), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(5), (0, _4k_1.adaptiveValueCalc)(13), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(-0.5));
|
|
19
|
+
var SBox = (0, styled_components_1.default)(_system_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 10px;\n width: 32px;\n background: ", ";\n\n ", " {\n height: ", ";\n width: ", ";\n }\n"], ["\n height: 10px;\n width: 32px;\n background: ", ";\n\n ", " {\n height: ", ";\n width: ", ";\n }\n"])), colors_1.InactiveButtonColor, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(10), (0, _4k_1.adaptiveValueCalc)(32));
|
|
20
|
+
var RangeValue = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n background: ", ";\n height: 10px;\n width: ", ";\n border-radius: 2px 0 0 2px;\n\n ", " {\n height: ", ";\n border-radius: ", " 0 0 ", ";\n }\n"], ["\n display: block;\n background: ", ";\n height: 10px;\n width: ", ";\n border-radius: 2px 0 0 2px;\n\n ", " {\n height: ", ";\n border-radius: ", " 0 0 ", ";\n }\n"])), function (props) { return props.rankValue && (0, utils_1.getRankColor)(props.rankValue); }, function (props) { return "".concat(props.rankValue, "%"); }, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(10), (0, _4k_1.adaptiveValueCalc)(2), (0, _4k_1.adaptiveValueCalc)(2));
|
|
21
21
|
// Component
|
|
22
22
|
var CardRank = function (_a) {
|
|
23
23
|
var rank = _a.rank;
|
|
@@ -32,7 +32,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
32
32
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
33
33
|
var react_1 = __importStar(require("react"));
|
|
34
34
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
35
|
-
var
|
|
35
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
36
36
|
var profile_1 = require("@/components/profile");
|
|
37
37
|
var MainButton_1 = __importDefault(require("@/system/Buttons/MainButton"));
|
|
38
38
|
var env_1 = require("@/utils/env");
|
|
@@ -50,7 +50,7 @@ var StyledCardsGrid = styled_components_1.default.div(templateObject_1 || (templ
|
|
|
50
50
|
else {
|
|
51
51
|
return '1fr 1fr 1fr 1fr';
|
|
52
52
|
}
|
|
53
|
-
}, function (props) { return (props.isTwoColumnLayout ? '74.5%' : '100%'); },
|
|
53
|
+
}, function (props) { return (props.isTwoColumnLayout ? '74.5%' : '100%'); }, styles_1.mediaQuery.minWidthTablet, styles_1.mediaQuery.minWidthDesktop, function (props) {
|
|
54
54
|
if (props.isEmptyGallery || props.isForVirtualize) {
|
|
55
55
|
return '1fr';
|
|
56
56
|
}
|
|
@@ -11,10 +11,7 @@ var react_1 = __importDefault(require("react"));
|
|
|
11
11
|
var link_1 = __importDefault(require("next/link"));
|
|
12
12
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
13
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
14
|
-
var
|
|
15
|
-
var colors_1 = require("@/styles/colors");
|
|
16
|
-
var boxShadow_1 = __importDefault(require("@/styles/mixins/boxShadow"));
|
|
17
|
-
var boxTransform_1 = __importDefault(require("@/styles/mixins/boxTransform"));
|
|
14
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
18
15
|
var CardContent_1 = __importDefault(require("@/system/Cards/CardContent"));
|
|
19
16
|
var CardLikes_1 = __importDefault(require("@/system/Cards/CardContent/CardLikes"));
|
|
20
17
|
var MultiHead_1 = __importDefault(require("@/system/Cards/Styles/MultiHead"));
|
|
@@ -23,7 +20,7 @@ var defaultImage_svg_1 = __importDefault(require("@/public/gallery/defaultImage.
|
|
|
23
20
|
var CardCategory_1 = __importDefault(require("../CardContent/CardCategory"));
|
|
24
21
|
var CardImage_1 = __importDefault(require("../CardMedia/CardImage"));
|
|
25
22
|
// Styles
|
|
26
|
-
var StyledMultiCard = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n background-color: ", ";\n border-radius: 6px;\n ", ";\n ", ";\n @media (max-width: 1200px) {\n height: max-content;\n }\n\n .media {\n width: 100%;\n height: 100%;\n aspect-ratio: 1 / 1;\n\n & svg {\n width: 100%;\n height: 100%;\n }\n\n & img {\n border-radius: 3px;\n }\n\n & span {\n display: none;\n }\n\n & video {\n border-radius: 3px;\n }\n }\n\n .media.digital {\n position: relative;\n\n & svg {\n position: absolute;\n width: 20px;\n height: 20px;\n bottom: 0;\n right: 0;\n\n & circle,\n & path {\n transform: scale(0.5);\n }\n }\n }\n\n ", " {\n border-radius: ", ";\n .media {\n & img {\n border-radius: ", ";\n }\n & video {\n border-radius: ", ";\n }\n }\n\n .media.digital {\n & svg {\n width: ", ";\n height: ", ";\n }\n }\n }\n"], ["\n position: relative;\n background-color: ", ";\n border-radius: 6px;\n ", ";\n ", ";\n @media (max-width: 1200px) {\n height: max-content;\n }\n\n .media {\n width: 100%;\n height: 100%;\n aspect-ratio: 1 / 1;\n\n & svg {\n width: 100%;\n height: 100%;\n }\n\n & img {\n border-radius: 3px;\n }\n\n & span {\n display: none;\n }\n\n & video {\n border-radius: 3px;\n }\n }\n\n .media.digital {\n position: relative;\n\n & svg {\n position: absolute;\n width: 20px;\n height: 20px;\n bottom: 0;\n right: 0;\n\n & circle,\n & path {\n transform: scale(0.5);\n }\n }\n }\n\n ", " {\n border-radius: ", ";\n .media {\n & img {\n border-radius: ", ";\n }\n & video {\n border-radius: ", ";\n }\n }\n\n .media.digital {\n & svg {\n width: ", ";\n height: ", ";\n }\n }\n }\n"])),
|
|
23
|
+
var StyledMultiCard = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n background-color: ", ";\n border-radius: 6px;\n ", ";\n ", ";\n @media (max-width: 1200px) {\n height: max-content;\n }\n\n .media {\n width: 100%;\n height: 100%;\n aspect-ratio: 1 / 1;\n\n & svg {\n width: 100%;\n height: 100%;\n }\n\n & img {\n border-radius: 3px;\n }\n\n & span {\n display: none;\n }\n\n & video {\n border-radius: 3px;\n }\n }\n\n .media.digital {\n position: relative;\n\n & svg {\n position: absolute;\n width: 20px;\n height: 20px;\n bottom: 0;\n right: 0;\n\n & circle,\n & path {\n transform: scale(0.5);\n }\n }\n }\n\n ", " {\n border-radius: ", ";\n .media {\n & img {\n border-radius: ", ";\n }\n & video {\n border-radius: ", ";\n }\n }\n\n .media.digital {\n & svg {\n width: ", ";\n height: ", ";\n }\n }\n }\n"], ["\n position: relative;\n background-color: ", ";\n border-radius: 6px;\n ", ";\n ", ";\n @media (max-width: 1200px) {\n height: max-content;\n }\n\n .media {\n width: 100%;\n height: 100%;\n aspect-ratio: 1 / 1;\n\n & svg {\n width: 100%;\n height: 100%;\n }\n\n & img {\n border-radius: 3px;\n }\n\n & span {\n display: none;\n }\n\n & video {\n border-radius: 3px;\n }\n }\n\n .media.digital {\n position: relative;\n\n & svg {\n position: absolute;\n width: 20px;\n height: 20px;\n bottom: 0;\n right: 0;\n\n & circle,\n & path {\n transform: scale(0.5);\n }\n }\n }\n\n ", " {\n border-radius: ", ";\n .media {\n & img {\n border-radius: ", ";\n }\n & video {\n border-radius: ", ";\n }\n }\n\n .media.digital {\n & svg {\n width: ", ";\n height: ", ";\n }\n }\n }\n"])), styles_1.WhiteColor, styles_1.BoxShadow, styles_1.BoxTransform, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(3), (0, _4k_1.adaptiveValueCalc)(3), (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(20));
|
|
27
24
|
// Component
|
|
28
25
|
var MultiMediaCard = function (_a) {
|
|
29
26
|
var gallery = _a.gallery, assets = _a.assets, collections = _a.collections;
|
|
@@ -12,10 +12,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
12
12
|
var utils_1 = require("@ludo.ninja/utils");
|
|
13
13
|
var HideLink_1 = __importDefault(require("@/system/Cards/HideLink"));
|
|
14
14
|
var likes_1 = __importDefault(require("@/hooks/likes"));
|
|
15
|
-
var
|
|
16
|
-
var colors_1 = require("@/styles/colors");
|
|
17
|
-
var boxShadow_1 = __importDefault(require("@/styles/mixins/boxShadow"));
|
|
18
|
-
var boxTransform_1 = __importDefault(require("@/styles/mixins/boxTransform"));
|
|
15
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
19
16
|
var CardContent_1 = __importDefault(require("@/system/Cards/CardContent"));
|
|
20
17
|
var CardCategory_1 = __importDefault(require("@/system/Cards/CardContent/CardCategory"));
|
|
21
18
|
var CardLikes_1 = __importDefault(require("@/system/Cards/CardContent/CardLikes"));
|
|
@@ -26,7 +23,7 @@ var _system_1 = require("@system");
|
|
|
26
23
|
var env_1 = require("@/utils/env");
|
|
27
24
|
var screen_1 = require("@/utils/screen");
|
|
28
25
|
// Styles
|
|
29
|
-
var StyledRegularCard = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 6px;\n ", ";\n ", ";\n min-height: ", ";\n\n &:hover ", " {\n transition: 0.2s opacity ease-in;\n opacity: 1 !important;\n }\n\n .linkRegularCard {\n display: flex;\n height: 100%;\n flex-direction: column;\n }\n\n ", " {\n width: 164px;\n min-height: ", ";\n }\n\n ", " {\n width: 154px;\n min-height: ", ";\n }\n"], ["\n background-color: ", ";\n border-radius: 6px;\n ", ";\n ", ";\n min-height: ", ";\n\n &:hover ", " {\n transition: 0.2s opacity ease-in;\n opacity: 1 !important;\n }\n\n .linkRegularCard {\n display: flex;\n height: 100%;\n flex-direction: column;\n }\n\n ", " {\n width: 164px;\n min-height: ", ";\n }\n\n ", " {\n width: 154px;\n min-height: ", ";\n }\n"])),
|
|
26
|
+
var StyledRegularCard = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 6px;\n ", ";\n ", ";\n min-height: ", ";\n\n &:hover ", " {\n transition: 0.2s opacity ease-in;\n opacity: 1 !important;\n }\n\n .linkRegularCard {\n display: flex;\n height: 100%;\n flex-direction: column;\n }\n\n ", " {\n width: 164px;\n min-height: ", ";\n }\n\n ", " {\n width: 154px;\n min-height: ", ";\n }\n"], ["\n background-color: ", ";\n border-radius: 6px;\n ", ";\n ", ";\n min-height: ", ";\n\n &:hover ", " {\n transition: 0.2s opacity ease-in;\n opacity: 1 !important;\n }\n\n .linkRegularCard {\n display: flex;\n height: 100%;\n flex-direction: column;\n }\n\n ", " {\n width: 164px;\n min-height: ", ";\n }\n\n ", " {\n width: 154px;\n min-height: ", ";\n }\n"])), styles_1.WhiteColor, styles_1.BoxShadow, styles_1.BoxTransform, function (props) { return (props.isNeedHeight ? '346px' : ''); }, Headicons_1.default, styles_1.mediaQuery.maxWidthTablet, function (props) { return (props.isNeedHeight ? '258px' : ''); }, styles_1.mediaQuery.mobile, function (props) { return (props.isNeedHeight ? '244px' : ''); });
|
|
30
27
|
// Component
|
|
31
28
|
var RegularCard = function (_a) {
|
|
32
29
|
var creationName = _a.creationName, creation = _a.creation, cardsCount = _a.cardsCount, scrollKeys = _a.scrollKeys, isNeedHeight = _a.isNeedHeight, likesDynamicInfo = _a.likesDynamicInfo, toolsForRemove = _a.toolsForRemove, isProdENV = _a.isProdENV;
|
|
@@ -9,8 +9,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
11
11
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
12
|
-
var
|
|
12
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
13
13
|
// Styles
|
|
14
|
-
var StyledCardHead = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n height: 252px;\n width: 252px;\n margin: 0 auto;\n\n .playIcon,\n .pauseIcon {\n position: absolute;\n right: 6%;\n bottom: 6%;\n\n :hover {\n circle {\n opacity: 0.6;\n fill: #12183a;\n }\n }\n }\n\n @media (max-width: 1200px) {\n height: 164px;\n width: 164px;\n }\n\n @media (max-width: 767px) {\n height: 154px;\n width: 154px;\n }\n\n ", " {\n height: ", ";\n width: ", ";\n }\n"], ["\n position: relative;\n height: 252px;\n width: 252px;\n margin: 0 auto;\n\n .playIcon,\n .pauseIcon {\n position: absolute;\n right: 6%;\n bottom: 6%;\n\n :hover {\n circle {\n opacity: 0.6;\n fill: #12183a;\n }\n }\n }\n\n @media (max-width: 1200px) {\n height: 164px;\n width: 164px;\n }\n\n @media (max-width: 767px) {\n height: 154px;\n width: 154px;\n }\n\n ", " {\n height: ", ";\n width: ", ";\n }\n"])),
|
|
14
|
+
var StyledCardHead = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n height: 252px;\n width: 252px;\n margin: 0 auto;\n\n .playIcon,\n .pauseIcon {\n position: absolute;\n right: 6%;\n bottom: 6%;\n\n :hover {\n circle {\n opacity: 0.6;\n fill: #12183a;\n }\n }\n }\n\n @media (max-width: 1200px) {\n height: 164px;\n width: 164px;\n }\n\n @media (max-width: 767px) {\n height: 154px;\n width: 154px;\n }\n\n ", " {\n height: ", ";\n width: ", ";\n }\n"], ["\n position: relative;\n height: 252px;\n width: 252px;\n margin: 0 auto;\n\n .playIcon,\n .pauseIcon {\n position: absolute;\n right: 6%;\n bottom: 6%;\n\n :hover {\n circle {\n opacity: 0.6;\n fill: #12183a;\n }\n }\n }\n\n @media (max-width: 1200px) {\n height: 164px;\n width: 164px;\n }\n\n @media (max-width: 767px) {\n height: 154px;\n width: 154px;\n }\n\n ", " {\n height: ", ";\n width: ", ";\n }\n"])), styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(252), (0, _4k_1.adaptiveValueCalc)(252));
|
|
15
15
|
exports.default = StyledCardHead;
|
|
16
16
|
var templateObject_1;
|
|
@@ -10,9 +10,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
// Styles
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var StyledHeadIcons = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n transition: 0.2s opacity ease-out;\n opacity: 0;\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 100px;\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n background: linear-gradient(180deg, #12183a 0%, rgba(18, 24, 58, 0) 100%);\n opacity: 0.3;\n }\n\n .rank {\n position: absolute;\n top: 16px;\n left: 16px;\n }\n\n .icons {\n position: absolute;\n top: 16px;\n right: 7px;\n display: flex;\n }\n\n .icon {\n display: flex;\n align-items: center;\n justify-content: center;\n background: ", ";\n border-radius: 6px;\n width: ", ";\n height: ", ";\n\n svg {\n overflow: visible;\n will-change: transform;\n transition: transform 0.2s;\n transform: scale(1);\n width: ", ";\n height: ", ";\n\n path {\n fill: ", ";\n transition: fill 0.2s;\n }\n }\n\n :hover svg {\n transform: scale(1.1);\n transition: transform 0.2s;\n\n path {\n fill: ", ";\n transition: fill 0.2s;\n }\n }\n }\n\n .icon.like {\n margin-left: 12px;\n }\n\n .icon.like.liked {\n svg path {\n fill: #f94c66;\n }\n }\n\n ", " {\n &:before {\n height: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n }\n\n .rank {\n top: ", ";\n left: ", ";\n }\n\n .icons {\n top: ", ";\n right: ", ";\n }\n\n .icon {\n border-radius: ", ";\n width: ", ";\n height: ", ";\n\n svg {\n width: ", ";\n height: ", ";\n }\n }\n\n .icon.like {\n margin-left: ", ";\n }\n }\n"], ["\n transition: 0.2s opacity ease-out;\n opacity: 0;\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 100px;\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n background: linear-gradient(180deg, #12183a 0%, rgba(18, 24, 58, 0) 100%);\n opacity: 0.3;\n }\n\n .rank {\n position: absolute;\n top: 16px;\n left: 16px;\n }\n\n .icons {\n position: absolute;\n top: 16px;\n right: 7px;\n display: flex;\n }\n\n .icon {\n display: flex;\n align-items: center;\n justify-content: center;\n background: ", ";\n border-radius: 6px;\n width: ", ";\n height: ", ";\n\n svg {\n overflow: visible;\n will-change: transform;\n transition: transform 0.2s;\n transform: scale(1);\n width: ", ";\n height: ", ";\n\n path {\n fill: ", ";\n transition: fill 0.2s;\n }\n }\n\n :hover svg {\n transform: scale(1.1);\n transition: transform 0.2s;\n\n path {\n fill: ", ";\n transition: fill 0.2s;\n }\n }\n }\n\n .icon.like {\n margin-left: 12px;\n }\n\n .icon.like.liked {\n svg path {\n fill: #f94c66;\n }\n }\n\n ", " {\n &:before {\n height: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n }\n\n .rank {\n top: ", ";\n left: ", ";\n }\n\n .icons {\n top: ", ";\n right: ", ";\n }\n\n .icon {\n border-radius: ", ";\n width: ", ";\n height: ", ";\n\n svg {\n width: ", ";\n height: ", ";\n }\n }\n\n .icon.like {\n margin-left: ", ";\n }\n }\n"])), colors_1.WhiteColor, function (props) { return (props.isMobile ? '24px' : '36px'); }, function (props) { return (props.isMobile ? '24px' : '36px'); }, function (props) { return (props.isMobile ? '13px' : '20px'); }, function (props) { return (props.isMobile ? '12px' : '18px'); }, colors_1.TextDarkGrayColor, colors_1.BlackColor, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(100), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(7), (0, _4k_1.adaptiveValueCalc)(6), function (props) { return (props.isMobile ? '24px' : (0, _4k_1.adaptiveValueCalc)(36)); }, function (props) { return (props.isMobile ? '24px' : (0, _4k_1.adaptiveValueCalc)(36)); }, function (props) { return (props.isMobile ? '13px' : (0, _4k_1.adaptiveValueCalc)(20)); }, function (props) { return (props.isMobile ? '12px' : (0, _4k_1.adaptiveValueCalc)(18)); }, (0, _4k_1.adaptiveValueCalc)(12));
|
|
13
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
14
|
+
var StyledHeadIcons = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n transition: 0.2s opacity ease-out;\n opacity: 0;\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 100px;\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n background: linear-gradient(180deg, #12183a 0%, rgba(18, 24, 58, 0) 100%);\n opacity: 0.3;\n }\n\n .rank {\n position: absolute;\n top: 16px;\n left: 16px;\n }\n\n .icons {\n position: absolute;\n top: 16px;\n right: 7px;\n display: flex;\n }\n\n .icon {\n display: flex;\n align-items: center;\n justify-content: center;\n background: ", ";\n border-radius: 6px;\n width: ", ";\n height: ", ";\n\n svg {\n overflow: visible;\n will-change: transform;\n transition: transform 0.2s;\n transform: scale(1);\n width: ", ";\n height: ", ";\n\n path {\n fill: ", ";\n transition: fill 0.2s;\n }\n }\n\n :hover svg {\n transform: scale(1.1);\n transition: transform 0.2s;\n\n path {\n fill: ", ";\n transition: fill 0.2s;\n }\n }\n }\n\n .icon.like {\n margin-left: 12px;\n }\n\n .icon.like.liked {\n svg path {\n fill: #f94c66;\n }\n }\n\n ", " {\n &:before {\n height: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n }\n\n .rank {\n top: ", ";\n left: ", ";\n }\n\n .icons {\n top: ", ";\n right: ", ";\n }\n\n .icon {\n border-radius: ", ";\n width: ", ";\n height: ", ";\n\n svg {\n width: ", ";\n height: ", ";\n }\n }\n\n .icon.like {\n margin-left: ", ";\n }\n }\n"], ["\n transition: 0.2s opacity ease-out;\n opacity: 0;\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 100px;\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n background: linear-gradient(180deg, #12183a 0%, rgba(18, 24, 58, 0) 100%);\n opacity: 0.3;\n }\n\n .rank {\n position: absolute;\n top: 16px;\n left: 16px;\n }\n\n .icons {\n position: absolute;\n top: 16px;\n right: 7px;\n display: flex;\n }\n\n .icon {\n display: flex;\n align-items: center;\n justify-content: center;\n background: ", ";\n border-radius: 6px;\n width: ", ";\n height: ", ";\n\n svg {\n overflow: visible;\n will-change: transform;\n transition: transform 0.2s;\n transform: scale(1);\n width: ", ";\n height: ", ";\n\n path {\n fill: ", ";\n transition: fill 0.2s;\n }\n }\n\n :hover svg {\n transform: scale(1.1);\n transition: transform 0.2s;\n\n path {\n fill: ", ";\n transition: fill 0.2s;\n }\n }\n }\n\n .icon.like {\n margin-left: 12px;\n }\n\n .icon.like.liked {\n svg path {\n fill: #f94c66;\n }\n }\n\n ", " {\n &:before {\n height: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n }\n\n .rank {\n top: ", ";\n left: ", ";\n }\n\n .icons {\n top: ", ";\n right: ", ";\n }\n\n .icon {\n border-radius: ", ";\n width: ", ";\n height: ", ";\n\n svg {\n width: ", ";\n height: ", ";\n }\n }\n\n .icon.like {\n margin-left: ", ";\n }\n }\n"])), styles_1.WhiteColor, function (props) { return (props.isMobile ? '24px' : '36px'); }, function (props) { return (props.isMobile ? '24px' : '36px'); }, function (props) { return (props.isMobile ? '13px' : '20px'); }, function (props) { return (props.isMobile ? '12px' : '18px'); }, styles_1.TextDarkGrayColor, styles_1.BlackColor, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(100), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(7), (0, _4k_1.adaptiveValueCalc)(6), function (props) { return (props.isMobile ? '24px' : (0, _4k_1.adaptiveValueCalc)(36)); }, function (props) { return (props.isMobile ? '24px' : (0, _4k_1.adaptiveValueCalc)(36)); }, function (props) { return (props.isMobile ? '13px' : (0, _4k_1.adaptiveValueCalc)(20)); }, function (props) { return (props.isMobile ? '12px' : (0, _4k_1.adaptiveValueCalc)(18)); }, (0, _4k_1.adaptiveValueCalc)(12));
|
|
16
15
|
StyledHeadIcons.defaultProps = {
|
|
17
16
|
isMobile: false,
|
|
18
17
|
};
|
|
@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
11
11
|
var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
12
|
-
var
|
|
13
|
-
var StyledImg = styled_components_1.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n opacity: ", ";\n transition: opacity ease-in 0.3s;\n\n ", " {\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n }\n"], ["\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n opacity: ", ";\n transition: opacity ease-in 0.3s;\n\n ", " {\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n }\n"])), function (props) { return (props.isLoading ? '0' : '1'); },
|
|
12
|
+
var styles_1 = require("@ludo.ninja/components/dist/styles");
|
|
13
|
+
var StyledImg = styled_components_1.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n opacity: ", ";\n transition: opacity ease-in 0.3s;\n\n ", " {\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n }\n"], ["\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n opacity: ", ";\n transition: opacity ease-in 0.3s;\n\n ", " {\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n }\n"])), function (props) { return (props.isLoading ? '0' : '1'); }, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(6));
|
|
14
14
|
exports.default = StyledImg;
|
|
15
15
|
var templateObject_1;
|