Compare commits
1 Commits
861be10010
...
0d094996df
| Author | SHA1 | Date | |
|---|---|---|---|
| 0d094996df |
@ -48,10 +48,6 @@ 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;
|
||||
}
|
||||
@ -62,15 +58,6 @@ 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 {
|
||||
@ -173,21 +160,6 @@ 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;
|
||||
@ -198,10 +170,6 @@ i.nyan-cat {
|
||||
top: -7px;
|
||||
width: 70px;
|
||||
}
|
||||
i.nyan-cat {
|
||||
left: -57px;
|
||||
top: -7px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -244,57 +212,33 @@ i.nyan-cat {
|
||||
|
||||
div.polaroid {
|
||||
background: var(--bs-body-bg);
|
||||
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
transition: 0.25s;
|
||||
}
|
||||
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;
|
||||
div.polaroid img {
|
||||
background: 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
|
||||
@ -444,53 +388,22 @@ footer a {
|
||||
|
||||
/* Styling for the photo pages
|
||||
--------------------------------*/
|
||||
|
||||
#photo_frame {
|
||||
padding: 3.5vh 0;
|
||||
padding-top: 1.5vh;
|
||||
text-align: center;
|
||||
height: 95vh;
|
||||
}
|
||||
#photo_frame a {
|
||||
|
||||
#photo-figure {
|
||||
position: relative;
|
||||
object-fit: contain;
|
||||
height: 93vh;
|
||||
object-position: center center;
|
||||
}
|
||||
#photo-figure img {
|
||||
object-position: center center;
|
||||
}
|
||||
#photo-figure img.normal-photo {
|
||||
#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%;
|
||||
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%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#previous_photo, #next_photo {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
@ -42,7 +42,7 @@ class AlbumIndex extends Template
|
||||
{
|
||||
echo '
|
||||
<div class="col-md-6 col-xl-4">
|
||||
<div class="polaroid landscape" style="aspect-ratio: 1.12">';
|
||||
<div class="polaroid landscape">';
|
||||
|
||||
if ($this->show_edit_buttons)
|
||||
echo '
|
||||
@ -58,20 +58,15 @@ class AlbumIndex extends Template
|
||||
$thumbs[$factor] = $album['thumbnail']->getThumbnailUrl(
|
||||
static::TILE_WIDTH * $factor, static::TILE_HEIGHT * $factor, true, true);
|
||||
|
||||
foreach (['normal-photo', 'blur-photo'] as $className)
|
||||
{
|
||||
echo '
|
||||
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">';
|
||||
}
|
||||
|
||||
|
||||
@ -20,13 +20,12 @@ 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="', $className, '"></i>
|
||||
<i class="space-invader', $alt, '"></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">
|
||||
|
||||
@ -67,31 +67,17 @@ class PhotoPage extends Template
|
||||
protected function photo()
|
||||
{
|
||||
echo '
|
||||
<a href="', $this->photo->getUrl(), '">
|
||||
<div id="photo_frame">';
|
||||
<div id="photo_frame">
|
||||
<a href="', $this->photo->getUrl(), '">';
|
||||
|
||||
if ($this->photo->isPortrait())
|
||||
{
|
||||
echo '
|
||||
<figure id="photo-figure" class="portrait-figure">',
|
||||
$this->photo->getInlineImage(null, 960, 'normal-photo'),
|
||||
$this->photo->getInlineImage(null, 960, 'blur-photo'), '
|
||||
</figure>';
|
||||
}
|
||||
echo $this->photo->getInlineImage(null, 960);
|
||||
else
|
||||
{
|
||||
$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 $this->photo->getInlineImage(1280, null);
|
||||
|
||||
echo '
|
||||
</figure>
|
||||
</div>
|
||||
</a>';
|
||||
</a>
|
||||
</div>';
|
||||
}
|
||||
|
||||
private function photoNav()
|
||||
|
||||
@ -83,33 +83,27 @@ 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, '" style="aspect-ratio: ', $aspectRatio, '">';
|
||||
<div class="polaroid ', $className, '">';
|
||||
|
||||
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">';
|
||||
|
||||
|
||||
foreach (['normal-photo', 'blur-photo'] as $className)
|
||||
{
|
||||
echo '
|
||||
<a href="', $image->getPageUrl(), $this->url_suffix, '#photo_frame">
|
||||
<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"';
|
||||
|
||||
echo ' alt="" title="', $image->getTitle(), '" class="', $className, '" style="aspect-ratio: ', $aspectRatio, '">';
|
||||
}
|
||||
// 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, '">';
|
||||
|
||||
if ($this->show_labels)
|
||||
echo '
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user