Improve how title ellipsis is displayed on grid view (cncf#735)

Signed-off-by: Cintia Sánchez García <[email protected]>
ShubhamAXS19 · Oct 23, 2024 · a310c2c · a310c2c
1 parent a511051
commit a310c2c
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 11 deletions.
diff --git a/ui/webapp/src/layout/explore/grid/GridCategory.module.css b/ui/webapp/src/layout/explore/grid/GridCategory.module.css
@@ -1,15 +1,34 @@
-.catTitle {
-  writing-mode: vertical-rl;
-  text-orientation: mixed;
-  transform: rotate(180deg);
+.catTitleTextWrapper {
   width: 3rem;
+  min-height: 137px;
   font-size: 0.7rem;
   line-height: 0.95rem;
   padding: 1rem 0rem;
 }
 
-.catTitleText {
-  max-height: 130px;
+.catTitle {
+  top: 0.5rem;
+  left: 7px;
+  height: 110px;
+  width: 30px;
+  -moz-transform: scale(-1, -1);
+  -webkit-transform: scale(-1, -1);
+  -o-transform: scale(-1, -1);
+  -ms-transform: scale(-1, -1);
+  transform: scale(-1, -1);
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+}
+
+.safariTitle {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  width: 30px;
+  overflow: hidden;
+  height: 110px;
+  position: relative;
+  align-content: center;
+  padding-bottom: 9px;
 }
 
 .icon {
@@ -28,6 +47,7 @@
   -webkit-line-clamp: 2;
   display: -webkit-box;
   -webkit-box-orient: vertical;
+  padding-bottom: 9px;
 }
 
 .items {

diff --git a/ui/webapp/src/layout/explore/grid/index.tsx b/ui/webapp/src/layout/explore/grid/index.tsx
@@ -1,7 +1,7 @@
-import { cutString } from 'common';
 import isUndefined from 'lodash/isUndefined';
 import { createEffect, createSignal, For, on, Show } from 'solid-js';
 
+import detectIfSafari from '../../../utils/detectIfSafari';
 import generateColorsArray from '../../../utils/generateColorsArray';
 import getCategoriesWithItems from '../../../utils/getCategoriesWithItems';
 import { SubcategoryDetails } from '../../../utils/gridCategoryLayout';
@@ -22,13 +22,15 @@ interface CatProps {
   categoryName: string;
   isOverriden: boolean;
   content: CategoryData;
+  isSafari: boolean;
 }
 
 const Category = (props: CatProps) => {
   const [subcategories, setSubcategories] = createSignal<SubcategoryDetails[]>();
 
   createEffect(
     () => {
+      console.log('isSafari ---->>>> ', props.isSafari);
       if (!isUndefined(props.content)) {
         const subcategoriesTmp: SubcategoryDetails[] = [];
         Object.keys(props.content).forEach((subcat: string) => {
@@ -51,14 +53,25 @@ const Category = (props: CatProps) => {
     <Show when={!isUndefined(subcategories()) && subcategories()!.length > 0}>
       <div class="d-flex flex-row">
         <div
-          class={`text-white border border-3 border-white fw-medium border-end-0 d-flex flex-row align-items-center justify-content-end ${styles.catTitle}`}
+          class={`text-white border border-3 border-white fw-medium border-start-0 d-flex flex-row align-items-center justify-content-end position-relative ${styles.catTitleTextWrapper}`}
           classList={{
-            'border-bottom-0': props.index !== 0,
-            'border-top-0': props.index === props.catSectionNumber,
+            'border-top-0': props.index !== 0,
+            'border-bottom-0': props.index === props.catSectionNumber,
           }}
           style={{ 'background-color': props.bgColor }}
         >
-          <div class={`text-center ${styles.catTitleText}`}>{cutString(props.categoryName, 30)}</div>
+          <Show
+            when={!props.isSafari}
+            fallback={
+              <div class={`position-absolute text-end ${styles.catTitle} ${styles.ellipsis}`}>
+                <div class={`${styles.safariTitle}`}>{props.categoryName}</div>
+              </div>
+            }
+          >
+            <div class={`position-absolute text-end d-flex justify-content-end align-items-center ${styles.catTitle}`}>
+              <div class={`${styles.ellipsis}`}>{props.categoryName}</div>
+            </div>
+          </Show>
         </div>
 
         <div class="d-flex flex-column w-100 align-items-stretch">
@@ -82,6 +95,7 @@ const GridCategory = (props: Props) => {
   const [isVisible, setIsVisible] = createSignal<boolean>(false);
   const [catWithItems, setCatWithItems] = createSignal<string[]>([]);
   const data = () => props.data;
+  const isSafari = () => detectIfSafari();
 
   createEffect(() => {
     if (props.initialIsVisible !== isVisible()) {
@@ -115,6 +129,7 @@ const GridCategory = (props: Props) => {
               bgColor={[...colorsList()][index()]}
               catSectionNumber={Object.keys(data()).length - 1}
               content={data()[cat]}
+              isSafari={isSafari()}
             />
           );
         }}

diff --git a/ui/webapp/src/utils/detectIfSafari.ts b/ui/webapp/src/utils/detectIfSafari.ts
@@ -0,0 +1,5 @@
+const detectIfSafari = (): boolean => {
+  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+};
+
+export default detectIfSafari;