Split main artist roster and side projects

label/models.py

@@ -4,6 +4,8 @@ from django.dispatch.dispatcher import receiver
 from django.template.defaultfilters import slugify
 
 
+ART_TYPES_HINT = "main roster (0), side project (1)"
+
 class Artist(models.Model):
     """ An Artist of the label. """
 
@@ -14,6 +16,7 @@ class Artist(models.Model):
     url_soundcloud = models.URLField(blank = True)
     genre = models.CharField(max_length = 256)
     description = models.TextField(blank = True)
+    artist_type = models.IntegerField(default = 0, help_text = ART_TYPES_HINT)
 
     def __str__(self):
         return self.name

label/templates/label/artists.html

@@ -9,17 +9,34 @@
 
 
 {% block content %}
-<p id="artists"> 
 
-{% for artist in artists %}
-  <span class="artist">
-    <a href="{% url 'artist' artist.slug %}">
-      <img src="{{ MEDIA_URL }}{{ artist.image }}" alt="" /> <br />
-      {{ artist.name }}
-      <span class="artist-genre">{{ artist.genre }}</span>
-    </a>
-  </span>
-{% endfor %}
+<h1>Artists</h1>
+  <p 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 />
+        {{ artist.name }}
+        <span class="artist-genre">{{ artist.genre }}</span>
+      </a>
+    </span>
+  {% endif %}
+  {% endfor %}
+  </p>
 
-</p>
+<h1>Side projects</h1>
+  <p class="artists"> 
+  {% for artist in artists %}
+  {% if artist.artist_type == 1 %}
+    <span class="artist">
+      <a href="{% url 'artist' artist.slug %}">
+        <img src="{{ MEDIA_URL }}{{ artist.image }}" alt="" /> <br />
+        {{ artist.name }}
+        <span class="artist-genre">{{ artist.genre }}</span>
+      </a>
+    </span>
+  {% endif %}
+  {% endfor %}
+  </p>
 {% endblock %}

static/css/artists.css

@@ -1,17 +1,21 @@
-#artists {
+#content h1 {
+  text-align: center;
+}
+
+.artists {
   width: 700px;
   margin: auto;
   text-align: center;
 }
 
-#artists .artist {
+.artists .artist {
   width: 120px;
   position: relative;
   margin: 5px;
   display: inline-block;
 }
 
-#artists .artist a {
+.artists .artist a {
   color: #929292;
   text-decoration: none;
   transition: .5s;
@@ -21,14 +25,14 @@
   -webkit-transition: .5s;
 }
 
-#artists .artist img {
+.artists .artist img {
   height: 120px;
   width: 120px;
   border: none;
   border-radius: 5px;
 }
 
-#artists .artist-genre {
+.artists .artist-genre {
   height: 120px;
   width: 120px;
   position:absolute;
@@ -38,7 +42,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.6);
   border-radius: 5px;
   color: white;
   opacity: 0;
@@ -46,6 +50,6 @@
   -webkit-transition: all 0.7s ease;
 }
 
-#artists .artist-genre:hover {
+.artists .artist-genre:hover {
   opacity: 1;
 }