Futher 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, aensuring tiles are of consistent size and wrap nicely
nebari-dev · Jun 24, 2024 · 634fcb7 · 634fcb7
1 parent 88e9f96
commit 634fcb7
Show file tree

Hide file tree

Showing 2 changed files with 118 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,26 @@
     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 +32,7 @@
 
 .jp-Exhibit-description {
   padding: 2px;
-  height: 2.15em;
-  overflow: hidden;
+  min-height: 1.6lh;
 }
 
 .jp-Exhibit-icon > img {
@@ -39,7 +43,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 +66,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 +93,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 .jp-Exhibit-icon {
+  transition-property: filter;
+  transition-duration: 200ms;
+}
+
+.jp-Exhibit:hover .jp-Exhibit-icon {
+  filter: blur(10px);
 }
 
-.jp-Exhibit-buttons:hover {
-  backdrop-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;