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

Designpatch 2/2

Browse Source
This commit is contained in:
Patrick Jentsch 2021-05-05 10:05:12 +02:00
parent 04e53fef98
commit c0d337137e
13 changed files with 61 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -121,51 +121,62 @@ indicator will show up how the column is sorted right now.; */
.analyse-link[href=""] { .analyse-link[href=""] {
display: none; display: none;
} }
.service[data-service]:before {
.btn-scale-x2 {
transform: scale(2);
}
.btn-scale-x2 .service-icon {
font-size: 2.5rem;
}
.service-icon[data-service]:before {
content: "help"; content: "help";
} }
.service[data-service="corpus-analysis"]:before { .service-icon[data-service="corpus-analysis"]:before {
content: "H"; content: "H";
} }
.service[data-service="file-setup"]:before { .service-icon[data-service="file-setup"]:before {
content: "E"; content: "E";
} }
.service[data-service="nlp"]:before { .service-icon[data-service="nlp"]:before {
content: "G"; content: "G";
} }
.service[data-service="ocr"]:before { .service-icon[data-service="ocr"]:before {
content: "F"; content: "F";
} }
.status[data-status]:before {
.status-text[data-status]:before {
content: attr(data-status); content: attr(data-status);
} }
.status[data-status] {
.status-color[data-status] {
background-color: #f44336 !important; /* ~materialize "red" */ background-color: #f44336 !important; /* ~materialize "red" */
} }
.status[data-status="unprepared"] { .status-color[data-status="unprepared"] {
background-color: #9e9e9e !important; /* ~materialize grey */ background-color: #9e9e9e !important; /* ~materialize grey */
} }
.status[data-status="submitted"] { .status-color[data-status="submitted"] {
background-color: #9e9e9e !important; /* ~materialize grey */ background-color: #9e9e9e !important; /* ~materialize grey */
} }
.status[data-status="queued"] { .status-color[data-status="queued"] {
background-color: #2196f3 !important; /* ~materialize blue */ background-color: #2196f3 !important; /* ~materialize blue */
} }
.status[data-status="running"] { .status-color[data-status="running"] {
background-color: #ffc107 !important; /* ~materialize amber */ background-color: #ffc107 !important; /* ~materialize amber */
} }
.status[data-status="complete"] { .status-color[data-status="complete"] {
background-color: #4caf50 !important; /* ~materialize green */ background-color: #4caf50 !important; /* ~materialize green */
} }
.status[data-status="prepared"] { .status-color[data-status="prepared"] {
background-color: #4caf50 !important; /* ~materialize green */ background-color: #4caf50 !important; /* ~materialize green */
} }
.status[data-status="start analysis"] { .status-color[data-status="start analysis"] {
background-color: #2196f3 !important; /* ~materialize blue */ background-color: #2196f3 !important; /* ~materialize blue */
} }
.status[data-status="analysing"] { .status-color[data-status="analysing"] {
background-color: #4caf50 !important; /* ~materialize green */ background-color: #4caf50 !important; /* ~materialize green */
} }
.status[data-status="stop analysis"] { .status-color[data-status="stop analysis"] {
background-color: #ff5722 !important; /* ~materialize deep-orange */ background-color: #ff5722 !important; /* ~materialize deep-orange */
} }

4
web/app/static/js/nopaque/RessourceLists/CorpusList.js
View File

@ -81,9 +81,9 @@ class CorpusList extends RessourceList {
} }
CorpusList.options = { CorpusList.options = {
item: `<tr> item: `<tr>
<td><a class="btn-floating disabled"><i class="material-icons">book</i></a></td> <td><a class="btn-floating disabled"><i class="material-icons service-color" data-service="corpus-analysis">book</i></a></td>
<td><b class="title"></b><br><i class="description"></i></td> <td><b class="title"></b><br><i class="description"></i></td>
<td><span class="badge new status" data-badge-caption=""></span></td> <td><span class="badge new status status-color status-text" data-badge-caption=""></span></td>
<td class="right-align"> <td class="right-align">
<a class="action-button btn-floating red tooltipped waves-effect waves-light" data-action="delete" data-position="top" data-tooltip="Delete"><i class="material-icons">delete</i></a> <a class="action-button btn-floating red tooltipped waves-effect waves-light" data-action="delete" data-position="top" data-tooltip="Delete"><i class="material-icons">delete</i></a>
<a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a> <a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a>

4
web/app/static/js/nopaque/RessourceLists/JobList.js
View File

@ -82,9 +82,9 @@ class JobList extends RessourceList {
} }
JobList.options = { JobList.options = {
item: `<tr> item: `<tr>
<td><a class="btn-floating disabled"><i class="nopaque-icons service"></i></a></td> <td><a class="btn-floating disabled"><i class="nopaque-icons service service-color service-icon"></i></a></td>
<td><b class="title"></b><br><i class="description"></i></td> <td><b class="title"></b><br><i class="description"></i></td>
<td><span class="badge new status" data-badge-caption=""></span></td> <td><span class="badge new status status-color status-text" data-badge-caption=""></span></td>
<td class="right-align"> <td class="right-align">
<a class="action-button btn-floating red tooltipped waves-effect waves-light" data-action="delete" data-position="top" data-tooltip="Delete"><i class="material-icons">delete</i></a> <a class="action-button btn-floating red tooltipped waves-effect waves-light" data-action="delete" data-position="top" data-tooltip="Delete"><i class="material-icons">delete</i></a>
<a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a> <a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a>

2
web/app/static/js/nopaque/main.js
View File

@ -20,7 +20,7 @@ class AppClient {
message = `<i class="left material-icons red-text">error</i>${message}`; message = `<i class="left material-icons red-text">error</i>${message}`;
break; break;
case "job": case "job":
message = `<i class="left material-icons">work</i>${message}`; message = `<i class="left nopaque-icons">J</i>${message}`;
break; break;
default: default:
message = `<i class="left material-icons">notifications</i>${message}`; message = `<i class="left material-icons">notifications</i>${message}`;

2
web/app/templates/corpora/corpus.html.j2
View File

@ -20,7 +20,7 @@
<div class="col s4 m3 l2 right-align"> <div class="col s4 m3 l2 right-align">
<p>&nbsp;</p> <p>&nbsp;</p>
<p>&nbsp;</p> <p>&nbsp;</p>
<span class="chip status white-text"></span> <span class="chip status status-color status-text white-text"></span>
<div class="active preloader-wrapper small status-spinner"> <div class="active preloader-wrapper small status-spinner">
<div class="spinner-layer spinner-blue-only"> <div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left"> <div class="circle-clipper left">

2
web/app/templates/jobs/job.html.j2
View File

@ -28,7 +28,7 @@
<div class="col s4 m3 l2 right-align"> <div class="col s4 m3 l2 right-align">
<p>&nbsp;</p> <p>&nbsp;</p>
<p>&nbsp;</p> <p>&nbsp;</p>
<span class="chip status white-text"></span> <span class="chip status status-text status-color white-text"></span>
<div class="active preloader-wrapper small status-spinner"> <div class="active preloader-wrapper small status-spinner">
<div class="spinner-layer spinner-blue-only"> <div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left"> <div class="circle-clipper left">

6
web/app/templates/main/dashboard.html.j2
View File

@ -132,7 +132,7 @@
<div class="card-panel center-align hoverable"> <div class="card-panel center-align hoverable">
<br> <br>
<a href="{{ url_for('services.service', service='file-setup') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);"> <a href="{{ url_for('services.service', service='file-setup') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
<i class="nopaque-icons service" data-service="file-setup" style="font-size: 2.5rem;"></i> <i class="nopaque-icons service-color service-icon" data-service="file-setup" style="font-size: 2.5rem;"></i>
</a> </a>
<br><br> <br><br>
<p class="file-setup-color-text darken"><b>File setup</b></p> <p class="file-setup-color-text darken"><b>File setup</b></p>
@ -144,7 +144,7 @@
<div class="card-panel center-align hoverable"> <div class="card-panel center-align hoverable">
<br> <br>
<a href="{{ url_for('services.service', service='ocr') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);"> <a href="{{ url_for('services.service', service='ocr') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
<i class="nopaque-icons service" data-service="ocr" style="font-size: 2.5rem;"></i> <i class="nopaque-icons service-color service-icon" data-service="ocr" style="font-size: 2.5rem;"></i>
</a> </a>
<br><br> <br><br>
<p class="ocr-color-text darken"><b>Optical Character Recognition</b></p> <p class="ocr-color-text darken"><b>Optical Character Recognition</b></p>
@ -156,7 +156,7 @@
<div class="card-panel center-align hoverable"> <div class="card-panel center-align hoverable">
<br> <br>
<a href="{{ url_for('services.service', service='nlp') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);"> <a href="{{ url_for('services.service', service='nlp') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
<i class="nopaque-icons service" data-service="nlp" style="font-size: 2.5rem;"></i> <i class="nopaque-icons service-color service-icon" data-service="nlp" style="font-size: 2.5rem;"></i>
</a> </a>
<br><br> <br><br>
<p class="nlp-color-text darken"><b>Natural Language Processing</b></p> <p class="nlp-color-text darken"><b>Natural Language Processing</b></p>

16
web/app/templates/main/index.html.j2
View File

@ -79,32 +79,32 @@
<p class="hide-on-small-only">&nbsp;</p> <p class="hide-on-small-only">&nbsp;</p>
<div class="row"> <div class="row">
<div class="col s12 m6 l3 center-align"> <div class="col s12 m6 l3 center-align">
<a href="{{ url_for('services.service', service='file-setup') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);"> <a href="{{ url_for('services.service', service='file-setup') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
<i class="nopaque-icons service" data-service="file-setup" style="font-size: 2.5rem;"></i> <i class="nopaque-icons service-color service-icon" data-service="file-setup"></i>
</a> </a>
<br><br> <br><br>
<p class="file-setup-color-text text-darken"><b>File setup</b></p> <p class="file-setup-color-text text-darken"><b>File setup</b></p>
<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> <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>
<div class="col s12 m6 l3 center-align"> <div class="col s12 m6 l3 center-align">
<a href="{{ url_for('services.service', service='ocr') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);"> <a href="{{ url_for('services.service', service='ocr') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
<i class="nopaque-icons service" data-service="ocr" style="font-size: 2.5rem;"></i> <i class="nopaque-icons service-color service-icon" data-service="ocr"></i>
</a> </a>
<br><br> <br><br>
<p class="ocr-color-text text-darken"><b>Optical Character Recognition</b></p> <p class="ocr-color-text text-darken"><b>Optical Character Recognition</b></p>
<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> <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> </div>
<div class="col s12 m6 l3 center-align"> <div class="col s12 m6 l3 center-align">
<a href="{{ url_for('services.service', service='nlp') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);"> <a href="{{ url_for('services.service', service='nlp') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
<i class="nopaque-icons service" data-service="nlp" style="font-size: 2.5rem;"></i> <i class="nopaque-icons service-color service-icon" data-service="nlp"></i>
</a> </a>
<br><br> <br><br>
<p class="nlp-color-text text-darken"><b>Natural Language Processing</b></p> <p class="nlp-color-text text-darken"><b>Natural Language Processing</b></p>
<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> <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>
<div class="col s12 m6 l3 center-align"> <div class="col s12 m6 l3 center-align">
<a href="{{ url_for('services.service', service='corpus_analysis') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);"> <a href="{{ url_for('services.service', service='corpus_analysis') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
<i class="nopaque-icons service" data-service="corpus-analysis" style="font-size: 2.5rem;"></i> <i class="nopaque-icons service-color service-icon" data-service="corpus-analysis"></i>
</a> </a>
<br><br> <br><br>
<p class="corpus-analysis-color-text text-darken"><b>Corpus analysis</b></p> <p class="corpus-analysis-color-text text-darken"><b>Corpus analysis</b></p>

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

@ -37,7 +37,7 @@
.corpus-analysis-color-text.text-darken {color: {{ colors.corpus_analysis_darken }} !important;} .corpus-analysis-color-text.text-darken {color: {{ colors.corpus_analysis_darken }} !important;}
.corpus-analysis-color.lighten {background-color: {{ colors.corpus_analysis_lighten }} !important;} .corpus-analysis-color.lighten {background-color: {{ colors.corpus_analysis_lighten }} !important;}
.corpus-analysis-color-text.text-lighten {color: {{ colors.corpus_analysis_lighten }} !important;} .corpus-analysis-color-text.text-lighten {color: {{ colors.corpus_analysis_lighten }} !important;}
.service[data-service="corpus-analysis"] {background-color: {{ colors.corpus_analysis_darken }} !important;} .service-color[data-service="corpus-analysis"] {background-color: {{ colors.corpus_analysis_darken }} !important;}
.file-setup-color {background-color: {{ colors.file_setup }} !important;} .file-setup-color {background-color: {{ colors.file_setup }} !important;}
.file-setup-color-text {color: {{ colors.file_setup }} !important;} .file-setup-color-text {color: {{ colors.file_setup }} !important;}
@ -45,7 +45,7 @@
.file-setup-color-text.text-darken {color: {{ colors.file_setup_darken }} !important;} .file-setup-color-text.text-darken {color: {{ colors.file_setup_darken }} !important;}
.file-setup-color.lighten {background-color: {{ colors.file_setup_lighten }} !important;} .file-setup-color.lighten {background-color: {{ colors.file_setup_lighten }} !important;}
.file-setup-color-text.text-lighten {color: {{ colors.file_setup_lighten }} !important;} .file-setup-color-text.text-lighten {color: {{ colors.file_setup_lighten }} !important;}
.service[data-service="file-setup"] {background-color: {{ colors.file_setup_darken }} !important;} .service-color[data-service="file-setup"] {background-color: {{ colors.file_setup_darken }} !important;}
.ocr-color {background-color: {{ colors.ocr }} !important;} .ocr-color {background-color: {{ colors.ocr }} !important;}
.ocr-color-text {color: {{ colors.ocr }} !important;} .ocr-color-text {color: {{ colors.ocr }} !important;}
@ -53,7 +53,7 @@
.ocr-color-text.text-darken {color: {{ colors.ocr_darken }} !important;} .ocr-color-text.text-darken {color: {{ colors.ocr_darken }} !important;}
.ocr-color.lighten {background-color: {{ colors.ocr_lighten }} !important;} .ocr-color.lighten {background-color: {{ colors.ocr_lighten }} !important;}
.ocr-color-text.text-lighten {color: {{ colors.ocr_lighten }} !important;} .ocr-color-text.text-lighten {color: {{ colors.ocr_lighten }} !important;}
.service[data-service="ocr"] {background-color: {{ colors.ocr_darken }} !important;} .service-color[data-service="ocr"] {background-color: {{ colors.ocr_darken }} !important;}
.nlp-color {background-color: {{ colors.nlp }} !important;} .nlp-color {background-color: {{ colors.nlp }} !important;}
.nlp-color-text {color: {{ colors.nlp }} !important;} .nlp-color-text {color: {{ colors.nlp }} !important;}
@ -61,7 +61,7 @@
.nlp-color-text.text-darken {color: {{ colors.nlp_darken }} !important;} .nlp-color-text.text-darken {color: {{ colors.nlp_darken }} !important;}
.nlp-color.lighten {background-color: {{ colors.nlp_lighten }} !important;} .nlp-color.lighten {background-color: {{ colors.nlp_lighten }} !important;}
.nlp-color-text.text-lighten {color: {{ colors.nlp_lighten }} !important;} .nlp-color-text.text-lighten {color: {{ colors.nlp_lighten }} !important;}
.service[data-service="nlp"] {background-color: {{ colors.nlp_darken }} !important;} .service-color[data-service="nlp"] {background-color: {{ colors.nlp_darken }} !important;}
{% if scheme_primary_color is not defined %} {% if scheme_primary_color is not defined %}
{% set scheme_primary_color = colors.primary %} {% set scheme_primary_color = colors.primary %}
@ -139,10 +139,10 @@
<li><a href="{{ url_for('main.dashboard', _anchor='jobs') }}" style="padding-left: 47px;"><i class="nopaque-icons">J</i>My Jobs</a></li> <li><a href="{{ url_for('main.dashboard', _anchor='jobs') }}" style="padding-left: 47px;"><i class="nopaque-icons">J</i>My Jobs</a></li>
<li><div class="divider"></div></li> <li><div class="divider"></div></li>
<li><a class="subheader">Processes & Services</a></li> <li><a class="subheader">Processes & Services</a></li>
<li style="background-color: {{ colors.file_setup }}; border-left: 10px solid {{ colors.file_setup_darken }};"><a href="{{ url_for('services.service', service='file-setup') }}"><i class="nopaque-icons">E</i>File setup</a></li> <li style="background-color: {{ colors.file_setup }}; border-left: 10px solid {{ colors.file_setup_darken }};"><a href="{{ url_for('services.service', service='file-setup') }}"><i class="nopaque-icons service-icon" data-service="file-setup"></i>File setup</a></li>
<li style="background-color: {{ colors.ocr }}; border-left: 10px solid {{ colors.ocr_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='ocr') }}"><i class="nopaque-icons">F</i>OCR</a></li> <li style="background-color: {{ colors.ocr }}; border-left: 10px solid {{ colors.ocr_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='ocr') }}"><i class="nopaque-icons service-icon" data-service="ocr"></i>OCR</a></li>
<li style="background-color: {{ colors.nlp }}; border-left: 10px solid {{ colors.nlp_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='nlp') }}"><i class="nopaque-icons">G</i>NLP</a></li> <li style="background-color: {{ colors.nlp }}; border-left: 10px solid {{ colors.nlp_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='nlp') }}"><i class="nopaque-icons service-icon" data-service="nlp"></i>NLP</a></li>
<li style="background-color: {{ colors.corpus_analysis }}; border-left: 10px solid {{ colors.corpus_analysis_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='corpus_analysis') }}"><i class="nopaque-icons">H</i>Corpus analysis</a></li> <li style="background-color: {{ colors.corpus_analysis }}; border-left: 10px solid {{ colors.corpus_analysis_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='corpus_analysis') }}"><i class="nopaque-icons service-icon" data-service="corpus-analysis"></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>
<li><a href="{{ url_for('settings.index') }}"><i class="material-icons">settings</i>Settings</a></li> <li><a href="{{ url_for('settings.index') }}"><i class="material-icons">settings</i>Settings</a></li>

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

@ -19,8 +19,8 @@
<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 waves-effect waves-light" style="transform: scale(2);"> <a class="btn-floating btn-large btn-scale-x2 waves-effect waves-light" style="transform: scale(2);">
<i class="nopaque-icons service" data-service="corpus-analysis"></i> <i class="nopaque-icons service-color service-icon" data-service="corpus-analysis"></i>
</a> </a>
</div> </div>
</div> </div>

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

@ -22,8 +22,8 @@
<div class="center-align"> <div class="center-align">
<p class="hide-on-small-only">&nbsp;</p> <p class="hide-on-small-only">&nbsp;</p>
<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);"> <a class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
<i class="nopaque-icons service" data-service="file-setup"></i> <i class="nopaque-icons service-color service-icon" data-service="file-setup"></i>
</a> </a>
</div> </div>
</div> </div>

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

@ -22,8 +22,8 @@
<div class="center-align"> <div class="center-align">
<p class="hide-on-small-only">&nbsp;</p> <p class="hide-on-small-only">&nbsp;</p>
<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);"> <a class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
<i class="nopaque-icons service" data-service="nlp"></i> <i class="nopaque-icons service-color service-icon" data-service="nlp"></i>
</a> </a>
</div> </div>
</div> </div>

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

@ -22,8 +22,8 @@
<div class="center-align"> <div class="center-align">
<p class="hide-on-small-only">&nbsp;</p> <p class="hide-on-small-only">&nbsp;</p>
<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);"> <a class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
<i class="nopaque-icons service" data-service="ocr"></i> <i class="nopaque-icons service-color service-icon" data-service="ocr"></i>
</a> </a>
</div> </div>
</div> </div>