fix: Adding scrollable for exif

Signed-off-by: Vincent Boutour <bob@vibioh.fr>
ViBiOh · May 29, 2022 · 20e4b46 · 20e4b46
1 parent 2fb6a01
commit 20e4b46
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 32 deletions.
diff --git a/cmd/fibr/templates/exif.html b/cmd/fibr/templates/exif.html
@@ -33,30 +33,32 @@ <h2 class="flex flex-center header no-margin">
           <a href="#" class="button white small">Close</a>
         </h2>
 
-        {{ if not .Exif.Date.IsZero }}
-          <p class="padding no-margin code">
-            <strong>Date:</strong> {{ .Exif.Date.Format "2006-01-02T15:04:05Z07:00" }}<br>
-          </p>
-        {{ end }}
+        <div class="scrollable">
+          {{ if not .Exif.Date.IsZero }}
+            <p class="padding no-margin code">
+              <strong>Date:</strong> {{ .Exif.Date.Format "2006-01-02T15:04:05Z07:00" }}<br>
+            </p>
+          {{ end }}
 
-        {{ if or .Exif.Geocode.HasAddress .Exif.Geocode.HasCoordinates }}
-          <p class="padding no-margin code">
-            {{ if .Exif.Geocode.HasCoordinates }}
-              <strong>Coordinates:</strong> <a class="primary" href="http://www.openstreetmap.org/?mlat={{ .Exif.Geocode.Latitude }}&mlon={{ .Exif.Geocode.Longitude }}&zoom=16">{{ .Exif.Geocode.Latitude }},{{ .Exif.Geocode.Longitude }}</a><br>
-            {{ end }}
+          {{ if or .Exif.Geocode.HasAddress .Exif.Geocode.HasCoordinates }}
+            <p class="padding no-margin code">
+              {{ if .Exif.Geocode.HasCoordinates }}
+                <strong>Coordinates:</strong> <a class="primary" href="http://www.openstreetmap.org/?mlat={{ .Exif.Geocode.Latitude }}&mlon={{ .Exif.Geocode.Longitude }}&zoom=16">{{ .Exif.Geocode.Latitude }},{{ .Exif.Geocode.Longitude }}</a><br>
+              {{ end }}
 
-            <strong>Location</strong><br>
-            {{ range $key, $value := .Exif.Geocode.Address }}
-                <em>{{ $key }}:</em> {{ $value }}<br>
+              <strong>Location</strong><br>
+              {{ range $key, $value := .Exif.Geocode.Address }}
+                  <em>{{ $key }}:</em> {{ $value }}<br>
+              {{ end }}
+            </p>
+          {{ end }}
+
+          <p class="padding no-margin code">
+            {{ range $key, $value := .Exif.Data }}
+              <strong>{{ $key }}:</strong> {{ $value }}<br>
             {{ end }}
           </p>
-        {{ end }}
-
-        <p class="padding no-margin code">
-          {{ range $key, $value := .Exif.Data }}
-            <strong>{{ $key }}:</strong> {{ $value }}<br>
-          {{ end }}
-        </p>
+        </div>
       </div>
     </div>
   {{ end }}

diff --git a/cmd/fibr/templates/search-modal.html b/cmd/fibr/templates/search-modal.html
@@ -12,17 +12,13 @@
     #size {
       width: 7rem;
     }
-
-    #search-form {
-      overflow-y: auto;
-    }
   </style>
 
   <div id="search" class="modal">
     <div class="modal-content">
       <h2 class="flex flex-center header no-margin">Search files</h2>
 
-      <form method="GET" id="search-form" action="#">
+      <form method="GET" id="search-form" class="scrollable" action="#">
         <input type="hidden" name="search">
 
         <p class="padding no-margin">

diff --git a/cmd/fibr/templates/style.html b/cmd/fibr/templates/style.html
@@ -269,6 +269,10 @@
       font-size: 1.6rem;
     }
 
+    .scrollable {
+      overflow-y: auto;
+    }
+
     .padding-left {
       padding-left: 1rem;
     }

diff --git a/cmd/fibr/templates/upload-form.html b/cmd/fibr/templates/upload-form.html
@@ -452,13 +452,8 @@
       pointer-events: none;
     }
 
-    #upload-form {
-      overflow-y: auto;
-    }
-
     #upload-list {
       margin: 1rem auto;
-      overflow-y: auto;
     }
 
     #upload-duration {
@@ -500,7 +495,7 @@ <h2 class="flex flex-center header no-margin">
 
       <form
         id="upload-form"
-        class="flex flex-column flex-grow flex-center"
+        class="flex flex-column flex-grow flex-center scrollable"
         method="post"
         enctype="multipart/form-data"
         action="#"
@@ -521,7 +516,7 @@ <h2 class="flex flex-center header no-margin">
           <label id="file-label" for="file" tabindex="0" class="hidden button bg-success">Choose file...</label>
         </p>
 
-        <div id="upload-list" class="hidden upload-width full"></div>
+        <div id="upload-list" class="hidden upload-width full scrollable"></div>
 
         <p class="padding no-margin center">
           <button id="upload-button" type="submit" class="button bg-primary">Upload</button>