Styling updates

CentreForDigitalHumanities · Dec 16, 2024 · c02723d · c02723d
1 parent c038022
commit c02723d
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 47 deletions.
diff --git a/backend/vulcan/templates/vulcan/index.html b/backend/vulcan/templates/vulcan/index.html
@@ -1,12 +1,8 @@
 <!DOCTYPE html>
 <html class="theme-light">
     <head>
-        <title>Graph visualization</title>
+        <title>Vulcan visualisation | ParsePort</title>
 
-        {% comment %} <link
-            rel="stylesheet"
-            href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"
-        /> {% endcomment %}
         <link
             rel="stylesheet"
             type="text/css"
@@ -23,11 +19,11 @@
         <h1 class="header">VULCAN visualization</h1>
         <div id="headerId"></div>
         <div class="button-wrapper">
-            <button id="previousButton" class="button is-primary" type="button">
-                &lt;Previous
+            <button id="previousButton" class="button" type="button">
+                &lt; Previous
             </button>
-            <button id="nextButton" class="button is-primary" type="button">
-                Next&gt;
+            <button id="nextButton" class="button" type="button">
+                Next &gt;
             </button>
             <!--input text field with width 50 and right alignment-->
             <!--restricting to numbers as per
@@ -42,21 +38,21 @@ <h1 class="header">VULCAN visualization</h1>
                 onkeypress="
         return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"
             />
-            <div style="display: inline" id="corpusPositionText"></div>
-            <button id="searchButton" class="button is-primary" type="button">
+            <div class="position-wrapper">
+                <div id="corpusPositionText"></div>
+            </div>
+            <button id="searchButton" class="button" type="button">
                 Search
             </button>
             <button
                 id="clearSearchButton"
-                class="button is-primary"
+                class="button"
                 type="button"
             >
                 Clear Search
             </button>
         </div>
 
-        <p>We can put additional text here</p>
-
         <div id="chartId"></div>
 
         <script

diff --git a/.../app/minimalist-parser/minimalist-parser-browser/minimalist-parser-browser.component.html b/.../app/minimalist-parser/minimalist-parser-browser/minimalist-parser-browser.component.html
@@ -9,13 +9,19 @@ <h1 i18n>Minimalist Parser</h1>
             </p>
 
             @if (statusOk$ | async) {
-            <button type="button" class="button is-primary" (click)="navigateToVulcan()" i18n>
-                Start browsing
+            <button
+                type="button"
+                class="button is-primary with-text-below"
+                (click)="navigateToVulcan()"
+            >
+                <span i18n>Start browsing</span>
+                <fa-icon size="sm" class="ml-3" [icon]="icons.openInNewTab" />
+                <span class="text-below" i18n>This will open a new tab.</span>
             </button>
             } @else {
-                <p class="notification mt-6" i18n>
-                    The Vulcan visualization tool is temporarily unavailable.
-                </p>
+            <p class="notification mt-6" i18n>
+                The Vulcan visualization tool is temporarily unavailable.
+            </p>
             }
         </div>
     </div>

diff --git a/.../app/minimalist-parser/minimalist-parser-browser/minimalist-parser-browser.component.scss b/.../app/minimalist-parser/minimalist-parser-browser/minimalist-parser-browser.component.scss
@@ -0,0 +1,8 @@
+.with-text-below {
+    display: flex;
+    align-items: center;
+
+    .text-below {
+        bottom: -2em;
+    }
+}
diff --git a/...rc/app/minimalist-parser/minimalist-parser-browser/minimalist-parser-browser.component.ts b/...rc/app/minimalist-parser/minimalist-parser-browser/minimalist-parser-browser.component.ts
@@ -1,4 +1,5 @@
 import { Component } from "@angular/core";
+import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 import { map } from "rxjs";
 import { StatusService } from "src/app/shared/services/status.service";
 import { environment } from "src/environments/environment";
@@ -13,10 +14,14 @@ export class MinimalistParserBrowserComponent {
         .getStatus$()
         .pipe(map((status) => status.vulcan));
 
+    public icons = {
+        openInNewTab: faExternalLinkAlt,
+    };
+
     constructor(private statusService: StatusService) {}
 
     public navigateToVulcan(): void {
         const origin = window.location.origin;
-        window.location.href = `${origin}${environment.vulcanUrl}`;
+        window.open(`${origin}${environment.vulcanUrl}`, "_blank");
     }
 }
diff --git a/frontend/src/app/shared/components/spindle-export/export-button/export-button.component.scss b/frontend/src/app/shared/components/spindle-export/export-button/export-button.component.scss
@@ -4,7 +4,7 @@
 
 .button-text {
     &.with-icon {
-        margin-left: .5em;
+        margin-left: 0.5em;
     }
 
     &.invisible {
@@ -16,17 +16,6 @@
     max-height: 75%;
 }
 
-.with-text-below {
-    position: relative;
-
-    .text-below {
-        position: absolute;
-        font-size: .75em;
-        bottom: -1.5em;
-        color: gray;
-    }
-}
-
 .latex-button {
     background-color: black;
     color: white;
@@ -37,12 +26,12 @@
 }
 
 .overleaf-button {
-    background-color: #47A141;
+    background-color: #47a141;
     color: white;
 }
 
 .pdf-button {
-    background-color: #FF0000;
+    background-color: #ff0000;
     color: white;
 }
 

diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
@@ -1,11 +1,10 @@
-@import 'variables';
-@import 'bulma/bulma';
-@import 'primeicons/primeicons.css';
-@import 'primeng/resources/themes/fluent-light/theme.css';
-@import 'primeng/resources/primeng.css';
+@import "variables";
+@import "bulma/bulma";
+@import "primeicons/primeicons.css";
+@import "primeng/resources/themes/fluent-light/theme.css";
+@import "primeng/resources/primeng.css";
 
 @media print {
-
     .is-hidden-print,
     .is-hidden-print * {
         display: none !important;
@@ -18,16 +17,16 @@
     .ui-table .ui-table-thead,
     .ui-table .ui-table-tbody,
     .ui-table .ui-table-tfoot {
-
-        >tr>th,
-        >tr>td {
+        > tr > th,
+        > tr > td {
             border: solid 1px $dark !important;
         }
     }
 }
 
 // PrimeNG table styling
-.p-datatable-thead > tr > th, td {
+.p-datatable-thead > tr > th,
+td {
     padding: 0.75rem 0.75rem;
 }
 
@@ -42,21 +41,33 @@
 }
 
 var {
-    font-family: 'Times New Roman', Times, serif;
+    font-family: "Times New Roman", Times, serif;
 }
 
 // Used by the Proof Pipe.
 // Because the pipe replaces innerHTML, it uses global styles.
 .proof {
-    font-family: 'Times New Roman', Times, serif;
+    font-family: "Times New Roman", Times, serif;
 
     var {
         font-family: monospace;
         font-style: normal;
     }
 
-    sup, .term {
+    sup,
+    .term {
         font-style: italic;
     }
 }
 
+// For buttons with subtext
+.with-text-below {
+    position: relative;
+
+    .text-below {
+        position: absolute;
+        font-size: 0.75em;
+        bottom: -1.5em;
+        color: gray;
+    }
+}
diff --git a/vulcan-static/style.css b/vulcan-static/style.css
@@ -17,6 +17,9 @@
 
 body {
     padding: 3rem 3rem;
+    font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto",
+        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+        "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 }
 
 .header {
@@ -34,4 +37,32 @@ body {
     display: flex;
     align-items: center;
     gap: 1rem;
+    height: 2rem;
+}
+
+.button-wrapper button {
+    padding: 0.5rem 1rem;
+}
+
+.button-wrapper input {
+    height: 100%;
+}
+
+.position-wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.button {
+    background-color: #00d1b2;
+    border-color: transparent;
+    color: #fff;
+    border-radius: 4px;
+    box-shadow: none;
+    line-height: 1.5;
+    user-select: none;
+}
+
+.button:hover {
+    background-color: #00c4a7;
 }