Fix thread borders

PrimalHQ · Dec 20, 2023 · c92cf7a · c92cf7a
1 parent ef22254
commit c92cf7a
Show file tree

Hide file tree

Showing 16 changed files with 98 additions and 79 deletions.
diff --git 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
@@ -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
@@ -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
@@ -137,12 +137,14 @@ const Layout: Component = () => {
 
 
         <div class={styles.rightColumn}>
-          <div class={styles.rightHeader}>
-            <div id="search_section">
+          <div>
+            <div class={styles.rightHeader}>
+              <div id="search_section">
+              </div>
             </div>
-          </div>
-          <div class={styles.rightContent}>
-            <div id="right_sidebar">
+            <div class={styles.rightContent}>
+              <div id="right_sidebar">
+              </div>
             </div>
           </div>
         </div>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -85,26 +85,30 @@ const Search: Component = () => {
         <SearchComponent />
       </Wormhole>
 
-      <PageCaption>
-        <div class={styles.caption}>
-          {intl.formatMessage(
-            tSearch.title,
-            { query: query() || '' },
-          )}
+      <PageCaption extended={true}>
+        <div class={styles.searchHeader}>
+          <div class={styles.caption}>
+            {intl.formatMessage(
+              tSearch.title,
+              { query: query() || '' },
+            )}
+          </div>
+          <div class={styles.addToFeed}>
+            <AddToHomeFeedButton
+              disabled={hasFeedAtHome()}
+              onAdd={addToHomeFeed}
+              activeLabel={intl.formatMessage(tActions.addFeedToHome)}
+              disabledLabel={intl.formatMessage(tActions.disabledAddFeedToHome)}
+            />
+          </div>
         </div>
-        <AddToHomeFeedButton
-          disabled={hasFeedAtHome()}
-          onAdd={addToHomeFeed}
-          activeLabel={intl.formatMessage(tActions.addFeedToHome)}
-          disabledLabel={intl.formatMessage(tActions.disabledAddFeedToHome)}
-        />
       </PageCaption>
 
 
       <div class={styles.searchContent}>
         <Show
           when={!search?.isFetchingContent}
-          fallback={<Loader />}
+          fallback={<div class={styles.loader}><Loader /></div>}
         >
           <Show
             when={search?.notes && search.notes.length > 0}

diff --git 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
@@ -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 = () => {
           </For>
         </div>
       </Show>
+      <div class={styles.bojan}></div>
     </div>
   )
 }