andrey/album
1
0
Fork 0
Code Issues 10 Pull Requests Packages Projects Releases Wiki Activity

Improve details view.

Browse Source
This commit is contained in:
Rasmus Kaj 2017-02-03 19:44:13 +01:00
parent b69ceb8166
commit 17e62508a1
2 changed files with 60 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
photos.scss
View File

@ -1,6 +1,17 @@
$border: 1px solid #333;
body {
background: #eee;
margin-top: 2em;
line-height: 1.6;
}
p {
margin: 0;
}
p + p {
margin-top: 1ex;
}
header {
@ -26,13 +37,20 @@ header {
}
}
.item {
background: #ccc;
border: $border;
img {
box-shadow: 0 .2em 1em -.2em #000;
vertical-align: middle;
}
}
div.group {
display: flex;
flex-flow: row-reverse wrap;
.item {
background: #ccc;
border: 1px solid #333;
display: flex;
flex-basis: 210px;
flex-flow: column;
@ -45,11 +63,30 @@ div.group {
h2, p {
margin: .2em;
}
img {
box-shadow: 0 .2em 1em -.2em #000;
}
}
}
div.details {
display: flex;
flex-flow: row wrap;
.item, .meta {
padding: 1em;
}
.item {
align-self: flex-start;
flex-grow: 3;
flex-basis: 30em;
text-align: center;
img {
max-width: 100%;
}
}
.meta {
flex-grow: 1;
flex-basis: 25em;
padding-top: 0;
}
}
ul.alltags, ul.allpeople, ul.allplaces {
-moz-column-width: 13em;
@ -57,9 +94,7 @@ ul.alltags, ul.allpeople, ul.allplaces {
}
#map {
border: 1px solid #333;
float: right;
border: $border;
height: 8em;
margin: 1ex;
width: 40%;
margin: 1ex auto;
}

28
templates/details.rs.html
View File

@ -4,8 +4,21 @@
@(lpath: Vec<Link>, user: Option<String>, people: Vec<Person>, places: Vec<Place>, tags: Vec<Tag>, position: Option<Coord>, camera: Option<Camera>, time: String, photo: Photo)
@:page_base("Photo details", lpath, user, {
<div class="details">
<div class="item"><img src="/img/@photo.id-m.jpg"></div>
<div class="meta">
<p><a href="/img/@photo.id-l.jpg">@photo.path</a></p>
<p><img src="/img/@photo.id-m.jpg"></p>
@if let Some(g) = photo.grade {<p>Betyg: @g</p>}
<p>Tid: @time</p>
@if !people.is_empty() {
<p>People: @for p in people{<a href="/person/@p.slug">@p.person_name</a>, }</p>}
@if !places.is_empty() {
<p>Places: @for p in places{<a href="/place/@p.slug">@p.place_name</a>, }</p>}
@if !tags.is_empty() {
<p>Tags: @for t in tags{<a href="/tag/@t.slug">@t.tag_name</a>, }</p>}
@if let Some(ref pos) = position {<p>Position: @pos.x @pos.y</p>}
@if let Some(ref c) = camera{<p>Camera: @c.model (@c.manufacturer)</p>}
@if let Some(ref pos) = position {
<div id="map"></div>
@ -28,15 +41,6 @@
<script language="javascript" src="https://rasmus.krats.se/static/leaflet077c/leaflet.js" type="text/javascript" async onload="initmap()">
</script>
}
@if let Some(g) = photo.grade {<p>Betyg: @g</p>}
<p>Tid: @time</p>
@if !people.is_empty() {
<p>People: @for p in people{<a href="/person/@p.slug">@p.person_name</a>, }</p>}
@if !places.is_empty() {
<p>Places: @for p in places{<a href="/place/@p.slug">@p.place_name</a>, }</p>}
@if !tags.is_empty() {
<p>Tags: @for t in tags{<a href="/tag/@t.slug">@t.tag_name</a>, }</p>}
@if let Some(ref pos) = position {<p>Position: @pos.x @pos.y</p>}
@if let Some(ref c) = camera{<p>Camera: @c.model (@c.manufacturer)</p>}
</div>
</div>
})