Update color scheme definition and some codestyle enhancements

web/app/services/__init__.py

@@ -5,7 +5,7 @@ SERVICES = {
     'corpus_analysis': {
         'name': 'Corpus analysis'
     },
-    'file-setup': {
+    'file_setup': {
         'name': 'File setup',
         'versions': {
             'latest': '1.0.0b',

web/app/services/forms.py

@@ -77,7 +77,7 @@ class AddFileSetupJobForm(AddJobForm):
                                       '| .tif')
 
     def __init__(self, *args, **kwargs):
-        version = kwargs.pop('version', SERVICES['file-setup']['versions']['latest'])
+        version = kwargs.pop('version', SERVICES['file_setup']['versions']['latest'])
         super().__init__(*args, **kwargs)
-        self.version.choices = [(x, x) for x in SERVICES['file-setup']['versions'] if x != 'latest']  # noqa
+        self.version.choices = [(x, x) for x in SERVICES['file_setup']['versions'] if x != 'latest']  # noqa
         self.version.default = version

web/app/services/views.py

@@ -20,18 +20,18 @@ def service(service):
     if service == 'corpus_analysis':
         return render_template('services/{}.html.j2'.format(service),
                                title=SERVICES[service]['name'])
-    elif service == 'file-setup':
+    elif service == 'file_setup':
         form = AddFileSetupJobForm(prefix='add-file-setup-job-form')
     elif service == 'nlp':
         version = request.args.get('version')
-        if version is None or version not in SERVICES['nlp']['versions']:
+        if version is None or version not in SERVICES[service]['versions']:
             form = AddNLPJobForm(prefix='add-nlp-job-form')
         else:
             form = AddNLPJobForm(prefix='add-nlp-job-form', version=version)
             form.version.data = version
     elif service == 'ocr':
         version = request.args.get('version')
-        if version is None or version not in SERVICES['ocr']['versions']:
+        if version is None or version not in SERVICES[service]['versions']:
             form = AddOCRJobForm(prefix='add-ocr-job-form')
         else:
             form = AddOCRJobForm(prefix='add-ocr-job-form', version=version)

web/app/static/css/material_icons.css

@@ -4,7 +4,6 @@
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
-  src: url(../fonts/material_icons/MaterialIcons-Regular.eot); /* For IE6-8 */
   src: local('Material Icons'),
     local('MaterialIcons-Regular'),
     url(../fonts/material_icons/MaterialIcons-Regular.ttf) format('truetype'),

web/app/static/css/materialize.sticky-footer.css

-/*
- * Force the footer to always stay on the bottom of the page regardless of how
- * little content is on the page.
- */
-body {
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
-}
-
-main {
-  flex: 1 0 auto;
-}

web/app/static/css/nopaque.css

 /* Fix material icon vertical alignment when nested in various elements */
-h1 .material-icons, h2 .material-icons, h3 .material-icons, h4 .material-icons,
-.tab .material-icons {
+h1 .nopaque-icons, h2 .nopaque-icons, h3 .nopaque-icons, h4 .nopaque-icons,
+.tab .nopaque-icons, .tab .material-icons {
   line-height: inherit;
 }
 
@@ -8,12 +8,27 @@ main {
   margin-top: 48px;
 }
 
+/*
+ * Force the footer to always stay on the bottom of the page regardless of how
+ * little content is on the page.
+ */
+body {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+main {
+  flex: 1 0 auto;
+}
+
+
 table.ressource-list tr {
   cursor: pointer;
 }
 
 .parallax-container .parallax {
-  z-index: auto;
+  z-index: 0;
 }
 
 /* add custom bold class */
@@ -117,66 +132,19 @@ indicator will show up how the column is sorted right now.; */
   cursor: pointer;
 }
 
-/* styles for resource lists */
-.analyse-link[href=""] {
-  display: none;
-}
-
 .btn-scale-x2 {
   transform: scale(2);
 }
 
-.btn-scale-x2 .service-icon {
+.btn-scale-x2 .nopaque-icons.service-icon {
   font-size: 2.5rem;
 }
 
-.service-icon[data-service]:before {
-  content: "help";
-}
-.service-icon[data-service="corpus-analysis"]:before {
-  content: "H";
-}
-.service-icon[data-service="file-setup"]:before {
-  content: "E";
-}
-.service-icon[data-service="nlp"]:before {
-  content: "G";
-}
-.service-icon[data-service="ocr"]:before {
-  content: "F";
-}
+.nopaque-icons.service-icon[data-service="corpus-analysis"]:empty:before {content: "H";}
+.nopaque-icons.service-icon[data-service="file-setup"]:empty:before {content: "E";}
+.nopaque-icons.service-icon[data-service="nlp"]:empty:before {content: "G";}
+.nopaque-icons.service-icon[data-service="ocr"]:empty:before {content: "F";}
 
 .status-text[data-status]:before {
   content: attr(data-status);
 }
-
-.status-color[data-status] {
-  background-color: #f44336 !important; /* ~materialize "red" */
-}
-.status-color[data-status="unprepared"] {
-  background-color: #9e9e9e !important; /* ~materialize grey */
-}
-.status-color[data-status="submitted"] {
-  background-color: #9e9e9e !important; /* ~materialize grey */
-}
-.status-color[data-status="queued"] {
-  background-color: #2196f3 !important; /* ~materialize blue */
-}
-.status-color[data-status="running"] {
-  background-color: #ffc107 !important; /* ~materialize amber */
-}
-.status-color[data-status="complete"] {
-  background-color: #4caf50 !important; /* ~materialize green */
-}
-.status-color[data-status="prepared"] {
-  background-color: #4caf50 !important; /* ~materialize green */
-}
-.status-color[data-status="start analysis"] {
-  background-color: #2196f3 !important; /* ~materialize blue */
-}
-.status-color[data-status="analysing"] {
-  background-color: #4caf50 !important; /* ~materialize green */
-}
-.status-color[data-status="stop analysis"] {
-  background-color: #ff5722 !important; /* ~materialize deep-orange */
-}

web/app/static/css/nopaque_icons.css

-/* https://google.github.io/material-design-icons/#setup-method-2-self-hosting */
-
 @font-face {
   font-family: 'nopaque Icons';
   font-style: normal;
@@ -33,57 +31,3 @@
   /* Support for IE. */
   font-feature-settings: 'liga';
 }
-
-.breadcrumb i.nopaque-icons {
-  display: inline-block;
-  float: left;
-  font-size: 24px;
-}
-
-.nopaque-icons {
-  text-rendering: optimizeLegibility;
-  -webkit-font-feature-settings: 'liga';
-     -moz-font-feature-settings: 'liga';
-          font-feature-settings: 'liga';
-}
-
-nav i.nopaque-icons {
-  display: block;
-  font-size: 24px;
-  height: 56px;
-  line-height: 56px;
-}
-
-nav .brand-logo i.nopaque-icons {
-  float: left;
-  margin-right: 15px;
-}
-
-nav ul a.btn > .nopaque-icons, nav ul a.btn-large > .nopaque-icons, nav ul a.btn-small > .nopaque-icons, nav ul a.btn-large > .nopaque-icons, nav ul a.btn-flat > .nopaque-icons, nav ul a.btn-floating > .nopaque-icons {
-  height: inherit;
-  line-height: inherit;
-}
-
-.input-field input[type=search]:focus:not(.browser-default) ~ .nopaque-icons {
-  color: #444;
-}
-
-.input-field input[type=search] ~ .nopaque-icons {
-  position: absolute;
-  top: 0;
-  right: 1rem;
-  color: transparent;
-  cursor: pointer;
-  font-size: 2rem;
-  -webkit-transition: .3s color;
-  transition: .3s color;
-}
-
-.sidenav li > a > i.nopaque-icons {
-  float: left;
-  height: 48px;
-  line-height: 48px;
-  margin: 0 32px 0 0;
-  width: 24px;
-  color: rgba(0, 0, 0, 0.54);
-}

web/app/static/js/nopaque/RessourceLists/CorpusList.js

@@ -81,7 +81,7 @@ class CorpusList extends RessourceList {
 }
 CorpusList.options = {
   item: `<tr>
-           <td><a class="btn-floating disabled"><i class="material-icons service-color" data-service="corpus-analysis">book</i></a></td>
+           <td><a class="btn-floating disabled"><i class="material-icons service-color darken" data-service="corpus-analysis">book</i></a></td>
            <td><b class="title"></b><br><i class="description"></i></td>
            <td><span class="badge new status status-color status-text" data-badge-caption=""></span></td>
            <td class="right-align">

web/app/static/js/nopaque/RessourceLists/JobList.js

@@ -82,7 +82,7 @@ class JobList extends RessourceList {
 }
 JobList.options = {
   item: `<tr>
-           <td><a class="btn-floating disabled"><i class="nopaque-icons service service-color service-icon"></i></a></td>
+           <td><a class="btn-floating disabled"><i class="nopaque-icons service service-color darken service-icon"></i></a></td>
            <td><b class="title"></b><br><i class="description"></i></td>
            <td><span class="badge new status status-color status-text" data-badge-caption=""></span></td>
            <td class="right-align">

web/app/templates/_color.html.j2

+{% set colors = {
+  'primary': '#00426f',
+  'primary_variant': '#1A5C89',
+  'secondary': '#00426f',
+  'secondary_variant': '#1A5C89',
+  'background': '#ffffff',
+  'surface': '#ffffff',
+  'error': '#b00020',
+
+  'service_corpus_analysis': '#aa9cc9',
+  'service_corpus_analysis_darken': '#6b3f89',
+  'service_corpus_analysis_lighten': '#ebe8f6',
+  'service_file_setup': '#d5dc95',
+  'service_file_setup_darken': '#a1b300',
+  'service_file_setup_lighten': '#f2f3e1',
+  'service_nlp': '#98acd2',
+  'service_nlp_darken': '#0064a3',
+  'service_nlp_lighten': '#e5e8f5',
+  'service_ocr': '#a9d8c8',
+  'service_ocr_darken': '#00a58b',
+  'service_ocr_lighten': '#e7f4f1',
+
+  'status_unprepared': '#9e9e9e',
+  'status_submitted': '#9e9e9e',
+  'status_queued': '#2196f3',
+  'status_running': '#ffc107',
+  'status_complete': '#4caf50',
+  'status_failed': '#f44336',
+  'status_prepared': '#4caf50',
+  'status_start_analysis': '#2196f3',
+  'status_analysing': '#4caf50',
+  'status_stop_analysis': '#ff5722'
+} %}
+
+
+<style>
+  .primary-color {background-color: {{ colors['primary'] }} !important;}
+  .primary-color-border {border-color: {{ colors['primary'] }} !important;}
+  .primary-color-text {color: {{ colors['primary'] }} !important;}
+  .primary-variant-color {background-color: {{ colors['primary_variant'] }} !important;}
+  .primary-variant-color-border {border-color: {{ colors['primary_variant'] }} !important;}
+  .primary-variant-color-text {color: {{ colors['primary_variant'] }} !important;}
+
+  .secondary-color {background-color: {{ colors['secondary'] }} !important;}
+  .secondary-color-border {border-color: {{ colors['secondary'] }} !important;}
+  .secondary-color-text {color: {{ colors['secondary'] }} !important;}
+  .secondary-variant-color {background-color: {{ colors['secondary_variant'] }} !important;}
+  .secondary-variant-color-border {border-color: {{ colors['secondary_variant'] }} !important;}
+  .secondary-variant-color-text {color: {{ colors['secondary_variant'] }} !important;}
+
+  .background-color {background-color: {{ colors['background'] }} !important;}
+  .background-color-border {border-color: {{ colors['background'] }} !important;}
+  .background-color-text {color: {{ colors['background'] }} !important;}
+
+  .surface-color {background-color: {{ colors['surface'] }} !important;}
+  .surface-color-border {border-color: {{ colors['surface'] }} !important;}
+  .surface-color-text {color: {{ colors['surface'] }} !important;}
+
+  .error-color {background-color: {{ colors['error'] }} !important;}
+  .error-color-border {border-color: {{ colors['error'] }} !important;}
+  .error-color-text {color: {{ colors['error'] }} !important;}
+
+  main {background-color: {{ colors['background'] }};}
+  main .btn, main .btn-small, main .btn-large, main .btn-floating {background-color: {{ colors['secondary'] }};}
+  main .btn:hover, main .btn-large:hover, main .btn-small:hover, main .btn-floating:hover {background-color: {{ colors['secondary_variant'] }};}
+  main .pagination li.active {background-color: {{ colors['secondary'] }};}
+  main .table-of-contents a.active {border-color: {{ colors['secondary'] }};}
+  main .tabs .tab a {color: inherit;}
+  main .tabs .tab.disabled a, main .tabs .tab.disabled a:hover {color: {{ colors['secondary'] }}28;}
+  main .tabs .tab a:hover {color: {{ colors['secondary'] }};}
+  main .tabs .tab a.active, main .tabs .tab a:focus.active {color: {{ colors['secondary'] }}; background-color: {{ colors['secondary'] }}28;}
+  main .tabs .indicator {background-color: {{ colors['secondary'] }};}
+
+  {% for service in ['file-setup', 'ocr', 'nlp', 'corpus-analysis'] %}
+  {% set service_color = colors['service_' + service.replace('-', '_')] %}
+  {% set service_color_darken = colors['service_' + service.replace('-', '_') + '_darken'] %}
+  {% set service_color_lighten = colors['service_' + service.replace('-', '_') + '_lighten'] %}
+  .service-scheme[data-service="{{ service }}"] {background-color: {{ service_color_lighten }};}
+  .service-scheme[data-service="{{ service }}"] .btn, .service-scheme[data-service="{{ service }}"] .btn-small, .service-scheme[data-service="{{ service }}"] .btn-large, .service-scheme[data-service="{{ service }}"] .btn-floating {background-color: {{ service_color_darken }};}
+  .service-scheme[data-service="{{ service }}"] .btn:hover, .service-scheme[data-service="{{ service }}"] .btn-large:hover, .service-scheme[data-service="{{ service }}"] .btn-small:hover, .service-scheme[data-service="{{ service }}"] .btn-floating:hover {background-color: {{ service_color }};}
+  .service-scheme[data-service="{{ service }}"] .pagination li.active {background-color: {{ service_color_darken }};}
+  .service-scheme[data-service="{{ service }}"] .table-of-contents a.active {border-color: {{ service_color_darken }};}
+  .service-scheme[data-service="{{ service }}"] .tabs .tab a {color: inherit;}
+  .service-scheme[data-service="{{ service }}"] .tabs .tab.disabled a, .service-scheme[data-service="{{ service }}"] .tabs .tab.disabled a:hover {color: {{ service_color_darken }}28;}
+  .service-scheme[data-service="{{ service }}"] .tabs .tab a:hover {color: {{ service_color_darken }};}
+  .service-scheme[data-service="{{ service }}"] .tabs .tab a.active, .service-scheme[data-service="{{ service }}"] .tabs .tab a:focus.active {color: {{ service_color_darken }}; background-color: {{ service_color_darken }}28;}
+  .service-scheme[data-service="{{ service }}"] .tabs .indicator {background-color: {{ service_color_darken }};}
+
+  .service-color[data-service="{{ service }}"] {background-color: {{ service_color }} !important;}
+  .service-color-text[data-service="{{ service }}"] {color: {{ service_color }} !important;}
+  .service-color-border[data-service="{{ service }}"] {border-color: {{ service_color }} !important;}
+  .service-color[data-service="{{ service }}"].darken {background-color: {{ service_color_darken }} !important;}
+  .service-color-text[data-service="{{ service }}"].text-darken {color: {{ service_color_darken }} !important;}
+  .service-color-border[data-service="{{ service }}"].border-darken {border-color: {{ service_color_darken }} !important;}
+  .service-color[data-service="{{ service }}"].lighten {background-color: {{ service_color_lighten }} !important;}
+  .service-color-text[data-service="{{ service }}"].text-lighten {color: {{ service_color_lighten }} !important;}
+  .service-color-border[data-service="{{ service }}"].border-lighten {border-color: {{ service_color_lighten }} !important;}
+  {% endfor %}
+
+  .status-color[data-status="unprepared"] {background-color: {{ colors.status_unprepared }} !important;}
+  .status-color[data-status="submitted"] {background-color: {{ colors.status_submitted }} !important;}
+  .status-color[data-status="queued"] {background-color: {{ colors.status_queued }} !important;}
+  .status-color[data-status="running"] {background-color: {{ colors.status_running }} !important;}
+  .status-color[data-status="complete"] {background-color: {{ colors.status_complete }} !important;}
+  .status-color[data-status="failed"] {background-color: {{ colors.status_failed }} !important;}
+  .status-color[data-status="prepared"] {background-color: {{ colors.status_prepared }} !important;}
+  .status-color[data-status="start analysis"] {background-color: {{ colors.status_start_analysis }} !important;}
+  .status-color[data-status="analysing"] {background-color: {{ colors.status_analysing }} !important;}
+  .status-color[data-status="stop analysis"] {background-color: {{ colors.status_stop_analysis }} !important;}
+</style>

web/app/templates/_colors.html.j2

-{% set colors = {'primary': '#00426f',
-                 'secondary': '#1A5C89',
-                 'footer': '#b1b3b4',
-                 'corpus_analysis': '#aa9cc9',
-                 'corpus_analysis_darken': '#6b3f89',
-                 'corpus_analysis_lighten': '#ebe8f6',
-                 'file_setup': '#d5dc95',
-                 'file_setup_darken': '#a1b300',
-                 'file_setup_lighten': '#f2f3e1',
-                 'nlp': '#98acd2',
-                 'nlp_darken': '#0064a3',
-                 'nlp_lighten': '#e5e8f5',
-                 'ocr': '#a9d8c8',
-                 'ocr_darken': '#00a58b',
-                 'ocr_lighten': '#e7f4f1'} %}

web/app/templates/admin/edit_user.html.j2

 {% extends "nopaque.html.j2" %}
-{% import 'materialize/wtf.html.j2' as wtf %}
+{% import "materialize/wtf.html.j2" as wtf %}
 
 {% block nav_content %}
 {% include 'admin/_breadcrumbs.html.j2' %}

web/app/templates/auth/login.html.j2

 {% extends "nopaque.html.j2" %}
-{% import 'materialize/wtf.html.j2' as wtf %}
+{% import "materialize/wtf.html.j2" as wtf %}
 
 {% block nav_content %}
 {% include 'auth/_breadcrumbs.html.j2' %}

web/app/templates/auth/register.html.j2

 {% extends "nopaque.html.j2" %}
-{% import 'materialize/wtf.html.j2' as wtf %}
+{% import "materialize/wtf.html.j2" as wtf %}
 
 {% block nav_content %}
 {% include 'auth/_breadcrumbs.html.j2' %}

web/app/templates/auth/reset_password.html.j2

 {% extends "nopaque.html.j2" %}
-{% import 'materialize/wtf.html.j2' as wtf %}
+{% import "materialize/wtf.html.j2" as wtf %}
 
 {% block nav_content %}
 {% include 'auth/_breadcrumbs.html.j2' %}

web/app/templates/auth/reset_password_request.html.j2

 {% extends "nopaque.html.j2" %}
-{% import 'materialize/wtf.html.j2' as wtf %}
+{% import "materialize/wtf.html.j2" as wtf %}
 
 {% block nav_content %}
 {% include 'auth/_breadcrumbs.html.j2' %}

web/app/templates/corpora/add_corpus.html.j2

 {% extends "nopaque.html.j2" %}
-{% from '_colors.html.j2' import colors %}
-{% import 'materialize/wtf.html.j2' as wtf %}
+{% import "materialize/wtf.html.j2" as wtf %}
 
-{% set scheme_primary_color = colors.corpus_analysis_darken %}
-{% set scheme_secondary_color = colors.corpus_analysis %}
+{% block main_attribs %} class="service-scheme" data-service="corpus-analysis"{% endblock main_attribs %}
 
 {% block nav_content %}
 {% include 'corpora/_breadcrumbs.html.j2' %}
 {% endblock nav_content %}
 
-{% block main_attribs %} class="corpus-analysis-color lighten"{% endblock main_attribs %}
-
 {% block page_content %}
 <div class="container">
   <div class="row">

web/app/templates/corpora/add_corpus_file.html.j2

 {% extends "nopaque.html.j2" %}
-{% from '_colors.html.j2' import colors %}
-{% import 'materialize/wtf.html.j2' as wtf %}
+{% import "materialize/wtf.html.j2" as wtf %}
 
-{% set scheme_primary_color = colors.corpus_analysis_darken %}
-{% set scheme_secondary_color = colors.corpus_analysis %}
+{% block main_attribs %} class="service-scheme" data-service="corpus-analysis"{% endblock main_attribs %}
 
 {% block nav_content %}
 {% include 'corpora/_breadcrumbs.html.j2' %}
 {% endblock nav_content %}
 
-{% block main_attribs %} class="corpus-analysis-color lighten"{% endblock main_attribs %}
-
 {% block page_content %}
 <div class="container">
   <div class="row">

web/app/templates/corpora/analyse_corpus.html.j2

 {% extends "nopaque.html.j2" %}
-{% from '_colors.html.j2' import colors %}
-{% import 'materialize/wtf.html.j2' as wtf %}
+{% import "materialize/wtf.html.j2" as wtf %}
 
-{% set scheme_primary_color = colors.corpus_analysis_darken %}
-{% set scheme_secondary_color = colors.corpus_analysis %}
+{% block main_attribs %} class="service-scheme" data-service="corpus-analysis"{% endblock main_attribs %}
 
 {% block nav_content %}
 {% include 'corpora/_breadcrumbs.html.j2' %}
 {% endblock nav_content %}
 
-{% block main_attribs %} class="corpus-analysis-color lighten"{% endblock main_attribs %}
-
 {% block page_content %}
 <div class="row">
   <div class="col s12">