finish controlbar :)

coinmanager/coinc/static/coinc/main.js

@@ -37,11 +37,33 @@ $(document).ready(function() {
     exists:       true
   }
 
+
+  //
+  // Buttons
+  //
+
+  // button #begin_edit
+  $('#begin_edit').click(function() {
+      $('nav.navbar').fadeIn('fast');
+      $('button#begin_edit').fadeOut('fast');
+  });
+
+  // button #finish_edit
+  $('#finish_edit').click(function() {
+      $('nav.navbar').fadeOut('fast');
+      $('button#begin_edit').fadeIn('fast');
+  });
+
   // button #advanced_options
   $('#show_advanced_options').click(function() {
     $('#advanced_options').slideToggle();
   });
 
+
+  //
+  // Misc
+  //
+
   // checkbox #exists
   $('input#exists').change(function() {
 
@@ -49,7 +71,8 @@ $(document).ready(function() {
 
       // save settings
       settings['circulation'] = $('#circulation').val();
-      let checkboxes = $('#found_now, #found, #buy_only, #checked, #ec')
+      settings['found_on'] = $('#found_on').val();
+      let checkboxes = $('#found, #buy_only, #checked, #ec')
         .map(function() {
           return {
             [$(this).prop('id')]: $(this).prop('checked')
@@ -60,11 +83,10 @@ $(document).ready(function() {
       }
 
       // disable settings
-      $('#circulation').val('Auflage');
       $('#found, #buy_only, #checked, #ec').each(function() {
           $(this).prop('checked', false);
       });
-      $('#found, #select_usernames, #circulation, #buy_only, #checked, #ec').each(function() {
+      $('#found, #found_by, #found_on, #circulation, #buy_only, #checked, #ec').each(function() {
           $(this).prop('disabled', 'disabled');
       });
 
@@ -72,68 +94,80 @@ $(document).ready(function() {
     } else {
 
       // restore settings
-      $('#circulation').val(settings['circulation']);
+      // $('#circulation').val(settings['circulation']);
+      // $('#found_on').val(settings['found_on']);
       $('#found_now, #found, #buy_only, #checked, #ec').each(function() {
         let setting = $(this).prop('id');
         $(this).prop('checked', settings[setting]);
       });
 
       // enable settings
-      $('#found, #select_usernames, #circulation, #buy_only, #checked, #ec').each(function() {
+      $('#found, #found_by, #found_on, #circulation, #buy_only, #checked, #ec').each(function() {
         $(this).prop('disabled', '');
       });
 
     }
   });
 
-
   // datepicker TODO make it nicer
   $.datepicker.setDefaults( $.datepicker.regional['de'] );
-  $('input[name=datetime]').datepicker({
+  $('input[name=found_on]').datepicker({
     defaultDate: new Date(),
     dateFormat: 'dd.mm.yy'
   });
 
-  function render_login(input_name, input_color) {
+  // select username on change
+  $('nav.navbar select').on('change', function() {
+    let color = $('nav.navbar option[value=' + this.value + ']').attr('color');
+    $('nav.navbar option[selected=selected]').removeAttr('selected');
+    render_login(this.value, color);
+  });
+
+
+  //
+  // Functions
+  //
+
   // manage user login
+  function render_login(input_name, input_color) {
 
     let color = decodeURIComponent(input_color);
     let name = decodeURIComponent(input_name);
     new Cookie('coinc-name', name)
 
     render_login_color(color);
-    let option = $('div#controlbar option[value=' + name + ']');
+    let option = $('nav.navbar option[value=' + name + ']');
     if (option.length == 0) {
-      $('div#controlbar select').append($('<option>', {
+      $('nav.navbar select').append($('<option>', {
         value: name, color: color, html: name
       }));
     }
 
-    $('div#controlbar option[value=' + name + ']').attr('selected', 'selected');
+    $('nav.navbar option[value=' + name + ']').attr('selected', 'selected');
   }
 
-
-  function render_login_color(color) {
   // manage login colors
+  function render_login_color(color) {
 
     new Cookie('coinc-color', color);
-    $('div#controlbar').css('background-color', color);
+    if ($('nav.navbar').css('display') == 'block') {
+        $('nav.navbar').prop('style', 'background-color:' + color + ' !important; display: block;');
+    } else {
+        $('nav.navbar').attr('style', 'background-color:' + color + ' !important;');
+    }
   }
 
 
+  //
+  // Modals
+  //
+
+  // hide modal add user
   function hide_modal() {
       $('div#modal_add_user').fadeOut('fast');
   }
 
-
+  // modal #add_user
-  // select username on change
-  $('div#controlbar select').on('change', function() {
-    let color = $('div#controlbar option[value=' + this.value + ']').attr('color');
-    $('div#controlbar option[selected=selected]').removeAttr('selected');
-    render_login(this.value, color);
-  });
-
-
   $('button#show_add_user').click(function() {
     $('div#modal_add_user').fadeIn('fast');
 
@@ -146,6 +180,8 @@ $(document).ready(function() {
       }
     });
 
+
+    // detect ESC keypress
     $(document).keypress(function(event) {
       if (event.keyCode == 27) { // ESC is pressed
         hide_modal();
@@ -153,10 +189,14 @@ $(document).ready(function() {
       }
     });
 
+
+    // button #close_modal_add_user
     $('button#close_modal_add_user').click(function() {
       hide_modal();
     });
 
+
+    // button #add_user
     $('button#add_user').click(function() {
 
       let name = encodeURIComponent($('input#text_user').val());
@@ -183,13 +223,20 @@ $(document).ready(function() {
 
   });
 
+
+  //
+  // Main routine
+  //
+
   let cookie = new Cookie();
   let name = cookie.get('coinc-name');
   let color = cookie.get('coinc-color');
 
   if (name != '') {
     render_login(name, color);
+
   } else {
   //#TODO log in as default if any
+
   }
 });

coinmanager/coinc/static/coinc/styles.css

@@ -51,7 +51,7 @@ table {
   width: 360px;
   table-layout: fixed;
   white-space: nowrap;
-  margin-bottom: 30px !important;
+  margin-bottom: 63px !important;
 }
 
 th {
@@ -175,6 +175,10 @@ div.found {
   width: auto;
 }
 
+body > div.container-fluid {
+  padding: 0;
+}
+
 .modal-container {
   display: none;
   position: fixed;
@@ -188,39 +192,69 @@ div.found {
   background-color: rgba(0,0,0,0.4);
 }
 
-div#controlbar {
+
-  padding: 8px;
+/* Controlbar */
-  bottom: 0;
+button#begin_edit {
-  height: 52px;
+  position: fixed;
+  right: 15px;
+  bottom: 15px;
 }
 
-div#controlbar, div#advanced_options {
+nav.navbar {
+  display: none;
   position: fixed;
-  left: 0;
+  bottom: 0;
   width: 100%;
-  background-color: white;
+  height: 64px;
-  text-align: center;
+  z-index: 1000;
-  z-index: 1;
+  border-top: 1px solid gray;
+}
+
+nav.navbar > div#navbarColor03 > * {
+  margin: 5px;
+}
+
+nav.navbar button {
+  white-space: nowrap;
 }
 
 div#advanced_options {
-  border-top: 1px solid gray;
   position: fixed;
   left: 0;
-  bottom: 52px;
+  # TODO really?
+  border-top: 1px solid gray;
+  bottom: 63px;
   width: 100%;
-  background-color: white;
-  text-align: center;
   z-index: 1;
-  display: none;
+  display:none;
+  background-color: #f8f9fa !important;
 }
 
 div#advanced_options > label {
   float: left;
   padding: 5px;
   margin: 0;
+  height: 44px;
+  padding-top: 11px;
 }
 
-input#circulation, input#datetime {
+div#advanced_options > label:first-child {
+  padding:5px !important;
+}
+
+input#circulation, input#found_on {
   width: 100px;
 }
+
+@media (min-width:540px) {
+  button.navbar-toggler {
+    display: none;
+  }
+}
+
+@media (min-width:540px) {
+  div#navbarColor03 {
+    display: flex;
+    flex-basis: auto;
+  }
+}

coinmanager/coinc/templates/coinc/controlbar.html

@@ -1,4 +1,12 @@
-<div id="advanced_options" class="fixed-bottom">
+<button id="begin_edit" class="btn btn-info">+ hinzufügen</button>
+
+
+<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>
+
+  <div id="advanced_options" class="fixed-bottom">
     <label for="circulation">
       <input id="circulation" type="text" value="Auflage">
     </label>
@@ -18,27 +26,29 @@
       <input id="exists" type="checkbox">
       Existiert nicht
     </label>
-</div>
+  </div>
 
+  <div class="collapse navbar-collapse" id="navbarColor03">
 
-<div id="controlbar" class="fixed-bottom">
     <label for="found" id="found_label">
       <input id="found" type="checkbox" checked="checked">
     </label>
-  <label for="select_usernames" id="for_select_usernames">
+    <label for="found_by">
-    <select id="select_usernames" name="username" form="username_form" class="form-control">
+      <select id="found_by" name="found_by" class="form-control">
       {% for user in users %}
         <option value="{{ user.name }}" color="{{ user.color }}">{{ user.name }}</option>
       {% endfor %}
       </select>
     </label>
-  <label for="datetime">
+    <label for="found_on">
-    <input type="text" name="datetime" id="datetime" value="{% now 'd.m.Y' %}">
+      <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>
     <button id="show_add_user" class="btn btn-info">+ Name</button>
-</div>
+    <button id="finish_edit" class="btn btn-info">Fertig</button>
 
+  </div>
+</nav>
 
 <div id="modal_add_user" class="modal-container">
 <div class="modal-dialog" role="document">

coinmanager/coinc/templates/coinc/country.html

@@ -2,6 +2,7 @@
 	{% include 'header.html' with title=country.name %}
 	{% include 'coinc/controlbar.html' with users=users %}
 {% endif %}
+  <div class="container-fluid">
     <table>
       <thead>
         <tr>
@@ -29,6 +30,7 @@
       <tbody>
 {% for year in country.years %}{% show_year country year %}{% endfor %}      </tbody>
     </table>
+  </div>
 {% if single_country %}
 	{% include "footer.html" with title="Münzsammlung" %}
 {% endif %}

coinmanager/coinc/templates/footer.html

@@ -1,3 +1,2 @@
-    </div>
   </body>
 </html>

coinmanager/coinc/templates/header.html

@@ -33,4 +33,3 @@
     <link rel="stylesheet" type="text/css" href="{% static 'coinc/styles.css' %}">
   </head>
   <body>
-    <div class="container-fluid">