Browse Source

Add date and location meta data

master
parent
commit
60306c9f7a
  1. 2
      theme/static/css/main.css
  2. 52
      theme/static/css/media.css
  3. 25
      theme/templates/media.html

2
theme/static/css/main.css

@ -16,7 +16,7 @@ a {
}
header {
padding: 15px;
padding: 1em;
border-bottom: #262a50 solid 2px;
display: flex;
align-items: baseline;

52
theme/static/css/media.css

@ -14,28 +14,54 @@ main {
align-items: center;
}
main > div {
.img-container {
flex: 1 0 auto;
position: relative;
width: 100%;
margin: 1em auto;
margin-top: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
main > div > img {
.img-container img {
max-width: 100%;
max-height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-height: calc(100vh - 10rem);
}
.meta {
display: flex;
width: 100%;
}
.meta div {
flex: 0 1 auto;
}
.meta div {
flex-grow: 1;
}
.meta dt {
margin-left: 1.5rem;
}
.meta dd {
margin: 0 0 0 .2rem;
}
.meta dl {
margin: 0;
}
.meta dd, .meta dt {
display: inline-block;
}
.overlay-nav, .media-nav a {
color: inherit;
}
/*
.media-nav {
margin-bottom: 1em;
}
@ -43,7 +69,7 @@ main > div > img {
.media-nav a:not([href]) {
color: #a0a0a0;
}
*/
.overlay-nav {
position: fixed;
height: 100%;
@ -51,7 +77,7 @@ main > div > img {
display: flex;
align-items: center;
text-decoration: none;
padding: 0 0.5em;
padding: 0 0.5rem;
}

25
theme/templates/media.html

@ -11,10 +11,28 @@
{% endblock %}
{% block content %}
<div>
<img src="{{ media.url }}" alt="{{ media.title }}">
<div class="img-container">
<div>
<img src="{{ media.url }}" alt="{{ media.title }}">
<div class="meta">
<div>{{ media_index }} / {{ album.medias|length }}</div>
<dl>
{% if media.exif.dateobj %}
<dt><i class="fa fa-calendar" aria-hidden="true" title="Date taken"></i></dt>
<dd>{{ media.exif.dateobj.strftime('%a, %d. %b %Y') }} </dd>
{% endif %}
{% if media.meta.location %}
<dt><i class="fa fa-map-marker" aria-hidden="true" title="Location"></i></dt>
<dd>{{ media.meta.location[0] }}</dd>
{% endif %}
</dl>
</div>
</div>
</div>
{% if previous_media %}
<a class="overlay-nav previous" href="{{ previous_media.url }}.html">
<i class="fa fa-arrow-left fa-4x" aria-hidden="true"></i>
@ -27,7 +45,7 @@
</a>
{% endif %}
<nav class="media-nav">
<!-- <nav class="media-nav">
<ul>
<li>
<a
@ -53,4 +71,5 @@
</li>
</ul>
</nav>
-->
{% endblock %}

Loading…
Cancel
Save