fix some responsive issues

foo123 · Feb 25, 2022 · 4fabeaf · 4fabeaf
1 parent ad6c9e8
commit 4fabeaf
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 27 deletions.
diff --git a/src/touchTouch.css b/src/touchTouch.css
@@ -5,8 +5,8 @@
     width: 100%;
     height: 100%;
     margin: 0;
-    top:0;
-    left:0;
+    top: 0;
+    left: 0;
     opacity: 0;
     z-index: 100000;
     background-color: #222;
@@ -27,18 +27,31 @@
     margin: 0;
     top: 0;
     left: 0;
+    font-size: 0;
     white-space: nowrap;
     -moz-transition: left 0.4s ease;
     -webkit-transition: left 0.4s ease;
     transition: left 0.4s ease;
 }
+#gallerySlider.rightSpring {
+    -moz-animation: rightSpring 0.3s;
+    -webkit-animation: rightSpring 0.3s;
+    animation: rightSpring 0.3s;
+}
+#gallerySlider.leftSpring {
+    -moz-animation: leftSpring 0.3s;
+    -webkit-animation: leftSpring 0.3s;
+    animation: leftSpring 0.3s;
+}
 #gallerySlider .placeholder {
     width: 100%;
     height: 100%;
     display: inline-block;
+    vertical-align: middle;
+    overflow: visible;
     line-height: 1px;
     text-align: center;
-    background: url(./loader.gif) no-repeat center center;
+    background: transparent url(./loader.gif) no-repeat center center;
 }
 /* The before element moves the
 * image halfway from the top */
@@ -48,35 +61,22 @@
     content: "";
     height: 50%;
     width: 1px;
+    border: 0;
+    padding: 0;
+    margin: 0;
     margin-right: -1px;
 }
 #gallerySlider .placeholder img {
     display: inline-block;
     vertical-align: middle;
-}
-#gallerySlider .placeholder img.is-landscape {
-    max-width: 100%;
-    height: auto;
-}
-#gallerySlider .placeholder img.is-portrait {
-    max-height: 100%;
     width: auto;
-}
-#gallerySlider.rightSpring {
-    -moz-animation: rightSpring 0.3s;
-    -webkit-animation: rightSpring 0.3s;
-    animation: rightSpring 0.3s;
-}
-#gallerySlider.leftSpring {
-    -moz-animation: leftSpring 0.3s;
-    -webkit-animation: leftSpring 0.3s;
-    animation: leftSpring 0.3s;
+    height: auto;
 }
 /* Arrows */
 #prevArrow, #nextArrow {
     border: none;
     text-decoration: none;
-    background: url('./arrows.png') no-repeat;
+    background: transparent url('./arrows.png') no-repeat;
     opacity: 0.5;
     cursor: pointer;
     position: absolute;
@@ -134,14 +134,26 @@
 }
 }
 @media (orientation: landscape) {
-#gallerySlider .placeholder img.is-square {
+#gallerySlider .placeholder img {
     max-height: 100%;
-    width: auto;
 }
 }
 @media (orientation: portrait) {
-#gallerySlider .placeholder img.is-square {
+#gallerySlider .placeholder img {
     max-width: 100%;
-    height: auto;
 }
-}
+}
+@media (max-width: 360px) {
+#gallerySlider .placeholder img,
+#gallerySlider .placeholder img {
+    max-height: none;
+    max-width: 100%;
+}
+}
+@media (max-height: 360px) {
+#gallerySlider .placeholder img,
+#gallerySlider .placeholder img {
+    max-width: none;
+    max-height: 100%;
+}
+}
diff --git a/src/touchTouch.min.css b/src/touchTouch.min.css
diff --git a/test/demo.html b/test/demo.html
@@ -60,6 +60,7 @@ <h1>Vanilla touchTouch Demo</h1>
     <a class="magnifier" href="./imgs/3.jpg"><img src="./imgs/thumbs/3.jpg" /></a>
     <a class="magnifier" href="./imgs/4.jpg"><img src="./imgs/thumbs/4.jpg" /></a>
     <a class="magnifier" href="./imgs/5.jpg"><img src="./imgs/thumbs/5.jpg" /></a>
+    <a class="magnifier" href="./imgs/6.jpg"><img src="./imgs/thumbs/6.jpg" /></a>
 </div>
 
 <script src="../src/touchTouch.js"></script>

diff --git a/test/imgs/6.jpg b/test/imgs/6.jpg
diff --git a/test/imgs/thumbs/6.jpg b/test/imgs/thumbs/6.jpg