PG/JS-P04
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix styles

Browse Source
This commit is contained in:
Kacper Donat 2020-06-09 00:25:46 +02:00
parent 204d7bf1c5
commit 346512ba80
4 changed files with 39 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/templates/album/index.html
View File

@ -8,11 +8,14 @@
<ul class="gallery"> <ul class="gallery">
{% for album in albums %} {% for album in albums %}
<li class="gallery__entry album"> <li class="gallery__entry album">
<img src="{{ album.photo_set.first.thumbnail.url }}" class="album__thumbnail" /> {% if album.photo_set.first %}
<img src="{{ album.photo_set.first.thumbnail.url }}" class="album__thumbnail" />
{% else %}
<div class="album__tumbnail album__thumbnail--placeholder"></div>
{% endif %}
<div class="album__header"> <div class="album__header">
<a class="album__title" href="{% url 'album' album.id %}">{{ album.title }}</a> <span class="album__title">{{ album.title }}</span>
</div> </div> <a class="stretched-link" href="{% url 'album' album.id %}"><span class="sr-only">{{ album.title }}</span></a> </li>
</li>
{% endfor %} {% endfor %}
{% if user.is_authenticated %} {% if user.is_authenticated %}
<li class="gallery__entry gallery__entry--action"> <li class="gallery__entry gallery__entry--action">

12
app/templates/album/photos.html
View File

@ -21,12 +21,16 @@
</li> </li>
</ul> </ul>
{% endif %} {% endif %}
{% if album.description %}
<p>{{ album.description }}</p>
{% endif %}
<ul class="gallery"> <ul class="gallery">
{% for photo in photos %} {% for photo in photos %}
<li class="gallery__entry photo"> <li class="gallery__entry album">
<a href="{% url 'photo' album.id photo.id %}"> <img src="{{ photo.thumbnail.url }}" class="photo__thumbnail" />
<img src="{{ photo.thumbnail.url }}" class="photo__thumbnail" /> <a href="{% url 'photo' album.id photo.id %}" class="stretched-link"><span class="sr-only">{{ photo.title }}</span></a>
</a>
</li> </li>
{% endfor %} {% endfor %}
{% if is_my %} {% if is_my %}

2
app/templates/base.html
View File

@ -21,7 +21,7 @@
</header> </header>
<main class="app container"> <main class="app container">
<header class="app__header"> <header class="app__header">
<h1>Galeria Zdjęć</h1> <h1><a href="/">Galeria Zdjęć</a></h1>
{% block subtitle %}{% endblock %} {% block subtitle %}{% endblock %}
</header> </header>

41
assets/style.scss
View File

@ -16,19 +16,6 @@ a {
color: black; color: black;
} }
%link-extended {
&::after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
content: "";
z-index: 10;
}
}
.app { .app {
margin: 100px auto; margin: 100px auto;
} }
@ -49,8 +36,9 @@ a {
.gallery__entry { .gallery__entry {
&::after { &::after {
padding-bottom: 56.25%; padding-bottom: 66.66%;
content: ""; content: "";
display: block;
} }
width: calc(33.33% - 1rem); width: calc(33.33% - 1rem);
@ -76,8 +64,6 @@ a {
.album { .album {
position: relative; position: relative;
display: flex;
flex-direction: column-reverse;
} }
.album__thumbnail, .photo__thumbnail { .album__thumbnail, .photo__thumbnail {
@ -87,12 +73,33 @@ a {
background-color: #ddd; background-color: #ddd;
} }
.album__thumbnail--placeholder {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
z-index: -1;
width: 100%;
background-color: #ddd;
&::after {
content: "Brak zdjęć";
text-align: center;
position: absolute;
top: 20px;
left: 0;
right: 0;
font-weight: bold;
}
}
.album__header { .album__header {
bottom: 0; bottom: 0;
background-color: rgba(black, 0.5); background-color: rgba(black, 0.5);
padding: 1rem; padding: 1rem;
text-align: center; text-align: center;
z-index: 1; z-index: 1;
position: absolute;
left: 0;
right: 0;
} }
.album__title { .album__title {
@ -100,8 +107,6 @@ a {
color: white; color: white;
text-shadow: 0 0 2px rgba(black, 0.5); text-shadow: 0 0 2px rgba(black, 0.5);
@extend %link-extended;
&:hover { &:hover {
color: white; color: white;
} }