styling session -.-

README.md

@@ -3,3 +3,21 @@
 - [Bootstrap](https://getbootstrap.com/) CSS, License: [MIT License](https://github.com/twbs/bootstrap/blob/master/LICENSE) 
 - [Bootswatch](https://bootswatch.com/default/) CSS Theme, License: [MIT License](https://github.com/thomaspark/bootswatch/blob/master/LICENSE)
 - Flag symbols from [Flagpedia](https://flagpedia.net), License: public domain
+
+Was wird erfasst auf zellebene:
+
+1. eck-marker: wer hat die münze gefunden
+
+2. kreuzfarbe
+- rot wenn im original Eurocollector
+- grün wenn überprüft und einsortiert
+
+3. hintergrund-farbe:
+- blau-weiss zeilenwechsel
+- messing-gelb
+- rot = kms
+- braun = selten
+- grau = existiert nicht
+- hellgrau = unbekannt
+
+4. sonderfall: jahr komplett = grün

coinmanager/coinc/static/coinc/styles.css

@@ -17,6 +17,14 @@
   along with this program. If not, see <http://www.gnu.org/licenses/>.
 
 */
+html, table, tr, td, div {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  margin: 5px;
+}
 
 a, a:hover, a:active, a:visited {
 	text-decoration: none;
@@ -24,6 +32,10 @@ a, a:hover, a:active, a:visited {
 	cursor: default;
 }
 
+a.nav-link:hover {
+  color: white !important;
+}
+
 li {
 	padding: 0px 5px 5px 0px;
 }
@@ -35,19 +47,77 @@ img.country {
 table {
   margin-top: 30px;
   border-collapse: collapse;
-  width: 500px;
+  width: 360px;
+  table-layout: fixed;
+  white-space: nowrap;
 }
 
-table td { padding: 5px; }
+table tr {
+  height: 30px;
+}
 
-table > thead > tr > td {
+table td {
+  overflow: hidden;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+table > thead > tr > th {
   border-bottom: 2px solid black;
-  background-color: #9fc5e8;
+  background-image: linear-gradient(0, #9fc5e8, white);
+  background-position: 100% 100%;
 }
 
 table > tbody > tr > td {
   border: 1px solid gray;
+  text-align: center;
 }
 
-table > tbody > tr:nth-of-type(odd) { background: white; }
+td > * {
+  vertical-align: middle;
+  overflow: hidden;
+}
+
+table > tbody > tr > td {
+  background-color: lightgray;
+}
+
+td.noexist {
+  background-color: gray;
+}
+
+td.brass {
+  background-color: yellow;
+}
+
+td.rare {
+  background-color: brown;
+}
+
+td.kms {
+  background-color: red;
+}
+
+td.year {
+  background-color: white;
+}
+
+td.year-finished {
+  background-color: green;
+}
+
+/*table > tbody > tr:nth-of-type(odd) { background: white; }
 table > tbody > tr:nth-of-type(even) { background: lightblue; }
+table > tbody > tr > td:nth-of-type(5) { background: #ffff99; }
+table > tbody > tr > td:nth-of-type(6) { background: #ffff99; }
+table > tbody > tr > td:nth-of-type(7) { background: #ffff99; }*/
+
+div.user {
+  height:30px;
+  width:30px;
+  clip-path: polygon(100% 70%, 100% 100%, 70% 100%);
+}
+
+div.moritz {
+  background-color: red;
+}

coinmanager/coinc/templates/coinc/country.html

@@ -1,27 +1,18 @@
     <table>
       <thead>
         <tr>
-          <td colspan="4">
+          <th colspan="10">
             <a name="{{ country.name_iso }}"></a>
             <img class="country" src="/static/coinc/images/{{ country.name_iso}}.png" />
-            <a href="{% url 'coinc:country' country.name_iso %}">{{ country.name }}</a><td>
+            <a href="{% url 'coinc:country' country.name_iso %}">{{ country.name }}</a>{% if country.comment %} - {{ country.comment }}{% endif %}
-          <td colspan="2">x €</td>
+          </th>
-          <td colspan="9"></td>
+          <th colspan="2">x €</th>
         </tr>
       </thead>
       <tbody>{% for year in country.years %}
       <tr>
-        <td>{{ year }}</td>{% comment %}
+        <td class="year"><div>{{ year }}</div></td>{% for coin in country|coins:year %}
-        {% for col in row.cols %}
+        <td class="{{ coin }}"><div></div></td>{% endfor %}
-        <td>{{ col.x }}</td>
-        {% endfor %}
-        <td>{% col.special1_name %}</td>
-        <td>{% col.special1_x %}</td>
-        <td>{% col.special2_name %}</td>
-        <td>{% col.special2_x %}</td>
-        <td>{% col.special3_name %}</td>
-        <td>{% col.special3_x %}</td>
-        {% endcomment %}
       </tr>{% endfor %}
       </tbody>
     </table>

coinmanager/coinc/templates/coinc/index.html

@@ -18,9 +18,10 @@
   along with this program. If not, see <http://www.gnu.org/licenses/>.
 
 -->
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Münzsammlung</title> {% load static %}
     <link rel="stylesheet" type="text/css" href="{% static 'coinc/bootstrap.min.css' %}">
     <link rel="stylesheet" type="text/css" href="{% static 'coinc/styles.css' %}">

coinmanager/coinc/views.py

@@ -46,6 +46,11 @@ def navigation(countrys):
     return {'countrys': countrys}
 
 
+@register.filter(name='coins')
+def coins(country, year):
+    return country['years'][year]
+
+
 @register.inclusion_tag('coinc/country.html')
 def show_country(country):
     year_now = datetime.now().year
@@ -58,21 +63,19 @@ def show_country(country):
     }
 
     for year in range(country.euro_member_since, year_now + 1):
-        c['years'][year] = {
+        y = str(year)[2:4]
-            '1': 1,
+        c['years'][y] = {
-            '2': 2,
+            '1': 'x',
-            '5': 5,
+            '2': '',
-            '10': 10,
+            '5': '',
-            '20': 20,
+            '10': '',
-            '50': 50,
+            '20': 'x',
-            '100': 100,
+            '50': '',
-            '200': 200,
+            '100': '',
-            '200_1_name': 'name 1',
+            '200': 'x',
-            '200_1': 200,
+            '201': '',
-            '200_2_name': 'name 2',
+            '202': '',
-            '200_2': 200,
+            '203': ''
-            '200_3_name': 'name 3',
-            '200_3': 200
         }
 
     return {'country': c}