Tweak grid view

jcraigk · Nov 6, 2024 · 8ba0722 · 8ba0722
1 parent d229f44
commit 8ba0722
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 60 deletions.
diff --git a/app/javascript/components/EraShows.jsx b/app/javascript/components/EraShows.jsx
@@ -133,8 +133,12 @@ const EraShows = () => {
     <div className="sidebar-content">
       <p className="sidebar-title">{year}</p>
       <p className="sidebar-subtitle">{sortedShows.length} shows</p>
-      {renderViewToggleButtons()}
-      {renderSortButtons()}
+
+      <div className="buttons mb-0">
+        {renderViewToggleButtons()}
+        {renderSortButtons()}
+      </div>
+
       <div className="hidden-mobile">{yearLinks()}</div>
     </div>
   );

diff --git a/app/javascript/components/Eras.jsx b/app/javascript/components/Eras.jsx
@@ -110,8 +110,8 @@ const Eras = () => {
 
   const renderGridItem = ({ period, shows_count, venues_count, cover_art_urls }) => (
     <Link to={`/${period}`} key={period} className="list-item-link">
-      <li className="grid-item period-item" style={{ backgroundImage: `url(${cover_art_urls.medium})` }}>
-        <div className="period-overlay">
+      <li className="grid-item" style={{ backgroundImage: `url(${cover_art_urls.medium})` }}>
+        <div className="overlay">
           <p className={`period ${period.includes("-") ? "period-range" : ""}`}>{period}</p>
           <p className="period-details">
             {formatNumber(venues_count, "venue")} • {formatNumber(shows_count, "show")}
@@ -127,21 +127,21 @@ const Eras = () => {
         LIVE PHISH
         <span className="hidden-phone"> AUDIO STREAMS</span>
       </p>
-      <p>🍩 {formatNumber(totalShows)} shows</p>
-      <p className="hidden-phone">🎵 {formatNumber(totalHours)} hours of music</p>
+      <p className="hidden-mobile">🍩 {formatNumber(totalShows)} shows</p>
+      <p className="hidden-mobile mb-4">🎵 {formatNumber(totalHours)} hours of music</p>
 
-      <div className="mt-3">{renderViewToggleButtons()}</div>
-      <div className="mt-2">{renderSortButtons()}</div>
+      <div className="buttons mb-0">
+        {renderViewToggleButtons()}
+        {renderSortButtons()}
+      </div>
 
       <MobileApps className="mt-5" />
 
       <div className="hidden-mobile">
         <p className="has-text-weight-bold mb-2 mt-5 project-open-source">This project is open source</p>
-        <GitHubButton className="mb-2" />
-        <br />
-        <DiscordButton className="mb-2" />
-        <br />
-        <a href="/feeds/rss" className="button" target="_blank">
+        <GitHubButton className="mr-2" />
+        <DiscordButton />
+        <a href="/feeds/rss" className="button mt-2" target="_blank">
           <FontAwesomeIcon icon={faRss} className="mr-1" />
           RSS
         </a>

diff --git a/app/javascript/stylesheets/content.css.scss b/app/javascript/stylesheets/content.css.scss
@@ -413,10 +413,6 @@ main {
 .view-toggle {
   margin-bottom: 0px !important;
 
-  &:not(:first-child) {
-    margin-top: 1rem;
-  }
-
   button {
     padding: 8px 16px;
     font-size: 1rem;
@@ -458,13 +454,13 @@ main {
     }
   }
 
-  .period-overlay {
+  .overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 100%;
-    background-color: rgba(#e5e5e5, 0.8);
+    height: 50%;
+    background-color: rgba(#e5e5e5, 0.85);
     padding: 4px;
     box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.15);
     display: flex;
@@ -475,62 +471,44 @@ main {
     font-size: 1rem;
     font-weight: bold;
     color: $title-gray;
-    border-radius: $radius;
-
-    .period {
-      font-weight: bold;
-      font-size: 4rem;
-      margin: 0;
-
-      &.period-range {
-        font-size: 3rem;
-        line-height: 2.8rem;
-      }
-    }
-
-    .period-details {
-      font-size: 1rem;
-      margin-top: 8px;
-    }
-  }
-
-  .overlay {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 61px;
-    background-color: rgba(#e5e5e5, 0.85);
-    padding: 4px;
-    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.15);
-    justify-content: center;
-    text-align: center;
-    font-size: 1rem;
-    font-weight: bold;
-    color: $title-gray;
     border-radius: 0 0 $radius $radius;
 
     .show-date {
-      margin-top: 1px;
-      margin-bottom: 1px;
       font-weight: bold;
-      font-size: 1.2rem;
-      line-height: 1.2rem;
+      font-size: 2rem;
+      line-height: 2rem;
     }
 
     .venue-name {
-      font-size: 0.8rem;
+      font-size: 1rem;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      width: 100%;
+      padding: 0 0.3rem;
     }
 
     .venue-location {
-      font-size: 0.6rem;
+      font-size: 0.8rem;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      margin-top: -2px;
+    }
+
+    .period {
+      font-weight: bold;
+      font-size: 4rem;
+      margin-top: -20px;
+
+      &.period-range {
+        font-size: 3rem;
+        line-height: 2.8rem;
+      }
+    }
+
+    .period-details {
+      font-size: 1rem;
+      margin-top: -20px;
     }
   }
 }