Projects/nettsiden
Projects
/
nettsiden
8
2
Fork 0
Code Issues 15 Pull Requests 2 Activity

redo css, adaptive scaling

This commit is contained in:
Felix Albrigtsen 2022-01-25 15:04:00 +01:00
parent 3335f5958e
commit 516287ee85
4 changed files with 75 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
www/css/bulma.min.css vendored
View File

File diff suppressed because one or more lines are too long

62
www/css/gallery.css
View File

@ -1,28 +1,54 @@
body, main { body, main, html {
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0;
} }
main { main {
background-color: #ddd; background-color: #ddd;
margin-top: 4em; margin-top: 3em;
margin-left: 0 !important; /* Override style.css */
margin-right: 0 !important;
padding: 4em;
} }
.gallery-container { .gallery-container {
display: grid; 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; overflow: hidden;
border-radius: 1.5em;
} }
.card-image { .card-image {
margin: auto 0; max-width: 100%;
object-fit: scale-down;
object-position: 0 50%;
object-position: center;
object-fit: cover; 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 */ /* #region modal */
@ -97,7 +123,7 @@ figure {
top: 15px; top: 15px;
right: 35px; right: 35px;
color: #f1f1f1; color: #f1f1f1;
font-size: 72px; font-size: 4em;
font-weight: bold; font-weight: bold;
transition: 0.3s; transition: 0.3s;
} }
@ -111,15 +137,17 @@ figure {
/* #region screen-size media-rules */ /* #region screen-size media-rules */
@media only screen and (min-width:320px) { @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) { @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) { @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) { @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 */ /* #endregion */

63
www/galleri/index.php
View File

@ -1,23 +1,24 @@
<?php <?php
error_reporting(0);
require_once dirname(dirname(__DIR__)) . implode(DIRECTORY_SEPARATOR, ['', 'inc', 'include.php']); require_once dirname(dirname(__DIR__)) . implode(DIRECTORY_SEPARATOR, ['', 'inc', 'include.php']);
$pdo = new \PDO($dbDsn, $dbUser, $dbPass); $pdo = new \PDO($dbDsn, $dbUser, $dbPass);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $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'; $unamefile = __DIR__ . '/usernames.txt';
$relativePath = "/bilder/pvv-photos/"; $relativePath = "/bilder/pvv-photos/";
$allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp']; $allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp'];
@ -51,28 +52,20 @@ function getDirContents($dir, &$results = array()) {
$images = getDirContents($fullPath); $images = getDirContents($fullPath);
$imageTemplate = ' $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">
<img src="%path" alt="%name" class="card-image modal-target">
</figure>
</div> </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">
</div> <p class="card-footer-item">%name</p>
</div> <p class="card-footer-item">%time</p>
<div class="content">
%name
<br>
<time datetime="%time">%time</time>
</div>
</div>
</div> </div>
</div> </div>
'; '
?> ?>
@ -94,7 +87,7 @@ $imageTemplate = '
<?php echo navbar(1, 'galleri'); ?> <?php echo navbar(1, 'galleri'); ?>
<?php echo loginbar(null, $pdo); ?> <?php echo loginbar(null, $pdo); ?>
</nav> </nav>
<main class="card gallery-container"> <main class="gallery-container">
<?php <?php
foreach ($images as $key => $value) { foreach ($images as $key => $value) {
$modTime = date("d.m.Y H:i", filemtime($fullPath . $value)); $modTime = date("d.m.Y H:i", filemtime($fullPath . $value));
@ -122,7 +115,7 @@ $imageTemplate = '
?> ?>
</main> </main>
<div id="modal" class="modal"> <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"> <img id="modal-content" class="modal-content">
<div id="modal-caption" class="modal-caption"></div> <div id="modal-caption" class="modal-caption"></div>
</div> </div>

7
www/js/galleri.js
View File

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