Commit adbd2126 authored by Patrick Jentsch's avatar Patrick Jentsch
Browse files

Update color scheme definition and some codestyle enhancements

parent bc6f06bc
......@@ -5,7 +5,7 @@ SERVICES = {
'corpus_analysis': {
'name': 'Corpus analysis'
},
'file-setup': {
'file_setup': {
'name': 'File setup',
'versions': {
'latest': '1.0.0b',
......
......@@ -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
......@@ -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)
......
......@@ -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'),
......
/*
* 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;
}
/* 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 */
}
/* 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);
}
......@@ -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">
......
......@@ -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">
......
{% 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>
{% 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'} %}
{% 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' %}
......
{% 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' %}
......
{% 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' %}
......
{% 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' %}
......
{% 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' %}
......
{% 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">
......
{% 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">
......
{% 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">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment