sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-12-25 19:04:18 +00:00
Code Issues Projects Releases Wiki Activity

Design update

Browse Source
This commit is contained in:
Patrick Jentsch 2024-11-15 15:21:26 +01:00
parent 6aacac2419
commit ee7f64f5be
10 changed files with 165 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/__init__.py
View File

@ -105,13 +105,13 @@ def create_app(config: Config = Config) -> Flask:
app.register_blueprint(contributions_blueprint, url_prefix='/contributions')
from .blueprints.spacy_nlp_pipeline_models import bp as spacy_nlp_pipeline_models_blueprint
app.register_blueprint(spacy_nlp_pipeline_models_blueprint, url_prefix='/spacy-nlp-pipeline-models')
app.register_blueprint(spacy_nlp_pipeline_models_blueprint, url_prefix='/contributions/spacy-nlp-pipeline-models')
from .blueprints.tesseract_ocr_pipeline_models import bp as tesseract_ocr_pipeline_models_blueprint
app.register_blueprint(tesseract_ocr_pipeline_models_blueprint, url_prefix='/tesseract-ocr-pipeline-models')
app.register_blueprint(tesseract_ocr_pipeline_models_blueprint, url_prefix='/contributions/tesseract-ocr-pipeline-models')
from.blueprints.transkribus_htr_pipeline_models import bp as transkribus_htr_pipeline_models_blueprint
app.register_blueprint(transkribus_htr_pipeline_models_blueprint, url_prefix='/transkribus-htr-pipeline-models')
app.register_blueprint(transkribus_htr_pipeline_models_blueprint, url_prefix='/contributions/transkribus-htr-pipeline-models')
from .blueprints.corpora import bp as corpora_blueprint
app.register_blueprint(corpora_blueprint, cli_group='corpus', url_prefix='/corpora')

17
app/static/css/materialize.override.css
View File

@ -7,26 +7,15 @@
*
* Read more: https://materializecss.com/sidenav.html#variations
*/
@media only screen and (min-width: 993px) {
body[data-sidenav-fixed="true" i] header,
body[data-sidenav-fixed="true" i] main,
body[data-sidenav-fixed="true" i] footer {
padding-left: 300px;
}
@media only screen and (max-width: 992px) {
body[data-sidenav-fixed="true" i] main,
body[data-sidenav-fixed="true" i] footer {
padding-left: 0;
}
body[data-sidenav-fixed="true" i] .navbar-fixed > nav {
width: 100%;
}
}
@media only screen and (min-width: 993px) {
body[data-sidenav-fixed="true" i] .sidenav-fixed {
margin-top: 64px;
z-index: 996;
width: calc(100% - 300px);
}
}
/* #endregion sidenav-fixed */

0
app/static/images/nopaque_-_wordmark+slogan.png → app/static/images/nopaque_-_logo+wordmark+slogan.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

9
app/static/js/app.js
View File

@ -163,6 +163,15 @@ nopaque.App = class App {
// AutoInit method (maybe they forgot it?). Anyway... We do it here. :)
M.CharacterCounter.init(document.querySelectorAll('input[data-length]:not(.no-autoinit), textarea[data-length]:not(.no-autoinit)'));
// Header navigation processes and services Dropdown.
M.Dropdown.init(
document.querySelector('#nav-processes-and-services-dropdown-trigger'),
{
constrainWidth: false,
coverTrigger: false
}
);
// Header navigation account Dropdown.
M.Dropdown.init(
document.querySelector('#nav-account-dropdown-trigger'),

52
app/templates/_base/_modals/data-processing-and-analysis.html.j2 Normal file
View File

@ -0,0 +1,52 @@
<div id="data-processing-and-analysis-modal" class="modal">
<div class="modal-content">
<div class="card-panel primary-color white-text">
<h4 class="m-3"><i class="material-icons left" style="font-size: inherit; line-height: inherit;">miscellaneous_services</i>Data Processing & Analysis</h4>
</div>
<br>
<div class="row">
<div class="col s12 m6 l3 center-align hoverable" style="position: relative;">
<a href="{{ url_for('services.file_setup_pipeline') }}" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"></a>
<i class="large nopaque-icons service-icons service-color-text text-darken" data-service="file-setup-pipeline"></i>
<br>
<b class="service-color-text text-darken" data-service="file-setup-pipeline">File Setup</b>
<p class="light">Digital copies of text based research data (books, letters, etc.) often comprise various files and formats. nopaque converts and merges those files to facilitate further processing and the application of other services.</p>
</div>
<div class="col s12 m6 l3 center-align center-align hoverable" style="position: relative;">
<a href="{{ url_for('services.tesseract_ocr_pipeline') }}" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"></a>
<i class="large nopaque-icons service-icons service-color-text text-darken" data-service="tesseract-ocr-pipeline"></i>
<br>
<b class="service-color-text text-darken" data-service="tesseract-ocr-pipeline">Optical Character Recognition</b>
<p class="light">nopaque converts your image data – like photos or scans – into text data through OCR making it machine readable. This step enables you to proceed with further computational analysis of your documents.</p>
</div>
{% if config.NOPAQUE_TRANSKRIBUS_ENABLED %}
<div class="col s12 m6 l3 center-align center-align hoverable" style="position: relative;">
<a href="{{ url_for('services.transkribus_htr_pipeline') }}" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"></a>
<i class="large nopaque-icons service-icons service-color-text text-darken" data-service="transkribus-htr-pipeline"></i>
<br>
<b class="service-color-text text-darken" data-service="transkribus-htr-pipeline">Transkribus HTR Pipeline</b>
<p class="light">nopaque converts your image data – like photos or scans – into text data through HTR making it machine readable. This step enables you to proceed with further computational analysis of your documents.</p>
</div>
{% endif %}
<div class="col s12 m6 l3 center-align center-align hoverable" style="position: relative;">
<a href="{{ url_for('services.spacy_nlp_pipeline') }}" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"></a>
<i class="large nopaque-icons service-icons service-color-text text-darken" data-service="spacy-nlp-pipeline"></i>
<br>
<b class="service-color-text text-darken" data-service="spacy-nlp-pipeline">Natural Language Processing</b>
<p class="light">By means of computational linguistic data processing (tokenization, lemmatization, part-of-speech tagging and named-entity recognition) nopaque extracts additional information from your text.</p>
</div>
<div class="col s12 m6 l3 center-align center-align hoverable" style="position: relative;">
<a href="{{ url_for('services.corpus_analysis') }}" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"></a>
<i class="large nopaque-icons service-icons service-color-text text-darken" data-service="corpus-analysis"></i>
<br>
<b class="service-color-text text-darken" data-service="corpus-analysis">Corpus analysis</b>
<p class="light">nopaque lets you create and upload as many text corpora as you want. It makes use of CQP Query Language, which allows for complex search requests with the aid of metadata and NLP tags.</p>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn-flat modal-close">Close</a>
</div>
</div>

3
app/templates/_base/dropdowns.html.j2
View File

@ -1,5 +1,8 @@
{% if current_user.is_authenticated %}
<ul class="dropdown-content" id="nav-account-dropdown-content">
<li><a href="#!">Logged in as {{ current_user.username }}<br>&lt;{{ current_user.email }}&gt;</a></li>
<li class="divider" tabindex="-1"></li>
<li><a href="{{ url_for('users.user', user_id=current_user.id) }}"><i class="material-icons">person</i>Your profile</a></li>
<li><a href="{{ url_for('settings.settings') }}"><i class="material-icons left">settings</i>Settings</a></li>
<li><a href="{{ url_for('auth.logout') }}"><i class="material-icons left">logout</i>Log out</a></li>
</ul>

2
app/templates/_base/modals.html.j2
View File

@ -1,3 +1,5 @@
{% if current_user.is_authenticated and not current_user.terms_of_use_accepted %}
{% include "_base/_modals/terms_of_use.html.j2" %}
{% endif %}
{% include "_base/_modals/data-processing-and-analysis.html.j2" %}

91
app/templates/_base/navbar_primary_content.html.j2
View File

@ -1,38 +1,95 @@
{% if current_user.is_authenticated %}
<!-- menu icon -->
<!-- small/medium devices -->
{# menu icon #}
{# shown for small/medium devices #}
<a href="#!" class="sidenav-trigger" data-target="sidenav"><i class="material-icons">menu</i></a>
{# nopaque logo #}
{# shown for large devices #}
<a href="{{ url_for('main.index') }}" class="brand-logo hide-on-med-and-down" style="height: 100%;">
<img src="{{ url_for('static', filename='images/nopaque_-_logo.png') }}" alt="" class="mx-3 py-3" style="height: 100%;">
</a>
{# left aligned navigation items #}
{# shown for large devices #}
<ul class="hide-on-med-and-down" style="margin-left: calc(57px + 1.5rem);">
{# dashboard #}
<li>
<a href="{{ url_for('main.dashboard') }}">
<i class="material-icons left">dashboard</i>
Dashboard
</a>
</li>
{# processes & services #}
<li>
<a href="#data-processing-and-analysis-modal" class="modal-trigger">
<i class="material-icons left">miscellaneous_services</i>
Data Processing & Analysis
</a>
</li>
{# contributions #}
<li>
<a href="{{ url_for('contributions.index') }}">
<i class="material-icons left">new_label</i>
Contributions
</a>
</li>
{# social #}
<li>
<a href="{{ url_for('main.social_area') }}">
<i class="material-icons left">groups</i>
Social
</a>
</li>
</ul>
{% else %}
{# nopaque logo+wordmark+slogan #}
{# shown for large devices #}
<a href="{{ url_for('main.index') }}" class="brand-logo hide-on-med-and-down" style="height: 100%;">
<img src="{{ url_for('static', filename='images/nopaque_-_logo+wordmark+slogan.png') }}" alt="" class="mx-3 py-3" style="height: 100%;">
</a>
{% endif %}
<!-- nopaque logo+wordmark -->
<!-- small/medium devices -->
{# nopaque logo+wordmark #}
{# small/medium devices #}
<a href="{{ url_for('main.index') }}" class="brand-logo center hide-on-large-only" style="height: 100%;">
<img src="{{ url_for('static', filename='images/nopaque_-_logo+wordmark.png') }}" alt="" class="py-3" style="height: 100%;">
</a>
<!-- large devices -->
<a href="{{ url_for('main.index') }}" class="brand-logo hide-on-med-and-down" style="width: 300px; height: 100%;">
<img src="{{ url_for('static', filename='images/nopaque_-_logo+wordmark.png') }}" alt="" class="py-3 ml-4" style="height: 100%;">
</a>
<!-- right aligned navigation links -->
<!-- large devices -->
{# right aligned navigation items #}
{# large devices #}
<ul class="right hide-on-med-and-down" style="height: 64px;">
{# manual #}
<li class="tooltipped" data-position="bottom" data-tooltip="Manual">
<a href="{{ url_for('main.manual') }}">
<i class="material-icons">help_outline</i>
</a>
</li>
{# news #}
<li class="tooltipped" data-position="bottom" data-tooltip="News">
<a href="{{ url_for('main.news') }}">
<i class="material-icons">email</i>
</a>
</li>
{% if current_user.is_authenticated %}
<!-- avatar, username and email -->
{# avatar #}
<li style="height: 100%;">
<a href="#!" class="dropdown-trigger no-autoinit" data-target="nav-account-dropdown-content" id="nav-account-dropdown-trigger" style="height: 100%;">
<img src="{{ url_for('users.user_avatar', user_id=current_user.id) }}" alt="" class="left circle py-3" style="height: 100%;">
<span class="ml-2">{{ current_user.username }} ({{ current_user.email }})</span>
<img src="{{ url_for('users.user_avatar', user_id=current_user.id) }}" alt="" class="circle py-3" style="height: 100%;">
</a>
</li>
{% else %}
<!-- log in -->
{# log in #}
<li {% if request.path == url_for('auth.login') %}class="active"{% endif %}>
<a href="{{ url_for('auth.login') }}"><i class="material-icons left">login</i>Log in</a>
<a href="{{ url_for('auth.login') }}">Log in</a>
</li>
<!-- register -->
{# register #}
<li {% if request.path == url_for('auth.register') %}class="active"{% endif %}>
<a href="{{ url_for('auth.register') }}"><i class="material-icons left">assignment</i>Register</a>
<a href="{{ url_for('auth.register') }}" class="waves-effect waves-light btn primary-color lighten">Register</a>
</li>
{% endif %}
</ul>

57
app/templates/_base/sidenav.html.j2
View File

@ -1,7 +1,6 @@
<ul class="sidenav sidenav-fixed" id="sidenav">
<ul class="sidenav {{ 'sidenav-fixed' if sidenav_fixed else '' }}" id="sidenav">
{# user view #}
{# shown for small/medium devices #}
<li class="hide-on-large-only">
<li>
<div class="user-view">
<div class="background primary-color"></div>
<a><img class="circle" src="{{ url_for('users.user_avatar', user_id=current_user.id) }}" alt=""></a>
@ -11,34 +10,22 @@
</li>
{# general items #}
{% if current_user.can('USE_API') %}
<li>
<a class="waves-effect" href="{{ url_for('apifairy.docs') }}"><i class="material-icons">api</i>API</a>
</li>
{% endif %}
<li>
<a class="waves-effect" href="{{ url_for('main.manual') }}"><i class="material-icons">school</i>Manual</a>
</li>
<li>
<li {% if request.path == url_for('main.news') %}class="active"{% endif %}>
<a class="waves-effect" href="{{ url_for('main.news') }}"><i class="material-icons">email</i>News</a>
</li>
{# dashboard items #}
<li><div class="divider"></div></li>
<li><a class="subheader">Dashboard</a></li>
<li {% if request.path == url_for('corpora.corpora') %}class="active"{% endif %}>
<a class="waves-effect" href="{{ url_for('corpora.corpora') }}"><i class="nopaque-icons">I</i>My Corpora</a>
<li {% if request.path == url_for('main.dashboard') %}class="active"{% endif %}>
<a class="waves-effect" href="{{ url_for('main.dashboard') }}"><i class="material-icons">dashboard</i>Dashboard</a>
</li>
<li {% if request.path == url_for('jobs.jobs') %}class="active"{% endif %}>
<a class="waves-effect" href="{{ url_for('jobs.jobs') }}"><i class="nopaque-icons">J</i>My Jobs</a>
<li {% if request.path == url_for('main.social_area') %}class="active"{% endif %}>
<a class="waves-effect" href="{{ url_for('main.social_area') }}"><i class="material-icons">groups</i>Social</a>
</li>
<li>
<a class="waves-effect" href="{{ url_for('contributions.index') }}"><i class="material-icons">new_label</i>My Contributions</a>
<li {% if request.path == url_for('main.manual') %}class="active"{% endif %}>
<a class="waves-effect" href="{{ url_for('main.manual') }}"><i class="material-icons">help_outline</i>Manual</a>
</li>
{# processes & services items #}
<li><div class="divider"></div></li>
<li><a class="subheader">Processes & Services</a></li>
<li><a class="subheader">Data Processing & Analysis</a></li>
<li class="service-color service-color-border border-darken" data-service="file-setup-pipeline" style="border-left: 10px solid;">
<a class="waves-effect" href="{{ url_for('services.file_setup_pipeline') }}"><i class="nopaque-icons service-icons" data-service="file-setup-pipeline"></i>File setup</a>
</li>
@ -57,17 +44,17 @@
<a class="waves-effect" href="{{ url_for('services.corpus_analysis') }}"><i class="nopaque-icons service-icons" data-service="corpus-analysis"></i>Corpus Analysis</a>
</li>
{# social items #}
<li><div class="divider"></div></li>
<li><a class="subheader">Social</a></li>
{# account items #}
<li class="hide-on-large-only"><div class="divider"></div></li>
<li class="hide-on-large-only"><a class="subheader">Account</a></li>
<li>
<a href="{{ url_for('users.user', user_id=current_user.id) }}"><i class="material-icons">person</i>My Profile</a>
</li>
<li>
<a class="waves-effect" href="{{ url_for('main.social_area', _anchor='public-users') }}"><i class="material-icons">group</i>Public Users</a>
<li class="hide-on-large-only">
<a class="waves-effect" href="{{ url_for('settings.settings') }}"><i class="material-icons">settings</i>Settings</a>
</li>
<li>
<a class="waves-effect" href="{{ url_for('main.social_area', _anchor='public-corpora') }}"><i class="nopaque-icons">I</i>Public Corpora</a>
<li class="hide-on-large-only">
<a class="waves-effect" href="{{ url_for('auth.logout') }}"><i class="material-icons">logout</i>Log out</a>
</li>
{# administration items #}
@ -81,14 +68,4 @@
<a class="waves-effect" href="{{ url_for('admin.users') }}"><i class="material-icons">manage_accounts</i>Users</a>
</li>
{% endif %}
{# account items #}
<li class="hide-on-large-only"><div class="divider"></div></li>
<li class="hide-on-large-only"><a class="subheader">Account</a></li>
<li class="hide-on-large-only">
<a class="waves-effect" href="{{ url_for('settings.settings') }}"><i class="material-icons">settings</i>Settings</a>
</li>
<li class="hide-on-large-only">
<a class="waves-effect" href="{{ url_for('auth.logout') }}"><i class="material-icons">logout</i>Log out</a>
</li>
</ul>

2
app/templates/base.html.j2
View File

@ -3,7 +3,7 @@
{% endif %}
{% if sidenav_fixed is not defined %}
{% set sidenav_fixed = current_user.is_authenticated %}
{% set sidenav_fixed = false %}
{% endif %}
{% if sticky_footer is not defined %}