cncf · cynthia-sg · Jan 16, 2024 · Jan 16, 2024
diff --git a/web/package.json b/web/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "build": "tsc && vite build",
-    "dev": "vite",
+    "dev": "vite --host",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "format:diff": "prettier --list-different \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

diff --git a/web/src/App.css b/web/src/App.css
@@ -93,7 +93,8 @@ a,
 
   .noScroll-sidebar,
   .noScroll-modal,
-  .noScroll-loading {
+  .noScroll-loading,
+  .noScroll-dropdown {
     height: 100%;
     overflow: hidden;
     overflow-y: hidden !important;
@@ -117,7 +118,8 @@ a,
 
   .noScroll-sidebar #landscape,
   .noScroll-modal #landscape,
-  .noScroll-loading #landscape {
+  .noScroll-loading #landscape,
+  .noScroll-dropdown #landscape {
     height: 100%;
     overflow: hidden;
     overflow-y: hidden !important;

diff --git a/web/src/layout/common/SVGIcon.tsx b/web/src/layout/common/SVGIcon.tsx
@@ -780,12 +780,12 @@ const Twitter = (props: IconProps) => (
     stroke="currentColor"
     fill="currentColor"
     stroke-width="0"
-    viewBox="0 0 16 16"
+    viewBox="0 0 512 512"
     height="1em"
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
+    <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
   </svg>
 );
 

diff --git a/web/src/layout/common/Searchbar.tsx b/web/src/layout/common/Searchbar.tsx
@@ -157,7 +157,7 @@ const Searchbar = (props: Props) => {
   const scrollToHighlightedItem = (index: number) => {
     const element = document.getElementById(`sl-opt${index}`);
     if (element && !isUndefined(dropdownRef())) {
-      element.scrollIntoView(false);
+      element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
     }
   };
 

diff --git a/web/src/layout/common/Sidebar.tsx b/web/src/layout/common/Sidebar.tsx
@@ -26,7 +26,7 @@ export interface Props {
 const DEFAULT_DIRECTION = 'left';
 
 export const Sidebar = (props: Props) => {
-  const open = () => props.open;
+  const open = () => props.open || false;
   const [openStatus, setOpenStatus] = createSignal<boolean>(false);
   const direction = () => props.direction || DEFAULT_DIRECTION;
   const [ref, setRef] = createSignal<HTMLDivElement>();
@@ -42,9 +42,7 @@ export const Sidebar = (props: Props) => {
 
   createEffect(
     on(open, () => {
-      if (!isUndefined(open())) {
-        setOpenStatus(open()!);
-      }
+      setOpenStatus(open());
     })
   );
 

diff --git a/web/src/layout/common/itemModal/AcquisitionsTable.module.css b/web/src/layout/common/itemModal/AcquisitionsTable.module.css
@@ -11,7 +11,7 @@
 }
 
 .tableContent td {
-  font-size: 0.9rem;
+  font-size: 0.8rem;
   line-height: 2;
 }
 
@@ -35,7 +35,7 @@
   }
 
   .tableContent td {
-    font-size: 0.75rem;
+    font-size: 0.7rem;
     line-height: 1.5;
   }
 

diff --git a/web/src/layout/common/itemModal/Content.module.css b/web/src/layout/common/itemModal/Content.module.css
@@ -123,7 +123,7 @@
 }
 
 .tableContent td {
-  font-size: 0.9rem;
+  font-size: 0.8rem;
   line-height: 2;
 }
 

diff --git a/web/src/layout/common/itemModal/Content.tsx b/web/src/layout/common/itemModal/Content.tsx
@@ -163,7 +163,7 @@ const Content = (props: Props) => {
                   </Show>
 
                   <Show when={!isUndefined(itemInfo()!.twitter_url)}>
-                    <ExternalLink title="Twitter" class={`ms-3 ${styles.link}`} href={itemInfo()!.twitter_url!}>
+                    <ExternalLink title="X (Twitter)" class={`ms-3 ${styles.link}`} href={itemInfo()!.twitter_url!}>
                       <SVGIcon kind={SVGIconKind.Twitter} />
                     </ExternalLink>
                   </Show>

diff --git a/web/src/layout/common/itemModal/FundingRoundsTable.module.css b/web/src/layout/common/itemModal/FundingRoundsTable.module.css
@@ -11,7 +11,7 @@
 }
 
 .tableContent td {
-  font-size: 0.9rem;
+  font-size: 0.8rem;
   line-height: 2;
 }
 
@@ -35,7 +35,7 @@
   }
 
   .tableContent td {
-    font-size: 0.75rem;
+    font-size: 0.7rem;
     line-height: 1.5;
   }
 

diff --git a/web/src/layout/common/itemModal/ItemModal.module.css b/web/src/layout/common/itemModal/ItemModal.module.css
@@ -133,7 +133,7 @@
 }
 
 .tableContent td {
-  font-size: 0.9rem;
+  font-size: 0.8rem;
   line-height: 2;
 }
 

diff --git a/web/src/layout/common/itemModal/MobileContent.module.css b/web/src/layout/common/itemModal/MobileContent.module.css
@@ -158,7 +158,7 @@
 }
 
 .tableContent td {
-  font-size: 0.9rem;
+  font-size: 0.7rem;
   line-height: 2;
 }
 

diff --git a/web/src/layout/common/itemModal/MobileContent.tsx b/web/src/layout/common/itemModal/MobileContent.tsx
@@ -116,7 +116,7 @@ const MobileContent = (props: Props) => {
                 </Show>
 
                 <Show when={!isUndefined(itemInfo()!.twitter_url)}>
-                  <ExternalLink title="Twitter" class={`me-2 ${styles.link}`} href={itemInfo()!.twitter_url!}>
+                  <ExternalLink title="X (Twitter)" class={`me-2 ${styles.link}`} href={itemInfo()!.twitter_url!}>
                     <SVGIcon kind={SVGIconKind.Twitter} />
                   </ExternalLink>
                 </Show>

diff --git a/web/src/layout/explore/card/Card.tsx b/web/src/layout/explore/card/Card.tsx
@@ -122,7 +122,7 @@ const Card = (props: Props) => {
             </Show>
 
             <Show when={!isUndefined(props.item.twitter_url)}>
-              <ExternalLink title="Twitter" class={`me-2 ${styles.link}`} href={props.item.twitter_url!}>
+              <ExternalLink title="X (Twitter)" class={`me-2 ${styles.link}`} href={props.item.twitter_url!}>
                 <SVGIcon kind={SVGIconKind.Twitter} />
               </ExternalLink>
             </Show>

diff --git a/web/src/layout/explore/card/Content.module.css b/web/src/layout/explore/card/Content.module.css
@@ -46,4 +46,11 @@
 .btnIcon {
   line-height: 0.8rem;
   margin-top: -2px;
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .btnIcon:hover {
+    opacity: 0.8;
+  }
 }
diff --git a/web/src/layout/explore/card/Menu.tsx b/web/src/layout/explore/card/Menu.tsx
@@ -81,10 +81,10 @@ const Menu = (props: Props) => {
                             onClick={() => {
                               // When menu sticky, we need to check #landscape
                               goToElement(!props.sticky, `card_${hash}`, 16);
-                              updateRoute(hash);
                               if (!isUndefined(props.onClickOption)) {
                                 props.onClickOption();
                               }
+                              updateRoute(hash);
                             }}
                           >
                             <Show when={`#${hash}` === location.hash}>

diff --git a/web/src/layout/explore/grid/Grid.module.css b/web/src/layout/explore/grid/Grid.module.css
@@ -20,3 +20,9 @@
   grid-auto-rows: var(--card-size-height);
   gap: var(--card-gap);
 }
+
+@media (hover: hover) {
+  .btnIcon:hover {
+    opacity: 0.8;
+  }
+}
diff --git a/web/src/layout/explore/grid/GridCategory.module.css b/web/src/layout/explore/grid/GridCategory.module.css
@@ -12,17 +12,6 @@
   max-height: 130px;
 }
 
-.btnIcon {
-  font-size: 0.9rem;
-  line-height: 0.8rem;
-}
-
-.btnInCatTitle {
-  transform: rotate(180deg);
-  line-height: 1.25rem;
-  margin-right: -0.25rem;
-}
-
 .icon {
   margin-top: -2px;
   font-size: 0.9rem;

diff --git a/web/src/layout/explore/mobile/Card.tsx b/web/src/layout/explore/mobile/Card.tsx
@@ -104,7 +104,7 @@ const Card = (props: Props) => {
             </Show>
 
             <Show when={!isUndefined(props.item.twitter_url)}>
-              <ExternalLink title="Twitter" class={`me-2 ${styles.link}`} href={props.item.twitter_url!}>
+              <ExternalLink title="X (Twitter)" class={`me-2 ${styles.link}`} href={props.item.twitter_url!}>
                 <SVGIcon kind={SVGIconKind.Twitter} />
               </ExternalLink>
             </Show>

diff --git a/web/src/layout/finances/Finances.module.css b/web/src/layout/finances/Finances.module.css
@@ -55,7 +55,7 @@
   }
 
   .tableContent td {
-    font-size: 0.75rem;
+    font-size: 0.7rem;
     line-height: 1.5;
   }
 }

diff --git a/web/src/layout/guide/ToC.tsx b/web/src/layout/guide/ToC.tsx
@@ -10,14 +10,12 @@ interface Props {
   sticky: boolean;
   activeTitle?: string;
   updateActiveTitle: (activeTitle: string) => void;
-  onClickOption?: () => void;
 }
 
 interface OptionProps {
   option: ToCTitle;
   level: number;
   updateActiveTitle: (activeTitle: string) => void;
-  onClickOption?: () => void;
 }
 
 const ToCOption = (props: OptionProps) => {
@@ -36,9 +34,6 @@ const ToCOption = (props: OptionProps) => {
         }}
         onClick={() => {
           props.updateActiveTitle(props.option.id);
-          if (!isUndefined(props.onClickOption)) {
-            props.onClickOption();
-          }
         }}
       >
         {props.option.title}
@@ -47,14 +42,7 @@ const ToCOption = (props: OptionProps) => {
         <div class="mb-3">
           <For each={props.option.options}>
             {(el: ToCTitle) => {
-              return (
-                <ToCOption
-                  option={el}
-                  level={props.level + 1}
-                  updateActiveTitle={props.updateActiveTitle}
-                  onClickOption={props.onClickOption}
-                />
-              );
+              return <ToCOption option={el} level={props.level + 1} updateActiveTitle={props.updateActiveTitle} />;
             }}
           </For>
         </div>
@@ -76,14 +64,7 @@ const ToC = (props: Props) => {
         <div id="menu" class={`overflow-auto py-3 ${styles.content}`}>
           <For each={props.toc}>
             {(el: ToCTitle) => {
-              return (
-                <ToCOption
-                  option={el}
-                  level={0}
-                  updateActiveTitle={props.updateActiveTitle}
-                  onClickOption={props.onClickOption}
-                />
-              );
+              return <ToCOption option={el} level={0} updateActiveTitle={props.updateActiveTitle} />;
             }}
           </For>
         </div>

diff --git a/web/src/layout/guide/index.tsx b/web/src/layout/guide/index.tsx
@@ -148,6 +148,9 @@ const GuideIndex = () => {
 
   const updateActiveTitle = (title: string, onLoad?: boolean) => {
     updateRoute(title);
+    if (onSmallDevice) {
+      onCloseMenu();
+    }
     if (title === firstItem()) {
       scrollToTop(onSmallDevice);
     } else {
@@ -186,7 +189,7 @@ const GuideIndex = () => {
           >
             <div class="position-relative">
               <Show when={!isUndefined(guide())} fallback={<Loading />}>
-                <ToC toc={toc()} updateActiveTitle={updateActiveTitle} sticky={false} onClickOption={onCloseMenu} />
+                <ToC toc={toc()} updateActiveTitle={updateActiveTitle} sticky={false} />
               </Show>
             </div>
           </Sidebar>

diff --git a/web/src/layout/navigation/Header.tsx b/web/src/layout/navigation/Header.tsx
@@ -76,6 +76,7 @@ const Header = () => {
                   navigate('/', {
                     state: { from: 'header' },
                   });
+                  scrollToTop(false);
                 }
               }}
             >
@@ -93,6 +94,7 @@ const Header = () => {
                     navigate('/guide', {
                       state: { from: 'header' },
                     });
+                    scrollToTop(false);
                   }
                 }}
               >
@@ -110,6 +112,7 @@ const Header = () => {
                   navigate('/stats', {
                     state: { from: 'header' },
                   });
+                  scrollToTop(false);
                 }
               }}
             >