Some improvements in web app for mobile devices (#328)

Signed-off-by: Cintia Sanchez Garcia <[email protected]>
cncf · Nov 2, 2023 · 54acf54 · 54acf54
1 parent ff64191
commit 54acf54
Show file tree

Hide file tree

Showing 21 changed files with 380 additions and 285 deletions.
diff --git a/web/src/layout/common/DownloadDropdown.tsx b/web/src/layout/common/DownloadDropdown.tsx
@@ -127,7 +127,7 @@ const DownloadDropdown = () => {
                   <Show
                     when={
                       !isUndefined(downloadingFile()) &&
-                      downloadingFile()!.doc === DocType.Items &&
+                      downloadingFile()!.doc === DocType.Landscape &&
                       downloadingFile()!.format === Format.PDF
                     }
                   >
@@ -137,6 +137,7 @@ const DownloadDropdown = () => {
                       </div>
                     </div>
                   </Show>
+
                   <SVGIcon class={styles.icon} kind={SVGIconKind.PDF} />
                 </div>
                 <div class={styles.contentBtn}>

diff --git a/web/src/layout/common/Modal.tsx b/web/src/layout/common/Modal.tsx
@@ -55,7 +55,7 @@ const Modal = (props: Props) => {
           <div class={`modal-content rounded-0 border border-2 mx-auto position-relative ${styles.content}`}>
             <Show when={props.header}>
               <div class={`modal-header rounded-0 d-flex flex-row align-items-center ${styles.header}`}>
-                <div class={`modal-title h5 flex-grow-1 ${styles.headerContent}`}>{props.header}</div>
+                <div class={`modal-title h5 m-0 m-lg-2 flex-grow-1 ${styles.headerContent}`}>{props.header}</div>
 
                 <button
                   type="button"

diff --git a/web/src/layout/common/Searchbar.tsx b/web/src/layout/common/Searchbar.tsx
@@ -212,21 +212,16 @@ const Searchbar = (props: Props) => {
             class={`btn btn-link text-muted lh-1 px-2 ${styles.btnIcon}`}
             onClick={cleanSearchValue}
           >
-            <SVGIcon kind={SVGIconKind.Clear} />
+            <div class={styles.btnIcon}>
+              <SVGIcon kind={SVGIconKind.Clear} />
+            </div>
           </button>
           <div class={`vr ${styles.vr}`} />
         </Show>
 
-        <button
-          title="Search text"
-          aria-label="Search text"
-          class={`btn btn-link lh-1 px-2 ${styles.btnIcon}`}
-          onClick={search}
-        >
-          <div class={`${styles.iconWrapper}`}>
-            <SVGIcon kind={SVGIconKind.Search} />
-          </div>
-        </button>
+        <div class={`px-2 py-1 ${styles.btnIcon} ${styles.iconWrapper}`}>
+          <SVGIcon kind={SVGIconKind.Search} />
+        </div>
       </div>
 
       <Show when={visibleDropdown() && !isNull(itemsList())}>

diff --git a/web/src/layout/common/Sidebar.module.css b/web/src/layout/common/Sidebar.module.css
@@ -27,8 +27,14 @@
   transform: none;
 }
 
+.header {
+  font-size: 0.9rem;
+}
+
 .closeBtn {
   font-size: 0.75rem;
+  padding-right: 0;
+  padding-left: 0.5em;
 }
 
 .activeBackdrop {

diff --git a/web/src/layout/common/Sidebar.tsx b/web/src/layout/common/Sidebar.tsx
@@ -81,14 +81,14 @@ export const Sidebar = (props: Props) => {
         classList={{ [styles.active]: openStatus() }}
       >
         <div class="d-flex flex-column h-100">
-          <div class="border-bottom p-4 pb-3">
+          <div class="border-bottom p-3">
             <div class="d-flex align-items-center justify-content-between">
-              <div class="text-primary fw-bold">{props.header}</div>
+              <div class={`text-primary fw-semibold text-truncate ${styles.header}`}>{props.header}</div>
 
               <div>
                 <button
                   type="button"
-                  class={`btn-close ${styles.closeBtn}`}
+                  class={`btn-close ms-3 ${styles.closeBtn}`}
                   onClick={() => openStatusChange(false)}
                   aria-label="Close sidebar"
                 />

diff --git a/web/src/layout/common/itemModal/Box.module.css b/web/src/layout/common/itemModal/Box.module.css
@@ -30,6 +30,7 @@
 @media only screen and (max-width: 767.98px) {
   .highlightedTitle {
     font-size: 1.25rem;
+    line-height: 2.5rem;
   }
 
   .highlightedLegend {

diff --git a/web/src/layout/common/itemModal/MobileContent.module.css b/web/src/layout/common/itemModal/MobileContent.module.css
@@ -23,6 +23,13 @@
   height: 22px;
 }
 
+.badges :global(.badge) {
+  height: 18px;
+  line-height: 18px;
+  font-size: 10.25px !important;
+  padding: 0 0.65rem;
+}
+
 .link {
   position: relative;
   color: inherit;
@@ -190,3 +197,7 @@
 .text {
   font-size: 0.9rem;
 }
+
+.clomonitorReport {
+  max-width: 100%;
+}
diff --git a/web/src/layout/common/itemModal/MobileContent.tsx b/web/src/layout/common/itemModal/MobileContent.tsx
@@ -20,8 +20,8 @@ import MaturityBadge from '../MaturityBadge';
 import SVGIcon from '../SVGIcon';
 import Box from './Box';
 import LanguagesStats from './LanguagesStats';
-// import MaturitySection from './MaturitySection';
 import styles from './MobileContent.module.css';
+import MobileMaturitySection from './MobileMaturitySection';
 import ParticipationStats from './ParticipationStats';
 
 interface Props {
@@ -122,6 +122,7 @@ const MobileContent = (props: Props) => {
             </div>
           </div>
         </div>
+
         {/* Description */}
         <div class={`mt-4 mb-3 text-muted ${styles.description}`}>{description()}</div>
         <div class={`mb-2 ${styles.section}`}>
@@ -134,9 +135,10 @@ const MobileContent = (props: Props) => {
             {itemInfo()!.subcategory}
           </div>
         </div>
+
         {/* Maturity */}
-        {/* <div class={`text-uppercase mt-3 fw-semibold border-bottom ${styles.sectionTitle}`}>Repositories</div>
-        <MaturitySection item={itemInfo()!} class={styles.fieldset} /> */}
+        <MobileMaturitySection item={itemInfo()!} titleClass={styles.sectionTitle} />
+
         {/* Repositories */}
         <Show when={!isUndefined(itemInfo()!.repositories)}>
           <div class={`text-uppercase mt-3 fw-semibold border-bottom ${styles.sectionTitle}`}>Repositories</div>
@@ -424,6 +426,26 @@ const MobileContent = (props: Props) => {
             </Show>
           </div>
         </Show>
+
+        {/* CLOMonitor */}
+        <Show when={!isUndefined(itemInfo()!.clomonitor_name)}>
+          <div class={`text-uppercase mt-3 fw-semibold border-bottom ${styles.sectionTitle}`}>
+            CLOMonitor report summary
+          </div>
+
+          <div class="my-2 d-flex justify-content-center w-100 align-items-center">
+            <ExternalLink
+              href={`https://clomonitor.io/projects/${window.baseDS.foundation.toLowerCase()}/${itemInfo()!
+                .clomonitor_name!}`}
+            >
+              <Image
+                name={`CLOMonitor report summary for ${itemInfo()!.name}`}
+                logo={itemInfo()!.clomonitor_report_summary!}
+                class={styles.clomonitorReport}
+              />
+            </ExternalLink>
+          </div>
+        </Show>
       </div>
     </Show>
   );

diff --git a/web/src/layout/common/itemModal/MobileMaturitySection.module.css b/web/src/layout/common/itemModal/MobileMaturitySection.module.css
@@ -0,0 +1,45 @@
+.maturityBadge {
+  width: 80px;
+  font-size: 0.65rem;
+  line-height: 1rem;
+  background-color: var(--bs-gray-500);
+}
+
+.activeMaturityBadge {
+  position: relative;
+  background-color: var(--color-stats-1);
+}
+
+.statusLegend {
+  font-size: 0.6rem;
+}
+
+.line::after {
+  position: absolute;
+  content: '';
+  top: 0.7rem;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background-color: var(--color-stats-1);
+  z-index: -1;
+}
+
+.line::before {
+  position: absolute;
+  content: '';
+  top: 0.7rem;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background-color: var(--bs-gray-200);
+  z-index: -1;
+}
+
+:global(.incubatingLine)::after {
+  right: 50%;
+}
+
+:global(.sandboxLine)::after {
+  display: none;
+}
diff --git a/web/src/layout/common/itemModal/MobileMaturitySection.tsx b/web/src/layout/common/itemModal/MobileMaturitySection.tsx
@@ -0,0 +1,70 @@
+import isUndefined from 'lodash/isUndefined';
+import { Show } from 'solid-js';
+
+import { Item } from '../../../types';
+import styles from './MobileMaturitySection.module.css';
+
+interface Props {
+  item: Item;
+  titleClass: string;
+}
+
+const MobileMaturitySection = (props: Props) => {
+  return (
+    <Show
+      when={
+        !isUndefined(props.item.maturity) ||
+        !isUndefined(props.item.accepted_at) ||
+        !isUndefined(props.item.incubating_at) ||
+        !isUndefined(props.item.graduated_at)
+      }
+    >
+      <div class={`text-uppercase mt-3 fw-semibold border-bottom ${props.titleClass}`}>Maturity</div>
+
+      <div class="position-relative my-2">
+        <div class="d-flex flex-row justify-content-between">
+          <div class="d-flex flex-column align-items-center">
+            <div class={`badge rounded-0 ${styles.maturityBadge} ${styles.activeMaturityBadge}`}>
+              <Show when={props.item.accepted_at} fallback={'-'}>
+                <>
+                  {props.item.accepted_at === props.item.incubating_at ||
+                  props.item.accepted_at === props.item.graduated_at
+                    ? '-'
+                    : props.item.accepted_at}
+                </>
+              </Show>
+            </div>
+            <small class={`text-uppercase fw-semibold text-muted mt-1 ${styles.statusLegend}`}>Sandbox</small>
+          </div>
+
+          <div class="d-flex flex-column align-items-center">
+            <div
+              class={`badge rounded-0 ${styles.maturityBadge}`}
+              classList={{
+                [styles.activeMaturityBadge]: ['incubating', 'graduated', 'archived'].includes(props.item.maturity!),
+              }}
+            >
+              {props.item.incubating_at || '-'}
+            </div>
+            <small class={`text-uppercase fw-semibold text-muted mt-1 ${styles.statusLegend}`}>Incubating</small>
+          </div>
+
+          <div class="d-flex flex-column align-items-center">
+            <div
+              class={`badge rounded-0 ${styles.maturityBadge}`}
+              classList={{
+                [styles.activeMaturityBadge]: ['graduated', 'archived'].includes(props.item.maturity!),
+              }}
+            >
+              {props.item.graduated_at || '-'}
+            </div>
+            <small class={`text-uppercase fw-semibold text-muted mt-1 ${styles.statusLegend}`}>Graduated</small>
+          </div>
+        </div>
+        <div class={`${styles.line} ${props.item.maturity}Line`} />
+      </div>
+    </Show>
+  );
+};
+
+export default MobileMaturitySection;
diff --git a/web/src/layout/explore/mobile/ExploreMobileIndex.tsx b/web/src/layout/explore/mobile/ExploreMobileIndex.tsx
@@ -11,6 +11,7 @@ import sortItemsByOrderValue from '../../../utils/sortItemsByOrderValue';
 import Loading from '../../common/Loading';
 import { Sidebar } from '../../common/Sidebar';
 import { useUpdateActiveItemId } from '../../stores/activeItem';
+import { useGroupActive } from '../../stores/groupActive';
 import { useViewMode } from '../../stores/viewMode';
 import Menu from '../card/Menu';
 import Card from './Card';
@@ -29,6 +30,7 @@ const ExploreMobileIndex = (props: Props) => {
   const data = () => props.data;
   const selectedViewMode = useViewMode();
   const updateActiveItemId = useUpdateActiveItemId();
+  const selectedGroup = useGroupActive();
   const [menu, setMenu] = createSignal<CardMenu>({});
 
   const sortItems = (items: Item[]): Item[] =>
@@ -47,7 +49,7 @@ const ExploreMobileIndex = (props: Props) => {
     <div>
       <Sidebar
         label="Index"
-        header="Index"
+        header={selectedGroup() || 'Index'}
         visibleButton={false}
         open={props.openMenuStatus}
         onOpenStatusChange={props.closeMenuStatus}

diff --git a/web/src/layout/guide/SubcategoryExtended.tsx b/web/src/layout/guide/SubcategoryExtended.tsx
@@ -1,11 +1,9 @@
 import isUndefined from 'lodash/isUndefined';
 import trim from 'lodash/trim';
-import { createEffect, createSignal, For, on, Show } from 'solid-js';
+import { createSignal, For, onMount, Show } from 'solid-js';
 
 import { BaseItem, Item } from '../../types';
-import itemsDataGetter from '../../utils/itemsDataGetter';
 import sortItemsByOrderValue from '../../utils/sortItemsByOrderValue';
-import { useFullDataReady } from '../stores/fullData';
 import styles from './SubcategoryExtended.module.css';
 import SubcategoryGrid from './SubcategoryGrid';
 
@@ -17,29 +15,23 @@ interface Props {
 
 const SubcategoryExtended = (props: Props) => {
   const foundation = window.baseDS.foundation;
-  const fullDataReady = useFullDataReady();
   const [items, setItems] = createSignal<(BaseItem | Item)[]>();
   const [itemsInTable, setItemsInTable] = createSignal<(BaseItem | Item)[]>();
 
-  createEffect(
-    on(fullDataReady, () => {
-      if (fullDataReady()) {
-        const itemsInSubcategory = itemsDataGetter.filterItemsBySection({
-          category: props.category,
-          subcategory: props.subcategory,
-        });
+  onMount(() => {
+    const itemsInSubcategory = window.baseDS.items.filter(
+      (i: Item) => props.subcategory === i.subcategory && props.category === i.category
+    );
 
-        if (!isUndefined(itemsInSubcategory) && itemsInSubcategory.length > 0) {
-          const sortedItems = sortItemsByOrderValue(itemsInSubcategory);
-          setItems(sortedItems);
-          const filteredItems = sortedItems.filter((i: BaseItem | Item) => !isUndefined(i.maturity));
-          if (filteredItems.length > 0) {
-            setItemsInTable(filteredItems);
-          }
-        }
+    if (!isUndefined(itemsInSubcategory) && itemsInSubcategory.length > 0) {
+      const sortedItems = sortItemsByOrderValue(itemsInSubcategory);
+      setItems(sortedItems);
+      const filteredItems = sortedItems.filter((i: BaseItem | Item) => !isUndefined(i.maturity));
+      if (filteredItems.length > 0) {
+        setItemsInTable(filteredItems);
       }
-    })
-  );
+    }
+  });
 
   return (
     <>