Extend App Launcher App Description Character Limit (#242)

* Update app form with 200 char description limit. Update card styling for wider card. Add new logos. * Updates to cards to match new styling. * Update card description classes. Update card author font size. * Add new build.
nebari-dev · Apr 19, 2024 · d319f18 · d319f18
1 parent 665db59
commit d319f18
Show file tree

Hide file tree

Showing 16 changed files with 128 additions and 70 deletions.
diff --git a/jhub_apps/static/css/index.css b/jhub_apps/static/css/index.css
diff --git a/jhub_apps/static/img/logos/bokeh.png b/jhub_apps/static/img/logos/bokeh.png
diff --git a/jhub_apps/static/img/logos/conda-store.png b/jhub_apps/static/img/logos/conda-store.png
diff --git a/jhub_apps/static/img/logos/custom.png b/jhub_apps/static/img/logos/custom.png
diff --git a/jhub_apps/static/img/logos/gradio.png b/jhub_apps/static/img/logos/gradio.png
diff --git a/jhub_apps/static/img/logos/jupyter.png b/jhub_apps/static/img/logos/jupyter.png
diff --git a/jhub_apps/static/img/logos/panel.png b/jhub_apps/static/img/logos/panel.png
diff --git a/jhub_apps/static/img/logos/plotly-dash.png b/jhub_apps/static/img/logos/plotly-dash.png
diff --git a/jhub_apps/static/img/logos/streamlit.png b/jhub_apps/static/img/logos/streamlit.png
diff --git a/jhub_apps/static/img/logos/voila.png b/jhub_apps/static/img/logos/voila.png
diff --git a/jhub_apps/static/img/logos/vscode.png b/jhub_apps/static/img/logos/vscode.png
diff --git a/jhub_apps/static/js/index.js b/jhub_apps/static/js/index.js
diff --git a/ui/src/components/app-card/app-card.css b/ui/src/components/app-card/app-card.css
@@ -1,6 +1,6 @@
 .card {
   height: 241px;
-  width: 225px;
+  width: 286px;
   border-radius: 0.25rem;
   box-shadow: 0px 1px 2px rgba(210, 210, 207, 0.7);
 }
@@ -63,13 +63,6 @@
   z-index: 111;
   height: 110px;
 }
-.card-content-content .chip-container {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  left: 12px;
-  top: 12px;
-}
 
 .menu-chip {
   margin-right: 4px;
@@ -87,17 +80,19 @@
   position: relative;
   overflow: hidden;
   transition: all 0.5s ease-in-out;
-  top: 42px;
-  padding: 0px;
+}
+
+.card-content-container:not(.app-service) {
+  padding: 12px 0 0 0;
 }
 
 .card-content-container.app-service {
-  top: 15px;
+  top: 16px;
 }
 
 .card-content-content .card-inner-content {
   position: relative;
-  padding-top: 4px;
+  padding-top: 1px;
 }
 
 .card-title {
@@ -106,31 +101,57 @@
 }
 
 .card-author {
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
   letter-spacing: 0.4px;
 }
 
 .card-description {
-  max-height: 0;
-  opacity: 0;
-
+  max-height: 25px;
+  max-width: 240px;
   overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  text-wrap: nowrap;
 }
 
 /* Hover effects */
-.card-content-container:hover:not(.no-hover) {
-  transform: translateY(-36%);
-  background: #fff;
-  height: 111px;
+
+.card-content-container-hover-1:hover {
+  transform: translateY(-25%);
+  height: 120px;
+}
+
+.card-content-container-hover-2:hover {
+  transform: translateY(-30%);
+  height: 140px;
+}
+
+.card-content-container-hover-3:hover {
+  transform: translateY(-35%);
+  height: 160px;
+}
+
+.card-content-container-hover-4:hover {
+  transform: translateY(-40%);
+  height: 180px;
+}
+
+.card-content-container-hover-5:hover {
+  transform: translateY(-45%);
+  height: 200px;
 }
 
 .card-content-container:hover .card-description {
-  opacity: 1;
-  max-height: 4rem;
+  max-height: 100px;
+  text-wrap: wrap;
+  overflow: visible;
 }
 
 .card-content-container:hover .card-author:not(.no-hover) {
-  opacity: 0;
-  max-height: 0;
+  opacity: 1;
+  max-height: 30px;
 }
 
 .card-content-content .content {
@@ -156,3 +177,9 @@
   text-overflow: ellipsis;
   display: inline-block;
 }
+
+@media screen and (max-width: 600px) {
+  .card {
+    width: 100%;
+  }
+}