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

More work on sizing in image lists.

Browse Source
This commit is contained in:
Rasmus Kaj 2019-05-12 17:27:01 +02:00
parent 2d07e515fc
commit ee7b497745
2 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
res/photos.scss
View File

@ -85,15 +85,28 @@ div.group {
display: flex;
flex-flow: row-reverse wrap;
justify-content: space-between;
margin: 0 -.1em;
.item {
position: relative;
margin: .4em .1em;
flex-grow: .1;
&.portrait {
flex-grow: .3;
}
img {
display: block;
height: calc(unquote('6em + 8vw'));
width: auto;
height: calc(unquote('5em + 10vw'));
object-fit: cover;
object-position: 50% 33%;
width: -moz-available;
width: -webkit-fill-available;
width: available;
}
// TODO: Set first-line class by js.
&.first-line img {
height: calc(unquote('6em + 11vw'));
}
h2, .lable {
text-shadow: 0 0 .1em white, 0 0 .4em white;
@ -117,6 +130,8 @@ div.group {
h2 {
background: rgba(white,0.5);
width: -moz-available;
width: -webkit-fill-available;
width: available;
}
.lable {
background: rgba(white,0.8);
@ -142,9 +157,13 @@ div.details {
width: 30em;
&.zoom {
width: -moz-available;
width: -webkit-fill-available;
width: available;
}
img {
width: -moz-available;
width: -webkit-fill-available;
width: available;
height: auto;
display: block;
}

2
templates/photo_link.rs.html
View File

@ -1,7 +1,7 @@
@use crate::server::PhotoLink;
@(photo: &PhotoLink)
<div class="item">@if let Some(ref title) = photo.title {<h2>@title</h2>}
<div class="item@if let Some((w, h)) = photo.size {@if h > w { portrait}}">@if let Some(ref title) = photo.title {<h2>@title</h2>}
<a href="@photo.href"><img src="/img/@photo.id-s.jpg" @if let Some((w, h)) = photo.size {width="@w" height="@h"} alt="Photo @photo.id"></a>
@if let Some(ref d) = photo.lable {<span class="lable">@d</span>}
</div>