style and compatibility update

app/static/sass/abstracts/_base-color-variables.scss

@@ -0,0 +1,10 @@
+$base-color-palette: (
+  "primary":        #00426f,
+  "primary-light":  #006fbc,  //  primary lightened by 15%
+  "primary-dark":   #001523,  //  primary darkened by 15%
+  // "secondary":      #1a5c89,
+  "secondary":      #00426f,
+  "success":        #4caf50,
+  "error":          #f44336,
+  "link":           #039be5
+);

app/static/sass/abstracts/_corpus-status-color-variables.scss

@@ -0,0 +1,10 @@
+$corpus-status-color-palette: (
+  "UNPREPARED":                  #9e9e9e,
+  "QUEUED":                      #2196f3,
+  "BUILDING":                    #ffc107,
+  "BUILT":                       #4caf50,
+  "FAILED":                      #f44336,
+  "STARTING_ANALYSIS_SESSION":   #2196f3,
+  "RUNNING_ANALYSIS_SESSION":    #4caf50,
+  "CANCELING_ANALYSIS_SESSION":  #ff5722
+);

app/static/sass/abstracts/_job-status-color-variables.scss

@@ -0,0 +1,10 @@
+$job-status-color-palette: (
+  "INITIALIZING":  #9e9e9e,
+  "SUBMITTED":     #9e9e9e,
+  "QUEUED":        #2196f3,
+  "RUNNING":       #ffc107,
+  "CANCELING":     #ff5722,
+  "CANCELED":      #ff5722,
+  "COMPLETED":     #4caf50,
+  "FAILED":        #f44336
+);

app/static/sass/abstracts/_s-attr-color-variables.scss

@@ -0,0 +1,25 @@
+$ent-type-color-palette: (
+  "PERSON":       #a6e22d,
+  "PER":          #a6e22d,
+  "NORP":         #ef60b4,
+  "FACILITY":     #43c6fc,
+  "ORG":          #43c6fc,
+  "GPE":          #fd9720,
+  "LOC":          #fd9720,
+  "PRODUCT":      #a99dfb,
+  "MISC":         #a99dfb,
+  "EVENT":        #fc0,
+  "WORK_OF_ART":  #fc0,
+  "LANGUAGE":     #fc0,
+  "DATE":         #2fbbab,
+  "TIME":         #2fbbab,
+  "PERCENT":      #bbb,
+  "MONEY":        #bbb,
+  "QUANTITY":     #bbb,
+  "ORDINAL":      #bbb,
+  "CARDINAL":     #bbb
+);
+
+$s-attr-color-palettes: (
+  "ent_type": $ent-type-color-palette
+);

app/static/sass/abstracts/_service-color-variables.scss

@@ -0,0 +1,38 @@
+$file-setup-pipeline-color-palette: (
+  "base":     #d5dc95,
+  "darken":   #a1b300,
+  "lighten":  #f2f3e1
+);
+
+$tesseract-ocr-pipeline-color-palette: (
+  "base":     #a9d8c8,
+  "darken":   #00a58b,
+  "lighten":  #e7f4f1
+);
+
+$transkribus-htr-pipeline-color-palette: (
+  "base":     #607d8b,
+  "darken":   #37474f,
+  "lighten":  #cfd8dc
+);
+
+$spacy-nlp-pipeline-color-palette: (
+  "base":     #98acd2,
+  "darken":   #0064a3,
+  "lighten":  #e5e8f5
+);
+
+$corpus-analysis-color-palette: (
+  "base":     #aa9cc9,
+  "darken":   #6b3f89,
+  "lighten":  #ebe8f6
+);
+
+
+$service-color-palettes: (
+  "file-setup-pipeline": $file-setup-pipeline-color-palette,
+  "tesseract-ocr-pipeline": $tesseract-ocr-pipeline-color-palette,
+  "transkribus-htr-pipeline": $transkribus-htr-pipeline-color-palette,
+  "spacy-nlp-pipeline": $spacy-nlp-pipeline-color-palette,
+  "corpus-analysis": $corpus-analysis-color-palette
+);

app/static/sass/abstracts/_service-icon-variables.scss

@@ -0,0 +1,7 @@
+$service-icon-letters: (
+  "file-setup-pipeline":       "E",
+  "tesseract-ocr-pipeline":    "F",
+  "transkribus-htr-pipeline":  "F",
+  "spacy-nlp-pipeline":        "G",
+  "corpus-analysis":           "H"
+);

app/static/sass/abstracts/_spacing-variables.scss

@@ -0,0 +1,22 @@
+$spacing-shortcuts: (
+  "margin": "m",
+  "padding": "p"
+);
+
+$spacing-directions: (
+  "top": "t",
+  "right": "r",
+  "bottom": "b",
+  "left": "l"
+);
+
+$spacing-values: (
+  "0": 0,
+  "1": 0.25rem,
+  "2": 0.5rem,
+  "3": 0.75rem,
+  "4": 1rem,
+  "5": 1.5rem,
+  "6": 3rem,
+  "auto": auto
+);

app/static/sass/components/_base-colors.scss

@@ -0,0 +1,84 @@
+.primary-color {
+  background-color: map-get($base-color-palette, "primary") !important;
+}
+
+.primary-color-border {
+  border-color: map-get($base-color-palette, "primary") !important;
+}
+
+.primary-color-text {
+  color: map-get($base-color-palette, "primary") !important;
+}
+
+.primary-color.lighten {
+  background-color: map-get($base-color-palette, "primary-light") !important;
+}
+
+.primary-color-border.border-lighten {
+  border-color: map-get($base-color-palette, "primary-light") !important;
+}
+
+.primary-color-text.text-lighten {
+  color: map-get($base-color-palette, "primary-light") !important;
+}
+
+.primary-color.darken {
+  background-color: map-get($base-color-palette, "primary-dark") !important;
+}
+
+.primary-color-border.border-darken {
+  border-color: map-get($base-color-palette, "primary-dark") !important;
+}
+
+.primary-color-text.text-darken {
+  color: map-get($base-color-palette, "primary-dark") !important;
+}
+
+.secondary-color {
+  background-color: map-get($base-color-palette, "secondary") !important;
+}
+
+.secondary-color-border {
+  border-color: map-get($base-color-palette, "secondary") !important;
+}
+
+.secondary-color-text {
+  color: map-get($base-color-palette, "secondary") !important;
+}
+
+.success-color {
+  background-color: map-get($base-color-palette, "success") !important;
+}
+
+.success-color-border {
+  border-color: map-get($base-color-palette, "success") !important;
+}
+
+.success-color-text {
+  color: map-get($base-color-palette, "success") !important;
+}
+
+.error-color {
+  background-color: map-get($base-color-palette, "error") !important;
+}
+
+.error-color-border {
+  border-color: map-get($base-color-palette, "error") !important;
+}
+
+.error-color-text {
+  color: map-get($base-color-palette, "error") !important;
+}
+
+.link-color {
+  background-color: map-get($base-color-palette, "link") !important;
+}
+
+.link-color-border {
+  border-color: map-get($base-color-palette, "link") !important;
+}
+
+.link-color-text {
+  color: map-get($base-color-palette, "link") !important;
+}
+

app/static/sass/components/_clearfix.scss

@@ -0,0 +1,5 @@
+.clearfix::after {
+  clear: both;
+  content: "";
+  display: block;
+}

app/static/sass/components/_corpus-status-color.scss

@@ -0,0 +1,13 @@
+@each $corpus-status, $corpus-status-color in $corpus-status-color-palette {
+  .corpus-status-color[data-corpus-status="#{$corpus-status}"] {
+    background-color: $corpus-status-color !important;
+  }
+
+  .corpus-status-color-border[data-corpus-status="#{$corpus-status}"] {
+    border-color: $corpus-status-color !important;
+  }
+
+  .corpus-status-color-text[data-corpus-status="#{$corpus-status}"] {
+    color: $corpus-status-color !important;
+  }
+}

app/static/sass/components/_helpers.scss

@@ -0,0 +1,11 @@
+.clickable {
+  cursor: pointer !important;
+}
+
+.show-if-only-child:not(:only-child) {
+  display: none !important;
+}
+
+[draggable="true"] {
+  cursor: move !important;
+}

app/static/sass/components/_job-status-color.scss

@@ -0,0 +1,13 @@
+@each $job-status, $job-status-color in $job-status-color-palette {
+  .job-status-color[data-job-status="#{$job-status}"] {
+    background-color: $job-status-color !important;
+  }
+
+  .job-status-color-border[data-job-status="#{$job-status}"] {
+    border-color: $job-status-color !important;
+  }
+
+  .job-status-color-text[data-job-status="#{$job-status}"] {
+    color: $job-status-color !important;
+  }
+}

app/static/sass/components/_placeholder.scss

@@ -0,0 +1,4 @@
+::placeholder {
+  color: #9e9e9e;
+  opacity: 1;
+}

app/static/sass/components/_s-attr-color.scss

@@ -0,0 +1,19 @@
+@each $s-attr, $s-attr-color-palette in $s-attr-color-palettes {
+  @each $s-attr-value, $s-attr-value-color in $s-attr-color-palette {
+    .s-attr-color[data-s-attr="#{$s-attr}"][data-s-attr-value="#{$s-attr-value}"] {
+      background-color: $s-attr-value-color !important;
+    }
+
+    .s-attr-color-text[data-s-attr="#{$s-attr}"][data-s-attr-value="#{$s-attr-value}"] {
+      background-color: $s-attr-value-color !important;
+    }
+
+    .s-attr-color-border[data-s-attr="#{$s-attr}"][data-s-attr-value="#{$s-attr-value}"] {
+      background-color: $s-attr-value-color !important;
+    }
+  }
+}
+
+.s-attr .p-attr {
+  background-color: inherit;
+}

app/static/sass/components/_service-color.scss

@@ -0,0 +1,40 @@
+@each $service, $color-palette in $service-color-palettes {
+  .service-color[data-service="#{$service}"],
+  [data-service="#{$service}"] .service-color[data-service="inherit"] {
+    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}"],
+  [data-service="#{$service}"] .service-color-border[data-service="inherit"] {
+    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}"],
+  [data-service="#{$service}"] .service-color-text[data-service="inherit"] {
+    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;
+    }
+  }
+}

app/static/sass/components/_service-icon.scss

@@ -0,0 +1,6 @@
+@each $service, $letter in $service-icon-letters {
+  .nopaque-icons.service-icons[data-service="#{$service}"]:empty::before,
+  [data-service="#{$service}"] .nopaque-icons.service-icons[data-service="inherit"]:empty::before {
+    content: "#{$letter}";
+  }
+}

app/static/sass/components/_spacing.scss

@@ -0,0 +1,27 @@
+@each $spacing-shortcut-name, $spacing-shortcut-value in $spacing-shortcuts {
+  @each $spacing-name, $spacing-value in $spacing-values {
+    // All directions
+    .#{$spacing-shortcut-value}-#{$spacing-name} {
+      #{$spacing-shortcut-name}: $spacing-value !important;
+    }
+
+    // Horizontal axis
+    .#{$spacing-shortcut-value}x-#{$spacing-name} {
+      #{$spacing-shortcut-name}-left: $spacing-value !important;
+      #{$spacing-shortcut-name}-right: $spacing-value !important;
+    }
+
+    // Vertical axis
+    .#{$spacing-shortcut-value}y-#{$spacing-name} {
+      #{$spacing-shortcut-name}-top: $spacing-value !important;
+      #{$spacing-shortcut-name}-bottom: $spacing-value !important;
+    }
+
+    // Cardinal directions
+    @each $spacing-direction-name, $spacing-direction-value in $spacing-directions {
+      .#{$spacing-shortcut-value}#{$spacing-direction-value}-#{$spacing-name} {
+        #{$spacing-shortcut-name}-#{$spacing-direction-name}: $spacing-value !important;
+      }
+    }
+  }
+}

app/static/sass/components/_status-spinner.scss

@@ -0,0 +1,9 @@
+/*
+ * 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;
+}

app/static/sass/components/_status-text.scss

@@ -0,0 +1,12 @@
+.corpus-status-text,
+.job-status-text {
+  text-transform: lowercase;
+}
+
+.corpus-status-text[data-corpus-status]:empty::before {
+  content: attr(data-corpus-status);
+}
+
+.job-status-text[data-job-status]:empty::before {
+  content: attr(data-job-status);
+}

app/static/sass/layout/_sidenav-fixed.scss

@@ -0,0 +1,26 @@
+/*
+ * Fixed HTML Structure: https://materializecss.com/sidenav.html#variations
+ * The sidenav-fixed class is used which causes the sidenav to be fixed and open
+ * on large screens and hides to the regular functionality on smaller screens.
+ * In order to prevent the sidenav to overlap the content, the content (header, main and footer)
+ * gets an offset equal to the width of the sidenav.
+ */
+header, main, footer {
+  padding-left: 300px;
+}
+
+@media only screen and (max-width : 992px) {
+  header, main, footer {
+    padding-left: 0;
+  }
+}
+
+.navbar-fixed > nav {
+  width: calc(100% - 300px);
+}
+
+@media only screen and (max-width : 992px) {
+  .navbar-fixed > nav {
+    width: 100%;
+  }
+}

app/static/sass/layout/_sticky-footer.scss

@@ -0,0 +1,18 @@
+/*
+ * Sticky Footer: https://materializecss.com/footer.html#sticky-footer
+ * A sticky footer always stays on the bottom of the page regardless of how
+ * little content is on the page. However, this footer will be pushed down if
+ * there is a lot of content, so it is different from a fixed footer.
+ *
+ * Note: This may cause issues in Internet Explorer which has weak support for
+ *       flexbox.
+ */
+body {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+main {
+  flex: 1 0 auto;
+}

app/static/sass/main.scss

@@ -0,0 +1,28 @@
+// Abstracts
+@import "abstracts/base-color-variables";
+@import "abstracts/corpus-status-color-variables";
+@import "abstracts/job-status-color-variables";
+@import "abstracts/s-attr-color-variables";
+@import "abstracts/service-color-variables";
+@import "abstracts/service-icon-variables";
+@import "abstracts/spacing-variables";
+
+// Components
+@import "components/base-colors";
+@import "components/clearfix";
+@import "components/corpus-status-color";
+@import "components/helpers.scss";
+@import "components/job-status-color";
+@import "components/placeholder";
+@import "components/s-attr-color";
+@import "components/service-color";
+@import "components/service-icon";
+@import "components/spacing";
+@import "components/status-spinner";
+@import "components/status-text";
+
+// Layout
+@import "layout/sticky-footer";
+
+/// Pages
+/// Site specific styles are be imported with Jinja in HTML

app/static/sass/pages/corpora/analysis.scss

@@ -0,0 +1 @@
+@import "analysis/query-builder";

app/static/sass/pages/corpora/analysis/_query-builder.scss

@@ -0,0 +1,127 @@
+#corpus-analysis-concordance-query-builder-input-field {
+  border-bottom: #9E9E9E 1px solid;
+  min-height: 38px;
+  margin-top: 23px;
+}
+
+#corpus-analysis-concordance-query-builder-input-field-placeholder {
+  color: #9E9E9E;
+}
+
+.modal-content {
+  overflow-x: hidden;
+}
+
+#corpus-analysis-concordance-positional-attr-modal, #corpus-analysis-concordance-corpus-analysis-concordance-structural-attr-modal {
+  width: 70%;
+}
+
+#corpus-analysis-concordance-general-options-query-builder-tutorial-info-icon {
+  color: black;
+}
+
+#corpus-analysis-concordance-insert-query-button {
+  background-color: #00426f;
+  text-align: center;
+}
+
+.attr-modal-header {
+  background-color: #f2eff7;
+  padding: 15px;
+  padding-left: 25px;
+  border-top: 10px solid #6B3F89;
+  margin-left: -24px;
+  margin-top: -24px;
+  margin-right: -24px;
+}
+
+.attr-modal-header h6 {
+  margin-left: 15px;
+}
+
+#corpus-analysis-concordance-add-structural-attribute-tutorial-info-icon {
+  color: black;
+}
+
+[data-structural-attr-modal-action-button="sentence"]{
+  background-color:#FD9720 !important;
+}
+
+[data-structural-attr-modal-action-button="entity"]{
+  background-color: #A6E22D !important;
+}
+
+[data-structural-attr-modal-action-button="meta-data"]{
+  background-color: #2FBBAB !important;
+}
+
+#corpus-analysis-concordance-no-value-metadata-message {
+  padding-top: 25px;
+  margin-left: -20px;
+}
+
+.attr-modal-header.input-field {
+  margin-left: 41px;
+}
+
+#corpus-analysis-concordance-token-attr {
+  margin-left: 41px;
+}
+
+#corpus-analysis-concordance-token-tutorial-info-icon {
+  color: black;
+}
+
+#corpus-analysis-concordance-no-value-message {
+  padding-top: 25px;
+  margin-left: -20px;
+}
+
+#corpus-analysis-concordance-token-edit-options h6 {
+  margin-left: 15px;
+}
+
+#corpus-analysis-concordance-edit-options-tutorial-info-icon {
+  color: black;
+}
+
+[data-toggle-area="input-field-options"] a {
+  margin-right: 10px;
+}
+
+[data-target="corpus-analysis-concordance-character-incidence-modifiers-dropdown"], [data-target="corpus-analysis-concordance-token-incidence-modifiers-dropdown"] {
+  background-color: #2FBBAB !important;
+}
+
+#corpus-analysis-concordance-exactly-n-token-modal, #corpus-analysis-concordance-between-nm-token-modal {
+  width: 30%;
+}
+
+[data-modal-id="corpus-analysis-concordance-exactly-n-token-modal"], [data-modal-id="corpus-analysis-concordance-between-nm-token-modal"] {
+  margin-top: 15px !important;
+}
+
+[data-options-action="and"], [data-options-action="or"] {
+  background-color: #fc0 !important;
+}
+
+[data-type="start-sentence"], [data-type="end-sentence"] {
+  background-color: #FD9720;
+}
+
+[data-type="start-empty-entity"], [data-type="start-entity"], [data-type="end-entity"] {
+  background-color: #a6e22d;
+}
+
+[data-type="text-annotation"]{
+  background-color: #2FBBAB;
+}
+
+[data-type="token"] {
+  background-color: #28B3D1;
+}
+
+[data-type="token-incidence-modifier"] {
+  background-color: #4db6ac;
+  color: white;
+}

app/static/sass/pages/corpora/corpus.scss

@@ -0,0 +1,4 @@
+#invite-user-modal-search .dropdown-content {
+  width: 100% !important;
+  left: 0 !important;
+}

app/static/sass/sidenav-fixed.scss

@@ -0,0 +1 @@
+@import "layout/sidenav-fixed";