Fix some issues in mobile devices (#612)

Signed-off-by: Cintia Sanchez Garcia <[email protected]>
cncf · May 3, 2024 · e4115ea · e4115ea
1 parent 53a81ec
commit e4115ea
Show file tree

Hide file tree

Showing 26 changed files with 139 additions and 84 deletions.
diff --git a/ui/webapp/src/App.css b/ui/webapp/src/App.css
@@ -1,17 +1,11 @@
-html,
-body {
-  height: 100%;
-  height: 100vh;
-  margin: 0;
-  padding: 0;
-}
-
 :root {
+  --app-height: 100%;
   --card-size-width: 50px;
   --card-size-height: 45px;
   --card-gap: 5px;
   --mobile-card-size-width: 50px;
   --mobile-card-size-height: 50px;
+
   --color1: rgba(0, 107, 204, 1);
   --color2: rgba(255, 0, 170, 1);
   --color3: rgba(96, 149, 214, 1);
@@ -20,6 +14,15 @@ body {
   --color6: rgba(80, 142, 191, 0.7);
 }
 
+html,
+body {
+  height: 100vh;
+  height: 100%;
+  height: var(--app-height);
+  margin: 0;
+  padding: 0;
+}
+
 button:focus,
 a:focus,
 input:not([type='color']):not(.withShadow):focus,
@@ -86,8 +89,9 @@ a,
   }
 
   body {
-    min-height: 100%;
     min-height: 100vh;
+    min-height: 100%;
+    min-height: var(--app-height);
     overflow: auto;
   }
 
@@ -107,8 +111,9 @@ a,
 
 @media only screen and (min-width: 992px) {
   #landscape {
-    height: 100%;
     height: 100vh;
+    height: 100%;
+    height: var(--app-height);
   }
 
   /* Lazy loading for images are not working properly on body - desktop */

diff --git a/ui/webapp/src/App.tsx b/ui/webapp/src/App.tsx
@@ -1,3 +1,4 @@
+import { createWindowSize } from '@solid-primitives/resize-observer';
 import { Route, Router } from '@solidjs/router';
 import isUndefined from 'lodash/isUndefined';
 import range from 'lodash/range';
@@ -41,6 +42,8 @@ const App = () => {
   const [data, setData] = createSignal<BaseData>();
   const [loadingOverlay, setLoadingOverlay] = createSignal<boolean>(false);
   const [error, setError] = createSignal<string | undefined>();
+  const size = createWindowSize();
+  const height = () => size.height;
 
   async function fetchOverlayData() {
     try {
@@ -57,6 +60,10 @@ const App = () => {
     setLoadingOverlay(false);
   }
 
+  const updateAppHeight = () => {
+    document.documentElement.style.setProperty('--app-height', `${window.innerHeight}px`);
+  };
+
   const loadColors = () => {
     if (!isUndefined(window.baseDS) && !isUndefined(window.baseDS.colors)) {
       if (!isUndefined(window.baseDS.colors?.color1)) {
@@ -100,6 +107,8 @@ const App = () => {
     })
   );
 
+  createEffect(on(height, updateAppHeight));
+
   onMount(() => {
     const isOverlayActive = overlayData.checkIfOverlayInQuery();
     if (!isOverlayActive) {
@@ -110,6 +119,7 @@ const App = () => {
     }
 
     batch(() => {
+      updateAppHeight();
       setIsOverlay(isOverlayActive);
       loadColors();
     });

diff --git a/ui/webapp/src/layout/Layout.module.css b/ui/webapp/src/layout/Layout.module.css
@@ -1,5 +1,7 @@
 .container {
   min-height: 100vh;
+  min-height: 100%;
+  min-height: var(--app-height);
 }
 
 :global(.overlay-active) .container {

diff --git a/ui/webapp/src/layout/common/itemModal/MobileContent.tsx b/ui/webapp/src/layout/common/itemModal/MobileContent.tsx
@@ -129,11 +129,13 @@ const MobileContent = (props: Props) => {
         {/* Additional categories */}
         <Show when={!isUndefined(itemInfo()!.additional_categories) && !isEmpty(itemInfo()!.additional_categories)}>
           <div class={`fw-bold text-uppercase my-3 ${styles.titleInSection}`}>Additional categories</div>
-          <div class="d-flex flex-column align-items-start mb-1">
+          <div class="d-flex flex-column flex-sm-row align-items-start mb-1">
             <For each={itemInfo()!.additional_categories}>
               {(additional: AdditionalCategory) => {
                 return (
-                  <div class={`badge border rounded-0 text-truncate mb-2 mw-100 ${styles.badgeOutlineDark}`}>
+                  <div
+                    class={`badge border rounded-0 text-truncate mb-2 me-2 me-sm-2 mw-100 ${styles.badgeOutlineDark}`}
+                  >
                     {additional.category} / {additional.subcategory}
                   </div>
                 );

diff --git a/ui/webapp/src/layout/common/itemModal/ParticipationStats.tsx b/ui/webapp/src/layout/common/itemModal/ParticipationStats.tsx
@@ -36,9 +36,7 @@ const ParticipationStats = (props: Props) => {
             <Show
               when={!isAllZero()}
               fallback={
-                <div
-                  class={`alert alert-primary text-muted mx-auto mb-4 px-5 py-2 text-center border ${styles.message}`}
-                >
+                <div class={`alert rounded-0 text-muted mx-auto mb-4 px-5 py-2 text-center border ${styles.message}`}>
                   No activity in the last year
                 </div>
               }

diff --git a/ui/webapp/src/layout/explore/Explore.module.css b/ui/webapp/src/layout/explore/Explore.module.css
@@ -42,7 +42,7 @@
 }
 
 .loadingContent {
-  min-height: calc(100vh - 92px - 36px);
+  min-height: calc(var(--app-height) - 92px - 36px);
 }
 
 .mobileMenuBtn {

diff --git a/ui/webapp/src/layout/explore/card/Content.module.css b/ui/webapp/src/layout/explore/card/Content.module.css
@@ -3,6 +3,10 @@
   min-width: 0;
 }
 
+.section {
+  scroll-margin: 5.5rem;
+}
+
 .categoryTitle {
   max-width: 50%;
 }
@@ -31,7 +35,10 @@
 }
 
 .card :global(.badge:not(.tagBadge)) {
-  font-size: 65%;
+  font-size: 0.6rem;
+  border: 1px solid transparent;
+  line-height: 1;
+  height: 18px;
 }
 
 .card :global(.accepted-date) {

diff --git a/ui/webapp/src/layout/explore/card/Content.tsx b/ui/webapp/src/layout/explore/card/Content.tsx
@@ -128,7 +128,7 @@ const Content = (props: Props) => {
                           const id = getNormalizedName({ title: title, subtitle: subtitle, grouped: true });
 
                           return (
-                            <div id={`card_${id}`} class="mb-3">
+                            <div id={`card_${id}`} class={`mb-3 ${styles.section}`}>
                               <div class={`d-flex flex-row fw-semibold mb-4 ${styles.title}`}>
                                 <div
                                   class={`d-flex flex-row align-items-center p-2 ${styles.categoryTitle}`}
@@ -180,7 +180,7 @@ const Content = (props: Props) => {
                       </For>
                     </Match>
                     <Match when={Array.isArray(content())}>
-                      <div id={`card_${props.classify}--${title}`} class="mb-3">
+                      <div id={`card_${props.classify}--${title}`} class={`mb-3 ${styles.section}`}>
                         <div class={`d-flex flex-row fw-semibold mb-4 ${styles.title}`}>
                           <div class={`d-flex flex-row flex-grow-1 align-items-center p-2 ${styles.subcategoryTitle}`}>
                             <div class="flex-grow-1 text-truncate text-capitalize">

diff --git a/ui/webapp/src/layout/explore/card/Menu.module.css b/ui/webapp/src/layout/explore/card/Menu.module.css
@@ -8,10 +8,12 @@
   min-width: 270px;
   top: 5.5rem;
   bottom: 1rem;
-  max-height: calc(100vh - 6.5rem);
+  max-height: calc(var(--app-height) - 6.5rem);
 }
 
 .content {
+  overflow-y: auto;
+  max-height: 100%;
   overscroll-behavior: contain;
 }
 

diff --git a/ui/webapp/src/layout/explore/card/Menu.tsx b/ui/webapp/src/layout/explore/card/Menu.tsx
@@ -79,8 +79,7 @@ const Menu = (props: Props) => {
                             }}
                             disabled={`#${hash}` === location.hash}
                             onClick={() => {
-                              // When menu sticky, we need to check #landscape
-                              goToElement(!props.sticky, `card_${hash}`, 16);
+                              goToElement(`card_${hash}`);
                               if (!isUndefined(props.onClickOption)) {
                                 props.onClickOption();
                               }

diff --git a/ui/webapp/src/layout/explore/card/index.tsx b/ui/webapp/src/layout/explore/card/index.tsx
@@ -25,8 +25,6 @@ interface Props {
   menu?: CardMenu;
 }
 
-const TITLE_OFFSET = 16;
-
 const CardCategory = (props: Props) => {
   const location = useLocation();
   const [firstLoad, setFirstLoad] = createSignal<boolean>(false);
@@ -81,7 +79,7 @@ const CardCategory = (props: Props) => {
             }
           }
           setTimeout(() => {
-            goToElement(false, `card_${cleanHash}`, TITLE_OFFSET);
+            goToElement(`card_${cleanHash}`);
           }, 100);
         }
       }

diff --git a/ui/webapp/src/layout/explore/grid/Grid.tsx b/ui/webapp/src/layout/explore/grid/Grid.tsx
@@ -49,7 +49,7 @@ export const ItemsList = (props: ItemsListProps) => {
   const [items, setItems] = createSignal<(BaseItem | Item)[]>();
   const [itemsPerRow, setItemsPerRow] = createSignal<number>(0);
 
-  createEffect(() => {
+  const updateItemsPerRow = () => {
     setItemsPerRow(
       calculateGridItemsPerRow(
         percentage(),
@@ -58,21 +58,43 @@ export const ItemsList = (props: ItemsListProps) => {
         !isUndefined(props.itemWidth)
       )
     );
-  });
+  };
 
-  createEffect(
-    on(itemsPerRow, () => {
-      setItems((prev) => {
-        const tmpItems: (BaseItem | Item)[] = [];
+  const prepareItems = () => {
+    setItems((prev) => {
+      const tmpItems: (BaseItem | Item)[] = [];
 
-        for (const item of new ItemIterator(initialItems(), itemsPerRow() <= 0 ? MIN_COLUMN_ITEMS : itemsPerRow())) {
-          if (item) {
-            tmpItems.push(item);
-          }
+      for (const item of new ItemIterator(initialItems(), itemsPerRow() <= 0 ? MIN_COLUMN_ITEMS : itemsPerRow())) {
+        if (item) {
+          tmpItems.push(item);
         }
+      }
 
-        return !isEqual(tmpItems, prev) ? tmpItems : prev;
-      });
+      return !isEqual(tmpItems, prev) ? tmpItems : prev;
+    });
+  };
+
+  createEffect(() => {
+    const newItemsPerRow = calculateGridItemsPerRow(
+      percentage(),
+      gridWidth(),
+      props.itemWidth || ZOOM_LEVELS[zoom()][0],
+      !isUndefined(props.itemWidth)
+    );
+    if (newItemsPerRow !== itemsPerRow()) {
+      setItemsPerRow(newItemsPerRow);
+    } else {
+      if (!isUndefined(items()) && initialItems().length !== items()!.length) {
+        prepareItems();
+      }
+    }
+  });
+
+  createEffect(on(initialItems, () => updateItemsPerRow()));
+
+  createEffect(
+    on(itemsPerRow, () => {
+      prepareItems();
     })
   );
 

diff --git a/ui/webapp/src/layout/explore/grid/GridCategory.module.css b/ui/webapp/src/layout/explore/grid/GridCategory.module.css
@@ -39,5 +39,5 @@
 }
 
 .loading {
-  min-height: calc(100vh - 92px - 36px);
+  min-height: calc(var(--app-height) - 92px - 36px);
 }
diff --git a/ui/webapp/src/layout/explore/grid/GridItem.tsx b/ui/webapp/src/layout/explore/grid/GridItem.tsx
@@ -3,6 +3,7 @@ import { createEffect, createSignal, on, onCleanup, Show } from 'solid-js';
 
 import { BaseItem, Item } from '../../../types';
 import getItemDescription from '../../../utils/getItemDescription';
+import isTouchDevice from '../../../utils/isTouchDevice';
 import itemsDataGetter from '../../../utils/itemsDataGetter';
 import Image from '../../common/Image';
 import Loading from '../../common/Loading';
@@ -41,6 +42,9 @@ const GridItem = (props: Props) => {
   const description = () => getItemDescription(props.item);
   const containerWidth = () => (!isUndefined(props.container) ? props.container.clientWidth : window.innerWidth);
   const containerHeight = () => (!isUndefined(props.container) ? props.container.clientHeight : window.innerHeight);
+  const touchDevice = () => isTouchDevice();
+  // Only show dropdown on hover if it's not a touch device and activeDropdown prop is true
+  const activeDropdown = () => (touchDevice() ? false : props.activeDropdown);
 
   createEffect(
     on(fullDataReady, () => {
@@ -113,7 +117,7 @@ const GridItem = (props: Props) => {
 
   return (
     <Show
-      when={props.activeDropdown}
+      when={activeDropdown()}
       fallback={
         <div
           style={props.item.featured && props.item.featured.label ? { border: `2px solid ${props.borderColor}` } : {}}

diff --git a/ui/webapp/src/layout/explore/index.tsx b/ui/webapp/src/layout/explore/index.tsx
@@ -448,6 +448,8 @@ const Explore = (props: Props) => {
           });
         }
       }
+      // Check if select for groups has to be visible
+      checkContainerWidth();
     })
   );
 
@@ -504,7 +506,7 @@ const Explore = (props: Props) => {
     }, DELAY_ACTIONS);
   };
 
-  const handler = () => {
+  const checkContainerWidth = () => {
     if (!isUndefined(containerRef())) {
       const gap = !isUndefined(point()) && SMALL_DEVICES_BREAKPOINTS.includes(point()!) ? 0 : TITLE_GAP;
       const width = containerRef()!.offsetWidth - gap;
@@ -555,18 +557,18 @@ const Explore = (props: Props) => {
     window.addEventListener(
       'resize',
       // eslint-disable-next-line solid/reactivity
-      throttle(() => handler(), 400),
+      throttle(() => checkContainerWidth(), 400),
       { passive: true }
     );
-    handler();
+    checkContainerWidth();
 
     if (fullDataReady()) {
       fetchItems();
     }
   });
 
   onCleanup(() => {
-    window.removeEventListener('resize', handler);
+    window.removeEventListener('resize', checkContainerWidth);
   });
 
   return (
@@ -579,7 +581,7 @@ const Explore = (props: Props) => {
                 title="Index"
                 class={`position-relative btn btn-sm btn-secondary text-white btn-sm rounded-0 py-0 me-1 me-lg-4 btnIconMobile ${styles.mobileToCBtn}`}
                 onClick={() => setOpenMenuStatus(true)}
-                disabled={numVisibleItems() === 0}
+                disabled={numVisibleItems() === 0 || classify() === ClassifyOption.None}
               >
                 <SVGIcon kind={SVGIconKind.ToC} />
               </button>

diff --git a/ui/webapp/src/layout/explore/mobile/ExploreMobileIndex.module.css b/ui/webapp/src/layout/explore/mobile/ExploreMobileIndex.module.css
@@ -3,6 +3,10 @@
   min-width: 0;
 }
 
+.section {
+  scroll-margin: 4rem;
+}
+
 .catTitle {
   background-color: var(--bs-gray-100);
 }