Further improve the UX by always showing the title (incl on hover)

only showing initial few lines of the description (more on hover) showing progress bar above description on hover, ensuring tiles are of consistent size and wrap nicely
nebari-dev · Jun 26, 2024 · 4794a23 · 4794a23
1 parent 57966cd
commit 4794a23
Show file tree

Hide file tree

Showing 2 changed files with 119 additions and 82 deletions.
diff --git a/src/gallery.tsx b/src/gallery.tsx
@@ -224,76 +224,23 @@ function Exhibit(props: {
   return (
     <div className="jp-Exhibit">
       <h4 className="jp-Exhibit-title">{exhibit.title}</h4>
-      <div className="jp-Exhibit-icon">
-        <img src={exhibit.icon} alt={exhibit.title} />
-      </div>
-      <div className="jp-Exhibit-description">{exhibit.description}</div>
-      {progress ? (
-        <div
-          className={
-            'jp-Exhibit-progressbar' +
-            (progress.state === 'error' ? ' jp-Exhibit-progressbar-error' : '')
-          }
-        >
-          <div
-            className="jp-Exhibit-progressbar-filler"
-            style={{ width: progress.progress * 100 + '%' }}
-          ></div>
-          <div className="jp-Exhibit-progressMessage">{progressMessage}</div>
+      <div className="jp-Exhibit-middle">
+        <div className="jp-Exhibit-icon">
+          <img src={exhibit.icon} alt={exhibit.title} />
         </div>
-      ) : null}
-      <div className="jp-Exhibit-buttons">
-        {!exhibit.isCloned ? (
-          <Button
-            minimal={true}
-            title={props.trans.__('Set up')}
-            onClick={async () => {
-              setProgressMessage('Downloading');
-              setProgress({
-                progress: 0.0,
-                message: 'Initializing'
-              });
-              try {
-                await actions.download(exhibit);
-              } catch {
-                setProgress({
-                  ...(progress as any),
-                  state: 'error'
-                });
-                setProgressMessage('');
-              }
-            }}
-          >
-            <downloadIcon.react />
-          </Button>
-        ) : (
-          <>
+        <div className="jp-Exhibit-buttons">
+          {!exhibit.isCloned ? (
             <Button
               minimal={true}
-              title={props.trans.__('Open')}
-              onClick={() => {
-                actions.open(exhibit);
-              }}
-            >
-              <folderIcon.react />
-            </Button>
-            <Button
-              disabled={!exhibit.updatesAvailable}
-              minimal={true}
-              title={
-                updateStatusKnown
-                  ? props.trans.__('Fetch latest changes')
-                  : props.trans.__('Checking upstream status')
-              }
+              title={props.trans.__('Set up')}
               onClick={async () => {
-                setProgressMessage('Refreshing');
+                setProgressMessage('Downloading');
                 setProgress({
-                  progress: 0.25,
-                  message: 'Refreshing'
+                  progress: 0.0,
+                  message: 'Initializing'
                 });
                 try {
                   await actions.download(exhibit);
-                  setProgress(null);
                 } catch {
                   setProgress({
                     ...(progress as any),
@@ -303,14 +250,73 @@ function Exhibit(props: {
                 }
               }}
             >
-              {updateStatusKnown ? (
-                <downloadIcon.react />
-              ) : (
-                <refreshIcon.react className="jp-spinningIcon" />
-              )}
+              <downloadIcon.react />
             </Button>
-          </>
-        )}
+          ) : (
+            <>
+              <Button
+                minimal={true}
+                title={props.trans.__('Open')}
+                onClick={() => {
+                  actions.open(exhibit);
+                }}
+              >
+                <folderIcon.react />
+              </Button>
+              <Button
+                disabled={!exhibit.updatesAvailable}
+                minimal={true}
+                title={
+                  updateStatusKnown
+                    ? props.trans.__('Fetch latest changes')
+                    : props.trans.__('Checking upstream status')
+                }
+                onClick={async () => {
+                  setProgressMessage('Refreshing');
+                  setProgress({
+                    progress: 0.25,
+                    message: 'Refreshing'
+                  });
+                  try {
+                    await actions.download(exhibit);
+                    setProgress(null);
+                  } catch {
+                    setProgress({
+                      ...(progress as any),
+                      state: 'error'
+                    });
+                    setProgressMessage('');
+                  }
+                }}
+              >
+                {updateStatusKnown ? (
+                  <downloadIcon.react />
+                ) : (
+                  <refreshIcon.react className="jp-spinningIcon" />
+                )}
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+      <div className="jp-Exhibit-bottom">
+        {progress ? (
+          <div
+            className={
+              'jp-Exhibit-progressbar' +
+              (progress.state === 'error'
+                ? ' jp-Exhibit-progressbar-error'
+                : '')
+            }
+          >
+            <div
+              className="jp-Exhibit-progressbar-filler"
+              style={{ width: progress.progress * 100 + '%' }}
+            ></div>
+            <div className="jp-Exhibit-progressMessage">{progressMessage}</div>
+          </div>
+        ) : null}
+        <div className="jp-Exhibit-description">{exhibit.description}</div>
       </div>
     </div>
   );

diff --git a/style/base.css b/style/base.css
@@ -4,21 +4,27 @@
     https://jupyterlab.readthedocs.io/en/stable/developer/css.html
 */
 .jp-Gallery {
-  /* TODO: responsive grid instead? */
-  /*display: flex;
-  flex-wrap: wrap;*/
   display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 200px));
+  grid-auto-rows: 1fr;
+  justify-content: center;
 }
 
 .jp-Exhibit {
+  --jp-exhibit-bottom-reserved: 2.6lh;
+  --jp-exhibit-bottom-collapsed: 2.2lh;
+  --jp-exhibit-bottom-expanded: 3.2lh;
+
   border: 1px solid var(--jp-border-color1);
   border-radius: 4px;
-  margin: 12px;
+  margin: 12px 4px;
   padding: 4px 8px;
   max-width: 200px;
   position: relative;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+  padding-bottom: var(--jp-exhibit-bottom-reserved);
 }
 
 .jp-Exhibit-title {
@@ -27,8 +33,7 @@
 
 .jp-Exhibit-description {
   padding: 2px;
-  height: 2.15em;
-  overflow: hidden;
+  min-height: 1.6lh;
 }
 
 .jp-Exhibit-icon > img {
@@ -39,7 +44,13 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  height: 100%;
+}
+
+.jp-Exhibit-middle {
   flex-grow: 1;
+  position: relative;
+  margin: 4px 0;
 }
 
 .jp-Launcher-openExample .jp-Gallery {
@@ -56,7 +67,6 @@
   border: 1px solid var(--jp-layout-color3);
   background: var(--jp-layout-color2);
   width: 100%;
-  margin-bottom: 10px;
   border-radius: 2px;
   position: relative;
 }
@@ -84,19 +94,40 @@
   left: 0;
   display: flex;
   opacity: 0;
-  padding: 20px;
   box-sizing: border-box;
-  backdrop-filter: blur(3px);
-  transition-property: backdrop-filter, opacity;
-  transition-duration: 300ms;
+  transition-property: opacity;
+  transition-duration: 200ms;
   border-radius: inherit;
+  padding: 0 40px;
 }
 
-.jp-Exhibit-buttons:hover {
-  backdrop-filter: blur(10px);
+.jp-Exhibit .jp-Exhibit-icon {
+  transition-property: filter;
+  transition-duration: 200ms;
+}
+
+.jp-Exhibit:hover .jp-Exhibit-icon {
+  filter: blur(10px);
+}
+
+.jp-Exhibit:hover .jp-Exhibit-buttons {
   opacity: 1;
 }
 
+.jp-Exhibit-bottom {
+  position: absolute;
+  transition-property: max-height;
+  transition-duration: 200ms;
+  max-height: var(--jp-exhibit-bottom-collapsed);
+  bottom: 0;
+  margin-left: -8px;
+  padding: 0 4px;
+}
+
+.jp-Exhibit:hover .jp-Exhibit-bottom {
+  max-height: var(--jp-exhibit-bottom-expanded);
+}
+
 .jp-Exhibit-buttons > .jp-Button {
   margin: auto;
   outline: 2px solid transparent;