Search redesign (#82)

ekaterinburgdev · Dec 21, 2023 · ab09861 · ab09861
1 parent 0348b8c
commit ab09861
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 34 deletions.
diff --git a/components/SidePage/SidePage.module.css b/components/SidePage/SidePage.module.css
@@ -9,12 +9,6 @@
 
 @media screen and (min-width: 1500px) {
     .SidePage__container {
-        width: max(410px, var(--sidebar-width));
+        width: var(--sidebar-width);
     }
 }
-
-@media screen and (min-width: 1900px) {
-    .SidePage__container {
-        width: 502px;
-    }
-}
diff --git a/components/SidePage/Suggestions/Suggestions.jsx b/components/SidePage/Suggestions/Suggestions.jsx
@@ -1,9 +1,7 @@
 import React from 'react'
-import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
-import { API_HOST } from '../../../consts/endpoints'
 import styles from './Suggestions.module.css'
 import { getCSSVarsColors } from '../../../utils/getCSSVarsColors'
 
@@ -38,11 +36,10 @@ const SectionSuggestion = ({ section }) => {
 }
 
 const GuideSuggestion = ({ guide }) => {
-    const { title, cover, sections, color } = guide
+    const { title, sections, color } = guide
     return (
         <article className={styles.GuideSuggestion} style={{ ...getCSSVarsColors(color) }}>
             <div className={styles.imageContainer}>
-                <Image className={styles.image} fill src={`${API_HOST}/static/${cover}`} alt="" />
                 <h3 className={styles.GuideSuggestionTitle}>{title}</h3>
             </div>
             {sections?.map((section, i) => (
@@ -60,12 +57,11 @@ function getGuides({ items, currentUrl }) {
     })
     return items.reduce((acc, item) => {
         const title = item?.properties.properties?.Name?.title[0]?.plain_text
-        const cover = item?.properties.properties?.previewPattern?.at(0)
         const color = item?.properties.properties?.color?.rich_text[0]?.plain_text
         const sections = item?.sectionSuggestions.sort((a, b) =>
             collator.compare(a.sectionName, b.sectionName)
         )
-        const guideSuggestion = { title, cover, sections, color }
+        const guideSuggestion = { title, sections, color }
         const url = item?.properties?.properties?.pageUrl?.url
         if (url !== currentUrl) {
             return [...acc, guideSuggestion]

diff --git a/components/SidePage/Suggestions/Suggestions.module.css b/components/SidePage/Suggestions/Suggestions.module.css
@@ -1,14 +1,13 @@
 .SuggestionsContainer {
     display: flex;
-    align-items: flex-start;
     flex-direction: column;
+    gap: 8px;
+    align-items: flex-start;
     overflow: auto;
-    height: calc(100vh - 100px);
+    height: calc(100vh - 84px);
     margin-top: 8px;
-    gap: 8px;
     margin-right: 8px;
     border-radius: 16px;
-    color: var(--color);
 }
 
 .SuggestionsContainer::-webkit-scrollbar {
@@ -24,64 +23,65 @@
     position: relative;
     width: 100%;
     margin-bottom: 12px;
+    color: var(--color);
 }
 
 .imageContainer > div {
     position: static;
 }
 
 .imageContainer .image {
+    position: relative !important;
     object-fit: contain;
     width: 100% !important;
-    position: relative !important;
     height: unset !important;
     border-radius: 8px;
 }
 
 .GuideSuggestion {
-    padding: 24px;
+    padding: 12px;
     border-radius: 16px;
     background: hsl(var(--color-h) 72% 97%);
 }
 
 .GuideSuggestionTitle {
-    position: absolute;
+    top: 0;
+    margin: 12px 16px;
     font-weight: 400;
-    margin-bottom: 0.15em;
     font-size: 5vw;
-    top: 0;
-    padding: 0 16px;
+    text-wrap: balance;
 }
 
 .SectionSuggestion {
-    color: var(--color);
-    border-radius: 16px;
     margin-bottom: 12px;
+    border-radius: 16px;
+    color: var(--color);
 }
 
 .SectionSuggestionList {
-    list-style: none;
     padding-left: 0;
+    list-style: none;
 }
 
 .SectionSuggestionTitle {
+    margin: 12px 16px;
     font-weight: 500;
-    font-size: 20px;
-    margin-left: 16px;
+    font-weight: 300;
+    font-size: 18px;
 }
 
 .SuggestItemTarget {
-    font-weight: 500;
+    font-weight: 400;
 }
 
 .SuggestItemLink {
-    font-size: 16px;
+    font-size: 14px;
     text-decoration:none;
 }
 
 .SuggestItemListItem {
-    margin-bottom: 8px;
-    padding: 16px;
+    margin-bottom: 4px;
+    padding: 12px;
     border-radius: 8px;
     background: hsl(var(--color-h) 75% 93%);
     font-weight: 300;

diff --git a/components/TableOfContents/TableOfContents.module.css b/components/TableOfContents/TableOfContents.module.css
@@ -243,7 +243,7 @@ html:has(.open) {
         display: flex;
         flex-direction: column;
         position: fixed;
-        height: calc(100vh - 100px);
+        height: calc(100vh - 84px);
         width: var(--sidebar-width);
         overflow: auto;
         scrollbar-width: none;

diff --git a/styles/variables.css b/styles/variables.css
@@ -36,7 +36,7 @@
 
 @media screen and (min-width: 1200px) {
     :root {
-        --sidebar-width: 350px;
+        --sidebar-width: 340px;
     }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,7 +36,7 @@ @@
     @media screen and (min-width: 1200px) {
         :root {
-            --sidebar-width: 350px;
+            --sidebar-width: 340px;
         }
     }
@@ Expand Down @@