Improve SAS UX

This commit is contained in:
Skia
2016-11-20 23:53:41 +01:00
parent 7dff98d853
commit 0e0e57458f
9 changed files with 153 additions and 67 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 KiB

View File

@ -307,6 +307,42 @@ textarea {
display: inline;
}
/*------------------------------SAS------------------------------------*/
.album {
display: inline-block;
border: solid 1px black;
text-align: center;
padding: 5px;
width: 200px;
height: 133px;
background: #eee;
box-shadow: black 2px 2px 10px;
margin: 10px;
}
.album img {
max-height: 100px;
}
.picture {
display: inline-block;
border: solid 1px black;
width: 150px;
height: 100px;
margin: 5px;
background: #eee;
box-shadow: grey 2px 2px 5px;
padding: 2px;
vertical-align: middle;
}
.picture img {
max-width: 100%;
max-height: 100px;
display: block;
margin: auto;
}
/*--------------------------------FOOTER-------------------------------*/
footer{
text-align: center;
@ -366,3 +402,5 @@ label {
height: 100%;
vertical-align: middle;
}

View File

@ -7,15 +7,18 @@
{% block content %}
{% for r in user.pictures.exclude(picture=None).values('user__pictures__picture__parent').distinct() %}
{% set album = user.pictures.filter(picture__parent=r['user__pictures__picture__parent']).first().picture.parent %}
<h4>{{ album.name }}</h4>
{% for r in user.pictures.exclude(picture=None).filter(picture__parent=album) %}
<div style="display: inline-block; border: solid 1px black; width: 9%; margin: 0.1%">
<a href="{{ url("sas:picture", picture_id=r.picture.id) }}#pict">
<img src="{{ r.picture.as_picture.get_download_thumb_url() }}" alt="{{ r.picture.get_display_name() }}" style="max-width: 100%"/>
</a>
<div style="padding: 10px">
{% set album = user.pictures.filter(picture__parent=r['user__pictures__picture__parent']).first().picture.parent %}
<h4>{{ album.name }}</h4>
<hr>
{% for r in user.pictures.exclude(picture=None).filter(picture__parent=album) %}
<div class="picture">
<a href="{{ url("sas:picture", picture_id=r.picture.id) }}#pict">
<img src="{{ r.picture.as_picture.get_download_thumb_url() }}" alt="{{ r.picture.get_display_name() }}" style="max-width: 100%"/>
</a>
</div>
{% endfor %}
</div>
{% endfor %}
{% endfor %}
{% endblock %}