Fix some minor issues in web application (#363)

Signed-off-by: Cintia Sanchez Garcia <[email protected]>
cncf · Nov 23, 2023 · 08fa371 · 08fa371
1 parent d11ef00
commit 08fa371
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 45 deletions.
diff --git a/web/src/layout/common/DownloadDropdown.module.css b/web/src/layout/common/DownloadDropdown.module.css
@@ -4,6 +4,10 @@
   font-size: 1.25rem;
 }
 
+.btn:hover {
+  color: var(--color2);
+}
+
 .dropdown {
   right: -0.75rem;
   top: 2.5rem;

diff --git a/web/src/layout/common/itemModal/MobileContent.module.css b/web/src/layout/common/itemModal/MobileContent.module.css
@@ -20,12 +20,12 @@
 
 .badges {
   font-size: 85%;
-  height: 20px;
+  height: 21px;
 }
 
 .badges :global(.badge) {
   height: 18px;
-  line-height: 18px;
+  line-height: 16px;
   font-size: 10.25px !important;
   padding: 0 0.65rem;
 }

diff --git a/web/src/layout/explore/card/Card.module.css b/web/src/layout/explore/card/Card.module.css
@@ -75,7 +75,7 @@
 }
 
 .extra {
-  height: 22px;
+  height: 24px;
 }
 
 .extra > div {

diff --git a/web/src/layout/explore/card/Menu.tsx b/web/src/layout/explore/card/Menu.tsx
@@ -52,7 +52,7 @@ const Menu = (props: Props) => {
               return (
                 <div>
                   <div
-                    class="text-white border border-3 border-bottom-0 border-white fw-semibold p-2"
+                    class="text-white border border-3 border-bottom-0 border-white fw-semibold p-2 text-truncate"
                     classList={{ 'border-top-0': index() === 0 }}
                     style={{ 'background-color': bgColor }}
                   >

diff --git a/web/src/layout/explore/grid/GridItem.tsx b/web/src/layout/explore/grid/GridItem.tsx
@@ -120,7 +120,7 @@ const GridItem = (props: Props) => {
 
               <Show when={props.item.featured && props.item.featured.label}>
                 <div
-                  class={`text-center text-uppercase text-dark position-absolute start-0 end-0 bottom-0 ${styles.legend}`}
+                  class={`text-center text-uppercase text-dark position-absolute start-0 end-0 bottom-0 text-truncate px-1 ${styles.legend}`}
                   style={props.item.featured ? { 'border-top': `2px solid ${props.borderColor}` } : {}}
                 >
                   {props.item.featured!.label}
@@ -200,7 +200,7 @@ const GridItem = (props: Props) => {
 
             <Show when={props.item.featured && props.item.featured.label}>
               <div
-                class={`text-center text-uppercase text-dark position-absolute start-0 end-0 bottom-0 ${styles.legend}`}
+                class={`text-center text-uppercase text-dark position-absolute start-0 end-0 bottom-0 text-truncate px-1 ${styles.legend}`}
                 style={props.item.featured ? { 'border-top': `2px solid ${props.borderColor}` } : {}}
               >
                 {props.item.featured!.label}

diff --git a/web/src/layout/navigation/Header.module.css b/web/src/layout/navigation/Header.module.css
@@ -39,8 +39,12 @@
   border-color: var(--bs-btn-active-border-color);
 }
 
+.icons {
+  margin-top: -4px;
+}
+
 .githubIcon {
-  margin-top: -0.05rem;
+  margin-top: 2px;
 }
 
 .link:hover:before {
@@ -72,6 +76,10 @@
   font-size: 1.25rem;
 }
 
+.btnLink:hover .githubIcon {
+  color: var(--color2);
+}
+
 @media only screen and (max-width: 1199.98px) {
   .link {
     margin-left: 1.5rem;

diff --git a/web/src/layout/navigation/Header.tsx b/web/src/layout/navigation/Header.tsx
@@ -1,15 +1,15 @@
-import { createScrollPosition } from '@solid-primitives/scroll';
-import { A, useLocation, useNavigate } from '@solidjs/router';
-import isEmpty from 'lodash/isEmpty';
+import { useLocation, useNavigate } from '@solidjs/router';
 import isUndefined from 'lodash/isUndefined';
 import { Show } from 'solid-js';
 
-import { BaseItem, SVGIconKind } from '../../types';
+import { BaseItem, SVGIconKind, ViewMode } from '../../types';
 import scrollToTop from '../../utils/scrollToTop';
 import DownloadDropdown from '../common/DownloadDropdown';
 import ExternalLink from '../common/ExternalLink';
 import Searchbar from '../common/Searchbar';
 import SVGIcon from '../common/SVGIcon';
+import { useSetGroupActive } from '../stores/groupActive';
+import { useSetViewMode } from '../stores/viewMode';
 import styles from './Header.module.css';
 
 interface Props {
@@ -20,25 +20,24 @@ interface Props {
 const Header = (props: Props) => {
   const location = useLocation();
   const navigate = useNavigate();
-  const target = document.getElementById('landscape');
-  const scroll = createScrollPosition(target as Element);
-  const y = () => scroll.y;
+  const setViewMode = useSetViewMode();
+  const setSelectedGroup = useSetGroupActive();
+
+  const isActive = (path: string) => {
+    return path === location.pathname;
+  };
 
   return (
     <header class={`d-none d-lg-flex navbar navbar-expand mb-2 border-bottom shadow-sm top-0 ${styles.navbar}`}>
       <div class="container-fluid d-flex flex-row align-items-center px-3 px-lg-4 mainPadding">
         <div class={`d-flex flex-row justify-content-between align-items-center ${styles.logoWrapper}`}>
           <button
-            class="btn btn-link p-0 me-4 me-xl-5"
+            class="btn btn-link me-4 me-xl-5"
             onClick={() => {
-              if (y() > 0) {
-                scrollToTop(false);
-              } else {
-                navigate('/', {
-                  replace: false,
-                  scroll: false,
-                });
-              }
+              const groups = window.baseDS.groups;
+              setViewMode(ViewMode.Grid);
+              setSelectedGroup(!isUndefined(groups) ? groups[0].name : 'default');
+              navigate('/');
             }}
           >
             <img
@@ -68,42 +67,61 @@ const Header = (props: Props) => {
           }
         >
           <div class="d-flex align-items-center">
-            <A
+            <button
               class={`btn btn-link position-relative text-uppercase fw-bold text-decoration-none p-0 ${styles.link}`}
-              activeClass="activeLink"
-              href="/"
-              state={{ from: 'header' }}
-              end
+              classList={{ activeLink: isActive('/') }}
+              onClick={() => {
+                if (isActive('/')) {
+                  scrollToTop(false);
+                } else {
+                  navigate('/', {
+                    state: { from: 'header' },
+                  });
+                }
+              }}
             >
               Explore
-            </A>
+            </button>
 
-            <Show when={!isUndefined(window.baseDS.guide_summary) && !isEmpty(window.baseDS.guide_summary)}>
-              <A
-                class={`btn btn-link position-relative text-uppercase fw-bold text-decoration-none p-0 ${styles.link}`}
-                href="/guide"
-                activeClass="activeLink"
-                state={{ from: 'header' }}
-              >
-                Guide
-              </A>
-            </Show>
+            <button
+              class={`btn btn-link position-relative text-uppercase fw-bold text-decoration-none p-0 ${styles.link}`}
+              classList={{ activeLink: isActive('/guide') }}
+              onClick={() => {
+                if (isActive('/guide')) {
+                  scrollToTop(false);
+                } else {
+                  navigate('/guide', {
+                    state: { from: 'header' },
+                  });
+                }
+              }}
+            >
+              Guide
+            </button>
 
-            <A
+            <button
               class={`btn btn-link position-relative text-uppercase fw-bold text-decoration-none p-0 ${styles.link}`}
-              activeClass="activeLink"
-              href="/stats"
-              state={{ from: 'header' }}
+              classList={{ activeLink: isActive('/stats') }}
+              onClick={() => {
+                if (isActive('/stats')) {
+                  scrollToTop(false);
+                } else {
+                  navigate('/stats', {
+                    state: { from: 'header' },
+                  });
+                }
+              }}
             >
               Stats
-            </A>
+            </button>
           </div>
 
           <div class={`d-flex flex-row align-items-center ms-auto mt-0 ${styles.searchWrapper}`}>
             <div class="position-relative me-4 w-100">
               <Searchbar items={props.items} searchBarClass={`${styles.searchBar}`} />
             </div>
-            <div class="d-flex align-items-center">
+
+            <div class={`d-flex align-items-center ${styles.icons}`}>
               <DownloadDropdown />
               <ExternalLink
                 class={`btn btn-md text-dark ms-2 ms-xl-3 px-0 ${styles.btnLink}`}