Compare commits

..

12 Commits

6 changed files with 152 additions and 39 deletions

View File

@ -48,6 +48,10 @@ a:hover {
.page-link {
--bs-pagination-disabled-bg: var(--bs-body-bg);
--bs-pagination-disabled-color: var(--bs-body-color);
}
.page-link, .page-padding {
color: #b50707;
font-family: 'Coda', sans-serif;
}
@ -58,6 +62,15 @@ a:hover {
background-color: #990b0b;
border-color: #a40d0d;
}
[data-bs-theme=dark] .page-link,
[data-bs-theme=dark] .page-padding{
color: #ae473c;
}
[data-bs-theme=dark] .active > .page-link, .page-link.active {
background-color: #4a0e0e;
border-color: #5b5a5a;
color: #ddd;
}
@media (max-width: 767px) {
.pagination {
@ -160,6 +173,21 @@ i.space-invader.alt-6::before {
i.space-invader.alt-7::before {
content: 'O';
}
i.nyan-cat {
background-image: url('../images/nyan-cat.gif');
background-position: 0 -25px;
background-size: cover;
display: inline-block;
height: 85px;
left: -40px;
position: absolute;
top: -5px;
transform: rotate(-5deg);
transition: 0.25s;
width: 110px;
}
@media (max-width: 991px) {
.navbar-brand {
padding-left: 60px;
@ -170,6 +198,10 @@ i.space-invader.alt-7::before {
top: -7px;
width: 70px;
}
i.nyan-cat {
left: -57px;
top: -7px;
}
}
@ -212,33 +244,57 @@ i.space-invader.alt-7::before {
div.polaroid {
background: var(--bs-body-bg);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
line-height: 0;
position: relative;
transition: 0.25s;
}
div.polaroid img {
background: url('../images/nothumb.svg') center no-repeat;
div.polaroid:hover {
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
div.polaroid img.normal-photo {
background: var(--bs-body-bg) url('../images/nothumb.svg') center no-repeat;
border: none;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
z-index: 20;
}
div.polaroid img.blur-photo {
filter: blur(50px);
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
div.polaroid img.placeholder-image {
background: var(--bs-body-bg);
z-index: 20;
}
div.polaroid h4 {
background: var(--bs-body-bg);
bottom: 0;
color: var(--bs-body-color);
margin: 0;
font: 400 18px 'Coda', sans-serif;
padding: 15px 5px;
position: absolute;
text-overflow: ellipsis;
text-align: center;
width: 100%;
white-space: nowrap;
overflow: hidden;
z-index: 20;
}
div.polaroid a {
display: block;
text-decoration: none;
}
div.polaroid:hover {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
/* Album title boxes
@ -388,22 +444,53 @@ footer a {
/* Styling for the photo pages
--------------------------------*/
#photo_frame {
padding-top: 1.5vh;
text-align: center;
}
#photo_frame a {
#photo_frame {
padding: 3.5vh 0;
text-align: center;
height: 95vh;
}
#photo_frame a img {
border: none;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
cursor: -moz-zoom-in;
display: inline-block;
height: 97vh;
max-width: 100%;
#photo-figure {
position: relative;
object-fit: contain;
width: auto;
height: 93vh;
object-position: center center;
}
#photo-figure img {
object-position: center center;
}
#photo-figure img.normal-photo {
border: none;
cursor: -moz-zoom-in;
object-fit: contain;
z-index: 20;
position: absolute;
left: 0;
top: 0;
}
#photo-figure img.blur-photo {
filter: blur(50px);
left: 0;
object-fit: contain;
position: absolute;
top: 0;
z-index: 0;
}
figure.portrait-figure,
figure.landscape-figure {
height: 93vh;
margin: 0 auto;
}
figure.panorama-figure {
object-fit: cover;
margin: 0 auto;
}
figure#photo-figure img.normal-photo,
figure#photo-figure img.blur-photo {
height: 100%;
width: 100%;
}
#previous_photo, #next_photo {

BIN
public/images/nyan-cat.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

View File

@ -42,7 +42,7 @@ class AlbumIndex extends Template
{
echo '
<div class="col-md-6 col-xl-4">
<div class="polaroid landscape">';
<div class="polaroid landscape" style="aspect-ratio: 1.12">';
if ($this->show_edit_buttons)
echo '
@ -58,15 +58,20 @@ class AlbumIndex extends Template
$thumbs[$factor] = $album['thumbnail']->getThumbnailUrl(
static::TILE_WIDTH * $factor, static::TILE_HEIGHT * $factor, true, true);
echo '
foreach (['normal-photo', 'blur-photo'] as $className)
{
echo '
<img alt="" src="', $thumbs[1], '"' . (isset($thumbs[2]) ?
' srcset="' . $thumbs[2] . ' 2x"' : '') .
' class="', $className, '"' .
' alt="" style="aspect-ratio: ', self::TILE_RATIO, '">';
}
}
else
{
echo '
<img alt="" src="', BASEURL, '/images/nothumb.svg"',
' class="placeholder-image"',
' style="aspect-ratio: ', self::TILE_RATIO, '; object-fit: unset">';
}

View File

@ -20,12 +20,13 @@ class MainNavBar extends NavBar
// Select a random space invader, with a bias towards the mascot
$rnd = rand(0, 100);
$alt = $rnd > 50 ? ' alt-' . ($rnd % 6 + 1) : '';
$className = $rnd > 5 ? 'space-invader' . $alt : 'nyan-cat';
echo '
<nav id="', $this->outerMenuId, '" class="navbar navbar-expand-lg ', $this->navBarClasses, '" aria-label="', $this->ariaLabel, '">
<div class="container">
<a class="navbar-brand flex-grow-1" href="', BASEURL, '/">
<i class="space-invader', $alt, '"></i>
<i class="', $className, '"></i>
HashRU Pics
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#', $this->innerMenuId, '" aria-controls="', $this->innerMenuId, '" aria-expanded="false" aria-label="Toggle navigation">

View File

@ -67,17 +67,31 @@ class PhotoPage extends Template
protected function photo()
{
echo '
<div id="photo_frame">
<a href="', $this->photo->getUrl(), '">';
<a href="', $this->photo->getUrl(), '">
<div id="photo_frame">';
if ($this->photo->isPortrait())
echo $this->photo->getInlineImage(null, 960);
{
echo '
<figure id="photo-figure" class="portrait-figure">',
$this->photo->getInlineImage(null, 960, 'normal-photo'),
$this->photo->getInlineImage(null, 960, 'blur-photo'), '
</figure>';
}
else
echo $this->photo->getInlineImage(1280, null);
{
$className = $this->photo->isPanorama() ? 'panorama-figure' : 'landscape-figure';
echo '
<figure id="photo-figure" class="', $className, '">',
$this->photo->getInlineImage(1280, null, 'normal-photo'),
$this->photo->getInlineImage(1280, null, 'blur-photo'), '
</figure>';
}
echo '
</a>
</div>';
</figure>
</div>
</a>';
}
private function photoNav()

View File

@ -83,27 +83,33 @@ class PhotosIndex extends Template
protected function photo(Image $image, $className, $width, $height, $crop = true, $fit = true)
{
// Prefer thumbnail aspect ratio if available, otherwise use image aspect ratio.
$aspectRatio = isset($width, $height) ? $width / $height : $image->ratio();
echo '
<div class="polaroid ', $className, '">';
<div class="polaroid ', $className, '" style="aspect-ratio: ', $aspectRatio, '">';
if ($this->show_edit_buttons)
echo '
<a class="edit" href="', BASEURL, '/editasset/?id=', $image->getId(), '">Edit</a>';
echo '
<a href="', $image->getPageUrl(), $this->url_suffix, '#photo_frame">
<a href="', $image->getPageUrl(), $this->url_suffix, '#photo_frame">';
foreach (['normal-photo', 'blur-photo'] as $className)
{
echo '
<img src="', $image->getThumbnailUrl($width, $height, $crop, $fit), '"';
// Can we offer double-density thumbs?
if ($image->width() >= $width * 2 && $image->height() >= $height * 2)
echo ' srcset="', $image->getThumbnailUrl($width * 2, $height * 2, $crop, $fit), ' 2x"';
else
echo ' srcset="', $image->getThumbnailUrl($image->width(), $image->height(), true), ' 2x"';
// Can we offer double-density thumbs?
if ($image->width() >= $width * 2 && $image->height() >= $height * 2)
echo ' srcset="', $image->getThumbnailUrl($width * 2, $height * 2, $crop, $fit), ' 2x"';
else
echo ' srcset="', $image->getThumbnailUrl($image->width(), $image->height(), true), ' 2x"';
// Prefer thumbnail aspect ratio if available, otherwise use image aspect ratio.
$aspectRatio = isset($width, $height) ? $width / $height : $image->ratio();
echo ' alt="" title="', $image->getTitle(), '" style="aspect-ratio: ', $aspectRatio, '">';
echo ' alt="" title="', $image->getTitle(), '" class="', $className, '" style="aspect-ratio: ', $aspectRatio, '">';
}
if ($this->show_labels)
echo '