Reorganize artists page (WIP)

label/models.py

@@ -43,21 +43,21 @@ class Release(models.Model):
         ident: catalog number
         title: release title
         contributors: list of Artists who contributed to this release
-        release_type: see below
+        release_type: see TYPE_HINT
         year: year of release
         cover: image file associated to this release
     """
 
-    REL_TYPES_HINT = 'full-length (0), EP (1), Split (2), Démo (3)'
+    TYPE_HINT = 'full-length (0), EP (1), Split (2), Démo (3)'
-    REL_EMBED_HINT = 'HTML iframe -- for Bandcamp, add the whole tracklist'
+    EMBED_HINT = 'HTML iframe -- for Bandcamp, add the whole tracklist'
 
     ident = models.IntegerField()
     title = models.CharField(max_length=256)
     contributors = models.ManyToManyField(Artist)
-    release_type = models.IntegerField(default=0, help_text=REL_TYPES_HINT)
+    release_type = models.IntegerField(default=0, help_text=TYPE_HINT)
     cover = models.ImageField(upload_to='releases')
     year = models.IntegerField()
-    embed = models.TextField(blank=True, help_text=REL_EMBED_HINT)
+    embed = models.TextField(blank=True, help_text=EMBED_HINT)
     description = models.TextField(blank=True)
 
     def __str__(self):

label/templates/label/artists.html

@@ -11,21 +11,21 @@
 {% block content %}
 
 <h1>Artists</h1>
-  <p class="artists"> 
+  <div class="artists">
     {% for artist in artists %}
     {% if artist.artist_type == 0 %}
-    <span class="artist">
     <a href="{% url 'artist' artist.slug %}">
-        <img src="{{ MEDIA_URL }}{{ artist.image }}" alt="" /> <br />
+      <span class="artist">
+        <div class="logo" style="background-image: url('{{ MEDIA_URL }}{{ artist.image }}');"></div>
         {{ artist.name }}
         <span class="artist-genre">{{ artist.genre }}</span>
-      </a>
       </span>
+    </a>
     {% endif %}
     {% endfor %}
-  </p>
+  </div>
 
-<h1>Side projects</h1>
+<!-- <h1>Side projects</h1>
   <p class="artists"> 
     {% for artist in artists %}
     {% if artist.artist_type == 1 %}
@@ -38,5 +38,5 @@
     </span>
     {% endif %}
     {% endfor %}
-  </p>
+  </p> -->
 {% endblock %}

static/css/artists.css

@@ -9,7 +9,7 @@
 }
 
 .artists .artist {
-  width: 120px;
+  width: 160px;
   position: relative;
   margin: 5px;
   display: inline-block;
@@ -19,27 +19,25 @@
   color: #929292;
   text-decoration: none;
   transition: .5s;
-  -moz-transition: .5s;
-  -ms-transition: .5s;
-  -o-transition: .5s;
-  -webkit-transition: .5s;
 }
 
-.artists .artist img {
+.artists .artist .logo {
-  height: 120px;
+  height: 160px;
-  width: 120px;
+  width: 160px;
+  background-size: cover;
+  background-color: white;
   border: none;
   border-radius: 5px;
 }
 
 .artists .artist-genre {
-  height: 120px;
+  display: flex;
-  width: 120px;
+  position: absolute;
-  position:absolute;
   top: 0px;
   left: 0px;
-
+  height: 150px;
-  display: flex;
+  width: 150px;
+  padding: 5px;
   align-items: center;
   justify-content: center;
   background-color: rgba(0, 0, 0, 0.6);
@@ -47,7 +45,6 @@
   color: white;
   opacity: 0;
   transition: all 0.7s ease;
-  -webkit-transition: all 0.7s ease;
 }
 
 .artists .artist-genre:hover {

static/css/base.css

@@ -1,3 +1,5 @@
+/* General */
+
 body {
   background: url("/static/img/bg.png") no-repeat center center fixed;
   background-color: white;
@@ -12,11 +14,12 @@ body {
   margin-top: 20px;
   margin-bottom: 20px;
   padding: 10px 10px 10px 10px;
-  box-shadow: h-pos v-pos (blur) (spread) (color) (inset);
 }
 
 
 
+/* Header */
+
 header {
   margin: 0px;
   margin-bottom: 6px;
@@ -30,6 +33,8 @@ header img {
 
 
 
+/* Nav bar */
+
 nav {
   margin: 0px;
   margin-bottom: 6px;
@@ -54,6 +59,8 @@ nav a:hover {
 
 
 
+/* Content */
+
 #content {
   margin: 10px;
 }
@@ -88,6 +95,8 @@ nav a:hover {
 
 
 
+/* Extra */
+
 .grayscale {
   /* Firefox 10+ (& Android) */
   filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");

static/css/release.css

@@ -21,7 +21,8 @@
   margin: auto;
 }
 
-#infos #left, #infos #right {
+#infos #left,
+#infos #right {
   width: 50%;
   padding: 10px;
   vertical-align: top;

templates/base.html

@@ -7,9 +7,15 @@
   <meta charset="utf-8" />
   <title>{% block title %}Idiocrates Records{% endblock %}</title>
 
-  <link rel="stylesheet" href="{% static 'css/base.css' %}" />
+  <link
-  <link rel="stylesheet" type="text/css"
+    rel="stylesheet"
-        href="https://fonts.googleapis.com/css?family=Lato" />
+    href="{% static 'css/base.css' %}"
+  />
+  <link
+    rel="stylesheet"
+    type="text/css"
+    href="https://fonts.googleapis.com/css?family=Lato"
+  />
 
   {% block stylesheets %}{% endblock %}
   {% block scripts %}{% endblock %}