Skip to content
Snippets Groups Projects
Commit 2216bffe authored by Patrick Jentsch's avatar Patrick Jentsch
Browse files

Further color updates

parent d88980ff
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 101 additions and 65 deletions
web/app/static/css/nopaque.css
+ 0
− 10
View file @ 2216bffe
nav, .footer-copyright {
background-color: #00426f !important;
color: white !important;
}
.page-footer {
background-color: #b1b3b4;
color: white;
}
/* /*
* ### Start sticky footer ### * ### Start sticky footer ###
* Force the footer to always stay on the bottom of the page regardless of how * Force the footer to always stay on the bottom of the page regardless of how
......
web/app/templates/nopaque.html.j2
+ 45
− 35
View file @ 2216bffe
{% import "macros/materialize.html.j2" as M %} {% import "utils/materialize.html.j2" as M %}
{% if title == '' %}
{% if title is not defined %}
{% set title = None %} {% set title = None %}
{% endif %} {% endif %}
...@@ -12,6 +13,13 @@ ...@@ -12,6 +13,13 @@
{% set main_class = 'grey lighten-5' %} {% set main_class = 'grey lighten-5' %}
{% endif %} {% endif %}
{% if parallax is not defined %}
{% set parallax = False %}
{% endif %}
{% set nopaque_primary_color = '#00426f' %}
{% set nopaque_secondary_color = '#b1b3b4' %}
{% set corpus_analysis_color = '#aa9cc9' %} {% set corpus_analysis_color = '#aa9cc9' %}
{% set corpus_analysis_color_darken = '#6b3f89' %} {% set corpus_analysis_color_darken = '#6b3f89' %}
{% set corpus_analysis_color_lighten = '#ebe8f6' %} {% set corpus_analysis_color_lighten = '#ebe8f6' %}
...@@ -28,6 +36,12 @@ ...@@ -28,6 +36,12 @@
{% set ocr_color_darken = '#00a58b' %} {% set ocr_color_darken = '#00a58b' %}
{% set ocr_color_lighten = '#e7f4f1' %} {% set ocr_color_lighten = '#e7f4f1' %}
{%- macro insert_content() -%}
{% block page_content %}{% endblock %}
{%- endmacro -%}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
...@@ -36,15 +50,12 @@ ...@@ -36,15 +50,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> <title>
nopaque nopaque
{% if request.path != url_for('main.index') %} {% if request.path != url_for('main.index') %} – {{ title }}{% endif %}
– {{ title }}
{% endif %}
</title> </title>
<link rel="icon" href="{{ url_for('static', filename='images/nopaque_logo.png') }}"> <link rel="icon" href="{{ url_for('static', filename='images/nopaque_logo.png') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='fonts/Material_design_icons/material-icons.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='fonts/Material_design_icons/material-icons.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/Materialize/materialize.min.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='css/Materialize/materialize.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/nopaque.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='css/nopaque.css') }}">
{% if current_user.is_authenticated %}
<style> <style>
.corpus-analysis-color {background-color: {{ corpus_analysis_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.darken {background-color: {{ corpus_analysis_color_darken }} !important;}
...@@ -61,6 +72,13 @@ ...@@ -61,6 +72,13 @@
.nlp-color {background-color: {{ nlp_color }} !important;} .nlp-color {background-color: {{ nlp_color }} !important;}
.nlp-color.darken {background-color: {{ nlp_color_darken }} !important;} .nlp-color.darken {background-color: {{ nlp_color_darken }} !important;}
.nlp-color.lighten {background-color: {{ nlp_color_lighten }} !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 ### * ### Start sidenav-fixed offset ###
* The sidenav-fixed class is used which causes the sidenav to be fixed and open * The sidenav-fixed class is used which causes the sidenav to be fixed and open
...@@ -107,7 +125,7 @@ ...@@ -107,7 +125,7 @@
<body> <body>
<header> <header>
<div class="navbar-fixed"> <div class="navbar-fixed">
<nav> <nav class="nav-extended nopaque-primary-color white-text">
<div class="nav-wrapper"> <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> <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 %} {% if current_user.is_authenticated %}
...@@ -126,6 +144,21 @@ ...@@ -126,6 +144,21 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="nav-content">
<noscript>
<div class="card z-depth-0" style="background-color: inherit;">
<div class="card-content">
<span class="card-title">JavaScript is disabled</span>
<p>You have JavaScript disabled. Nopaque uses javascript and sockets to send data in realtime to you. For example showing you the status of your jobs and your corpora. Please activate JavaScript to make full use of nopaque.</p>
<p>Some services are still useable without Javascript.</p>
</div>
<div class="card-action">
<a href="#">What services can I still use?</a>
<a href="#">What services and functions are not available?</a>
</div>
</div>
</noscript>
</div>
</nav> </nav>
</div> </div>
...@@ -172,32 +205,9 @@ ...@@ -172,32 +205,9 @@
</ul> </ul>
</header> </header>
{%- macro insert_page_content() -%}
<noscript>
<div class="container">
<div class="row">
<div class="col s12">
<div class="card red darken-1">
<div class="card-content white-text">
<span class="card-title">JavaScript is disabled</span>
<p>You have JavaScript disabled. Nopaque uses javascript and sockets to send data in realtime to you. For example showing you the status of your jobs and your corpora. Please activate JavaScript to make full use of nopaque.</p>
<p>Some services are still useable without Javascript.</p>
</div>
<div class="card-action">
<a href="#">What services can I still use?</a>
<a href="#">What services and functions are not available?</a>
</div>
</div>
</div>
</div>
</div>
</noscript>
{% block page_content %}{% endblock %}
{%- endmacro -%}
{% if parallax %} {% if parallax %}
<main> <main>
{{ insert_page_content() }} {{ insert_content() }}
</main> </main>
{% else %} {% else %}
<main class="{{ main_class }}"> <main class="{{ main_class }}">
...@@ -208,7 +218,7 @@ ...@@ -208,7 +218,7 @@
<div class="col s12"> <div class="col s12">
<h2>{{ headline }}</h2> <h2>{{ headline }}</h2>
</div> </div>
{{ insert_page_content() }} {{ insert_content() }}
</div> </div>
{% if not full_width %} {% if not full_width %}
</div> </div>
...@@ -217,13 +227,13 @@ ...@@ -217,13 +227,13 @@
{% endif %} {% endif %}
</main> </main>
<footer class="page-footer"> <footer class="page-footer nopaque-secondary-color white-text">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col s6 m3"> <div class="col s6 m3">
<a href="https://www.dfg.de/"> <a href="https://www.dfg.de/">
<img class="responsive-img" src="{{ url_for('static', filename='images/logo_-_dfg.gif') }}"> <img class="responsive-img" src="{{ url_for('static', filename='images/logo_-_dfg.gif') }}">
</a> </a>
</div> </div>
<div class="col s6 m3 offset-m1 center-align"> <div class="col s6 m3 offset-m1 center-align">
<a href="https://www.uni-bielefeld.de/sfb1288/"> <a href="https://www.uni-bielefeld.de/sfb1288/">
...@@ -241,7 +251,7 @@ ...@@ -241,7 +251,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="footer-copyright"> <div class="footer-copyright nopaque-primary-color white-text">
<div class="container"> <div class="container">
<div class="row" style="margin-bottom: 0;"> <div class="row" style="margin-bottom: 0;">
<div class="col s12 m2"> <div class="col s12 m2">
......
web/app/templates/services/corpus_analysis.html.j2
+ 5
− 1
View file @ 2216bffe
...@@ -2,10 +2,14 @@ ...@@ -2,10 +2,14 @@
{% set main_class = 'corpus-analysis-color lighten' %} {% set main_class = 'corpus-analysis-color lighten' %}
{% block style_additions %}
main button, main .btn, main .btn-floating {background-color: {{ corpus_analysis_color_darken }};}
{% endblock %}
{% block page_content %} {% block page_content %}
<div class="col s12 m3 push-m9"> <div class="col s12 m3 push-m9">
<div class="center-align"> <div class="center-align">
<a class="btn-floating btn-large corpus-analysis-color darken waves-effect waves-light" style="transform: scale(2);"> <a class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
<i class="material-icons service" data-service="corpus_analysis"></i> <i class="material-icons service" data-service="corpus_analysis"></i>
</a> </a>
</div> </div>
......
web/app/templates/services/file-setup.html.j2
+ 9
− 6
View file @ 2216bffe
{% extends "nopaque.html.j2" %} {% extends "nopaque.html.j2" %}
{% set main_class = 'file-setup-color lighten' %} {% set main_class = 'file-setup-color lighten' %}
{% block style_additions %}
main button, main .btn, main .btn-floating {background-color: {{ file_setup_color_darken }};}
{% endblock %}
{% block page_content %} {% block page_content %}
<div class="col s12 m3 push-m9"> <div class="col s12 m3 push-m9">
<div class="center-align"> <div class="center-align">
<p>&nbsp;</p> <p class="hide-on-small-only">&nbsp;</p>
<p>&nbsp;</p> <p class="hide-on-small-only">&nbsp;</p>
<a class="btn-floating btn-large file-setup-color darken waves-effect waves-light" style="transform: scale(2);"> <a class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
<i class="material-icons service" data-service="file-setup"></i> <i class="material-icons service" data-service="file-setup"></i>
</a> </a>
</div> </div>
...@@ -43,7 +46,7 @@ ...@@ -43,7 +46,7 @@
{{ M.render_field(add_job_form.description, data_length='255', material_icon='description') }} {{ M.render_field(add_job_form.description, data_length='255', material_icon='description') }}
</div> </div>
<div class="col s12"> <div class="col s12">
{{ M.render_field(add_job_form.files, accept='image/jpeg, image/png, image/tiff', color=file_setup_color_darken, placeholder='Choose your .jpeg, .png or .tiff files') }} {{ M.render_field(add_job_form.files, accept='image/jpeg, image/png, image/tiff', placeholder='Choose your .jpeg, .png or .tiff files') }}
</div> </div>
<div class="col s12 hide"> <div class="col s12 hide">
{{ M.render_field(add_job_form.version, material_icon='apps') }} {{ M.render_field(add_job_form.version, material_icon='apps') }}
...@@ -51,7 +54,7 @@ ...@@ -51,7 +54,7 @@
</div> </div>
</div> </div>
<div class="card-action right-align"> <div class="card-action right-align">
{{ M.render_field(add_job_form.submit, color=file_setup_color_darken, material_icon='send') }} {{ M.render_field(add_job_form.submit, material_icon='send') }}
</div> </div>
</form> </form>
</div> </div>
......
web/app/templates/services/nlp.html.j2
+ 9
− 5
View file @ 2216bffe
...@@ -2,12 +2,16 @@ ...@@ -2,12 +2,16 @@
{% set main_class = 'nlp-color lighten' %} {% set main_class = 'nlp-color lighten' %}
{% block style_additions %}
main button, main .btn, main .btn-floating {background-color: {{ nlp_color_darken }};}
{% endblock %}
{% block page_content %} {% block page_content %}
<div class="col s12 m3 push-m9"> <div class="col s12 m3 push-m9">
<div class="center-align"> <div class="center-align">
<p>&nbsp;</p> <p class="hide-on-small-only">&nbsp;</p>
<p>&nbsp;</p> <p class="hide-on-small-only">&nbsp;</p>
<a class="btn-floating btn-large nlp-color darken waves-effect waves-light" style="transform: scale(2);"> <a class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
<i class="material-icons service" data-service="nlp"></i> <i class="material-icons service" data-service="nlp"></i>
</a> </a>
</div> </div>
...@@ -60,7 +64,7 @@ ...@@ -60,7 +64,7 @@
{{ M.render_field(add_job_form.description, data_length='255', material_icon='description') }} {{ M.render_field(add_job_form.description, data_length='255', material_icon='description') }}
</div> </div>
<div class="col s12 l5"> <div class="col s12 l5">
{{ M.render_field(add_job_form.files, accept='text/plain', color=nlp_color_darken, placeholder='Choose your .txt files') }} {{ M.render_field(add_job_form.files, accept='text/plain', placeholder='Choose your .txt files') }}
</div> </div>
<div class="col s12 l4"> <div class="col s12 l4">
{{ M.render_field(add_job_form.language, material_icon='language') }} {{ M.render_field(add_job_form.language, material_icon='language') }}
...@@ -92,7 +96,7 @@ ...@@ -92,7 +96,7 @@
</div> </div>
</div> </div>
<div class="card-action right-align"> <div class="card-action right-align">
{{ M.render_field(add_job_form.submit, color=nlp_color_darken, material_icon='send') }} {{ M.render_field(add_job_form.submit, material_icon='send') }}
</div> </div>
</form> </form>
</div> </div>
......
web/app/templates/services/ocr.html.j2
+ 7
− 3
View file @ 2216bffe
...@@ -2,12 +2,16 @@ ...@@ -2,12 +2,16 @@
{% set main_class = 'ocr-color lighten' %} {% set main_class = 'ocr-color lighten' %}
{% block style_additions %}
main button, main .btn, main .btn-floating {background-color: {{ ocr_color_darken }};}
{% endblock %}
{% block page_content %} {% block page_content %}
<div class="col s12 m3 push-m9"> <div class="col s12 m3 push-m9">
<div class="center-align"> <div class="center-align">
<p>&nbsp;</p> <p class="hide-on-small-only">&nbsp;</p>
<p>&nbsp;</p> <p class="hide-on-small-only">&nbsp;</p>
<a class="btn-floating btn-large ocr-color darken waves-effect waves-light" style="transform: scale(2);"> <a class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
<i class="material-icons service" data-service="ocr"></i> <i class="material-icons service" data-service="ocr"></i>
</a> </a>
</div> </div>
......
web/app/templates/macros/query_result_macro.html.j2 → web/app/templates/utils/macros.html.j2
+ 24
− 1
View file @ 2216bffe
{%- macro insert_page_content() -%}
<noscript>
<div class="container">
<div class="row">
<div class="col s12">
<div class="card red darken-1">
<div class="card-content white-text">
<span class="card-title">JavaScript is disabled</span>
<p>You have JavaScript disabled. Nopaque uses javascript and sockets to send data in realtime to you. For example showing you the status of your jobs and your corpora. Please activate JavaScript to make full use of nopaque.</p>
<p>Some services are still useable without Javascript.</p>
</div>
<div class="card-action">
<a href="#">What services can I still use?</a>
<a href="#">What services and functions are not available?</a>
</div>
</div>
</div>
</div>
</div>
</noscript>
{% block page_content %}{% endblock %}
{%- endmacro -%}
{% macro show_metadata(query_metadata) %} {% macro show_metadata(query_metadata) %}
<div class="col s12"> <div class="col s12">
...@@ -71,4 +94,4 @@ for (let collapsible of collapsibles) { ...@@ -71,4 +94,4 @@ for (let collapsible of collapsibles) {
} }
} }
</script> </script>
{% endmacro %} {% endmacro %}
\ No newline at end of file
web/app/templates/macros/materialize.html.j2 → web/app/templates/utils/materialize.html.j2
+ 2
− 4
View file @ 2216bffe
...@@ -48,10 +48,9 @@ ...@@ -48,10 +48,9 @@
{% endmacro %} {% endmacro %}
{% macro render_file_field(field) %} {% macro render_file_field(field) %}
{% set color = kwargs.pop('color', none) %}
{% set placeholder = kwargs.pop('placeholder', '') %} {% set placeholder = kwargs.pop('placeholder', '') %}
<div class="file-field input-field"> <div class="file-field input-field">
<div class="btn" {% if color is not none %}style="background-color: {{ color }};"{% endif %}> <div class="btn">
<span>{{ field.label.text }}</span> <span>{{ field.label.text }}</span>
{{ field(*args, **kwargs) }} {{ field(*args, **kwargs) }}
</div> </div>
...@@ -78,8 +77,7 @@ ...@@ -78,8 +77,7 @@
{% endmacro %} {% endmacro %}
{% macro render_submit_field(field) %} {% macro render_submit_field(field) %}
{% set color = kwargs.pop('color', none) %} <button class="btn waves-effect waves-light" id="{{ field.id }}" name="{{ field.name }}" type="submit" value="{{ field.label.text }}">
<button class="btn waves-effect waves-light" {% if color is not none %}style="background-color: {{ color }};"{% endif %} id="{{ field.id }}" name="{{ field.name }}" type="submit" value="{{ field.label.text }}">
{{ field.label.text }} {{ field.label.text }}
{% if 'material_icon' in kwargs %} {% if 'material_icon' in kwargs %}
<i class="material-icons right">{{ kwargs.pop('material_icon') }}</i> <i class="material-icons right">{{ kwargs.pop('material_icon') }}</i>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment