mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 01:05:42 +00:00
More color integration
This commit is contained in:
Patrick Jentsch
parent
778ff509ff
commit
e9de641e30
@ -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 ###
|
||||
* Force the footer to always stay on the bottom of the page regardless of how
|
||||
|
||||
@ -48,9 +48,10 @@
|
||||
{% endmacro %}
|
||||
|
||||
{% macro render_file_field(field) %}
|
||||
{% set color = kwargs.pop('color', none) %}
|
||||
{% set placeholder = kwargs.pop('placeholder', '') %}
|
||||
<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>
|
||||
{{ field(*args, **kwargs) }}
|
||||
</div>
|
||||
@ -77,7 +78,8 @@
|
||||
{% endmacro %}
|
||||
|
||||
{% 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 }}
|
||||
{% if 'material_icon' in kwargs %}
|
||||
<i class="material-icons right">{{ kwargs.pop('material_icon') }}</i>
|
||||
|
||||
@ -1,5 +1,33 @@
|
||||
{% 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>
|
||||
<html lang="en">
|
||||
<head>
|
||||
@ -8,7 +36,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>
|
||||
nopaque
|
||||
{% if title and request.path != url_for('main.index') %}
|
||||
{% if request.path != url_for('main.index') %}
|
||||
– {{ title }}
|
||||
{% endif %}
|
||||
</title>
|
||||
@ -18,6 +46,21 @@
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/nopaque.css') }}">
|
||||
{% if current_user.is_authenticated %}
|
||||
<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 ###
|
||||
* 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><div class="divider"></div></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 id="sidenav-main-ocr"><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 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: {{ 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 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 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 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><a class="subheader">Account</a></li>
|
||||
{% if current_user.is_authenticated %}
|
||||
@ -130,67 +173,40 @@
|
||||
</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 %}
|
||||
<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() }}
|
||||
</main>
|
||||
{% else %}
|
||||
<main class="grey lighten-5">
|
||||
<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>
|
||||
<main class="{{ main_class }}">
|
||||
{% if not full_width %}
|
||||
<div class="container">
|
||||
{% endif %}
|
||||
<div class="row">
|
||||
<div class="col s12 headline">
|
||||
<h2>
|
||||
{% if headline %}
|
||||
{{ headline }}
|
||||
{% elif title %}
|
||||
{{ title }}
|
||||
{% else %}
|
||||
Unnamed page
|
||||
{% endif %}
|
||||
</h2>
|
||||
<div class="col s12">
|
||||
<h2>{{ headline }}</h2>
|
||||
</div>
|
||||
{{ insert_page_content() }}
|
||||
</div>
|
||||
@ -240,43 +256,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</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> </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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
{% 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 %}
|
||||
<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 class="col s12 m9 pull-m3">
|
||||
@ -37,7 +41,7 @@
|
||||
<ul class="pagination"></ul>
|
||||
</div>
|
||||
<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>
|
||||
@ -78,7 +82,7 @@
|
||||
<ul class="pagination paginationBottom"></ul>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
@ -1,14 +1,21 @@
|
||||
{% 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 %}
|
||||
<div class="col s12 m3 push-m9">
|
||||
{% include 'services/roadmap.html.j2' %}
|
||||
<div class="center-align">
|
||||
<p> </p>
|
||||
<p> </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 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="row">
|
||||
<div class="col s12">
|
||||
@ -36,7 +43,7 @@
|
||||
{{ M.render_field(add_job_form.description, data_length='255', material_icon='description') }}
|
||||
</div>
|
||||
<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 class="col s12 hide">
|
||||
{{ M.render_field(add_job_form.version, material_icon='apps') }}
|
||||
@ -44,7 +51,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,20 @@
|
||||
{% 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 %}
|
||||
<div class="col s12 m3 push-m9">
|
||||
{% include 'services/roadmap.html.j2' %}
|
||||
<div class="center-align">
|
||||
<p> </p>
|
||||
<p> </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 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="row">
|
||||
<div class="col s12 m6">
|
||||
@ -54,7 +60,7 @@
|
||||
{{ M.render_field(add_job_form.description, data_length='255', material_icon='description') }}
|
||||
</div>
|
||||
<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 class="col s12 l4">
|
||||
{{ M.render_field(add_job_form.language, material_icon='language') }}
|
||||
@ -86,7 +92,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,20 @@
|
||||
{% 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 %}
|
||||
<div class="col s12 m3 push-m9">
|
||||
{% include 'services/roadmap.html.j2' %}
|
||||
<div class="center-align">
|
||||
<p> </p>
|
||||
<p> </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 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="row">
|
||||
<div class="col s12">
|
||||
@ -36,7 +42,7 @@
|
||||
{{ M.render_field(add_job_form.description, data_length='255', material_icon='description') }}
|
||||
</div>
|
||||
<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 class="col s12 l4">
|
||||
{{ M.render_field(add_job_form.language, material_icon='language') }}
|
||||
@ -113,7 +119,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user