sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-11-15 09:15:41 +00:00
Code Issues Projects Releases Wiki Activity

More color integration

Browse Source
This commit is contained in:
Patrick Jentsch 2020-08-24 14:21:16 +02:00
parent 778ff509ff
commit e9de641e30
7 changed files with 116 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/app/static/css/nopaque.css
View File

@ -1,29 +1,3 @@
/* Service colos setup
* file-setup ~ light: #??????, normal: #d5dc95, dark: #a1b300
* ocr ~ light: #??????, normal: #a9d8c8, dark: #00a58b
* nlp ~ light: #??????, normal: #98acd2, dark: #0064a3
* corpus-analysis ~ light: #??????, normal: #aa9cc9, dark: #6b3f89
*/
#sidenav-main-file-setup {
background-color: #d5dc95;
border-left: 10px solid #a1b300;
}
#sidenav-main-ocr {
background-color: #a9d8c8;
border-left: 10px solid #00a58b;
}
#sidenav-main-nlp {
background-color: #98acd2;
border-left: 10px solid #0064a3;
}
#sidenav-main-corpus-analysis {
background-color: #aa9cc9;
border-left: 10px solid #6b3f89;
}
/* /*
* ### 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

6
web/app/templates/macros/materialize.html.j2
View File

@ -48,9 +48,10 @@
{% 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"> <div class="btn" {% if color is not none %}style="background-color: {{ color }};"{% endif %}>
<span>{{ field.label.text }}</span> <span>{{ field.label.text }}</span>
{{ field(*args, **kwargs) }} {{ field(*args, **kwargs) }}
</div> </div>
@ -77,7 +78,8 @@
{% endmacro %} {% endmacro %}
{% macro render_submit_field(field) %} {% macro render_submit_field(field) %}
<button class="btn waves-effect waves-light" id="{{ field.id }}" name="{{ field.name }}" type="submit" value="{{ field.label.text }}"> {% set color = kwargs.pop('color', none) %}
<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>

161
web/app/templates/nopaque.html.j2
View File

@ -1,5 +1,33 @@
{% import "macros/materialize.html.j2" as M %} {% import "macros/materialize.html.j2" as M %}
{% if title == '' %}
{% set title = None %}
{% endif %}
{% if headline is not defined %}
{% set headline = title %}
{% endif %}
{% if main_class is not defined %}
{% set main_class = 'grey lighten-5' %}
{% endif %}
{% set corpus_analysis_color = '#aa9cc9' %}
{% set corpus_analysis_color_darken = '#6b3f89' %}
{% set corpus_analysis_color_lighten = '#ebe8f6' %}
{% set file_setup_color = '#d5dc95' %}
{% set file_setup_color_darken = '#a1b300' %}
{% set file_setup_color_lighten = '#f2f3e1' %}
{% set nlp_color = '#98acd2' %}
{% set nlp_color_darken = '#0064a3' %}
{% set nlp_color_lighten = '#e5e8f5' %}
{% set ocr_color = '#a9d8c8' %}
{% set ocr_color_darken = '#00a58b' %}
{% set ocr_color_lighten = '#e7f4f1' %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@ -8,7 +36,7 @@
<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 title and request.path != url_for('main.index') %} {% if request.path != url_for('main.index') %}
– {{ title }} – {{ title }}
{% endif %} {% endif %}
</title> </title>
@ -18,6 +46,21 @@
<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 %} {% if current_user.is_authenticated %}
<style> <style>
.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;}
.file-setup-color {background-color: {{ file_setup_color }} !important;}
.file-setup-color.darken {background-color: {{ file_setup_color_darken }} !important;}
.file-setup-color.lighten {background-color: {{ file_setup_color_lighten }} !important;}
.ocr-color {background-color: {{ ocr_color }} !important;}
.ocr-color.darken {background-color: {{ ocr_color_darken }} !important;}
.ocr-color.lighten {background-color: {{ ocr_color_lighten }} !important;}
.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;}
/* /*
* ### 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
@ -108,10 +151,10 @@
<li><a href="{{ url_for('main.dashboard', _anchor='jobs') }}" style="padding-left: 47px;"><i class="material-icons">work</i>My Jobs</a></li> <li><a href="{{ url_for('main.dashboard', _anchor='jobs') }}" style="padding-left: 47px;"><i class="material-icons">work</i>My Jobs</a></li>
<li><div class="divider"></div></li> <li><div class="divider"></div></li>
<li><a class="subheader">Processes and Services</a></li> <li><a class="subheader">Processes and Services</a></li>
<li id="sidenav-main-file-setup"><a href="{{ url_for('services.service', service='file-setup') }}"><i class="material-icons">burst_mode</i>File setup</a></li> <li style="background-color: {{ file_setup_color }}; border-left: 10px solid {{ file_setup_color_darken }};"><a href="{{ url_for('services.service', service='file-setup') }}"><i class="material-icons">burst_mode</i>File setup</a></li>
<li id="sidenav-main-ocr"><a href="{{ url_for('services.service', service='ocr') }}"><i class="material-icons">find_in_page</i>OCR</a></li> <li style="background-color: {{ ocr_color }}; border-left: 10px solid {{ ocr_color_darken }};"><a href="{{ url_for('services.service', service='ocr') }}"><i class="material-icons">find_in_page</i>OCR</a></li>
<li id="sidenav-main-nlp"><a href="{{ url_for('services.service', service='nlp') }}"><i class="material-icons">format_textdirection_l_to_r</i>NLP</a></li> <li style="background-color: {{ nlp_color }}; border-left: 10px solid {{ nlp_color_darken }};"><a href="{{ url_for('services.service', service='nlp') }}"><i class="material-icons">format_textdirection_l_to_r</i>NLP</a></li>
<li id="sidenav-main-corpus-analysis"><a href="{{ url_for('services.service', service='corpus_analysis') }}"><i class="material-icons">search</i>Corpus analysis</a></li> <li style="background-color: {{ corpus_analysis_color }}; border-left: 10px solid {{ corpus_analysis_color_darken }};"><a href="{{ url_for('services.service', service='corpus_analysis') }}"><i class="material-icons">search</i>Corpus analysis</a></li>
<li><div class="divider"></div></li> <li><div class="divider"></div></li>
<li><a class="subheader">Account</a></li> <li><a class="subheader">Account</a></li>
{% if current_user.is_authenticated %} {% if current_user.is_authenticated %}
@ -130,67 +173,40 @@
</header> </header>
{%- macro insert_page_content() -%} {%- 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 %} {% block page_content %}{% endblock %}
{%- endmacro -%} {%- endmacro -%}
{% if parallax %} {% if parallax %}
<main> <main>
<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>
{{ insert_page_content() }} {{ insert_page_content() }}
</main> </main>
{% else %} {% else %}
<main class="grey lighten-5"> <main class="{{ main_class }}">
<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>
{% if not full_width %} {% if not full_width %}
<div class="container"> <div class="container">
{% endif %} {% endif %}
<div class="row"> <div class="row">
<div class="col s12 headline"> <div class="col s12">
<h2> <h2>{{ headline }}</h2>
{% if headline %}
{{ headline }}
{% elif title %}
{{ title }}
{% else %}
Unnamed page
{% endif %}
</h2>
</div> </div>
{{ insert_page_content() }} {{ insert_page_content() }}
</div> </div>
@ -240,43 +256,6 @@
</div> </div>
</div> </div>
</footer> </footer>
<!--
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col s12 m3">
<a href="https://www.dfg.de/">
<img class="responsive-img" src="{{ url_for('static', filename='images/logo_-_dfg.gif') }}">
</a>
</div>
<div class="col s12 m6">
<h5 class="white-text" style="margin-left: -15px;">Contact</h5>
<div class="row">
<p>Contact our interdisciplinary team via email: <b>inf_sfb1288@lists.uni-bielefeld.de</b></p>
<p>Silke Schwandt (Digital History), Johanna Vompras (Research Data Management), Julia Becker (Cultural Studies), Patrick Jentsch (Cognitive Informatics), Anna Neubert (Digital Humanities), Stephan Porada (Interdisciplinary Media Studies), Helene Schlicht (History, Philosophy)
</div>
</div>
<div class="col s12 m3">
<div class="row">
<div class="col s8">
<h5 class="white-text">Reminder</h5>
<p>
Check out our website for nopaque's upcomming release:<br>
<small>www.uni-bielefeld.de/sfb1288/projekte/inf.html</small>
</p>
</div>
<div class="col s4">
<p>&nbsp;</p>
<img class="responsive-img" src="{{ url_for('static', filename='images/qr_-_inf.svg') }}">
</div>
</div>
</div>
</div>
</div>
</footer>
-->
<script src="{{ url_for('static', filename='js/Materialize/materialize.min.js') }}"></script> <script src="{{ url_for('static', filename='js/Materialize/materialize.min.js') }}"></script>
</body> </body>
</html> </html>

12
web/app/templates/services/corpus_analysis.html.j2
View File

@ -1,10 +1,14 @@
{% extends "nopaque.html.j2" %} {% extends "nopaque.html.j2" %}
{% set headline = '<i class="material-icons left service" data-service="corpus_analysis" style="font-size: inherit;"></i>Corpus analysis' %} {% set main_class = 'corpus-analysis-color lighten' %}
{% block page_content %} {% block page_content %}
<div class="col s12 m3 push-m9"> <div class="col s12 m3 push-m9">
{% include 'services/roadmap.html.j2' %} <div class="center-align">
<a class="btn-floating btn-large corpus-analysis-color darken waves-effect waves-light" style="transform: scale(2);">
<i class="material-icons service" data-service="corpus_analysis"></i>
</a>
</div>
</div> </div>
<div class="col s12 m9 pull-m3"> <div class="col s12 m9 pull-m3">
@ -37,7 +41,7 @@
<ul class="pagination"></ul> <ul class="pagination"></ul>
</div> </div>
<div class="card-action right-align"> <div class="card-action right-align">
<a class="waves-effect waves-light btn" href="{{ url_for('corpora.add_corpus') }}">New corpus<i class="material-icons right">add</i></a> <a class="btn corpus-analysis-color darken waves-effect waves-light" href="{{ url_for('corpora.add_corpus') }}">New corpus<i class="material-icons right">add</i></a>
</div> </div>
</div> </div>
</div> </div>
@ -78,7 +82,7 @@
<ul class="pagination paginationBottom"></ul> <ul class="pagination paginationBottom"></ul>
</div> </div>
<div class="card-action right-align"> <div class="card-action right-align">
<a class="waves-effect waves-light btn" href="{{ url_for('query_results.add_query_result') }}">Add query result<i class="material-icons right">file_upload</i></a> <a class="btn corpus-analysis-color darken waves-effect waves-light" href="{{ url_for('query_results.add_query_result') }}">Add query result<i class="material-icons right">file_upload</i></a>
</div> </div>
</div> </div>
</div> </div>

17
web/app/templates/services/file-setup.html.j2
View File

@ -1,14 +1,21 @@
{% extends "nopaque.html.j2" %} {% extends "nopaque.html.j2" %}
{% set headline = '<i class="material-icons left service" data-service="file-setup" style="font-size: inherit;"></i>File setup' %}
{% set main_class = 'file-setup-color lighten' %}
{% block page_content %} {% block page_content %}
<div class="col s12 m3 push-m9"> <div class="col s12 m3 push-m9">
{% include 'services/roadmap.html.j2' %} <div class="center-align">
<p>&nbsp;</p>
<p>&nbsp;</p>
<a class="btn-floating btn-large file-setup-color darken waves-effect waves-light" style="transform: scale(2);">
<i class="material-icons service" data-service="file-setup"></i>
</a>
</div>
</div> </div>
<div class="col s12 m9 pull-m3"> <div class="col s12 m9 pull-m3">
<div class="card"> <div class="card" style="border-top: 10px solid {{ file_setup_color_darken }};">
<div class="card-content"> <div class="card-content">
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
@ -36,7 +43,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', placeholder='Choose your .jpeg, .png or .tiff files') }} {{ 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') }}
</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') }}
@ -44,7 +51,7 @@
</div> </div>
</div> </div>
<div class="card-action right-align"> <div class="card-action right-align">
{{ M.render_field(add_job_form.submit, material_icon='send') }} {{ M.render_field(add_job_form.submit, color=file_setup_color_darken, material_icon='send') }}
</div> </div>
</form> </form>
</div> </div>

16
web/app/templates/services/nlp.html.j2
View File

@ -1,14 +1,20 @@
{% extends "nopaque.html.j2" %} {% extends "nopaque.html.j2" %}
{% set headline = '<i class="material-icons left service" data-service="nlp" style="font-size: inherit;"></i>Natural Language Processing' %} {% set main_class = 'nlp-color lighten' %}
{% block page_content %} {% block page_content %}
<div class="col s12 m3 push-m9"> <div class="col s12 m3 push-m9">
{% include 'services/roadmap.html.j2' %} <div class="center-align">
<p>&nbsp;</p>
<p>&nbsp;</p>
<a class="btn-floating btn-large nlp-color darken waves-effect waves-light" style="transform: scale(2);">
<i class="material-icons service" data-service="nlp"></i>
</a>
</div>
</div> </div>
<div class="col s12 m9 pull-m3"> <div class="col s12 m9 pull-m3">
<div class="card"> <div class="card" style="border-top: 10px solid {{ nlp_color_darken }};">
<div class="card-content"> <div class="card-content">
<div class="row"> <div class="row">
<div class="col s12 m6"> <div class="col s12 m6">
@ -54,7 +60,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', placeholder='Choose your .txt files') }} {{ M.render_field(add_job_form.files, accept='text/plain', color=nlp_color_darken, 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') }}
@ -86,7 +92,7 @@
</div> </div>
</div> </div>
<div class="card-action right-align"> <div class="card-action right-align">
{{ M.render_field(add_job_form.submit, material_icon='send') }} {{ M.render_field(add_job_form.submit, color=nlp_color_darken, material_icon='send') }}
</div> </div>
</form> </form>
</div> </div>

16
web/app/templates/services/ocr.html.j2
View File

@ -1,14 +1,20 @@
{% extends "nopaque.html.j2" %} {% extends "nopaque.html.j2" %}
{% set headline = '<i class="material-icons left service" data-service="ocr" style="font-size: inherit;"></i>Optical Character Recognition' %} {% set main_class = 'ocr-color lighten' %}
{% block page_content %} {% block page_content %}
<div class="col s12 m3 push-m9"> <div class="col s12 m3 push-m9">
{% include 'services/roadmap.html.j2' %} <div class="center-align">
<p>&nbsp;</p>
<p>&nbsp;</p>
<a class="btn-floating btn-large ocr-color darken waves-effect waves-light" style="transform: scale(2);">
<i class="material-icons service" data-service="ocr"></i>
</a>
</div>
</div> </div>
<div class="col s12 m9 pull-m3"> <div class="col s12 m9 pull-m3">
<div class="card"> <div class="card" style="border-top: 10px solid {{ ocr_color_darken }};">
<div class="card-content"> <div class="card-content">
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
@ -36,7 +42,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='application/pdf', placeholder='Choose your .pdf files') }} {{ M.render_field(add_job_form.files, accept='application/pdf', color=ocr_color_darken, placeholder='Choose your .pdf 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') }}
@ -113,7 +119,7 @@
</div> </div>
</div> </div>
<div class="card-action right-align"> <div class="card-action right-align">
{{ M.render_field(add_job_form.submit, material_icon='send') }} {{ M.render_field(add_job_form.submit, color=ocr_color_darken, material_icon='send') }}
</div> </div>
</form> </form>
</div> </div>