From 57966cd716f23abfa053a5249f396453c2173579 Mon Sep 17 00:00:00 2001
From: krassowski <5832902+krassowski@users.noreply.github.com>
Date: Mon, 24 Jun 2024 08:10:56 +0100
Subject: [PATCH 1/4] Improve tile display (buttons on hover, regular size)

---
 src/gallery.tsx |  1 +
 style/base.css  | 47 ++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/gallery.tsx b/src/gallery.tsx
index c069877..9c52acb 100644
--- a/src/gallery.tsx
+++ b/src/gallery.tsx
@@ -245,6 +245,7 @@ function Exhibit(props: {
       <div className="jp-Exhibit-buttons">
         {!exhibit.isCloned ? (
           <Button
+            minimal={true}
             title={props.trans.__('Set up')}
             onClick={async () => {
               setProgressMessage('Downloading');
diff --git a/style/base.css b/style/base.css
index 7ea7952..ed4efff 100644
--- a/style/base.css
+++ b/style/base.css
@@ -3,12 +3,22 @@
 
     https://jupyterlab.readthedocs.io/en/stable/developer/css.html
 */
+.jp-Gallery {
+  /* TODO: responsive grid instead? */
+  /*display: flex;
+  flex-wrap: wrap;*/
+  display: grid;
+}
+
 .jp-Exhibit {
   border: 1px solid var(--jp-border-color1);
   border-radius: 4px;
   margin: 12px;
   padding: 4px 8px;
   max-width: 200px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 .jp-Exhibit-title {
@@ -29,6 +39,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-grow: 1;
 }
 
 .jp-Launcher-openExample .jp-Gallery {
@@ -65,7 +76,41 @@
   text-overflow: ellipsis;
 }
 
-.jp-Exhibit-buttons .jp-Button:disabled {
+.jp-Exhibit-buttons {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  opacity: 0;
+  padding: 20px;
+  box-sizing: border-box;
+  backdrop-filter: blur(3px);
+  transition-property: backdrop-filter, opacity;
+  transition-duration: 300ms;
+  border-radius: inherit;
+}
+
+.jp-Exhibit-buttons:hover {
+  backdrop-filter: blur(10px);
+  opacity: 1;
+}
+
+.jp-Exhibit-buttons > .jp-Button {
+  margin: auto;
+  outline: 2px solid transparent;
+  background: var(--jp-layout-color2);
+  border: 1px solid var(--jp-border-color1);
+  height: 35px;
+  width: 35px;
+}
+
+.jp-Exhibit-buttons > .jp-Button:hover {
+  background: var(--jp-layout-color0);
+}
+
+.jp-Exhibit-buttons > .jp-Button:disabled {
   opacity: 0.3;
 }
 

From 4794a2346e4d11f406d2b29020162665b416205b Mon Sep 17 00:00:00 2001
From: krassowski <5832902+krassowski@users.noreply.github.com>
Date: Mon, 24 Jun 2024 18:45:04 +0100
Subject: [PATCH 2/4] 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
---
 src/gallery.tsx | 144 +++++++++++++++++++++++++-----------------------
 style/base.css  |  57 ++++++++++++++-----
 2 files changed, 119 insertions(+), 82 deletions(-)

diff --git a/src/gallery.tsx b/src/gallery.tsx
index 9c52acb..98c774d 100644
--- 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
index ed4efff..b0f195b 100644
--- 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;

From 7ba0747a9df8abea0f713970ed5aa416cfd89ee6 Mon Sep 17 00:00:00 2001
From: krassowski <5832902+krassowski@users.noreply.github.com>
Date: Wed, 26 Jun 2024 17:42:27 +0100
Subject: [PATCH 3/4] Fix small tiles and poor display when used with
 `jupyterlab-launchpad`

---
 style/base.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/style/base.css b/style/base.css
index b0f195b..67eeeb0 100644
--- a/style/base.css
+++ b/style/base.css
@@ -25,6 +25,7 @@
   flex-direction: column;
   overflow: hidden;
   padding-bottom: var(--jp-exhibit-bottom-reserved);
+  min-width: 150px;
 }
 
 .jp-Exhibit-title {
@@ -54,7 +55,7 @@
 }
 
 .jp-Launcher-openExample .jp-Gallery {
-  display: contents;
+  width: 100%;
 }
 
 .jp-Exhibit-progressbar-filler {

From a87d291993ce9ab8961ebcefa0107ac41d8926af Mon Sep 17 00:00:00 2001
From: krassowski <5832902+krassowski@users.noreply.github.com>
Date: Wed, 26 Jun 2024 20:07:35 +0100
Subject: [PATCH 4/4] Fine tuning

---
 style/base.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/style/base.css b/style/base.css
index 67eeeb0..c2caa89 100644
--- a/style/base.css
+++ b/style/base.css
@@ -12,12 +12,12 @@
 
 .jp-Exhibit {
   --jp-exhibit-bottom-reserved: 2.6lh;
-  --jp-exhibit-bottom-collapsed: 2.2lh;
+  --jp-exhibit-bottom-collapsed: 2.3lh;
   --jp-exhibit-bottom-expanded: 3.2lh;
 
   border: 1px solid var(--jp-border-color1);
   border-radius: 4px;
-  margin: 12px 4px;
+  margin: 6px;
   padding: 4px 8px;
   max-width: 200px;
   position: relative;
@@ -35,6 +35,7 @@
 .jp-Exhibit-description {
   padding: 2px;
   min-height: 1.6lh;
+  cursor: default;
 }
 
 .jp-Exhibit-icon > img {