fixes and shrinking

web/app/static/js/nopaque.js

@@ -220,22 +220,22 @@ nopaque.flash = function() {
                           </button>`});
   toastActionElement = toast.el.querySelector('.toast-action[data-action="close"]');
   if (toastActionElement) {
-    toastActionElement.addEventListener("click", function() {
+    toastActionElement.addEventListener('click', function() {
       toast.dismiss();
     });
   }
 }
 
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener('DOMContentLoaded', () => {
   // Disable all option elements with no value
   for (let optionElement of document.querySelectorAll('option[value=""]')) {
     optionElement.disabled = true;
   }
   M.AutoInit();
   M.CharacterCounter.init(document.querySelectorAll('input[data-length][type="text"]'));
-  M.Dropdown.init(document.querySelectorAll("#nav-notifications, #nav-account"),
-                  {alignment: "right", constrainWidth: false, coverTrigger: false});
+  M.Dropdown.init(document.querySelectorAll('#nav-notifications, #nav-account'),
+                  {alignment: 'right', constrainWidth: false, coverTrigger: false});
   nopaque.Forms.init();
   nopaque.Navigation.init();
   while (nopaque.flashedMessages.length) {

web/app/templates/nopaque.html.j2

@@ -17,8 +17,8 @@
   {% set parallax = False %}
 {% endif %}
 
-{% set nopaque_primary_color = '#00426f' %}
-{% set nopaque_secondary_color = '#b1b3b4' %}
+{% set primary_color = '#00426f' %}
+{% set secondary_color = '#b1b3b4' %}
 
 {% set corpus_analysis_color = '#aa9cc9' %}
 {% set corpus_analysis_color_darken = '#6b3f89' %}
@@ -57,6 +57,9 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='css/Materialize/materialize.min.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/nopaque.css') }}">
     <style>
+      .primary-color {background-color: {{ primary_color }} !important;}
+      .secondary-color {background-color: {{ secondary_color }} !important;}
+
       .corpus-analysis-color {background-color: {{ corpus_analysis_color }} !important;}
       .corpus-analysis-color.darken {background-color: {{ corpus_analysis_color_darken }} !important;}
       .corpus-analysis-color.lighten {background-color: {{ corpus_analysis_color_lighten }} !important;}
@@ -72,37 +75,24 @@
       .nlp-color {background-color: {{ nlp_color }} !important;}
       .nlp-color.darken {background-color: {{ nlp_color_darken }} !important;}
       .nlp-color.lighten {background-color: {{ nlp_color_lighten }} !important;}
-
-      .nopaque-primary-color {background-color: {{ nopaque_primary_color }} !important;}
-      .nopaque-secondary-color {background-color: {{ nopaque_secondary_color }} !important;}
-      {% block style_additions %}{% endblock %}
-    </style>
-    {% if current_user.is_authenticated %}
-    <style>
-      /*
-       * ### Start sidenav-fixed offset ###
-       * The sidenav-fixed class is used which causes the sidenav to be fixed and open
-       * on large screens and hides to the regular functionality on smaller screens.
-       * In order to prevent the sidenav to overlap the content, the content (in our
-       * case header, main and footer) gets an offset equal to the width of the
-       * sidenav.
-      */
-      @media only screen and (min-width : 993px) {
-        header, main, footer {
-          padding-left: 300px;
-        }
-
-        .modal:not(.bottom-sheet) {
-          left: 300px;
-        }
-
-        .navbar-fixed > nav {
-          width: calc(100% - 300px)
+      {% if current_user.is_authenticated %}
+        /*
+         * ### Start sidenav-fixed offset ###
+         * The sidenav-fixed class is used which causes the sidenav to be fixed and open
+         * on large screens and hides to the regular functionality on smaller screens.
+         * In order to prevent the sidenav to overlap the content, the content (in our
+         * case header, main and footer) gets an offset equal to the width of the
+         * sidenav.
+        */
+        @media only screen and (min-width : 993px) {
+          header, main, footer {padding-left: 300px;}
+          .modal:not(.bottom-sheet) {left: 300px;}
+          .navbar-fixed > nav {width: calc(100% - 300px)}
         }
-      }
-      /* ### End sidenav-fixed offset ### */
+        /* ### End sidenav-fixed offset ### */
+      {% endif %}
+      {% block style_additions %}{% endblock %}
     </style>
-    {% endif %}
     <script src="{{ url_for('static', filename='js/JSONPatch.js/jsonpatch.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/Dark_Reader/darkreader.js') }}"></script>
     <script src="{{ url_for('static', filename='js/List.js/list.min.js') }}"></script>
@@ -112,11 +102,11 @@
     <script>
       {% if current_user.is_authenticated %}
       {% if current_user.setting_dark_mode %}
-      DarkReader.enable({"brightness": 150, "contrast": 100, "sepia": 0});
+      DarkReader.enable({brightness: 150, contrast: 100, sepia: 0});
       {% endif %}
-      document.addEventListener("DOMContentLoaded", () => {
+      document.addEventListener('DOMContentLoaded', () => {
         nopaque.socket.init();
-        nopaque.socket.emit("user_data_stream_init");
+        nopaque.socket.emit('user_data_stream_init');
       });
       {% endif %}
       nopaque.flashedMessages = {{ get_flashed_messages(with_categories=True)|tojson }};
@@ -125,7 +115,7 @@
   <body>
     <header>
       <div class="navbar-fixed">
-        <nav class="nav-extended nopaque-primary-color white-text">
+        <nav class="nav-extended primary-color white-text">
           <div class="nav-wrapper">
             <a href="{{ url_for('main.index') }}" class="brand-logo" style="margin-left: 25px;"><img src="{{ url_for('static', filename='images/logo_-_nopaque.png') }}" style="height: 64px;"></a>
             {% if current_user.is_authenticated %}
@@ -227,7 +217,7 @@
     {% endif %}
     </main>
 
-    <footer class="page-footer nopaque-secondary-color white-text">
+    <footer class="page-footer secondary-color white-text">
       <div class="container">
         <div class="row">
           <div class="col s6 m3">
@@ -251,13 +241,13 @@
           </div>
         </div>
       </div>
-      <div class="footer-copyright nopaque-primary-color white-text">
+      <div class="footer-copyright primary-color white-text">
         <div class="container">
           <div class="row" style="margin-bottom: 0;">
-            <div class="col s12 m2">
+            <div class="col s12 m3">
               <span>© 2020 Bielefeld University</span>
             </div>
-            <div class="col s12 m10 right-align">
+            <div class="col s12 m9 right-align">
               <a class="btn-small pink waves-effect waves-light" href="mailto:{{ config.NOPAQUE_CONTACT }}?subject={{ config.NOPAQUE_MAIL_SUBJECT_PREFIX }} Contact"><i class="left material-icons">rate_review</i>Contact</a>
               <a class="btn-small green waves-effect waves-light" href=""><i class="left material-icons">feedback</i>Feedback</a>
               <a class="btn-small orange waves-effect waves-light" href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/opaque"><i class="left material-icons">code</i>GitLab</a>