styling session

coinmanager/coinc/static/coinc/main.js

@@ -146,18 +146,30 @@ function render_response(data, td, set) {
     /* add or update marker (and name) if found */
     if (set['found'] && set['found_by'] && set['exists']) {
         div_class = set['found_by'];
-        $(td).find('div.coin span').html('').html('x');
+        $(td).find('div.coin span').html('').html('✔');
 
         /* add/update name */
+        if ([201, 202, 203].includes(data['value'])) {
+            let c = String(value).substring(2,3);
             if ('name' in data) {
                 let name = escape_html(data['name']);
-            let c = String(value).substring(2,3);
+
+                /* look for div.special123_name */
                 let div_special_name = $(td).find('div.special' + c + '_name');
                 if (div_special_name.length == 0) {
+
+                    /* append div if not found */
                     $(td).append('<div class="special' + c + '_name three_lines">' + name + '</div>');
                 } else if (div_special_name.length == 1) {
+
+                    /* only insert inner html */
                     div_special_name.html(name);
                 }
+
+            /* remove name */
+            } else if (!set['exists']) {
+                $(td).find('div.special' + c + '_name').html();
+            }
         }
     }
 
@@ -258,7 +270,7 @@ $(document).ready(function() {
                     td:   this
                 }
 
-                if ([201, 202, 203].includes(value)) {
+                if ([201, 202, 203].includes(value) && data['exists']) {
                     let modal = new Modal('add_coin_name', add_coin_name, args);
                     modal.show();
                 } else {

coinmanager/coinc/static/coinc/styles.css

@@ -18,282 +18,35 @@
 
 */
 
-html, table, tr, td, div {
+
+/* General */
+
+html,
+table,
+tr,
+td,
+div {
     margin: 0;
     padding: 0;
 }
 
-a, a:hover, a:active, a:visited {
-  text-decoration: none;
-  color: black !important;
-  cursor: default;
-  vertical-align: inherit;
-}
-
-a.nav-link:hover {
-  color: white !important;
-}
-
-li {
-	padding: 0px 5px 5px 0px;
-}
-
-ul.nav {
-  padding-bottom: 30px;
-}
-
-img.country {
-  width: 20px;
-}
-
-table {
-  border-collapse: collapse;
-  white-space: nowrap;
-  margin-bottom: 63px !important;
-}
-
-th {
-  position: sticky;
-  z-index: 1021;
-}
-
-tr {
-  height: 40px;
-}
-
-td {
-  overflow: hidden;
-  vertical-align: middle;
-  white-space: nowrap;
-}
-
-thead > tr:first-child > th {
-  background-image: linear-gradient(0, #9fc5e8, white);
-  background-position: 100% 100%;
-  padding: 5px;
-  text-align: left;
-  top: 0;
-}
-
-thead > tr:nth-child(2) > th {
-  background-color: white;
-  top: 36px;
-}
-
-thead > tr:nth-child(2) > th:after {
-  content: '';
-  position: absolute;
-  z-index: 1020;
-  left: 0;
-  top: -1px;
-  width: 40px;
-  height: 42px;
-  line-height: 40px;
-  border-top: 1px solid gray;
-  border-left: 1px solid gray;
-  border-bottom: 2px solid black;
-}
-
-tr:nth-child(2) > th:nth-child(10):after { content: '201'; }
-tr:nth-child(2) > th:nth-child(11):after { content: '202'; }
-tr:nth-child(2) > th:nth-child(12):after { content: '203'; }
-tr:nth-child(2) > th:last-child:after { border-right: 1px solid gray; }
-
-thead > tr:nth-child(2) > th, table > tbody > tr > td {
-  text-align: center;
-  font-weight: normal;
-}
-
-tbody > tr > td {
-  background-color: #b7b7b7;
-  border: 1px solid gray;
-}
-
-tbody > tr > td > div.coin {
-  position: relative;
-  z-index: 1000;
-  height: 40px;
-  width: 40px;
-  text-align: inherit;
-  line-height: 40px;
-  float: left;
-}
-
-td > * {
-  vertical-align: middle;
-  overflow: hidden;
-}
-
-div.found {
-  position: absolute;
-  z-index: 1001;
-  top: 0;
-  height:40px;
-  width:40px;
-  clip-path: polygon(100% 70%, 100% 100%, 70% 100%);
-}
-
-div.three_lines {
-  font-size: 0.8rem !important;
-  line-height: 13px !important;
-}
-div.two_lines {
-  font-size: 0.9rem !important;
-  line-height: 20px !important;
-}
-
-div.special1_name, div.special2_name, div.special3_name {
-  display:     none;
-  height:      40px;
-  width:       146px;
-  font-size:   1rem;
-  font-weight: 400;
-  line-height: 40px;
-  color:       black;
-  text-align:  left;
-  word-wrap:   anywhere;
-  word-break:  break-all;
-  white-space: break-spaces;
-}
-
-/* smallest view 12 * 40 = 480px */
-@media (max-width: 654px) {
-  table { width: 360px; }
-  tr:nth-child(2) > th { width: 30px; }
-  tr:nth-child(2) > th:after { width: 30px; }
-  tbody > tr > td > div.coin {
-    height: 30px;
-    width: 30px;
-    line-height: 30px;
-  }
-  div.found {
-    height: 30px;
-    width: 30px;
-  }
-  tr { height: 30px; }
-  thead > tr:nth-child(2) > th:after {
-    height: 32px;
-    width: 30px;
-    line-height:30px;
-  }
-  thead > tr:nth-child(2) > th, tbody > tr > td { font-size: 0.8rem; }
-}
-
-/* 1st special coin: 11 * 40 + 200 = 640px */
-@media (min-width: 655px) {
-  table { width: 640px; }
-  tr:nth-child(2) > th:nth-child(10) {
-    width: 200px;
-    text-align: left;
-  }
-  tr:nth-child(2) > th:nth-child(10):after {
-    width: 200px;
-    padding-left: 5px;
-    content: 'Sondermünze 1';
-  }
-  div.special1_name { display: block; }
-}
-
-/* 2nd special coin 10 * 40 + 400 = 800px */
-@media (min-width: 815px) {
-  table { width: 800px; }
-  tr:nth-child(2) > th:nth-child(11) {
-    width: 200px;
-    text-align: left;
-  }
-  tr:nth-child(2) > th:nth-child(11):after {
-    width: 200px;
-    padding-left: 5px;
-    content: 'Sondermünze 2';
-  }
-  div.special2_name { display: block; }
-}
-
-/* 3rd special coin 9 * 40 + 600 = 960px */
-@media (min-width: 975px) {
-  table { width: 960px; }
-  tr:nth-child(2) > th:nth-child(12) {
-    width: 200px;
-    text-align: left;
-  }
-  tr:nth-child(2) > th:nth-child(12):after {
-    width: 200px;
-    padding-left: 5px;
-    content: 'Sondermünze 3';
-  }
-  div.special3_name { display: block; }
-}
-
-
-
-.buy_only {
-  background-color: #dd7e6b;
-}
-
-.rare {
-  background-color: #e69138;
-}
-
-.noexist {
-  color: white;
-  background-color: #434343;
-}
-
-td.brass, th.brass {
-  background-color: #ffff99 !important;
-}
-
-td.found {
-  background-color: white;
-}
-
-td.year {
-  background-color: white;
-}
-
-td.year-complete {
-  background-color: #00ff00;
-}
-
-td.spacer {
-  border: 0;
-  background-color: white;
-}
-
-.ec {
-  color: #ff0000;
-  font-weight: bold;
-}
-
-.checked {
-  color: #00ff00;
-  font-weight: bold;
-}
-
-.form-control {
-  display: inline-block !important;
-  width: auto;
-}
-
 body > div.container-fluid {
     padding: 0;
 }
 
-.modal-container {
+a,
-  display: none;
+a:hover,
-  position: fixed;
+a:active,
-  z-index: 1050;
+a:visited {
-  left: 0;
+    text-decoration: none;
-  top: 0;
+    color: black !important;
-  width: 100%;
+    cursor: pointer;
-  height: 100%;
+    vertical-align: inherit;
-  overflow: auto;
-  background-color: rgb(0,0,0);
-  background-color: rgba(0,0,0,0.4);
 }
 
 
 /* Controlbar */
+
 button#begin_edit {
     position: fixed;
     z-index: 1060;
@@ -319,15 +72,28 @@ nav.navbar button {
     white-space: nowrap;
 }
 
-@media (min-width:540px) {
+button.navbar_toggler {
-  button.navbar-toggler {
     display: none;
 }
 
-  div#navbarColor03 {
+div#navbar_toggler {
-    display: flex;
+    line-height: 35px;
-    flex-basis: auto;
 }
+
+.form-control {
+    display: inline-block !important;
+    width: auto;
+}
+
+div#navbar_toggler > label {
+    float: left;
+    padding-right: 5px;
+}
+
+div#buttons {
+    display: block;
+    text-align: right;
+    width: 100%;
 }
 
 div#advanced_options {
@@ -353,6 +119,346 @@ div#advanced_options > label:first-child {
     padding: 5px !important;
 }
 
-input#circulation, input#found_on {
+input#circulation,
+input#found_on {
     width: 100px;
 }
+
+a.nav-link:hover {
+    color: white !important;
+}
+
+
+/* modals */
+
+div.modal-container {
+    display: none;
+    position: fixed;
+    z-index: 1050;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+
+/* country navigation */
+
+li {
+    padding: 0px 5px 5px 0px;
+}
+
+ul.nav {
+    padding-bottom: 30px;
+}
+
+
+/* country table */
+
+
+/* table head */
+
+table {
+    margin-bottom: 63px;
+    cursor: default;
+}
+
+th {
+    position: sticky;
+    z-index: 1021;
+}
+
+th > img {
+    max-height: 20px;
+}
+
+tr {
+    height: 40px;
+}
+
+thead > tr:first-child > th {
+    background-image: linear-gradient(0, #9fc5e8, white);
+    background-position: 100% 100%;
+    padding: 5px;
+    text-align: left;
+    top: 0;
+}
+
+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,
+tr:nth-child(2) > th:nth-child(11):after,
+tr:nth-child(2) > th:nth-child(12):after {
+    position: absolute;
+    z-index: 1020;
+    left: 0;
+    top: -1px;
+    width: 40px;
+    height: 42px;
+    line-height: 40px;
+}
+
+tr:nth-child(2) > th:nth-child(10):after {
+    content: '201';
+}
+
+tr:nth-child(2) > th:nth-child(11):after {
+    content: '202';
+}
+
+tr:nth-child(2) > th:nth-child(12):after {
+    content: '203';
+}
+
+tr:nth-child(2):after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    border-bottom: 1.2px solid gray;
+}
+
+
+/* table body */
+
+thead > tr:nth-child(2) > th,
+table > tbody > tr > td {
+    text-align: center;
+    font-weight: normal;
+}
+
+td > * {
+    vertical-align: middle;
+    overflow: hidden;
+}
+
+
+/* coin background colors */
+
+td.coin {
+    background-color: #cec6ca;
+    border: 1px solid gray;
+    font-size: 1.1rem;
+}
+
+.brass {
+    background-color: #edb453 !important;
+}
+
+.buy_only {
+    background-color: #af6464 !important;
+}
+
+.rare {
+    background-color: #dec1a8 !important;
+}
+
+.found {
+    background-color: white !important;
+}
+
+.year {
+    background-color: white !important;
+}
+
+.year_complete {
+    background-color: #00ff00 !important;
+}
+
+.noexist {
+    border: 0 !important;
+    background: rgba(0, 0, 0, 0) !important;
+}
+
+
+/* coin div text style */
+
+.ec {
+    color: #dc3545;
+    font-weight: bold;
+}
+
+.checked {
+    color: #28a745;
+    font-weight: bold;
+}
+
+
+/* spacer tr row in between years */
+
+tr.spacer {
+    border: 0;
+    background-color: white;
+}
+
+div.coin {
+    position: relative;
+    z-index: 1000;
+    height: 40px;
+    width: 40px;
+    text-align: inherit;
+    line-height: 40px;
+    float: left;
+}
+
+div.found {
+    position: absolute;
+    z-index: 1001;
+    top: 0;
+    height: 40px;
+    width: 40px;
+    clip-path: polygon(100% 70%, 100% 100%, 70% 100%);
+}
+
+
+/* special coins */
+
+div.special1_name,
+div.special2_name,
+div.special3_name {
+    display: none;
+    height: 40px;
+    width: 146px;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 40px;
+    color: black;
+    text-align: left;
+    word-wrap: anywhere;
+    word-break: break-all;
+    white-space: break-spaces;
+}
+
+div.three_lines {
+    font-size: 0.8rem !important;
+    line-height: 13px !important;
+}
+
+div.two_lines {
+    font-size: 0.9rem !important;
+    line-height: 20px !important;
+}
+
+
+/* device width specific */
+
+
+/* smallest view 12 * 40 = 480px */
+
+@media (max-width: 654px) {
+    table {
+        width: 360px;
+    }
+    tr:nth-child(2) > th {
+        width: 30px;
+    }
+    tr:nth-child(2) > th:after {
+        width: 30px;
+    }
+    tbody > tr > td > div.coin {
+        height: 30px;
+        width: 30px;
+        line-height: 30px;
+    }
+    div.found {
+        height: 30px;
+        width: 30px;
+    }
+    tr {
+        height: 30px;
+    }
+    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: 32px;
+        width: 30px;
+        line-height: 30px;
+    }
+    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;
+    }
+}
+
+
+/* 1st special coin: 11 * 40 + 200 = 640px */
+
+@media (min-width: 655px) {
+    table {
+        width: 640px;
+    }
+    tr:nth-child(2) > th:nth-child(10) {
+        width: 200px;
+        text-align: left;
+    }
+    tr:nth-child(2) > th:nth-child(10):after {
+        width: 200px;
+        padding-left: 5px;
+        content: 'Sondermünze 1';
+    }
+    div.special1_name {
+        display: block;
+    }
+}
+
+
+/* 2nd special coin 10 * 40 + 400 = 800px */
+
+@media (min-width: 815px) {
+    table {
+        width: 800px;
+    }
+    tr:nth-child(2) > th:nth-child(11) {
+        width: 200px;
+        text-align: left;
+    }
+    tr:nth-child(2) > th:nth-child(11):after {
+        width: 200px;
+        padding-left: 5px;
+        content: 'Sondermünze 2';
+    }
+    div.special2_name {
+        display: block;
+    }
+}
+
+
+/* 3rd special coin 9 * 40 + 600 = 960px */
+
+@media (min-width: 975px) {
+    table {
+        width: 960px;
+    }
+    tr:nth-child(2) > th:nth-child(12) {
+        width: 200px;
+        text-align: left;
+    }
+    tr:nth-child(2) > th:nth-child(12):after {
+        width: 200px;
+        padding-left: 5px;
+        content: 'Sondermünze 3';
+    }
+    div.special3_name {
+        display: block;
+    }
+}
+

coinmanager/coinc/templates/coinc/controlbar.html

@@ -1,19 +1,14 @@
-<style type="text/css">
+<style type="text/css">{% for user in users %}
-{% for user in users %}
+      div.{{ user.name }} { background-color: {{ user.color }} !important; }{% endfor %}
-div.{{ user.name }} {
-  background-color: {{ user.color }};
-}
-{% endfor %}
       </style>
+
       <button id="begin_edit" class="btn btn-info">+ hinzufügen</button>
 
-
+      <!-- navbar -->
       <nav class="navbar navbar-expand-lg navbar-light bg-light">
-  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-  </button>
         {% csrf_token %}
 
+        <!-- advanced options -->
         <div id="advanced_options" class="fixed-bottom">
           <label for="circulation">
             <input id="circulation" type="text" value="Auflage">
@@ -36,28 +31,31 @@ div.{{ user.name }} {
           </label>
         </div>
 
-  <div class="collapse navbar-collapse" id="navbarColor03">
+        <!-- main options -->
-
+        <div id="navbar_toggler">
           <label for="found" id="found_label">
             <input id="found" type="checkbox" checked="checked">
           </label>
           <label for="found_by">
-      <select id="found_by" name="found_by" class="form-control">
+            <select id="found_by" name="found_by" class="form-control">{% for user in users %}
-      {% for user in users %}
+              <option value="{{ user.name }}" color="{{ user.color }}">{{ user.name }}</option>{% endfor %}
-        <option value="{{ user.name }}" color="{{ user.color }}">{{ user.name }}</option>
-      {% endfor %}
             </select>
           </label>
           <label for="found_on">
             <input type="text" name="found_on" id="found_on" value="{% now 'd.m.Y' %}">
           </label>
-    <button id="show_advanced_options" class="btn btn-info">+ Mehr</button>
+          <div id="buttons">
-    <button id="show_add_user" class="btn btn-info">+ Name</button>
+            <button id="show_advanced_options" class="btn btn-secondary">+ Mehr</button>
-    <button id="finish_edit" class="btn btn-info">Fertig</button>
+            <button id="show_add_user" class="btn btn-secondary">+ Name</button>
-
+            <button id="finish_edit" class="btn btn-success">Fertig</button>
+          </div>
+          <button class="navbar_toggler" type="button" data-toggle="collapse" data-target="#navbar_toggler" aria-controls="navbar_toggler" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
         </div>
       </nav>
 
+      <!-- modal add_user -->
       <div id="modal_add_user" class="modal-container">
         <div class="modal-dialog" role="document">
           <div class="modal-content">
@@ -85,6 +83,7 @@ div.{{ user.name }} {
         </div>
       </div>
 
+      <!-- modal add_coin_name -->
       <div id="add_coin_name" class="modal-container">
         <div class="modal-dialog" role="document">
           <div class="modal-content">

coinmanager/coinc/templates/coinc/country.html

@@ -8,7 +8,7 @@
         <tr>
           <th colspan="12">
             <a name="{{ country.name_iso }}"></a>
-            <img class="country" src="/static/coinc/images/{{ country.name_iso }}.png" />
+            <img src="/static/coinc/images/{{ country.name_iso }}.png" />
             <a href="{% url 'coinc:country' country.name_iso %}">{{ country.name }}</a>{% if country.comment %}<small> - {{ country.comment }}</small>{% endif %}
           </th>
         </tr>

coinmanager/coinc/templates/coinc/year.html

@@ -1,5 +1,5 @@
 {% for stamp in year %}        <tr name="{{ year_short }}" stamp="{{ stamp }}">
-          <td class="year"><div class="coin">{{ stamp }}{{ year_short }}</div></td>
+          <td class="year {{ year_complete }}"><div class="coin">{{ stamp }}{{ year_short }}</div></td>
 {% for value in values %}{% show_coin country year_short stamp value %}{% endfor %}        </tr>{% endfor %}{% ifnotequal year|length 1 %}
         <tr>
           <td class="spacer" colspan="12"></td>

coinmanager/coinc/views.py

@@ -173,7 +173,7 @@ def show_coin(country, year, stamp, value):
     marker = ''
     if coin.found_by:
         div_class = f"found {coin.found_by}"
-        marker = 'x'
+        marker = '✔'
 
     name = coin.name if coin.name else ''
     special_class = ''