1
0
Fork 0

Reorganize artists page (WIP)

This commit is contained in:
Dece 2017-08-17 15:21:14 +02:00
parent 20dac82f18
commit 0df2dedff2
6 changed files with 55 additions and 42 deletions

View file

@ -43,21 +43,21 @@ class Release(models.Model):
ident: catalog number ident: catalog number
title: release title title: release title
contributors: list of Artists who contributed to this release contributors: list of Artists who contributed to this release
release_type: see below release_type: see TYPE_HINT
year: year of release year: year of release
cover: image file associated to this 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() ident = models.IntegerField()
title = models.CharField(max_length=256) title = models.CharField(max_length=256)
contributors = models.ManyToManyField(Artist) 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') cover = models.ImageField(upload_to='releases')
year = models.IntegerField() 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) description = models.TextField(blank=True)
def __str__(self): def __str__(self):

View file

@ -11,21 +11,21 @@
{% block content %} {% block content %}
<h1>Artists</h1> <h1>Artists</h1>
<p class="artists"> <div class="artists">
{% for artist in artists %} {% for artist in artists %}
{% if artist.artist_type == 0 %} {% if artist.artist_type == 0 %}
<span class="artist">
<a href="{% url 'artist' artist.slug %}"> <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 }} {{ artist.name }}
<span class="artist-genre">{{ artist.genre }}</span> <span class="artist-genre">{{ artist.genre }}</span>
</a>
</span> </span>
</a>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</p> </div>
<h1>Side projects</h1> <!-- <h1>Side projects</h1>
<p class="artists"> <p class="artists">
{% for artist in artists %} {% for artist in artists %}
{% if artist.artist_type == 1 %} {% if artist.artist_type == 1 %}
@ -38,5 +38,5 @@
</span> </span>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</p> </p> -->
{% endblock %} {% endblock %}

View file

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

View file

@ -1,3 +1,5 @@
/* General */
body { body {
background: url("/static/img/bg.png") no-repeat center center fixed; background: url("/static/img/bg.png") no-repeat center center fixed;
background-color: white; background-color: white;
@ -12,11 +14,12 @@ body {
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
padding: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;
box-shadow: h-pos v-pos (blur) (spread) (color) (inset);
} }
/* Header */
header { header {
margin: 0px; margin: 0px;
margin-bottom: 6px; margin-bottom: 6px;
@ -30,6 +33,8 @@ header img {
/* Nav bar */
nav { nav {
margin: 0px; margin: 0px;
margin-bottom: 6px; margin-bottom: 6px;
@ -54,6 +59,8 @@ nav a:hover {
/* Content */
#content { #content {
margin: 10px; margin: 10px;
} }
@ -88,6 +95,8 @@ nav a:hover {
/* Extra */
.grayscale { .grayscale {
/* Firefox 10+ (& Android) */ /* 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"); 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");

View file

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

View file

@ -7,9 +7,15 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>{% block title %}Idiocrates Records{% endblock %}</title> <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 stylesheets %}{% endblock %}
{% block scripts %}{% endblock %} {% block scripts %}{% endblock %}