From 70c57feaa8b6188ef2931a1d02d29506e5b52dcd Mon Sep 17 00:00:00 2001 From: evgeniywas Date: Wed, 2 Aug 2023 18:12:25 +0100 Subject: [PATCH 1/8] RC-7: add workaround for layout 2 to app-base.css --- src/styles/app-base.css | 163 +++++++++++++++++++++------------------- 1 file changed, 86 insertions(+), 77 deletions(-) diff --git a/src/styles/app-base.css b/src/styles/app-base.css index 8fab455..a6795c9 100644 --- a/src/styles/app-base.css +++ b/src/styles/app-base.css @@ -1,153 +1,162 @@ - /** * Custom base styles */ * { - /* Text rendering */ - text-rendering: optimizeLegibility; - -o-text-rendering: optimizeLegibility; - -ms-text-rendering: optimizeLegibility; - -moz-text-rendering: optimizeLegibility; - -webkit-text-rendering: optimizeLegibility; - -webkit-tap-highlight-color: transparent; + /* Text rendering */ + text-rendering: optimizeLegibility; + -o-text-rendering: optimizeLegibility; + -ms-text-rendering: optimizeLegibility; + -moz-text-rendering: optimizeLegibility; + -webkit-text-rendering: optimizeLegibility; + -webkit-tap-highlight-color: transparent; } * :focus { - outline: none !important; + outline: none !important; } html { - font-size: 62.5%; - font-family: 'Inter var', Roboto, Helvetica Neue, Arial, sans-serif; - background-color: #121212; + font-size: 62.5%; + font-family: 'Inter var', Roboto, Helvetica Neue, Arial, sans-serif; + background-color: #121212; } body { - font-size: 14px; - line-height: 1.4; - overflow-x: hidden; - font-feature-settings: "salt"; + font-size: 14px; + line-height: 1.4; + overflow-x: hidden; + font-feature-settings: 'salt'; } -html, body { - -webkit-font-smoothing: auto; - -moz-osx-font-smoothing: auto; +html, +body { + -webkit-font-smoothing: auto; + -moz-osx-font-smoothing: auto; } -html, body { - display: flex; - flex-direction: column; - position: relative; - margin: 0; - min-height: 100%; - width: 100%; - flex: 1 1 auto; +html, +body { + display: flex; + flex-direction: column; + position: relative; + margin: 0; + min-height: 100%; + width: 100%; + flex: 1 1 auto; } #root { - display: flex; - flex-direction: column; - flex: 1 1 auto; - width: 100%; - height: 100%; + display: flex; + flex: 1 1 auto; + width: 100%; + height: 100%; +} +/* layout 2 workaround */ +#root:has(> #fuse-main) { + flex-direction: column; } -h1, .h1 { - font-size: 24px; +h1, +.h1 { + font-size: 24px; } -h2, .h2 { - font-size: 20px; +h2, +.h2 { + font-size: 20px; } -h3, .h3 { - font-size: 16px; +h3, +.h3 { + font-size: 16px; } -h4, .h4 { - font-size: 15px; +h4, +.h4 { + font-size: 15px; } -h5, .h5 { - font-size: 13px; +h5, +.h5 { + font-size: 13px; } -h6, .h6 { - font-size: 12px; +h6, +.h6 { + font-size: 12px; } .ps > .ps__rail-y, .ps > .ps__rail-x { - z-index: 99; + z-index: 99; } -a[role=button] { - text-decoration: none; +a[role='button'] { + text-decoration: none; } -[role="tooltip"] { - z-index: 9999; +[role='tooltip'] { + z-index: 9999; } .MuiModal-root { - /*z-index: 9999;*/ + /*z-index: 9999;*/ } /* Medium Devices, Desktops Only */ @media only screen and (min-width: 992px) { - ::-webkit-scrollbar { - width: 8px; - height: 8px; - background-color: rgba(0, 0, 0, 0); - } + ::-webkit-scrollbar { + width: 8px; + height: 8px; + background-color: rgba(0, 0, 0, 0); + } - ::-webkit-scrollbar:hover { - width: 8px; - height: 8px; - background-color: rgba(0, 0, 0, 0.06); - } + ::-webkit-scrollbar:hover { + width: 8px; + height: 8px; + background-color: rgba(0, 0, 0, 0.06); + } - ::-webkit-scrollbar-thumb { - border: 2px solid transparent; - border-radius: 20px; - } + ::-webkit-scrollbar-thumb { + border: 2px solid transparent; + border-radius: 20px; + } - ::-webkit-scrollbar-thumb:active { - border-radius: 20px; - } + ::-webkit-scrollbar-thumb:active { + border-radius: 20px; + } } form label { - z-index: 99; + z-index: 99; } body.no-animate *, body.no-animate *::before, body.no-animate *::after { - transition: none !important; - animation: none !important; + transition: none !important; + animation: none !important; } button:focus { - outline: none; + outline: none; } /* Removes webkit's autofill backgorund color */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, -input:-webkit-autofill:active -{ - transitionDelay: 9999s; - transitionProperty: background-color, color; +input:-webkit-autofill:active { + transitiondelay: 9999s; + transitionproperty: background-color, color; } :focus { - outline-color: transparent; + outline-color: transparent; } /*fullcalendar Fix*/ .fc-scrollgrid-section-liquid { - height: 1px !important; + height: 1px !important; } -- 2.20.1 From 09d5bac9a787f9e505eed962868432a7091b9740 Mon Sep 17 00:00:00 2001 From: evgeniywas Date: Wed, 2 Aug 2023 18:13:15 +0100 Subject: [PATCH 2/8] RC-7: add navbar toggle for small viewports to layout 1 --- src/app/theme-layouts/layout1/Layout1.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/app/theme-layouts/layout1/Layout1.js b/src/app/theme-layouts/layout1/Layout1.js index d0f4a0d..e0dd7e5 100644 --- a/src/app/theme-layouts/layout1/Layout1.js +++ b/src/app/theme-layouts/layout1/Layout1.js @@ -2,12 +2,14 @@ import FuseDialog from '@fuse/core/FuseDialog'; import FuseMessage from '@fuse/core/FuseMessage'; import FuseSuspense from '@fuse/core/FuseSuspense'; import { styled } from '@mui/material/styles'; +import Hidden from '@mui/material/Hidden'; import AppContext from 'src/app/contexts/AppContext'; import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice'; import { memo, useContext } from 'react'; import { useSelector } from 'react-redux'; import { useRoutes } from 'react-router-dom'; import NavbarWrapperLayout1 from './components/NavbarWrapperLayout1'; +import NavbarToggleButton from '../shared-components/NavbarToggleButton'; const Root = styled('div')(({ theme, config }) => ({ ...(config.mode === 'boxed' && { @@ -36,6 +38,10 @@ function Layout1(props) { {config.navbar.display && config.navbar.position === 'left' && }
+ + + +
-- 2.20.1 From d944147a77634567d3afa02d21b418f53448ef8e Mon Sep 17 00:00:00 2001 From: evgeniywas Date: Sun, 6 Aug 2023 15:26:52 +0100 Subject: [PATCH 3/8] RC-7: correct theme styles --- public/assets/tailwind-base.css | 232 ++++++++++++++++---------------- src/styles/app-base.css | 2 +- tailwind.config.js | 3 + 3 files changed, 122 insertions(+), 115 deletions(-) diff --git a/public/assets/tailwind-base.css b/public/assets/tailwind-base.css index efe482a..05560fe 100644 --- a/public/assets/tailwind-base.css +++ b/public/assets/tailwind-base.css @@ -1,4 +1,3 @@ - /** * HEY HO */ @@ -14,15 +13,15 @@ *, ::before, ::after { - box-sizing: border-box; /* 1 */ - border-width: 0; /* 2 */ - border-style: solid; /* 2 */ - border-color: #EEEEEE; /* 2 */ + box-sizing: border-box; /* 1 */ + border-width: 0; /* 2 */ + border-style: solid; /* 2 */ + border-color: #eeeeee; /* 2 */ } ::before, ::after { - --tw-content: ''; + --tw-content: ''; } /* @@ -33,10 +32,12 @@ */ html { - line-height: 1.5; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */ - tab-size: 4; /* 3 */ - font-family: Inter var, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ + line-height: 1.5; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */ + tab-size: 4; /* 3 */ + font-family: Inter var, Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Segoe UI Symbol', 'Noto Color Emoji'; /* 4 */ } /* @@ -45,8 +46,8 @@ html { */ body { - margin: 0; /* 1 */ - line-height: inherit; /* 2 */ + margin: 0; /* 1 */ + line-height: inherit; /* 2 */ } /* @@ -56,9 +57,9 @@ body { */ hr { - height: 0; /* 1 */ - color: inherit; /* 2 */ - border-top-width: 1px; /* 3 */ + height: 0; /* 1 */ + color: inherit; /* 2 */ + border-top-width: 1px; /* 3 */ } /* @@ -66,7 +67,7 @@ Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { - text-decoration: underline dotted; + text-decoration: underline dotted; } /* @@ -79,8 +80,8 @@ h3, h4, h5, h6 { - font-size: inherit; - font-weight: inherit; + font-size: inherit; + font-weight: inherit; } /* @@ -88,8 +89,8 @@ Reset links to optimize for opt-in styling instead of opt-out. */ a { - color: inherit; - text-decoration: inherit; + color: inherit; + text-decoration: inherit; } /* @@ -98,7 +99,7 @@ Add the correct font weight in Edge and Safari. b, strong { - font-weight: bolder; + font-weight: bolder; } /* @@ -110,8 +111,9 @@ code, kbd, samp, pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ - font-size: 1em; /* 2 */ + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', + 'Courier New', monospace; /* 1 */ + font-size: 1em; /* 2 */ } /* @@ -119,7 +121,7 @@ Add the correct font size in all browsers. */ small { - font-size: 80%; + font-size: 80%; } /* @@ -128,18 +130,18 @@ Prevent `sub` and `sup` elements from affecting the line height in all browsers. sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } sub { - bottom: -0.25em; + bottom: -0.25em; } sup { - top: -0.5em; + top: -0.5em; } /* @@ -149,9 +151,9 @@ sup { */ table { - text-indent: 0; /* 1 */ - border-color: inherit; /* 2 */ - border-collapse: collapse; /* 3 */ + text-indent: 0; /* 1 */ + border-color: inherit; /* 2 */ + border-collapse: collapse; /* 3 */ } /* @@ -165,12 +167,12 @@ input, optgroup, select, textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: inherit; /* 1 */ - color: inherit; /* 1 */ - margin: 0; /* 2 */ - padding: 0; /* 3 */ + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: inherit; /* 1 */ + color: inherit; /* 1 */ + margin: 0; /* 2 */ + padding: 0; /* 3 */ } /* @@ -179,7 +181,7 @@ Remove the inheritance of text transform in Edge and Firefox. button, select { - text-transform: none; + text-transform: none; } /* @@ -191,9 +193,9 @@ button, [type='button'], [type='reset'], [type='submit'] { - -webkit-appearance: button; /* 1 */ - background-color: transparent; /* 2 */ - background-image: none; /* 2 */ + -webkit-appearance: button; /* 1 */ + background-color: transparent; /* 2 */ + background-image: none; /* 2 */ } /* @@ -201,7 +203,7 @@ Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { - outline: auto; + outline: auto; } /* @@ -209,7 +211,7 @@ Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/ */ :-moz-ui-invalid { - box-shadow: none; + box-shadow: none; } /* @@ -217,7 +219,7 @@ Add the correct vertical alignment in Chrome and Firefox. */ progress { - vertical-align: baseline; + vertical-align: baseline; } /* @@ -226,7 +228,7 @@ Correct the cursor style of increment and decrement buttons in Safari. ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { - height: auto; + height: auto; } /* @@ -235,8 +237,8 @@ Correct the cursor style of increment and decrement buttons in Safari. */ [type='search'] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ } /* @@ -244,7 +246,7 @@ Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { - -webkit-appearance: none; + -webkit-appearance: none; } /* @@ -253,8 +255,8 @@ Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ } /* @@ -262,7 +264,7 @@ Add the correct display in Chrome and Safari. */ summary { - display: list-item; + display: list-item; } /* @@ -282,24 +284,24 @@ hr, figure, p, pre { - margin: 0; + margin: 0; } fieldset { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } legend { - padding: 0; + padding: 0; } ol, ul, menu { - list-style: none; - margin: 0; - padding: 0; + list-style: none; + margin: 0; + padding: 0; } /* @@ -307,7 +309,7 @@ Prevent resizing textareas horizontally by default. */ textarea { - resize: vertical; + resize: vertical; } /* @@ -317,8 +319,8 @@ textarea { input::placeholder, textarea::placeholder { - opacity: 1; /* 1 */ - color: #BDBDBD; /* 2 */ + opacity: 1; /* 1 */ + color: #bdbdbd; /* 2 */ } /* @@ -326,8 +328,8 @@ Set the default cursor for buttons. */ button, -[role="button"] { - cursor: pointer; +[role='button'] { + cursor: pointer; } /* @@ -335,7 +337,7 @@ Make sure disabled buttons don't get the pointer cursor. */ :disabled { - cursor: default; + cursor: default; } /* @@ -352,8 +354,8 @@ audio, iframe, embed, object { - display: block; /* 1 */ - vertical-align: middle; /* 2 */ + display: block; /* 1 */ + vertical-align: middle; /* 2 */ } /* @@ -362,8 +364,8 @@ Constrain images and videos to the parent width and preserve their intrinsic asp img, video { - max-width: 100%; - height: auto; + max-width: 100%; + height: auto; } /* @@ -371,50 +373,52 @@ Ensure the default browser behavior of the `hidden` attribute. */ [hidden] { - display: none; + display: none; } -*, ::before, ::after { - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ''; - --tw-pan-y: ''; - --tw-pinch-zoom: ''; - --tw-scroll-snap-strictness: proximity; - --tw-ordinal: ''; - --tw-slashed-zero: ''; - --tw-numeric-figure: ''; - --tw-numeric-spacing: ''; - --tw-numeric-fraction: ''; - --tw-ring-inset: ''; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(33 150 243 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ''; - --tw-brightness: ''; - --tw-contrast: ''; - --tw-grayscale: ''; - --tw-hue-rotate: ''; - --tw-invert: ''; - --tw-saturate: ''; - --tw-sepia: ''; - --tw-drop-shadow: ''; - --tw-backdrop-blur: ''; - --tw-backdrop-brightness: ''; - --tw-backdrop-contrast: ''; - --tw-backdrop-grayscale: ''; - --tw-backdrop-hue-rotate: ''; - --tw-backdrop-invert: ''; - --tw-backdrop-opacity: ''; - --tw-backdrop-saturate: ''; - --tw-backdrop-sepia: ''; +*, +::before, +::after { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ''; + --tw-pan-y: ''; + --tw-pinch-zoom: ''; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ''; + --tw-slashed-zero: ''; + --tw-numeric-figure: ''; + --tw-numeric-spacing: ''; + --tw-numeric-fraction: ''; + --tw-ring-inset: ''; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(33 150 243 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ''; + --tw-brightness: ''; + --tw-contrast: ''; + --tw-grayscale: ''; + --tw-hue-rotate: ''; + --tw-invert: ''; + --tw-saturate: ''; + --tw-sepia: ''; + --tw-drop-shadow: ''; + --tw-backdrop-blur: ''; + --tw-backdrop-brightness: ''; + --tw-backdrop-contrast: ''; + --tw-backdrop-grayscale: ''; + --tw-backdrop-hue-rotate: ''; + --tw-backdrop-invert: ''; + --tw-backdrop-opacity: ''; + --tw-backdrop-saturate: ''; + --tw-backdrop-sepia: ''; } diff --git a/src/styles/app-base.css b/src/styles/app-base.css index a6795c9..25b3e3a 100644 --- a/src/styles/app-base.css +++ b/src/styles/app-base.css @@ -24,7 +24,7 @@ html { body { font-size: 14px; - line-height: 1.4; + line-height: normal; overflow-x: hidden; font-feature-settings: 'salt'; } diff --git a/tailwind.config.js b/tailwind.config.js index 3df9c15..9c80138 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -53,6 +53,7 @@ module.exports = { 'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))', 'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))', 'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))', + 'home-welcome': 'url(/src/assets/images/welcome-background.webp)', }, backgroundOpacity: ({ theme }) => theme('opacity'), backgroundPosition: { @@ -130,6 +131,7 @@ module.exports = { '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)', inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', none: 'none', + light: '1px 1px 5px 0px rgba(0, 0, 0, 0.1)', active: '2px 2px 5px 0px rgba(0, 0, 0, 0.2)', hover: '2px 2px 5px 0px rgba(0, 0, 0, 0.4)', 0: '0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)', @@ -1258,6 +1260,7 @@ module.exports = { '5xl': '102.4rem', '6xl': '115.2rem', '7xl': '128rem', + '8xl': '142rem', px: '1px', 0: '0px', 0.5: '0.05rem', -- 2.20.1 From 3c3ec7da1155bc7a48ac83edee295492aba3345c Mon Sep 17 00:00:00 2001 From: evgeniywas Date: Sun, 6 Aug 2023 15:27:12 +0100 Subject: [PATCH 4/8] RC-7: remove useless files --- src/app/shared-components/WYSIWYGEditor.js | 39 ------------------- .../layout2/components/linksLayout2Config.js | 3 -- src/assets/locales/en.js | 5 --- src/i18n.js | 7 +++- 4 files changed, 5 insertions(+), 49 deletions(-) delete mode 100644 src/app/shared-components/WYSIWYGEditor.js delete mode 100644 src/app/theme-layouts/layout2/components/linksLayout2Config.js delete mode 100644 src/assets/locales/en.js diff --git a/src/app/shared-components/WYSIWYGEditor.js b/src/app/shared-components/WYSIWYGEditor.js deleted file mode 100644 index 49ddf17..0000000 --- a/src/app/shared-components/WYSIWYGEditor.js +++ /dev/null @@ -1,39 +0,0 @@ -import { forwardRef, useState } from 'react'; -import { styled } from '@mui/material/styles'; -import { convertToRaw, EditorState } from 'draft-js'; -import { Editor } from 'react-draft-wysiwyg'; -import draftToHtml from 'draftjs-to-html'; -import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'; -import clsx from 'clsx'; - -const Root = styled('div')({ - '& .rdw-dropdown-selectedtext': { - color: 'inherit', - }, - '& .rdw-editor-toolbar': { - borderWidth: '0 0 1px 0!important', - margin: '0!important', - }, - '& .rdw-editor-main': { - padding: '8px 12px', - height: `${256}px!important`, - }, -}); - -const WYSIWYGEditor = forwardRef((props, ref) => { - const [editorState, setEditorState] = useState(EditorState.createEmpty()); - - function onEditorStateChange(_editorState) { - setEditorState(_editorState); - - return props.onChange(draftToHtml(convertToRaw(_editorState.getCurrentContent()))); - } - - return ( - - - - ); -}); - -export default WYSIWYGEditor; diff --git a/src/app/theme-layouts/layout2/components/linksLayout2Config.js b/src/app/theme-layouts/layout2/components/linksLayout2Config.js deleted file mode 100644 index 7efc7a2..0000000 --- a/src/app/theme-layouts/layout2/components/linksLayout2Config.js +++ /dev/null @@ -1,3 +0,0 @@ -const linksConfigLayout2 = ['rent-and-buy', 'about-us', 'blog', 'contacts']; - -export default linksConfigLayout2; diff --git a/src/assets/locales/en.js b/src/assets/locales/en.js deleted file mode 100644 index a268e27..0000000 --- a/src/assets/locales/en.js +++ /dev/null @@ -1,5 +0,0 @@ -const en = { - translation: {}, -}; - -export default en; diff --git a/src/i18n.js b/src/i18n.js index 7e70071..44648ac 100644 --- a/src/i18n.js +++ b/src/i18n.js @@ -1,9 +1,12 @@ import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; -import en from './assets/locales/en'; +// the translations +// (tip move them in a JSON file and import them) const resources = { - en, + en: { + translation: {}, + }, }; i18n -- 2.20.1 From 120ad1b4f78e07342130e3d7460d4c1f837e2936 Mon Sep 17 00:00:00 2001 From: evgeniywas Date: Sun, 6 Aug 2023 15:27:51 +0100 Subject: [PATCH 5/8] RC-7: update layout2 --- src/app/theme-layouts/layout2/Layout2.js | 14 ++++++++-- .../layout2/components/FooterLayout2.js | 12 +++------ .../layout2/components/HeaderLayout2.js | 12 ++------- .../layout2/components/NavLinks.js | 26 +++++++++++++++++++ src/app/theme-layouts/layout2/i18n/en.js | 4 +-- 5 files changed, 45 insertions(+), 23 deletions(-) create mode 100644 src/app/theme-layouts/layout2/components/NavLinks.js diff --git a/src/app/theme-layouts/layout2/Layout2.js b/src/app/theme-layouts/layout2/Layout2.js index 185d68d..ff5d8d1 100644 --- a/src/app/theme-layouts/layout2/Layout2.js +++ b/src/app/theme-layouts/layout2/Layout2.js @@ -2,9 +2,9 @@ import FuseSuspense from '@fuse/core/FuseSuspense'; import AppContext from 'src/app/contexts/AppContext'; import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice'; import i18next from 'i18next'; -import { memo, useContext } from 'react'; +import { memo, useContext, useEffect } from 'react'; import { useSelector } from 'react-redux'; -import { useRoutes } from 'react-router-dom'; +import { useLocation, useRoutes } from 'react-router-dom'; import { useAuth } from 'src/app/contexts/AuthContext'; import FooterLayout2 from './components/FooterLayout2'; import HeaderLayout2 from './components/HeaderLayout2'; @@ -18,6 +18,16 @@ function Layout2(props) { const authContext = useAuth(); const appContext = useContext(AppContext); const { routes } = appContext; + const location = useLocation(); + + useEffect(() => { + const { hash } = location; + + if (hash) { + const target = document.querySelector(hash); + target.scrollIntoView({ behavior: 'smooth' }); + } + }, [location]); return ( <> diff --git a/src/app/theme-layouts/layout2/components/FooterLayout2.js b/src/app/theme-layouts/layout2/components/FooterLayout2.js index b5d7552..a5c6ca3 100644 --- a/src/app/theme-layouts/layout2/components/FooterLayout2.js +++ b/src/app/theme-layouts/layout2/components/FooterLayout2.js @@ -1,7 +1,7 @@ import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; -import linksConfigLayout2 from './linksLayout2Config'; +import NavLinks from './NavLinks'; function FooterLayout2() { const { t } = useTranslation('layout2'); @@ -35,14 +35,8 @@ function FooterLayout2() { -
    - {linksConfigLayout2.map((path) => ( -
  • - - {t(path)} - -
    • - ))} +
      +
diff --git a/src/app/theme-layouts/layout2/components/HeaderLayout2.js b/src/app/theme-layouts/layout2/components/HeaderLayout2.js index f654593..9b14799 100644 --- a/src/app/theme-layouts/layout2/components/HeaderLayout2.js +++ b/src/app/theme-layouts/layout2/components/HeaderLayout2.js @@ -2,7 +2,7 @@ import FuseSvgIcon from '@fuse/core/FuseSvgIcon/FuseSvgIcon'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; -import linksConfigLayout2 from './linksLayout2Config'; +import Links from './NavLinks'; function HeaderLayout2(props) { const { t } = useTranslation('layout2'); @@ -19,15 +19,7 @@ function HeaderLayout2(props) { {props.isAuthenticated || ( diff --git a/src/app/theme-layouts/layout2/components/NavLinks.js b/src/app/theme-layouts/layout2/components/NavLinks.js new file mode 100644 index 0000000..13a3266 --- /dev/null +++ b/src/app/theme-layouts/layout2/components/NavLinks.js @@ -0,0 +1,26 @@ +import { memo } from 'react'; +import { useTranslation } from 'react-i18next'; +import { Link } from 'react-router-dom'; + +function NavLinks({ className }) { + const { t } = useTranslation('layout2'); + + return ( + <> + + {t('rent_and_buy')} + + + {t('about_us')} + + + {t('blog')} + + + {t('contacts')} + + + ); +} + +export default memo(NavLinks); diff --git a/src/app/theme-layouts/layout2/i18n/en.js b/src/app/theme-layouts/layout2/i18n/en.js index 027a972..65e2830 100644 --- a/src/app/theme-layouts/layout2/i18n/en.js +++ b/src/app/theme-layouts/layout2/i18n/en.js @@ -1,6 +1,6 @@ const locale = { - 'rent-and-buy': 'Rent&Buy Analysis', - 'about-us': 'About Us', + rent_and_buy: 'Rent&Buy Analysis', + about_us: 'About Us', blog: 'Blog', contacts: 'Contacts', sign_in: 'Log In', -- 2.20.1 From 2160d206e93bc5d17c2aa680b7f755be81c39b51 Mon Sep 17 00:00:00 2001 From: evgeniywas Date: Sun, 6 Aug 2023 15:28:27 +0100 Subject: [PATCH 6/8] RC-7: create home page components --- src/app/main/home/Home.js | 68 +++++++- src/app/main/home/components/AboutUs.js | 37 +++++ src/app/main/home/components/ArticleCard.js | 33 ++++ .../main/home/components/ArticleCardsList.js | 17 ++ src/app/main/home/components/FeedbackForm.js | 157 ++++++++++++++++++ src/app/main/home/components/Statistics.js | 18 ++ .../main/home/components/StatisticsCard.js | 12 ++ src/app/main/home/components/Welcome.js | 41 +++++ src/app/main/home/i18n/en.js | 40 ++++- src/assets/images/welcome-background.webp | Bin 0 -> 4378870 bytes 10 files changed, 418 insertions(+), 5 deletions(-) create mode 100644 src/app/main/home/components/AboutUs.js create mode 100644 src/app/main/home/components/ArticleCard.js create mode 100644 src/app/main/home/components/ArticleCardsList.js create mode 100644 src/app/main/home/components/FeedbackForm.js create mode 100644 src/app/main/home/components/Statistics.js create mode 100644 src/app/main/home/components/StatisticsCard.js create mode 100644 src/app/main/home/components/Welcome.js create mode 100644 src/assets/images/welcome-background.webp diff --git a/src/app/main/home/Home.js b/src/app/main/home/Home.js index 07f9284..f497304 100644 --- a/src/app/main/home/Home.js +++ b/src/app/main/home/Home.js @@ -1,7 +1,67 @@ -import { memo } from 'react'; +import { useEffect, useState } from 'react'; +import { withTranslation } from 'react-i18next'; +import AboutUs from './components/AboutUs'; +import ArticleCardsList from './components/ArticleCardsList'; +import FeedbackForm from './components/FeedbackForm'; +import Statistics from './components/Statistics'; +import Welcome from './components/Welcome'; -function Home(props) { - return
Heeeeelloooooo!
; +const articleCardsMock = [ + { + id: '123', + title: 'Lorem ipsum dolor sit amet ornare amet consequat ultricies auctor.', + description: + 'Lorem ipsum dolor sit amet consectetur. Quam molestie non eget rhoncus ut sed. Egestas scelerisque fames lorem id luctus viverra ligula placerat mus. Lorem ipsum dolor sit amet consectetur. Quam molestie non eget rhoncus ut sed. Egestas scelerisque fames lorem id luctus viverra ligula placmeget rhoncus ut settrnhg ips...', + image: + 'https://images.unsplash.com/photo-1664575602276-acd073f104c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80', + updated: '12.12.2022', + }, + { + id: '234', + title: 'Lorem ipsum dolor sit amet ornare amet consequat us auctoit amet orare ametr...', + description: + 'Lorem ipsum dolor sit amet consectetur. Quam molestie non eget rhoncusnon eget rhoncus ut sed. Egestas scelerisque fames lorem id luctus viverra ligula placerat mus.', + image: + 'https://images.unsplash.com/photo-1664575602276-acd073f104c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80', + updated: '12.12.2022', + }, + { + id: '345', + title: 'Lorem ipsum dolor sit amet ornare amet consequat ultricies auctor.', + description: + 'Lorem ipsum dolor sit amet consectetur. Quam molestie non eget rhoncus ut sed. Egestas scelerisque fames lorem id luctus viverra ligula placerat mus. Lorem ipsum dolor sit amet consectetur. Quames lorem id luctus viverra ligula placerat mus.', + image: + 'https://images.unsplash.com/photo-1664575602276-acd073f104c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80', + updated: '12.12.2022', + }, +]; + +function Home({ t }) { + const [servicesCards, setServicesCards] = useState([]); + const [blogCards, setBlogCards] = useState([]); + + useEffect(() => { + setServicesCards(articleCardsMock); + setBlogCards(articleCardsMock); + }, []); + + return ( +
+ +
+ + + + + +
+
+ ); } -export default memo(Home); +export default withTranslation('homePage')(Home); diff --git a/src/app/main/home/components/AboutUs.js b/src/app/main/home/components/AboutUs.js new file mode 100644 index 0000000..89bf520 --- /dev/null +++ b/src/app/main/home/components/AboutUs.js @@ -0,0 +1,37 @@ +import { memo } from 'react'; +import { withTranslation } from 'react-i18next'; +import { Link } from 'react-router-dom'; + +function AboutUs({ t }) { + return ( +
+

{t('about_us_title')}

+
+
+