seiichiro/vsgallery
1
0
Fork 0
Code Pull requests Releases Activity

Some Small Layout and Navigation Improvements

Browse source
This commit is contained in:
seiichiro 2023-12-09 15:44:57 +01:00
parent fa475c657e
commit c077545583
3 changed files with 63 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
css/style.css
View file

@ -250,7 +250,7 @@ input[type=checkbox]{
.content-single .clickable-left { .content-single .clickable-left {
grid-column: 1 / 2; grid-column: 1 / 2;
grid-row: 1 / 2; grid-row: 1 / 3;
} }
.content-single .clickable-center { .content-single .clickable-center {
@ -260,7 +260,7 @@ input[type=checkbox]{
.content-single .clickable-right { .content-single .clickable-right {
grid-column: 3 / 4; grid-column: 3 / 4;
grid-row: 1 / 2; grid-row: 1 / 3;
} }
/* Error Page */ /* Error Page */
@ -275,7 +275,6 @@ input[type=checkbox]{
/* Page Footer Styling */ /* Page Footer Styling */
.page-footer { .page-footer {
padding: 8px; padding: 8px;
margin: 10px 0px 0px 0px;
background-color: #404040; background-color: #404040;
color: #c0c0c0; color: #c0c0c0;
@ -289,7 +288,8 @@ input[type=checkbox]{
text-align: center; text-align: center;
overflow: auto; display: grid;
grid-template-columns: 8em 1fr 8em;
} }
.page-footer a { .page-footer a {
@ -301,7 +301,7 @@ input[type=checkbox]{
text-decoration: none; text-decoration: none;
} }
.page-footer .info { .page-footer .info-item {
margin-left: 0.5em; margin-left: 0.5em;
margin-right: 0.5em; margin-right: 0.5em;
font-size: 2em; font-size: 2em;
@ -309,6 +309,11 @@ input[type=checkbox]{
color: #ffffff; color: #ffffff;
} }
.page-footer .tags {
grid-column: 2 / 3;
overflow: auto;
}
.page-footer .tag { .page-footer .tag {
margin-left: 0.5em; margin-left: 0.5em;
margin-right: 0.5em; margin-right: 0.5em;
@ -316,3 +321,19 @@ input[type=checkbox]{
font-weight: normal !important; font-weight: normal !important;
color: #00ff00; color: #00ff00;
} }
.page-footer .footer-nav-left {
grid-column: 1 / 2;
width: 8em;
text-align: left;
}
.page-footer .footer-nav-right {
grid-column: 3 / 4;
width: 8em;
text-align: right;
}
.page-footer .footer-nav-right a {
padding-right: 16px;
}

29
tpl/gallery.html
View file

@ -51,20 +51,23 @@
{% endif %} {% endif %}
</div> </div>
<div class="page-footer"> <div class="page-footer">
{% if ($page > 1): %} <div>&nbsp;</div>
<a id="link-first" href="/index.php?d={{ $dir }}&so={{ $sort }}&p=1&s={{ $slice }}{{ $filter }}">1</a> <div class="info"></div>
<a id="link-prev" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $prev_page }}&s={{ $slice }}{{ $filter }}">&nbsp;<i class="fa fa-caret-left"></i>&nbsp;</a> {% if ($page > 1): %}
{% endif %} <a id="link-first" href="/index.php?d={{ $dir }}&so={{ $sort }}&p=1&s={{ $slice }}{{ $filter }}">1</a>
<a id="link-prev" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $prev_page }}&s={{ $slice }}{{ $filter }}">&nbsp;<i class="fa fa-caret-left"></i>&nbsp;</a>
{% endif %}
{% if ($sort == 1): %} {% if ($sort == 1): %}
<a class="info" href="/index.php?d={{ $dir }}&so=0&p={{ $page }}&s={{ $slice }}{{ $filter }}"><i class="fa fa-caret-down"></i>&nbsp;{{ $page }}</a> <a class="info" href="/index.php?d={{ $dir }}&so=0&p={{ $page }}&s={{ $slice }}{{ $filter }}"><i class="fa fa-caret-down"></i>&nbsp;{{ $page }}</a>
{% else: %} {% else: %}
<a class="info" href="/index.php?d={{ $dir }}&so=1&p={{ $page }}&s={{ $slice }}{{ $filter }}"><i class="fa fa-caret-up"></i>&nbsp;{{ $page }}</a> <a class="info" href="/index.php?d={{ $dir }}&so=1&p={{ $page }}&s={{ $slice }}{{ $filter }}"><i class="fa fa-caret-up"></i>&nbsp;{{ $page }}</a>
{% endif %} {% endif %}
{% if ($page < $last_page): %} {% if ($page < $last_page): %}
<a id="link-next" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $next_page }}&s={{ $slice }}{{ $filter }}">&nbsp;<i class="fa fa-caret-right"></i>&nbsp;</a> <a id="link-next" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $next_page }}&s={{ $slice }}{{ $filter }}">&nbsp;<i class="fa fa-caret-right"></i>&nbsp;</a>
<a id="link-last" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $last_page }}&s={{ $slice }}{{ $filter }}">{{ $last_page }}</a> <a id="link-last" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $last_page }}&s={{ $slice }}{{ $filter }}">{{ $last_page }}</a>
{% endif %} {% endif %}
</div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}

26
tpl/single.html
View file

@ -12,7 +12,7 @@
{% endif %} {% endif %}
{% if(str_starts_with($filetype, 'video/')): %} {% if(str_starts_with($filetype, 'video/')): %}
<div class="single-video"> <div class="single-video">
<video controls muted loop> <video controls loop>
<source src='{{ $imageurl }}' type='{{ $filetype }}'> <source src='{{ $imageurl }}' type='{{ $filetype }}'>
</video> </video>
</div> </div>
@ -20,27 +20,39 @@
<div class="single-image"> <div class="single-image">
<img src='{{ $imageurl }}' title="{{ $page }}/{{ $last_page }}" /> <img src='{{ $imageurl }}' title="{{ $page }}/{{ $last_page }}" />
</div> </div>
{% endif %}
{% if ($page > 1): %} {% if ($page > 1): %}
<a id="link-prev" class="clickable clickable-left" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $prev_page }}&s=1&gs={{ $gallery_slice }}{{ $filter }}"> <a class="clickable clickable-left" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $prev_page }}&s=1&gs={{ $gallery_slice }}{{ $filter }}">
<div></div> <div></div>
</a> </a>
{% endif %} {% endif %}
<a id="link-home" class="clickable clickable-center" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $gallery_page }}&s={{ $gallery_slice }}{{ $filter }}"> <a class="clickable clickable-center" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $gallery_page }}&s={{ $gallery_slice }}{{ $filter }}">
<div></div> <div></div>
</a> </a>
{% if ($page < $last_page): %} {% if ($page < $last_page): %}
<a id="link-next" class="clickable clickable-right" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $next_page }}&s=1&gs={{ $gallery_slice }}{{ $filter }}"> <a class="clickable clickable-right" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $next_page }}&s=1&gs={{ $gallery_slice }}{{ $filter }}">
<div></div> <div></div>
</a> </a>
{% endif %} {% endif %}
{% endif %}
</div> </div>
{% if(!empty($tags)): %}
<div class="page-footer"> <div class="page-footer">
<div class="footer-nav footer-nav-left">
{% if ($page > 1): %}
<a id="link-prev" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $prev_page }}&s=1&gs={{ $gallery_slice }}{{ $filter }}">&nbsp;<i class="fa fa-caret-left"></i>&nbsp;</a>
{% endif %}
<a id="link-home" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $gallery_page }}&s={{ $gallery_slice }}{{ $filter }}">&nbsp;<i class="fa fa-caret-up"></i>&nbsp;</a>
</div>
<div class="tags">
{% foreach($tags as $tag): %} {% foreach($tags as $tag): %}
<a href="/index.php?d={{ $dir }}&so={{ $sort }}&s={{ $gallery_slice }}&f={{{ $tag }}}"><span class="tag">{{ $tag }}</span></a> <a href="/index.php?d={{ $dir }}&so={{ $sort }}&s={{ $gallery_slice }}&f={{{ $tag }}}"><span class="tag">{{ $tag }}</span></a>
{% endforeach %} {% endforeach %}
</div>
<div class="footer-nav footer-nav-right">
{% if ($page < $last_page): %}
<a id="link-next" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $next_page }}&s=1&gs={{ $gallery_slice }}{{ $filter }}">&nbsp;<i class="fa fa-caret-right"></i>&nbsp;</a>
{% endif %}
</div>
</div>
</div> </div>
{% endif %}
</div> </div>
{% endblock %} {% endblock %}