#27 part fix: fix sticky table head issues and minor other things

coinmanager/coinc/static/coinc/styles.css

@@ -38,7 +38,7 @@ a,
 a:hover,
 a:active,
 a:visited {
-    text-decoration: none;
+    text-decoration: none !important;
     color: black !important;
     cursor: pointer;
     vertical-align: inherit;
@@ -190,7 +190,6 @@ thead > tr:first-child > th {
 thead > tr:nth-child(2) > th {
     background-color: white;
     top: 40px;
-    border-bottom: 1px solid gray;
 }
 
 tr:nth-child(2) > th:nth-child(10):after,
@@ -206,28 +205,33 @@ tr:nth-child(2) > th:nth-child(12):after {
 }
 
 tr:nth-child(2) > th:nth-child(10):after {
-    content: '201';
+    content: '2 €*';
 }
 
 tr:nth-child(2) > th:nth-child(11):after {
-    content: '202';
+    content: '2 €*';
 }
 
 tr:nth-child(2) > th:nth-child(12):after {
-    content: '203';
+    content: '2 €*';
 }
 
-tr:nth-child(2):after {
+tbody > tr:first-child > td {
-    content: '';
+    border-top: 4px solid white;
-    position: absolute;
+}
-    bottom: 0;
+
+thead > tr:nth-child(3) {
+  height: 1.2px;
+}
+
+thead > tr:nth-child(3) > th {
+    background-color: #636263;
     left: 0;
-    width: 100%;
+    top: 80px;
-    height: 1px;
+    padding: 0;
-    border-bottom: 1.2px solid gray;
+    box-shadow: 0 3px 10px black;
 }
 
-
 /* table body */
 
 thead > tr:nth-child(2) > th,
@@ -246,8 +250,8 @@ td > * {
 
 td.coin {
     background-color: #cec6ca;
-    border: 1px solid gray;
     font-size: 1.1rem;
+    border: 2px solid white;
 }
 
 .brass {
@@ -275,8 +279,7 @@ td.coin {
 }
 
 .noexist {
-    border: 0 !important;
+    background: rgba(74, 63, 85, 0.43) !important;
-    background: rgba(0, 0, 0, 0) !important;
 }
 
 
@@ -355,14 +358,42 @@ div.two_lines {
 /* smallest view 12 * 28 = 336px */
 
 @media (max-width: 480px) {
+    body {
+        font-size: 0.86rem;
+    }
+
+    button.navbar_toggler {
+        display: block;
+        float: right
+    }
+    div#buttons {
+        display: none;
+    }
+
     table {
         width: 336px;
+        table-layout: fixed;
     }
-    tr:nth-child(2) > th {
+    tr {
-        width: 26px;
+        height: 28px;
     }
-    tr:nth-child(2) > th:after {
+    thead > tr:first-child {
-        width: 26px;
+        height: 35px;
+        font-size: 1rem;
+    }
+    thead > tr:nth-child(2) > th {
+        top: 35px;
+        width: 28px;
+    }
+    thead > tr:nth-child(3) > th {
+        top: 63px;
+    }
+    tr:nth-child(2) > th:nth-child(10):after,
+    tr:nth-child(2) > th:nth-child(11):after,
+    tr:nth-child(2) > th:nth-child(12):after {
+        height: 28px;
+        width: 28px;
+        line-height: 28px;
     }
     tbody > tr > td > div.coin {
         height: 26px;
@@ -372,30 +403,7 @@ div.two_lines {
     div.found {
         height: 26px;
         width: 26px;
-    }
+        clip-path: polygon(100% 60%, 100% 100%, 60% 100%);
-    tr {
-        height: 26px;
-    }
-    tr:nth-child(2) > th:nth-child(10):after,
-    tr:nth-child(2) > th:nth-child(11):after,
-    tr:nth-child(2) > th:nth-child(12):after {
-        height: 26px;
-        width: 26px;
-        line-height: 26px;
-    }
-    thead > tr:nth-child(2) > th,
-    tbody > tr > td {
-        font-size: 0.8rem;
-    }
-    thead > tr:nth-child(2) > th {
-        top: 36px;
-    }
-    button.navbar_toggler {
-        display: block;
-        float: right
-    }
-    div#buttons {
-        display: none;
     }
 }
 
@@ -461,4 +469,3 @@ div.two_lines {
         display: block;
     }
 }
-

coinmanager/coinc/templates/coinc/country.html

@@ -13,19 +13,22 @@
           </th>
         </tr>
         <tr>
-          <th></th>
+          <th>Jahr</th>
           <th>1</th>
           <th>2</th>
           <th>5</th>
           <th class="brass">10</th>
           <th class="brass">20</th>
           <th class="brass">50</th>
-          <th>100</th>
+          <th>1 €</th>
-          <th>200</th>
+          <th>2 €</th>
           <th></th>
           <th></th>
           <th></th>
         </tr>
+        <tr>
+          <th colspan="12"></th>
+        </tr>
       </thead>
       <tbody>
 {% for year in country.years %}{% show_year country year %}{% endfor %}      </tbody>

coinmanager/coinc/views.py

@@ -178,7 +178,7 @@ def show_coin(country, year, stamp, value):
     name = coin.name if coin.name else ''
     special_class = ''
     if name:
-        if len(name) >= 26 and len(name) <= 52:
+        if len(name) >= 18 and len(name) <= 52:
             special_class = 'two_lines'
         elif len(name) > 53:
             special_class = 'three_lines'