Code styles of services table (mail addresses).

musician/models.py

@@ -1,4 +1,5 @@
 from django.utils.html import format_html
+from django.utils.translation import gettext_lazy as _
 
 
 class OrchestraModel:
@@ -107,7 +108,8 @@ class DatabaseService(OrchestraModel):
 
 class MailService(OrchestraModel):
     api_name = 'address'
-    verbose_name = 'Mail'
+    verbose_name = _('Mail addresses')
+    description = _('Litle description of what to be expected in this section to aid the user. Even a link to more help if there is one available.')
     fields = ('mail_address', 'aliases', 'type', 'type_detail')
 
     FORWARD = 'forward'

musician/static/musician/css/default.css

@@ -76,3 +76,52 @@ a:hover {
 #login-footer a {
     color: #FEFBF2;
 }
+
+#content {
+    background: #ECECEB;
+    color: #343434;
+}
+
+/** services **/
+h1.service-name {
+    
+    font: Bold 26px/34px Roboto;
+    margin-top: 3rem;
+}
+
+.service-description {
+    
+    font: 16px/21px Roboto;
+}
+.service-list {
+    margin-top: 2rem;
+}
+/** TODO update theme instead of overriding **/
+.service-list thead.thead-dark th {
+    background: rgba(80, 70, 110, 0.25);
+    color: #50466E;
+    border-color: transparent;
+}
+/** /TODO **/
+
+.service-list thead.thead-dark th:first-of-type {
+    border-top-left-radius: .25rem;
+}
+
+.service-list thead.thead-dark th:last-of-type {
+    border-top-right-radius: .25rem;
+}
+
+.service-list tbody {
+    background: white;
+    color: #343434;
+}
+
+.service-list tfoot {
+    background: white;
+    color: #343434;
+}
+
+.service-list tfoot tr td {
+    padding-top: 3rem;
+}

musician/templates/musician/mail.html

@@ -3,15 +3,15 @@
 
 {% block content %}
 
-<h1>{{ service.verbose_name }}</h1>
+<h1 class="service-name">{{ service.verbose_name }}</h1>
-<p>{{ service.description }}</p>
+<p class="service-description">{{ service.description }}</p>
-<table class="table table-hover">
+<table class="table service-list">
     <thead class="thead-dark">
         <tr>
-            <th scope="col">Mail address</th>
+            <th scope="col">{% trans "Mail address" %}</th>
-            <th scope="col"></th>
+            <th scope="col">{% trans "Aliases" %}</th>
-            <th scope="col">Type</th>
+            <th scope="col">{% trans "Type" %}</th>
-            <th scope="col">Type details</th>
+            <th scope="col">{% trans "Type details" %}</th>
         </tr>
     </thead>
     <tbody>
@@ -19,7 +19,7 @@
         <tr>
             <td>{{ obj.mail_address }}</td>
             <td>{{ obj.aliases|join:" , " }}</td>
-            <td>{{ obj.type }}</td>
+            <td>{{ obj.type|capfirst }}</td>
             <td>{{ obj.type_detail }}</td>
         </tr>
         {% endfor %}