Improve gallery component styles

pedropalau · Jun 26, 2020 · cee4762 · cee4762
1 parent 0510a57
commit cee4762
Showing 1 changed file with 138 additions and 108 deletions.
diff --git a/src/scss/style.scss b/src/scss/style.scss
@@ -208,6 +208,12 @@
           transform: translateY(-50%);
           box-shadow: 0 0.6rem 1rem rgba(#000, 0.25);
         }
+
+        @media (max-width: 900px) {
+          img.photo {
+            max-width: 95%;
+          }
+        }
       }
 
       button.photo-button {
@@ -234,7 +240,7 @@
     height: 100%;
     z-index: 3;
     font-size: 0.5em;
-    width: 40%;
+    width: 20%;
     background: none;
     border-width: 0;
     border-style: initial;
@@ -262,6 +268,19 @@
       float: left;
     }
   }
+
+  @media (max-width: 767px) {
+    .gallery-control {
+      width: 10%;
+    }
+  }
+
+  @media (min-width: 1128px) {
+    .gallery-control {
+      width: 10%;
+      font-size: medium;
+    }
+  }
 }
 
 .gallery-modal .gallery {
@@ -283,6 +302,109 @@
   color: rgb(255, 255, 255);
   overflow: hidden;
   border-radius: 0;
+
+  .gallery-figcaption--thumbnails {
+    position: relative;
+    height: 58px;
+    overflow: hidden;
+    transition: 0.45s ease-in-out all;
+
+    .caption-thumbnails {
+      position: absolute;
+
+      ul.thumbnails-list {
+        position: absolute;
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        left: 0;
+        transition: margin 0.3s ease-out 0s;
+
+        &::after,
+        &::before {
+          content: "";
+          display: table;
+        }
+
+        &::after {
+          clear: both;
+        }
+
+        li {
+          float: left;
+
+          + li {
+            margin-left: 10;
+          }
+
+          button.thumbnail-button {
+            cursor: pointer;
+            position: relative;
+            display: block;
+            overflow: hidden;
+            background: transparent;
+            border: 4px solid transparent;
+            margin: 0;
+            padding: 0;
+
+            &:focus,
+            &:active {
+              outline: none;
+            }
+
+            &.active {
+              cursor: default;
+            }
+
+            &::after,
+            &::before {
+              border-radius: 50%;
+            }
+
+            div.loading-spinner {
+              position: absolute;
+              z-index: 1001;
+              width: 2em;
+              height: 2em;
+              top: 50%;
+              left: 50%;
+              margin: -1em 0 0 -1em;
+              border-top-width: 0.15em;
+              border-right-width: 0.15em;
+              border-bottom-width: 0.15em;
+              border-left-width: 0.15em;
+              transform: translate(-50%, -50%);
+            }
+          }
+
+          img.thumbnail {
+            width: 100%;
+            height: 100%;
+            display: block;
+            border-width: 0;
+            position: relative;
+            z-index: 1;
+            opacity: 0.3;
+            filter: alpha(opacity=30);
+            backface-visibility: hidden;
+            object-fit: cover;
+            border-radius: 4px;
+            transition: 0.1s ease opacity;
+          }
+
+          button.thumbnail-button.active img,
+          button.thumbnail-button:hover img {
+            opacity: 1;
+            filter: alpha(opacity=100);
+          }
+        }
+      }
+    }
+  }
+
+  &.hide .gallery-figcaption--thumbnails {
+    height: 0;
+  }
 }
 
 .mode-light .gallery-figcaption {
@@ -345,104 +467,6 @@
   color: rgba(0, 0, 0, 0.65);
 }
 
-.gallery-figcaption--thumbnails {
-  position: relative;
-  height: 58px;
-  overflow: hidden;
-
-  .caption-thumbnails {
-    position: absolute;
-
-    ul.thumbnails-list {
-      position: absolute;
-      list-style-type: none;
-      margin: 0;
-      padding: 0;
-      left: 0;
-      transition: margin 0.3s ease-out 0s;
-
-      &::after,
-      &::before {
-        content: "";
-        display: table;
-      }
-
-      &::after {
-        clear: both;
-      }
-
-      li {
-        float: left;
-
-        + li {
-          margin-left: 10;
-        }
-
-        button.thumbnail-button {
-          cursor: pointer;
-          position: relative;
-          display: block;
-          overflow: hidden;
-          background: transparent;
-          border: 4px solid transparent;
-          margin: 0;
-          padding: 0;
-
-          &:focus,
-          &:active {
-            outline: none;
-          }
-
-          &.active {
-            cursor: default;
-          }
-
-          &::after,
-          &::before {
-            border-radius: 50%;
-          }
-
-          div.loading-spinner {
-            position: absolute;
-            z-index: 1001;
-            width: 2em;
-            height: 2em;
-            top: 50%;
-            left: 50%;
-            margin: -1em 0 0 -1em;
-            border-top-width: 0.15em;
-            border-right-width: 0.15em;
-            border-bottom-width: 0.15em;
-            border-left-width: 0.15em;
-            transform: translate(-50%, -50%);
-          }
-        }
-
-        img.thumbnail {
-          width: 100%;
-          height: 100%;
-          display: block;
-          border-width: 0;
-          position: relative;
-          z-index: 1;
-          opacity: 0.3;
-          filter: alpha(opacity=30);
-          backface-visibility: hidden;
-          object-fit: cover;
-          border-radius: 4px;
-          transition: 0.1s ease opacity;
-        }
-      }
-    }
-  }
-}
-
-.gallery-figcaption--thumbnails .caption-thumbnails ul.thumbnails-list li button.thumbnail-button.active img,
-.gallery-figcaption--thumbnails .caption-thumbnails ul.thumbnails-list li button.thumbnail-button:hover img {
-  opacity: 1;
-  filter: alpha(opacity=100);
-}
-
 .gallery-figcaption .gallery-thumbnails--toggle {
   cursor: pointer;
   background: transparent;
@@ -573,8 +597,21 @@
     padding-right: 1rem;
   }
 
-  .gallery-figcaption .gallery-thumbnails--toggle {
-    display: none;
+  .gallery-figcaption .gallery-figcaption--info {
+    display: block;
+
+    .caption-left,
+    .caption-right {
+      display: block;
+      text-align: left;
+    }
+  }
+}
+
+@media (max-width: 743px) {
+  .gallery-figcaption--info {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
   }
 }
 
@@ -588,10 +625,3 @@
     padding-bottom: 0.5rem;
   }
 }
-
-@media (min-width: 1128px) {
-  .gallery .gallery-control {
-    width: 20%;
-    font-size: medium;
-  }
-}