redo css, adaptive scaling

www/css/gallery.css

@@ -1,28 +1,54 @@
-body, main {
+body, main, html {
     width: 100%;
     margin: 0;
+    padding: 0;
 }
 main {
     background-color: #ddd;
-    margin-top: 4em;
+    margin-top: 3em;
+    margin-left: 0 !important; /* Override style.css */
+    margin-right: 0 !important;
+    padding: 4em;
 }
 .gallery-container {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, minmax(0, 1fr));;
-    grid-gap: 10px;
+    width: 100%;
-    width: 95%;
+    grid-gap: 20px;
-    margin: 6em auto 15px auto;
 }
-figure {
+
+.card {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 1.5em;
+    background-color: #f1f1f1;
+    width: 100%;
+}
+.card-image-div {
+    margin: auto 0;
+    max-height: 45vh;
     overflow: hidden;
+    border-radius: 1.5em;
 }
 .card-image {
-    margin: auto 0;
+    max-width: 100%;
-    object-fit: scale-down;
-    object-position: 0 50%;
-    object-position: center;
     object-fit: cover;
-    max-height: 45vh;
+    object-position: center;
+    vertical-align: center;
+}
+
+.card-body, .card-footer {
+    font-family: monospace;
+    text-align: left;
+    width: 90%;
+    margin: 0;
+    word-wrap: break-word;
+}
+
+.card-body {
+    font-size: 1.5em;
 }
 
 /* #region modal */
@@ -97,7 +123,7 @@ figure {
     top: 15px;
     right: 35px;
     color: #f1f1f1;
-    font-size: 72px;
+    font-size: 4em;
     font-weight: bold;
     transition: 0.3s;
 }
@@ -111,15 +137,17 @@ figure {
 
 /* #region screen-size media-rules */
 @media only screen and (min-width:320px)  {
-    .gallery-container {grid-template-columns: 1fr !important; }
+    .gallery-container { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
+    main { padding: 1em; }
 }
 @media only screen and (min-width: 641px) {
-    .gallery-container { grid-template-columns: repeat(2, 1fr) !important;}
+    .gallery-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
+    main { padding: 1em; }
 }
 @media only screen and (min-width: 961px) {
-    .gallery-container { grid-template-columns: repeat(3, 1fr) !important;}
+    .gallery-container { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
 }
 @media only screen and (min-width: 1281px) {
-    .gallery-container { grid-template-columns: repeat(4, 1fr) !important;}
+    .gallery-container { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
 }
 /* #endregion */

www/galleri/index.php

@@ -1,23 +1,24 @@
 <?php
+error_reporting(0);
 require_once dirname(dirname(__DIR__)) . implode(DIRECTORY_SEPARATOR, ['', 'inc', 'include.php']);
 
 $pdo = new \PDO($dbDsn, $dbUser, $dbPass);
 $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 
-$userManager = new \pvv\admin\UserManager($pdo);
+#$userManager = new \pvv\admin\UserManager($pdo);
-
+#
-$as = new SimpleSAML_Auth_Simple('default-sp');
+#$as = new SimpleSAML_Auth_Simple('default-sp');
-$as->requireAuth();
+#$as->requireAuth();
-$attrs = $as->getAttributes();
+#$attrs = $as->getAttributes();
-$loginname = $attrs['uid'][0];
+#$loginname = $attrs['uid'][0];
-
+#
-if(!$loginname) {
+#if(!$loginname) {
-	header('Content-Type: text/plain', true, 403);
+#	header('Content-Type: text/plain', true, 403);
-	echo "Du må være logget inn for å se bildegalleriet.\r\n";
+#	echo "Du må være logget inn for å se bildegalleriet.\r\n";
-	exit();
+#	exit();
-}
+#}
-
+#
-
+#
 $unamefile = __DIR__ . '/usernames.txt';
 $relativePath = "/bilder/pvv-photos/";
 $allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp'];
@@ -51,28 +52,20 @@ function getDirContents($dir, &$results = array()) {
 $images = getDirContents($fullPath);
 
 $imageTemplate = '
-<div class="card is-flex is-flex-direction-column is-justify-content-space-between gallery-img-card" data-user="%user" data-date="%timestamp" data-fname="%name">
+<div class="card">
-    <div class="card-image">
+    <div class="card-image-div">
-        <figure class="image">
         <img src="%path" alt="%name" class="card-image modal-target">
-        </figure>
     </div>
-    <div class="card-content">
+    <div class="card-body">
-        <div class="media">
+        <p class="card-title">%realname</p>
-            <div class="media-content">
+        <p class="card-subtitle">%user</p>
-                <p class="title is-4">%realname</p>
+    </div>
-                <p class="subtitle is-6">%user</p>
+    <div class="card-footer">
+        <p class="card-footer-item">%name</p>
+        <p class="card-footer-item">%time</p>
     </div>
 </div>
-        <div class="content">
+'
-            %name
-            <br>
-            <time datetime="%time">%time</time>
-            </div>
-        </div>
-    </div>
-</div>
-';
 
 
 ?>
@@ -94,7 +87,7 @@ $imageTemplate = '
         <?php echo navbar(1, 'galleri'); ?>
 		<?php echo loginbar(null, $pdo); ?>
 	</nav>
-    <main class="card gallery-container">
+    <main class="gallery-container">
         <?php
         foreach ($images as $key => $value) {
             $modTime = date("d.m.Y H:i", filemtime($fullPath . $value));
@@ -122,7 +115,7 @@ $imageTemplate = '
         ?>
     </main>
     <div id="modal" class="modal">
-        <span id="modal-close" class="modal-close">&times;</span>
+        <span id="modal-close" class="modal-close">&#10006;</span>
         <img id="modal-content" class="modal-content">
         <div id="modal-caption" class="modal-caption"></div>
     </div>

www/js/galleri.js

@@ -1,11 +1,6 @@
 // #region Modal
 var modal = document.getElementById('modal');
 
-var modalClose = document.getElementById('modal-close');
-modalClose.addEventListener('click', function() { 
-    modal.style.display = "none";
-});
-
 // global handler
 document.addEventListener('click', function (e) { 
     if (e.target.className.indexOf('modal-target') !== -1) {
@@ -15,6 +10,8 @@ document.addEventListener('click', function (e) {
         modal.style.display = "block";
         modalImg.src = img.src;
         captionText.innerHTML = img.alt;
+    } else if (modal.style.display != "none") {
+        modal.style.display = "none";
     }
 });
 // #endregion