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

Further color updates

Browse Source
This commit is contained in:
Patrick Jentsch 2020-08-25 11:49:43 +02:00
parent d88980ffb1
commit 2216bffee8
8 changed files with 101 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,13 +1,3 @@
nav, .footer-copyright {
background-color: #00426f !important;
color: white !important;
}
.page-footer {
background-color: #b1b3b4;
color: white;
}
/*
* ### Start sticky footer ###
* Force the footer to always stay on the bottom of the page regardless of how

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

@ -1,6 +1,7 @@
{% import "macros/materialize.html.j2" as M %}
{% import "utils/materialize.html.j2" as M %}
{% if title == '' %}
{% if title is not defined %}
{% set title = None %}
{% endif %}
@ -12,6 +13,13 @@
{% set main_class = 'grey lighten-5' %}
{% 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_darken = '#6b3f89' %}
{% set corpus_analysis_color_lighten = '#ebe8f6' %}
@ -28,6 +36,12 @@
{% set ocr_color_darken = '#00a58b' %}
{% set ocr_color_lighten = '#e7f4f1' %}
{%- macro insert_content() -%}
{% block page_content %}{% endblock %}
{%- endmacro -%}
<!DOCTYPE html>
<html lang="en">
<head>
@ -36,15 +50,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
nopaque
{% if request.path != url_for('main.index') %}
– {{ title }}
{% endif %}
{% if request.path != url_for('main.index') %} – {{ title }}{% endif %}
</title>
<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='css/Materialize/materialize.min.css') }}">
<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;}
@ -61,6 +72,13 @@
.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;}
.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 ###
* The sidenav-fixed class is used which causes the sidenav to be fixed and open
@ -107,7 +125,7 @@
<body>
<header>
<div class="navbar-fixed">
<nav>
<nav class="nav-extended nopaque-primary-color white-text">
<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>
{% if current_user.is_authenticated %}
@ -126,6 +144,21 @@
</li>
</ul>
</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>
</div>
@ -172,32 +205,9 @@
</ul>
</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>
{{ insert_page_content() }}
{{ insert_content() }}
</main>
{% else %}
<main class="{{ main_class }}">
@ -208,7 +218,7 @@
<div class="col s12">
<h2>{{ headline }}</h2>
</div>
{{ insert_page_content() }}
{{ insert_content() }}
</div>
{% if not full_width %}
</div>
@ -217,13 +227,13 @@
{% endif %}
</main>
<footer class="page-footer">
<footer class="page-footer nopaque-secondary-color white-text">
<div class="container">
<div class="row">
<div class="col s6 m3">
<a href="https://www.dfg.de/">
<img class="responsive-img" src="{{ url_for('static', filename='images/logo_-_dfg.gif') }}">
</a>
</a>
</div>
<div class="col s6 m3 offset-m1 center-align">
<a href="https://www.uni-bielefeld.de/sfb1288/">
@ -241,7 +251,7 @@
</div>
</div>
</div>
<div class="footer-copyright">
<div class="footer-copyright nopaque-primary-color white-text">
<div class="container">
<div class="row" style="margin-bottom: 0;">
<div class="col s12 m2">

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

@ -2,10 +2,14 @@
{% 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 %}
<div class="col s12 m3 push-m9">
<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>
</a>
</div>

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

@ -1,14 +1,17 @@
{% extends "nopaque.html.j2" %}
{% 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 %}
<div class="col s12 m3 push-m9">
<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);">
<p class="hide-on-small-only">&nbsp;</p>
<p class="hide-on-small-only">&nbsp;</p>
<a class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
<i class="material-icons service" data-service="file-setup"></i>
</a>
</div>
@ -43,7 +46,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', 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 class="col s12 hide">
{{ M.render_field(add_job_form.version, material_icon='apps') }}
@ -51,7 +54,7 @@
</div>
</div>
<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>
</form>
</div>

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

@ -2,12 +2,16 @@
{% 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 %}
<div class="col s12 m3 push-m9">
<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);">
<p class="hide-on-small-only">&nbsp;</p>
<p class="hide-on-small-only">&nbsp;</p>
<a class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
<i class="material-icons service" data-service="nlp"></i>
</a>
</div>
@ -60,7 +64,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', 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 class="col s12 l4">
{{ M.render_field(add_job_form.language, material_icon='language') }}
@ -92,7 +96,7 @@
</div>
</div>
<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>
</form>
</div>

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

@ -2,12 +2,16 @@
{% 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 %}
<div class="col s12 m3 push-m9">
<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);">
<p class="hide-on-small-only">&nbsp;</p>
<p class="hide-on-small-only">&nbsp;</p>
<a class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
<i class="material-icons service" data-service="ocr"></i>
</a>
</div>

25
web/app/templates/macros/query_result_macro.html.j2 → web/app/templates/utils/macros.html.j2
View File

@ -1,3 +1,26 @@
{%- 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) %}
<div class="col s12">
@ -71,4 +94,4 @@ for (let collapsible of collapsibles) {
}
}
</script>
{% endmacro %}
{% endmacro %}

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

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