Hide photo-slider navigation buttons on mobile

2024-05-18 15:19:52 +02:00
parent f247070025
commit 6bb2d32f8c
2 changed files with 11 additions and 10 deletions
@@ -129,7 +129,7 @@ export function PhotoViewer() {
                </div>

                <div className="close-btn" onClick={handleClose}>
-                    {hasNext && <Close/>}
+                    <Close/>
                </div>
            </div> : null}
    </>
@@ -18,6 +18,7 @@
    overflow: hidden;
    flex-shrink: 1;
    max-height: 90vh;
+    margin: 0 10px;

    .photo {
      position: relative;
@@ -29,6 +30,9 @@
        @media (max-width: 768px) {
          max-width: calc(100vw - 150px);
        }
+        @media (max-width: 520px) {
+          max-width: calc(100vw - 20px);
+        }
      }

      &.photo--placeholder {
@@ -49,22 +53,19 @@

    svg {
      color: white;
-      opacity: 0.15;
-      width: 75px;
-      height: 75px;
-
-      @media (max-width: 768px) {
-        width: 75px;
-        height: 75px;
-      }
+      opacity: 0.5;
+      font-size: 48px;
    }
-
  }

  .goto-btn {
    cursor: pointer;
    flex: 1;

+    @media (max-width: 520px) {
+      display: none;
+    }
+
    &:hover {
      svg {
        transform: scale(1.2);