Browse Source

Display camera settings

master
parent
commit
3e3df549c4
  1. 47
      theme/static/css/media.css
  2. 44
      theme/templates/media.html

47
theme/static/css/media.css

@ -33,36 +33,38 @@ main {
.meta {
display: flex;
width: 100%;
margin-top: .5rem;
flex-wrap: wrap;
align-items: start;
width: calc(100% + 1.5rem);
margin:0.5rem 0 0 -1.5rem;
position: relative;
z-index: 1;
}
.meta div {
flex: 0 1 auto;
}
.meta div {
flex-grow: 1;
}
.meta dt {
.meta > div {
margin-left: 1.5rem;
}
.meta dd {
margin: 0 0 0 .2rem;
margin: 0 0 0 .5rem;
}
.meta > div {
flex-shrink: 0;
}
.meta dl {
margin: 0;
.meta > div:nth-of-type(2) {
flex: 1 0 auto;
}
.meta dd, .meta dt {
display: inline-block;
}
.meta li:not(:first-of-type) {
margin-left: 1rem;
}
.overlay-nav, .media-nav a {
color: inherit;
}
@ -112,21 +114,6 @@ main {
}
.meta {
flex-direction: column;
}
.meta > div {
text-align: center;
}
.meta dl {
margin: .5rem;
display: grid;
grid-template-columns: auto 1fr;
}
.meta dt {
margin-left: 0;
margin-right: 1.5rem;
margin-left: -1rem;
}
}

44
theme/templates/media.html

@ -14,21 +14,43 @@
<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 %}
<dl class="meta">
{% if media.exif.dateobj %}
<div>
<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 %}
</div>
{% endif %}
{% if media.meta.location %}
{% if media.meta.location %}
<div>
<dt><i class="fa fa-map-marker" aria-hidden="true" title="Location"></i></dt>
<dd>{{ media.meta.location[0] }}</dd>
{% endif %}
</dl>
</div>
</div>
{% endif %}
{% if media.exif %}
<div>
<dt><i class="fa fa-sliders" aria-hidden="true" title="Camera settings"></i></dt>
<dd>
<ul>
{% if media.exif.focal %}
<li>{{ media.exif.focal }}mm</li>
{% endif %}
{% if media.exif.fstop %}
<li>f/{{ media.exif.fstop }}</li>
{% endif %}
{% if media.exif.exposure %}
<li>{{ media.exif.exposure }}s</li>
{% endif %}
{% if media.exif.iso %}
<li>ISO {{ media.exif.iso}}</li>
{% endif %}
</ul>
</dd>
</div>
{% endif %}
</dl>
</div>
</div>
@ -45,4 +67,6 @@
</a>
{% endif %}
<!-- <div>{{ media_index }} / {{ album.medias|length }}</div> -->
{% endblock %}

Loading…
Cancel
Save