Add back link and fix breadcrumb line wrap

This commit is contained in:
echo 2019-10-16 21:48:59 -04:00
parent b4b0b06e58
commit 1ae9ec3bb1
3 changed files with 22 additions and 13 deletions
theme
static/css
templates

View File

@ -57,6 +57,9 @@ header h2 {
margin: 0;
margin-left: .5em;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
header h2 a {

View File

@ -26,8 +26,7 @@ main {
.img-links {
justify-content: start;
margin-left: -1.5rem;
margin-top: .5em;
margin: 0 0 .5em -1.5rem;
position: relative;
z-index: 1;
}
@ -59,7 +58,7 @@ main {
flex-wrap: wrap;
align-items: start;
width: calc(100% + 1.5rem);
margin:0.5rem 0 0 -1.5rem;
margin: 0.5rem 0 0 -1.5rem;
position: relative;
z-index: 1;
}
@ -76,7 +75,8 @@ main {
flex-shrink: 0;
}
.meta > div:nth-of-type(2) {
.meta > div:nth-of-type(2),
.img-links > li:first-of-type {
flex: 1 0 auto;
}
@ -136,17 +136,14 @@ main {
width: 100%;
}
.meta {
.meta, .img-links {
margin-left: -1rem;
width: calc(100% + .5rem);
justify-content: space-between;
}
.img-links {
margin-left: -1em;
}
.meta > div:nth-of-type(2) {
.meta > div:nth-of-type(2),
.img-links > li:first-of-type {
flex-grow: 0;
}
}

View File

@ -13,6 +13,18 @@
{% block content %}
<div class="img-container">
<div>
<ul class="img-links">
<li>
<a href="../{{ album.url }}#{{ media.url }}" title="Go back to album">
<i aria-hidden="true" class="fa fa-reply"></i> <span>Back to album</span>
</a>
</li>
<li>
<a href="{{ media.big_url }}" title="Download original file">
<i aria-hidden="true" class="fa fa-download"></i> <span>Download</span>
</a>
</li>
</ul>
<img src="{{ media.url }}" alt="{{ media.title }}">
<dl class="meta">
{% if media.exif.dateobj %}
@ -51,9 +63,6 @@
</div>
{% endif %}
</dl>
<ul class="img-links">
<li><a href="{{ media.big_url }}" title="Download original file"><i aria-hidden="true" class="fa fa-download"></i> <span>Download</span></a></li>
</ul>
</div>
</div>