Delete unused files, restructure assets and use scss

This commit is contained in:
Patrick Jentsch
2022-02-15 09:25:34 +01:00
parent 585a6ba796
commit 15e897f005
45 changed files with 390 additions and 747 deletions

242
app/static/css/colors.scss Normal file
View File

@ -0,0 +1,242 @@
/// Map deep get
/// @author Kitty Giraudel
/// @access public
/// @param {Map} $map - Map
/// @param {Arglist} $keys - Key chain
/// @return {*} - Desired value
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
$color: (
"baseline": (
"primary": #00426f,
"primary-variant": #1a5c89,
"secondary": #00426f,
"secondary-variant": #1a5c89,
"background": #ffffff,
"surface": #ffffff,
"error": #b00020
),
"service": (
"corpus-analysis": (
"base": #aa9cc9,
"darken": #6b3f89,
"lighten": #ebe8f6
),
"file-setup": (
"base": #d5dc95,
"darken": #a1b300,
"lighten": #f2f3e1
),
"spacy-nlp": (
"base": #98acd2,
"darken": #0064a3,
"lighten": #e5e8f5
),
"tesseract-ocr": (
"base": #a9d8c8,
"darken": #00a58b,
"lighten": #e7f4f1
)
),
"status": (
"corpus": (
"UNPREPARED": #9e9e9e,
"QUEUED": #2196f3,
"BUILDING": #ffc107,
"BUILT": #4caf50,
"FAILED": #f44336,
"STARTING_ANALYSIS_SESSION": #2196f3,
"RUNNING_ANALYSIS_SESSION": #4caf50,
"CANCELING_ANALYSIS_SESSION": #ff5722
),
"job": (
"INITIALIZING": #9e9e9e,
"SUBMITTED": #9e9e9e,
"QUEUED": #2196f3,
"RUNNING": #ffc107,
"CANCELING": #ff5722,
"CANCELED": #ff5722,
"COMPLETED": #4caf50,
"FAILED": #f44336
)
)
);
@each $key, $color-code in map-get($color, "baseline") {
.#{$key}-color {
background-color: $color-code !important;
}
.#{$key}-color-border {
border-color: $color-code !important;
}
.#{$key}-color-text {
color: $color-code !important;
}
}
@each $service-name, $color-palette in map-get($color, "service") {
.service-color[data-service="#{$service-name}"] {
background-color: map-get($color-palette, "base") !important;
&.darken {
background-color: map-get($color-palette, "darken") !important;
}
&.lighten {
background-color: map-get($color-palette, "lighten") !important;
}
}
.service-color-border[data-service="#{$service-name}"] {
border-color: map-get($color-palette, "base") !important;
&.border-darken {
border-color: map-get($color-palette, "darken") !important;
}
&.border-lighten {
border-color: map-get($color-palette, "lighten") !important;
}
}
.service-color-text[data-service="#{$service-name}"] {
color: map-get($color-palette, "base") !important;
&.text-darken {
color: map-get($color-palette, "darken") !important;
}
&.text-lighten {
color: map-get($color-palette, "lighten") !important;
}
}
.service-scheme[data-service="#{$service-name}"] {
background-color: map-get($color-palette, "lighten");
.btn, .btn-small, .btn-large, .btn-floating {
background-color: map-get($color-palette, "darken");
&:hover {
background-color: map-get($color-palette, "base");
}
}
.pagination {
li.active {
background-color: map-get($color-palette, "darken");
}
}
.table-of-contents {
a.active, a:hover {
border-color: map-get($color-palette, "darken");
}
}
.tabs {
.tab {
&.disabled {
a {
color: inherit;
&:hover {
color: change-color(map-get($color-palette, "darken"), $alpha: 0.15);
}
}
}
a {
color: inherit;
&:focus, &:hover, &.active {
color: map-get($color-palette, "darken");
}
&:focus, &.active, &.active:focus {
background-color: change-color(map-get($color-palette, "darken"), $alpha: 0.15);
}
}
}
.indicator {
background-color: map-get($color-palette, "darken");
}
}
}
}
@each $ressource-name, $color-palette in map-get($color, "status") {
@each $key, $color-code in $color-palette {
.#{$ressource-name}-status-color[data-#{$ressource-name}-status="#{$key}"] {
background-color: $color-code !important;
}
.#{$ressource-name}-status-color-border[data-#{$ressource-name}-status="#{$key}"] {
border-color: $color-code !important;
}
.#{$ressource-name}-status-color-text[data-#{$ressource-name}-status="#{$key}"] {
color: $color-code !important;
}
}
}
main {
.btn, .btn-small, .btn-large, .btn-floating {
background-color: map-deep-get($color, "baseline", "secondary");
&:hover {
background-color: map-deep-get($color, "baseline", "secondary-variant");
}
}
.pagination {
li.active {
background-color: map-deep-get($color, "baseline", "secondary");
}
}
.table-of-contents {
a.active, a:hover {
border-color: map-deep-get($color, "baseline", "secondary");
}
}
.tabs {
.tab {
&.disabled {
a {
color: inherit;
&:hover {
color: change-color(map-deep-get($color, "baseline", "secondary"), $alpha: 0.15);
}
}
}
a {
color: inherit;
&:focus, &:hover, &.active {
color: map-deep-get($color, "baseline", "secondary");
}
&:focus, &.active, &.active:focus {
background-color: change-color(map-deep-get($color, "baseline", "secondary"), $alpha: 0.15);
}
}
}
.indicator {
background-color: map-deep-get($color, "baseline", "secondary");
}
}
}

View File

@ -1,39 +0,0 @@
/* https://google.github.io/material-design-icons/#setup-method-2-self-hosting */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(../fonts/material_icons/MaterialIcons-Regular.ttf) format('truetype'),
url(../fonts/material_icons/MaterialIconsOutlined-Regular.otf) format('opentype'),
url(../fonts/material_icons/MaterialIconsRound-Regular.otf) format('opentype'),
url(../fonts/material_icons/MaterialIconsSharp-Regular.otf) format('opentype'),
url(../fonts/material_icons/MaterialIconsTwoTone-Regular.otf) format('opentype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}

File diff suppressed because one or more lines are too long

View File

@ -1,70 +0,0 @@
:root {
--main-bg-color: brown;
}
/* Change navbar height bacause an extended and fixed navbar is used */
.navbar-fixed {
height: 112px;
}
/* add custom bold class */
.bold {font-weight: bold;}
/* Change placholdertext color of file uplaod fields */
::placeholder {
color: #9e9e9e;
opacity: 1;
}
/*
* changes preoloader size etc. to fit visually better with the chip status
* indicator of jobs
*/
.status-spinner {
margin-bottom: -10px;
width: 30px !important;
height: 30px !important;
}
.show-if-only-child:not(:only-child) {
display: none !important;
}
.btn-scale-x2 {
transform: scale(2);
}
.btn-scale-x2 .nopaque-icon.nopaque-service-icon {
font-size: 2.5rem;
}
/* Fix material icon vertical alignment when nested in various elements */
h1 .nopaque-icon, h2 .nopaque-icon, h3 .nopaque-icon, h4 .nopaque-icon, .tab .nopaque-icon, .tab .material-icons {
line-height: inherit;
}
.nopaque-icon.nopaque-service-icon[data-service="file-setup"]:empty:before {content: "E";}
.nopaque-icon.nopaque-service-icon[data-service="tesseract-ocr"]:empty:before {content: "F";}
.nopaque-icon.nopaque-service-icon[data-service="spacy-nlp"]:empty:before {content: "G";}
.nopaque-icon.nopaque-service-icon[data-service="corpus-analysis"]:empty:before {content: "H";}
.nopaque-corpus-status-text[data-corpus-status="UNPREPARED"]:empty:before {content: "Unprepared";}
.nopaque-corpus-status-text[data-corpus-status="SUBMITTED"]:empty:before {content: "Submitted";}
.nopaque-corpus-status-text[data-corpus-status="QUEUED"]:empty:before {content: "Queued";}
.nopaque-corpus-status-text[data-corpus-status="BUILDING"]:empty:before {content: "Building";}
.nopaque-corpus-status-text[data-corpus-status="BUILT"]:empty:before {content: "Built";}
.nopaque-corpus-status-text[data-corpus-status="STARTING_ANALYSIS_SESSION"]:empty:before {content: "Starting analysis session";}
.nopaque-corpus-status-text[data-corpus-status="RUNNING_ANALYSIS_SESSION"]:empty:before {content: "Running analysis session";}
.nopaque-corpus-status-text[data-corpus-status="CANCELING_ANALYSIS_SESSION"]:empty:before {content: "Canceling analysis session";}
.nopaque-job-status-text[data-job-status="INITIALIZING"]:empty:before {content: "Initializing";}
.nopaque-job-status-text[data-job-status="SUBMITTED"]:empty:before {content: "Submitted";}
.nopaque-job-status-text[data-job-status="QUEUED"]:empty:before {content: "Queued";}
.nopaque-job-status-text[data-job-status="RUNNING"]:empty:before {content: "Running";}
.nopaque-job-status-text[data-job-status="CANCELING"]:empty:before {content: "Canceling";}
.nopaque-job-status-text[data-job-status="CANCELED"]:empty:before {content: "Canceled";}
.nopaque-job-status-text[data-job-status="COMPLETED"]:empty:before {content: "Completed";}
.nopaque-job-status-text[data-job-status="FAILED"]:empty:before {content: "Failed";}
.hoverable {cursor: pointer;}
.chip.s-attr .chip.p-attr {background-color: inherit;}

View File

@ -7,7 +7,7 @@
url(../fonts/nopaque_icons/NopaqueIcons-Regular.otf) format('opentype');
}
.nopaque-icon {
.nopaque-icons {
font-family: 'Nopaque Icons';
font-weight: normal;
font-style: normal;

52
app/static/css/style.css Normal file
View File

@ -0,0 +1,52 @@
/* Change navbar height bacause an extended and fixed navbar is used */
.navbar-fixed {
height: 112px;
}
/* Change placholdertext color of file uplaod fields */
::placeholder {
color: #9e9e9e;
opacity: 1;
}
/*
* changes preoloader size etc. to fit visually better with the chip status
* indicator of jobs
*/
.status-spinner {
margin-bottom: -10px;
width: 30px !important;
height: 30px !important;
}
.show-if-only-child:not(:only-child) {
display: none !important;
}
.btn-scale-x2 {
transform: scale(2);
}
.btn-scale-x2 .nopaque-icons.service-icon {
font-size: 2.5rem;
}
/* Fix material icon vertical alignment when nested in various elements */
h1 .nopaque-icons, h2 .nopaque-icons, h3 .nopaque-icons, h4 .nopaque-icons, .tab .nopaque-icons, .tab .material-icons {
line-height: inherit;
}
.corpus-status-text {text-transform: lowercase;}
.corpus-status-text[data-corpus-status]:empty:before {content: attr(data-corpus-status);}
.job-status-text {text-transform: lowercase;}
.job-status-text[data-job-status]:empty:before {content: attr(data-job-status);}
.nopaque-icons.service-icon[data-service="file-setup"]:empty:before {content: "E";}
.nopaque-icons.service-icon[data-service="tesseract-ocr"]:empty:before {content: "F";}
.nopaque-icons.service-icon[data-service="spacy-nlp"]:empty:before {content: "G";}
.nopaque-icons.service-icon[data-service="corpus-analysis"]:empty:before {content: "H";}
.hoverable {cursor: pointer;}
.chip.s-attr .chip.p-attr {background-color: inherit;}

View File

@ -31,7 +31,7 @@ class App {
iconPrefix = '<i class="error-color-text left material-icons">error</i>';
break;
case 'job':
iconPrefix = '<i class="left nopaque-icon">J</i>';
iconPrefix = '<i class="left nopaque-icons">J</i>';
break;
default:
iconPrefix = '<i class="left material-icons">notifications</i>';

View File

@ -16,7 +16,7 @@ class JobStatusNotifier {
.filter(operation => re.test(operation.path));
for (operation of filteredPatch) {
[match, jobId] = operation.path.match(re);
app.flash(`[<a href="/jobs/${jobId}">${app.users[this.userId].jobs[jobId].title}</a>] New status: <span class="nopaque-job-status-text" data-job-status="${operation.value}"></span>`, 'job');
app.flash(`[<a href="/jobs/${jobId}">${app.users[this.userId].jobs[jobId].title}</a>] New status: <span class="job-status-text" data-job-status="${operation.value}"></span>`, 'job');
}
}
}

View File

@ -4,7 +4,7 @@ class CorpusList extends RessourceList {
<tr class="hoverable">
<td><a class="btn-floating disabled"><i class="material-icons nopaque-service-color darken" data-service="corpus-analysis">book</i></a></td>
<td><b class="title"></b><br><i class="description"></i></td>
<td><span class="status badge new nopaque-corpus-status-color nopaque-corpus-status-text" data-badge-caption=""></span></td>
<td><span class="status badge new corpus-status-color corpus-status-text" data-badge-caption=""></span></td>
<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 nopaque-service-color darken tooltipped waves-effect waves-light" data-action="view" data-position="top" data-service="corpus-analysis" data-tooltip="View"><i class="material-icons">send</i></a>

View File

@ -1,10 +1,10 @@
class JobList extends RessourceList {
static options = {
item: `
<tr class="hoverable nopaque-service-color lighten">
<td><a class="btn-floating disabled"><i class="service-1 nopaque-icon nopaque-service-color darken nopaque-service-icon"></i></a></td>
<tr class="hoverable service-color lighten">
<td><a class="btn-floating disabled"><i class="service-1 nopaque-icons service-color darken service-icon"></i></a></td>
<td><b class="title"></b><br><i class="description"></i></td>
<td><span class="status badge new nopaque-job-status-color nopaque-job-status-text" data-badge-caption=""></span></td>
<td><span class="status badge new job-status-color job-status-text" data-badge-caption=""></span></td>
<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="service-2 action-button btn-floating nopaque-service-color darken tooltipped waves-effect waves-light" data-action="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a>

View File

@ -1,62 +0,0 @@
"LOC",
"MISC",
"ORG",
"PER",
"EVENT",
"GPE",
"LOC",
"ORG",
"PERSON",
"PRODUCT",
"CARDINAL",
"DATE",
"EVENT",
"FAC",
"GPE",
"LANGUAGE",
"LAW",
"LOC",
"MONEY",
"NORP",
"ORDINAL",
"ORG",
"PERCENT",
"PERSON",
"PRODUCT",
"QUANTITY",
"TIME",
"WORK_OF_ART",
"LOC",
"MISC",
"ORG",
"PER",
"LOC",
"MISC",
"ORG",
"PER",
"LOC",
"MISC",
"ORG",
"PER",
"CARDINAL",
"DATE",
"EVENT",
"FAC",
"GPE",
"LANGUAGE",
"LAW",
"LOC",
"MONEY",
"NORP",
"ORDINAL",
"ORG",
"PERCENT",
"PERSON",
"PRODUCT",
"QUANTITY",
"TIME",
"WORK_OF_ART",
"LOC",
"MISC",
"ORG",
"PER"

View File

@ -1,329 +0,0 @@
{
"$schema": "http://json-schema.org/draft-06/schema#",
"$ref": "#/definitions/NopaqueCQIPYResults",
"definitions": {
"NopaqueCQIPYResults": {
"type": "object",
"additionalProperties": false,
"properties": {
"matches": {
"type": "array",
"items": {
"$ref": "#/definitions/Match"
}
},
"cpos_lookup": {
"type": "object",
"additionalProperties": {
"$ref": "#/definitions/CposLookup"
}
},
"text_lookup": {
"type": "object",
"additionalProperties": {
"$ref": "#/definitions/CorpusAllText"
}
},
"match_count": {
"type": "integer"
},
"corpus_type": {
"type": "string"
},
"query": {
"type": "string"
},
"corpus_name": {
"type": "string"
},
"corpus_description": {
"type": "string"
},
"corpus_creation_date": {
"type": "string",
"format": "date-time"
},
"corpus_last_edited_date": {
"type": "string",
"format": "date-time"
},
"corpus_properties": {
"type": "array",
"items": {}
},
"corpus_size_tokens": {
"type": "integer"
},
"corpus_all_texts": {
"type": "object",
"additionalProperties": {
"$ref": "#/definitions/CorpusAllText"
}
},
"corpus_analysis_date": {
"type": "string",
"format": "date-time"
},
"corpus_cqi_py_protocol_version": {
"type": "string"
},
"corpus_cqi_py_package_version": {
"type": "string"
},
"corpus_cqpserver_version": {
"type": "string"
},
"fullContext": {
"type": "boolean"
},
"cpos_ranges": {
"type": "boolean"
}
},
"required": [
"corpus_all_texts",
"corpus_analysis_date",
"corpus_cqi_py_package_version",
"corpus_cqi_py_protocol_version",
"corpus_cqpserver_version",
"corpus_creation_date",
"corpus_description",
"corpus_last_edited_date",
"corpus_name",
"corpus_properties",
"corpus_size_tokens",
"corpus_type",
"cpos_lookup",
"cpos_ranges",
"match_count",
"matches",
"query",
"text_lookup",
"fullContext"
],
"title": "NopaqueCQIPYResults"
},
"CorpusAllText": {
"type": "object",
"additionalProperties": false,
"properties": {
"address": {
"type": "string"
},
"author": {
"type": "string"
},
"booktitle": {
"type": "string"
},
"chapter": {
"type": "string"
},
"editor": {
"type": "string"
},
"institution": {
"type": "string"
},
"journal": {
"type": "string"
},
"pages": {
"type": "string"
},
"publisher": {
"type": "string"
},
"publishing_year": {
"type": "string",
"format": "integer"
},
"school": {
"type": "string"
},
"title": {
"type": "string"
},
"match_count": {
"type": "integer"
}
},
"required": [
"address",
"author",
"booktitle",
"chapter",
"editor",
"institution",
"journal",
"pages",
"publisher",
"publishing_year",
"school",
"title"
],
"title": "CorpusAllText"
},
"CposLookup": {
"type": "object",
"additionalProperties": false,
"properties": {
"word": {
"type": "string"
},
"lemma": {
"type": "string"
},
"simple_pos": {
"$ref": "#/definitions/SimplePos"
},
"pos": {
"type": "string"
},
"ner": {
"$ref": "#/definitions/Ner"
},
"text": {
"type": "integer"
},
"s": {
"type": "integer"
}
},
"required": [
"lemma",
"ner",
"pos",
"s",
"simple_pos",
"text",
"word"
],
"title": "CposLookup"
},
"Match": {
"type": "object",
"additionalProperties": false,
"properties": {
"lc": {
"type": "array",
"items": {
"type": "integer"
}
},
"c": {
"type": "array",
"items": {
"type": "integer"
}
},
"rc": {
"type": "array",
"items": {
"type": "integer"
}
}
},
"required": [
"c",
"lc",
"rc"
],
"title": "Match"
},
"Ner": {
"type": "string",
"enum": [
"NULL",
"LOC",
"MISC",
"ORG",
"PER",
"EVENT",
"GPE",
"LOC",
"ORG",
"PERSON",
"PRODUCT",
"CARDINAL",
"DATE",
"EVENT",
"FAC",
"GPE",
"LANGUAGE",
"LAW",
"LOC",
"MONEY",
"NORP",
"ORDINAL",
"ORG",
"PERCENT",
"PERSON",
"PRODUCT",
"QUANTITY",
"TIME",
"WORK_OF_ART",
"LOC",
"MISC",
"ORG",
"PER",
"LOC",
"MISC",
"ORG",
"PER",
"LOC",
"MISC",
"ORG",
"PER",
"CARDINAL",
"DATE",
"EVENT",
"FAC",
"GPE",
"LANGUAGE",
"LAW",
"LOC",
"MONEY",
"NORP",
"ORDINAL",
"ORG",
"PERCENT",
"PERSON",
"PRODUCT",
"QUANTITY",
"TIME",
"WORK_OF_ART",
"LOC",
"MISC",
"ORG",
"PER"
],
"title": "Ner"
},
"SimplePos": {
"type": "string",
"enum": [
"ADJ",
"ADP",
"ADV",
"AUX",
"CONJ",
"CCONJ",
"DET",
"INTJ",
"NOUN",
"NUM",
"PART",
"PRON",
"PROPN",
"PUNCT",
"SCONJ",
"SYM",
"VERB",
"X",
"SPACE"
],
"title": "SimplePos"
}
}
}