Modal view, navbar, js folder structure
This commit is contained in:
parent
a500b5eecc
commit
9e7436684c
|
@ -10,6 +10,7 @@ function navbar($depth, $active = NULL) {
|
||||||
'Kontakt' => 'kontakt',
|
'Kontakt' => 'kontakt',
|
||||||
'Webmail' => 'mail',
|
'Webmail' => 'mail',
|
||||||
//'Webmail' => 'https://webmail.pvv.ntnu.no/',
|
//'Webmail' => 'https://webmail.pvv.ntnu.no/',
|
||||||
|
'Galleri' => 'galleri',
|
||||||
'Wiki' => 'pvv',
|
'Wiki' => 'pvv',
|
||||||
'Git' => 'https://git.pvv.ntnu.no/',
|
'Git' => 'https://git.pvv.ntnu.no/',
|
||||||
];
|
];
|
||||||
|
|
|
@ -2,6 +2,9 @@ body, main {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
main {
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
.gallery-container {
|
.gallery-container {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
@ -21,6 +24,91 @@ figure {
|
||||||
max-height: 45vh;
|
max-height: 45vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* #region modal */
|
||||||
|
|
||||||
|
.modal-target:hover {opacity: 0.7;}
|
||||||
|
|
||||||
|
/* The Modal (background) */
|
||||||
|
.modal {
|
||||||
|
display: none; /* Hidden by default */
|
||||||
|
position: fixed; /* Stay in place */
|
||||||
|
z-index: 1; /* Sit on top */
|
||||||
|
padding-top: 5vh;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto; /* Enable scroll if needed */
|
||||||
|
background-color: rgb(0,0,0); /* Fallback color */
|
||||||
|
background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal Content (image) */
|
||||||
|
.modal-content {
|
||||||
|
margin: auto;
|
||||||
|
display: block;
|
||||||
|
object-fit: scale-down;
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
|
/* yolo, it all goes down from here */
|
||||||
|
min-width: 60vw;
|
||||||
|
max-width: 90vw !important;
|
||||||
|
min-height: 60vh;
|
||||||
|
max-height: 80vh !important;
|
||||||
|
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Caption of Modal Image */
|
||||||
|
.modal-caption {
|
||||||
|
margin: auto;
|
||||||
|
display: block;
|
||||||
|
width: 80%;
|
||||||
|
max-width: 90vw;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1em;
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content, .modal-caption {
|
||||||
|
-webkit-animation-name: zoom;
|
||||||
|
-webkit-animation-duration: 0.6s;
|
||||||
|
animation-name: zoom;
|
||||||
|
animation-duration: 0.6s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes zoom {
|
||||||
|
from {-webkit-atransform:scale(0)}
|
||||||
|
to {-webkit-transform:scale(1)}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes zoom {
|
||||||
|
from {transform:scale(0)}
|
||||||
|
to {transform:scale(1)}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
right: 35px;
|
||||||
|
color: #f1f1f1;
|
||||||
|
font-size: 72px;
|
||||||
|
font-weight: bold;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-close:hover, .modal-close:focus {
|
||||||
|
color: #bbb;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
/* #endregion modal */
|
||||||
|
|
||||||
|
/* #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: 1fr !important; }
|
||||||
}
|
}
|
||||||
|
@ -33,3 +121,4 @@ figure {
|
||||||
@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, 1fr) !important;}
|
||||||
}
|
}
|
||||||
|
/* #endregion */
|
|
@ -9,9 +9,9 @@ $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();
|
||||||
$uname = $attrs['uid'][0];
|
$loginname = $attrs['uid'][0];
|
||||||
|
|
||||||
if(!$uname){
|
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();
|
||||||
|
@ -19,9 +19,10 @@ if(!$uname){
|
||||||
|
|
||||||
|
|
||||||
$unamefile = __DIR__ . '/usernames.txt';
|
$unamefile = __DIR__ . '/usernames.txt';
|
||||||
$unamepairs = file($unamefile);
|
|
||||||
|
|
||||||
$relativePath = "/bilder/pvv-photos/";
|
$relativePath = "/bilder/pvv-photos/";
|
||||||
|
$allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp'];
|
||||||
|
|
||||||
|
$unamepairs = file($unamefile);
|
||||||
$fullPath = getcwd() . $relativePath;
|
$fullPath = getcwd() . $relativePath;
|
||||||
|
|
||||||
function getDirContents($dir, &$results = array()) {
|
function getDirContents($dir, &$results = array()) {
|
||||||
|
@ -29,13 +30,17 @@ function getDirContents($dir, &$results = array()) {
|
||||||
foreach ($files as $key => $value) {
|
foreach ($files as $key => $value) {
|
||||||
$path = realpath($dir . DIRECTORY_SEPARATOR . $value);
|
$path = realpath($dir . DIRECTORY_SEPARATOR . $value);
|
||||||
if (!is_dir($path)) {
|
if (!is_dir($path)) {
|
||||||
//$results[] = str_replace($GLOBALS["fullPath"], "", $path); // Works, but breaks if the image path contains the path to the gallery on the server
|
//Remove the full path on disk, keep username and relative path to image. ( $results[] = str_replace($GLOBALS["fullPath"], "", $path); is insecure.)
|
||||||
//Remove the full path to the gallery from the image path. Keep username and path to image.
|
|
||||||
$pos = strpos($path, $GLOBALS["fullPath"]);
|
$pos = strpos($path, $GLOBALS["fullPath"]);
|
||||||
if ($pos !== false) {
|
if ($pos !== false) {
|
||||||
$cleanPath = substr_replace($path, "", $pos, strlen($GLOBALS["fullPath"]));
|
$cleanPath = substr_replace($path, "", $pos, strlen($GLOBALS["fullPath"]));
|
||||||
}
|
}
|
||||||
$results[] = $cleanPath;
|
|
||||||
|
//Check if the file is an image
|
||||||
|
$ext = pathinfo($path, PATHINFO_EXTENSION);
|
||||||
|
if (in_array($ext, $GLOBALS["allowedExtensions"])) {
|
||||||
|
$results[] = $cleanPath;
|
||||||
|
}
|
||||||
} else if ($value != "." && $value != "..") {
|
} else if ($value != "." && $value != "..") {
|
||||||
//recursively scan directories
|
//recursively scan directories
|
||||||
getDirContents($path, $results);
|
getDirContents($path, $results);
|
||||||
|
@ -46,10 +51,10 @@ 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">
|
<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-image">
|
<div class="card-image">
|
||||||
<figure class="image">
|
<figure class="image">
|
||||||
<img src="%path" alt="%name" class="card-image">
|
<img src="%path" alt="%name" class="card-image modal-target">
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
|
@ -79,16 +84,14 @@ $imageTemplate = '
|
||||||
<link rel="shortcut icon" href="favicon.ico">
|
<link rel="shortcut icon" href="favicon.ico">
|
||||||
<link rel="stylesheet" href="../css/normalize.css">
|
<link rel="stylesheet" href="../css/normalize.css">
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<link rel="stylesheet" href="../css/events.css">
|
|
||||||
<link rel="stylesheet" href="../css/gallery.css">
|
<link rel="stylesheet" href="../css/gallery.css">
|
||||||
<link rel="stylesheet" href="../css/bulma.min.css">
|
<link rel="stylesheet" href="../css/bulma.min.css">
|
||||||
<meta name="theme-color" content="#024" />
|
<meta name="theme-color" content="#024" />
|
||||||
<title>Fotoverkstedet</title>
|
<title>Fotoverkstedet</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>Fotoverkstedet</header>
|
|
||||||
<nav id="navbar" class="">
|
<nav id="navbar" class="">
|
||||||
<?php echo navbar(0, ''); ?>
|
<?php echo navbar(1, 'galleri'); ?>
|
||||||
<?php echo loginbar(null, $pdo); ?>
|
<?php echo loginbar(null, $pdo); ?>
|
||||||
</nav>
|
</nav>
|
||||||
<main class="card gallery-container">
|
<main class="card gallery-container">
|
||||||
|
@ -107,15 +110,22 @@ $imageTemplate = '
|
||||||
}
|
}
|
||||||
|
|
||||||
$vars = [
|
$vars = [
|
||||||
"%user" => $imguser,
|
"%user" => $imguser,
|
||||||
"%time" => $modTime,
|
"%time" => $modTime,
|
||||||
"%name" => $displaypath,
|
"%timestamp" => filemtime($fullPath . $value),
|
||||||
"%path" => "/galleri/" . $relativePath .$value,
|
"%name" => $displaypath,
|
||||||
"%realname" => $realname
|
"%path" => "/galleri/" . $relativePath .$value,
|
||||||
|
"%realname" => $realname
|
||||||
];
|
];
|
||||||
echo strtr($imageTemplate, $vars);
|
echo strtr($imageTemplate, $vars);
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
</main>
|
</main>
|
||||||
|
<div id="modal" class="modal">
|
||||||
|
<span id="modal-close" class="modal-close">×</span>
|
||||||
|
<img id="modal-content" class="modal-content">
|
||||||
|
<div id="modal-caption" class="modal-caption"></div>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript" src="../js/galleri.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -42,7 +42,7 @@ $doorTime = date("H:i", $doorEntry->time);
|
||||||
<header class="landing">
|
<header class="landing">
|
||||||
<div id="imageSlideshow">
|
<div id="imageSlideshow">
|
||||||
<?php include("galleri/slideshow.php"); ?>
|
<?php include("galleri/slideshow.php"); ?>
|
||||||
<script src="galleri/slideshow.js"></script>
|
<script src="js/slideshow.js"></script>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
|
|
|
@ -0,0 +1,25 @@
|
||||||
|
// #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) {
|
||||||
|
var img = e.target;
|
||||||
|
var modalImg = document.getElementById("modal-content");
|
||||||
|
var captionText = document.getElementById("modal-caption");
|
||||||
|
modal.style.display = "block";
|
||||||
|
modalImg.src = img.src;
|
||||||
|
captionText.innerHTML = img.alt;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// #endregion
|
||||||
|
|
||||||
|
// #region sorting
|
||||||
|
|
||||||
|
|
||||||
|
// #endregion
|
Loading…
Reference in New Issue