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">
{% for album in albums %}
<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">
<a class="album__title" href="{% url 'album' album.id %}">{{ album.title }}</a>
</div>
</li>
<span class="album__title">{{ album.title }}</span>
</div> <a class="stretched-link" href="{% url 'album' album.id %}"><span class="sr-only">{{ album.title }}</span></a> </li>
{% endfor %}
{% if user.is_authenticated %}
<li class="gallery__entry gallery__entry--action">

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

@ -21,12 +21,16 @@
</li>
</ul>
{% endif %}
{% if album.description %}
<p>{{ album.description }}</p>
{% endif %}
<ul class="gallery">
{% for photo in photos %}
<li class="gallery__entry photo">
<a href="{% url 'photo' album.id photo.id %}">
<img src="{{ photo.thumbnail.url }}" class="photo__thumbnail" />
</a>
<li class="gallery__entry album">
<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>
</li>
{% endfor %}
{% if is_my %}

2
app/templates/base.html
View File

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

41
assets/style.scss
View File

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