redo css, adaptive scaling
This commit is contained in:
parent
3335f5958e
commit
516287ee85
File diff suppressed because one or more lines are too long
|
@ -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 */
|
|
@ -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 class="card-content">
|
|
||||||
<div class="media">
|
|
||||||
<div class="media-content">
|
|
||||||
<p class="title is-4">%realname</p>
|
|
||||||
<p class="subtitle is-6">%user</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content">
|
|
||||||
%name
|
|
||||||
<br>
|
|
||||||
<time datetime="%time">%time</time>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<p class="card-title">%realname</p>
|
||||||
|
<p class="card-subtitle">%user</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<p class="card-footer-item">%name</p>
|
||||||
|
<p class="card-footer-item">%time</p>
|
||||||
</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">×</span>
|
<span id="modal-close" class="modal-close">✖</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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue