diff --git a/src/components/ExploreMenuItem/ExploreMenuItem.module.scss b/src/components/ExploreMenuItem/ExploreMenuItem.module.scss index 26e13bd2..736f9b88 100644 --- a/src/components/ExploreMenuItem/ExploreMenuItem.module.scss +++ b/src/components/ExploreMenuItem/ExploreMenuItem.module.scss @@ -1,6 +1,6 @@ .exploreMenuItem { display: flex; - width: calc(100% - 2px); + width: 100%; height: 100px; background-color: var(--background-card); justify-content: space-between; diff --git a/src/components/HomeHeader/HomeHeader.module.scss b/src/components/HomeHeader/HomeHeader.module.scss index ad81b18a..7d4249aa 100644 --- a/src/components/HomeHeader/HomeHeader.module.scss +++ b/src/components/HomeHeader/HomeHeader.module.scss @@ -80,7 +80,7 @@ .fixedSelector { position:fixed; top: 0px; - width: calc(var(--central-content-width) - 2px); + width: var(--central-content-width); height: var(--header-height); z-index: var(--z-index-header); transition: 0.3s; diff --git a/src/components/Layout/Layout.module.scss b/src/components/Layout/Layout.module.scss index 5b053eaf..85110905 100644 --- a/src/components/Layout/Layout.module.scss +++ b/src/components/Layout/Layout.module.scss @@ -23,6 +23,7 @@ display: grid; grid-template-rows: var(--header-height) 1fr 82px; height: 100%; + border-right: 1px solid var(--devider); } .leftHeader { @@ -61,7 +62,7 @@ .centerColumn { position: relative; - border-inline: 1px solid var(--devider); + // border-inline: 1px solid var(--devider); min-height: 100vh; } @@ -91,6 +92,15 @@ width: var(--right-col-w); grid-template-rows: var(--header-height) 1fr; grid-row-gap: 28px; + + >div { + position: fixed; + width: var(--left-col-w); + display: grid; + grid-template-rows: var(--header-height) 1fr 82px; + height: 100%; + border-left: 1px solid var(--devider); + } } .rightHeader { @@ -167,11 +177,16 @@ @media only screen and (max-width: 1087px) { .container { width: 720px; - grid-template-columns: 48px 600px; + grid-template-columns: 48px 600px 1px; } .rightColumn { - display: none; + width: 1px; + >div { + >div { + display: none; + } + } } } @@ -239,6 +254,11 @@ } .rightColumn { - display: none; + width: 1px; + >div { + >div { + display: none; + } + } } } diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index b3f29585..2bbae15b 100644 --- a/src/components/Layout/Layout.tsx +++ b/src/components/Layout/Layout.tsx @@ -137,12 +137,14 @@ const Layout: Component = () => {
-
-
+
+
+
+
-
-
-
diff --git a/src/components/NavHeader/NavHeader.module.scss b/src/components/NavHeader/NavHeader.module.scss index 2277b0cf..6d74379c 100644 --- a/src/components/NavHeader/NavHeader.module.scss +++ b/src/components/NavHeader/NavHeader.module.scss @@ -4,7 +4,7 @@ justify-content: flex-start; align-items: flex-start; height: 72px; - width: calc(var(--central-content-width) - 2px); + width: var(--central-content-width); margin: 0; padding: 0; padding-top: 32px; diff --git a/src/components/Note/Note.module.scss b/src/components/Note/Note.module.scss index 251b43da..8ad0323f 100644 --- a/src/components/Note/Note.module.scss +++ b/src/components/Note/Note.module.scss @@ -16,7 +16,7 @@ -ms-select: text; user-select: text; - width: calc(100% - 2px); + width: 100%; &.parent { border: none; @@ -227,7 +227,7 @@ .content { .rightSide { - width: calc(100% - 2px); + width: 100%; } } } diff --git a/src/components/PeopleList/PeopleList.module.scss b/src/components/PeopleList/PeopleList.module.scss index 739b8aee..2d9fa4bd 100644 --- a/src/components/PeopleList/PeopleList.module.scss +++ b/src/components/PeopleList/PeopleList.module.scss @@ -14,6 +14,7 @@ font-weight: 600; line-height: 20px; color: var(--text-secondary-2); + background: var(--background-site); >div{ height: 22px; >span { diff --git a/src/components/ProfileTabs/ProfileTabs.module.scss b/src/components/ProfileTabs/ProfileTabs.module.scss index a4079f1f..b03e4990 100644 --- a/src/components/ProfileTabs/ProfileTabs.module.scss +++ b/src/components/ProfileTabs/ProfileTabs.module.scss @@ -9,7 +9,7 @@ width: 100%; border-radius: 0; padding-top: 22px; - border: 1px solid var(--devider); + border-bottom: 1px solid var(--devider); border-top: none; } @@ -202,7 +202,6 @@ } .tabContent { - border-inline: 1px solid var(--devider); min-height: 100vh; } diff --git a/src/components/ReplyToNote/ReplyToNote.module.scss b/src/components/ReplyToNote/ReplyToNote.module.scss index e08a5f3b..0bbc21bd 100644 --- a/src/components/ReplyToNote/ReplyToNote.module.scss +++ b/src/components/ReplyToNote/ReplyToNote.module.scss @@ -90,7 +90,7 @@ outline: none; display: flex; align-items: center; - width: calc(100% - 2px); + width: var(--central-content-width); .leftSideClosed { width: 60px; diff --git a/src/pages/Explore.module.scss b/src/pages/Explore.module.scss index 24409dc2..ab9e0061 100644 --- a/src/pages/Explore.module.scss +++ b/src/pages/Explore.module.scss @@ -12,11 +12,12 @@ display: flex; flex-direction: column; width: 600px; + margin-left: -16px; .exploreCaption { display: flex; align-items: center; - padding-left: 24px; + padding-left: 16px; width: 600px; height: 84px; border-bottom: 1px solid var(--devider); diff --git a/src/pages/Notifications.module.scss b/src/pages/Notifications.module.scss index 537b1054..407dbaca 100644 --- a/src/pages/Notifications.module.scss +++ b/src/pages/Notifications.module.scss @@ -122,7 +122,7 @@ } .notificationTabContent { - width: calc(100% - 2px); + width: 100%; } .notificationTabIndicator { diff --git a/src/pages/Profile.module.scss b/src/pages/Profile.module.scss index 29429240..6b89e9b7 100644 --- a/src/pages/Profile.module.scss +++ b/src/pages/Profile.module.scss @@ -2,7 +2,6 @@ position: relative; background-color: var(--background-site); padding-bottom: 4px; - border-inline: 1px solid var(--devider); } .editProfileButton { diff --git a/src/pages/Search.module.scss b/src/pages/Search.module.scss index f2c7c62a..0de2381a 100644 --- a/src/pages/Search.module.scss +++ b/src/pages/Search.module.scss @@ -6,7 +6,21 @@ margin-bottom: -3px; position: relative; +} + +.searchHeader { + display: flex; + flex-direction: column; + width: 600px; + margin-left: -16px; + .caption { + display: flex; + align-items: center; + padding-left: 16px; + width: 600px; + height: 84px; + border-bottom: 1px solid var(--devider); font-weight: 400; font-size: 32px; line-height: 34px; @@ -15,64 +29,33 @@ } .addToFeed { + padding-right: 20px; display: flex; - position: absolute; - bottom: 0px; - width: 100%; - height: 35px; justify-content: flex-end; - align-items: flex-end; - - .noAdd { - display: flex; - align-items: center; - font-size: 16px; - line-height: 25px; - font-weight: 400; - color: var(--text-primary); - opacity: 0.6; - transition: opacity 0.4s; - } - - .addButton { - display: flex; - align-items: center; - margin: 0; - padding: 0; - border: none; - background-color: unset; - width: auto; - font-size: 16px; - line-height: 25px; - font-weight: 400; - color: var(--text-primary); - opacity: 0.6; - transition: opacity 0.4s; - - >span { - font-weight: 800; - margin-right: 5px; - } - - &:hover { - opacity: 1; - transition: opacity 0.4s; - } - - &:focus { - box-shadow: none; - } - } + align-items: center; + width: 600px; + height: 41px; + background: none; + border-bottom: 1px solid var(--devider); } } + .searchContent { position: relative; } .noResults { + margin-top: 60px; + display: flex; + width: 100%; + justify-content: center; font-weight: 400; font-size: 22px; line-height: 24px; color: var(--text-tertiary); text-transform: lowercase; } + +.loader { + margin-top: 60px; +} diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx index 64bb7e1d..b4d6d3d1 100644 --- a/src/pages/Search.tsx +++ b/src/pages/Search.tsx @@ -85,26 +85,30 @@ const Search: Component = () => { - -
- {intl.formatMessage( - tSearch.title, - { query: query() || '' }, - )} + +
+
+ {intl.formatMessage( + tSearch.title, + { query: query() || '' }, + )} +
+
+ +
-
} + fallback={
} > 0} diff --git a/src/pages/Thread.module.scss b/src/pages/Thread.module.scss index fd672ef0..487c1615 100644 --- a/src/pages/Thread.module.scss +++ b/src/pages/Thread.module.scss @@ -62,3 +62,8 @@ background-color: var(--background-card); } } + +.bojan { + background-color: red; + height: 0px; +} diff --git a/src/pages/Thread.tsx b/src/pages/Thread.tsx index d1b6519d..477d5c11 100644 --- a/src/pages/Thread.tsx +++ b/src/pages/Thread.tsx @@ -124,6 +124,10 @@ const Thread: Component = () => { repliesHolder.setAttribute('style',`min-height: ${minHeight}px`); scrollWindowTo(rect.top - header - banner); + + repliesHolder.setAttribute('style', `height: ${document.documentElement.scrollHeight}px;`) + + console.log('TOTAL: ', document.documentElement.getBoundingClientRect(), repliesHolder.getBoundingClientRect()) }, 0) } }); @@ -202,6 +206,7 @@ const Thread: Component = () => {
+
) }