From 346512ba80c8f5bacad43e2f95fc504815af0c92 Mon Sep 17 00:00:00 2001
From: Kacper Donat <kadet1090@gmail.com>
Date: Tue, 9 Jun 2020 00:25:46 +0200
Subject: [PATCH] Fix styles

---
 app/templates/album/index.html  | 11 +++++----
 app/templates/album/photos.html | 12 ++++++----
 app/templates/base.html         |  2 +-
 assets/style.scss               | 41 ++++++++++++++++++---------------
 4 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/app/templates/album/index.html b/app/templates/album/index.html
index 2a9d034..ac55650 100644
--- a/app/templates/album/index.html
+++ b/app/templates/album/index.html
@@ -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">
diff --git a/app/templates/album/photos.html b/app/templates/album/photos.html
index 774beea..20e65a0 100644
--- a/app/templates/album/photos.html
+++ b/app/templates/album/photos.html
@@ -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 %}
diff --git a/app/templates/base.html b/app/templates/base.html
index f883477..d767e17 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -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>
 
diff --git a/assets/style.scss b/assets/style.scss
index 189e920..38dabd9 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -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;
     }