Visual overhaul and tidy-up

Rothamsted · Aug 18, 2023 · 6952087 · 6952087
1 parent 9d02cac
commit 6952087
Show file tree

Hide file tree

Showing 16 changed files with 363 additions and 101 deletions.
diff --git a/README.md b/README.md
@@ -2,30 +2,51 @@
 
 *This branch is to manage a LODEStar version of [Knetminer Data Site](https://knetminer.org/data). You find more explanations on that web site. The original LODEStar text follows below.*
 
-# Lodestar
+## Lodestar
 
 Lodestar is a Linked Data Browser and SPARQL endpoint. Lodestar is a Java based web app that can wrap any existing SPARQL endpoint to provide a set of additional SPARQL and Linked Data services. Lodestar was developed to provide a consistent set of SPARQL and Linked Data services across the European Bioinformatics Institute (EBI). Some of the service provided by Lodestar:
 
-* Javascript based SPARQL endpoint with configurable example queries and paginated results table
-* Read only SPARQL endpoint for protection from write operations
-* A single SPARQL endpoint that provides a UI, the service and a SPARQL 1.1 service description
-* SPARQL syntax highlighting provided by CodeMirror
-* Works with any SPARQL endpoint (Includes Virtuoso JDBC connection option)
-* Linked data browser for navigating data from a SPARQL endpoint
-* Configurable resource description/linked data pages:
-  * Renders resources by label where possible
-  * Grouping of related resource by type
-  * Set top facts to display, such as labels and descriptions
-  * Configurable limits for how many related resources to render in the browser
-* Renders depictions of resources
-* Handles content negotiation for both SPARQL queries and linked data pages
-* CORS enabled for cross domain scripting
-* Basic REST API for accessing data in simplified JSON format
+- Javascript based SPARQL endpoint with configurable example queries and paginated results table
+- Read only SPARQL endpoint for protection from write operations
+- A single SPARQL endpoint that provides a UI, the service and a SPARQL 1.1 service description
+- SPARQL syntax highlighting provided by CodeMirror
+- Works with any SPARQL endpoint (Includes Virtuoso JDBC connection option)
+- Linked data browser for navigating data from a SPARQL endpoint
+- Configurable resource description/linked data pages:
+  - Renders resources by label where possible
+  - Grouping of related resource by type
+  - Set top facts to display, such as labels and descriptions
+  - Configurable limits for how many related resources to render in the browser
+- Renders depictions of resources
+- Handles content negotiation for both SPARQL queries and linked data pages
+- CORS enabled for cross domain scripting
+- Basic REST API for accessing data in simplified JSON format
 
 To see a demonstration of the Lodestar linked data browser please see the [Expression Atlas RDF website](http://www.ebi.ac.uk/rdf/services/atlas/sparql). Lodestar has been primarily developed as an internal tool for EBI services deploying RDF, however, the application should be sufficiently generic that others can use it. I can't guarantee any support for the software at this time, but please feel free to use it or adapt for your own purposes and let me know how you get on.
 
-Documentation and stable release at http://ebispot.github.io/lodestar/.
+Documentation and stable release at [http://ebispot.github.io/lodestar/](http://ebispot.github.io/lodestar/).
 
 ## Release Notes
 
 See the [revision history file](revision-history.md).
+
+## Testing Locally
+
+To test locally, ensure you are on the `knetminer-httpsparql` branch. Follow the steps below:
+
+1. Clone the repository (or checkout knetminer-httpsparql):
+    `git clone -b knetminer-httpsparql https://github.com/Rothamsted/knetminer-lodestar`
+2. Navigate to the test-utils directory:
+    `cd knetminer-lodestar/test-utils`
+3. Run the build script:
+    `./build-n-run-test.sh`
+
+After the build is successful, you can access the application at localhost:8080. Here are the sites to check:
+
+- http://localhost:8080/
+- http://localhost:8080/sparql
+- http://localhost:8080/describe
+
+**Note:** For the describe endpoint, you'll need to be viewing a specific resource. For example:
+
+- http://localhost:8080/describe?uri=http%3A%2F%2Fknetminer.org%2Fdata%2Frdf%2Fresources%2Fpublication_23105158
diff --git a/revision-history.md b/revision-history.md
@@ -1,5 +1,33 @@
 # Revision History
 
+## 3.0.0 - Visual Overhaul (08/2023)
+Visual overhaul to Index, Explorer and Resource description pages
+
+### Home page & general
+* Updated README to include 'Testing Locally' section for developers
+* Added new banners to all pages
+* Updated fonts throughout to use Nexa, the KnetMiner standard
+* Added navbar to all main HTML pages
+* Updated license terms
+* Updated all URLs on index
+* Modernised scrollbars
+* Improved tab/page titles
+* Added Favicon to all major HTML pages
+
+### Explorer page
+* Widened Explorer's Query box (reducing sample query space)
+* Lengthened Explorer's Query box by 50px
+* Reduced width of Results per page selector - moved it in line with Output dropdown
+* Added 200 & 500 to Results per page selector
+* Modernised buttons, added color
+* Added increased padding around page
+
+### Resource Description page
+* Widened About paragraph to have wider maxwidth
+* Updated H2 color to be KnetMiner green
+* Improved padding on outer edges
+
+
 ## 2.0.1-SNAPSHOT
 * Current snapshot.
 

diff --git a/web-ui/src/main/webapp/codemirror/codemirror.css b/web-ui/src/main/webapp/codemirror/codemirror.css
@@ -1,9 +1,9 @@
 /* BASICS */
 
 .CodeMirror {
-  /* Set height, width, borders, and global font properties here */
-  font-family: monospace;
-  height: 300px;
+  /* height of the sparql query container */
+  font-family: 'Nexa';
+  height: 350px;
   color: black;
 }
 
@@ -339,3 +339,23 @@ div.CodeMirror-dragcursors {
 
 /* Help users use markselection to safely style text background */
 span.CodeMirror-selectedtext { background: none; }
+
+/* Scrollbar (modernised) - For Webkit browsers like Chrome, Safari */
+::-webkit-scrollbar {
+  width: 10px; /* Width of the vertical scrollbar */
+  height: 10px; /* Height of the horizontal scrollbar */
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1; /* Color of the track */
+  border-radius: 10px; /* Round corners of the track */
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888; /* Color of the thumb */
+  border-radius: 10px; /* Round corners of the thumb */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555; /* Color of the thumb when hovered */
+}
diff --git a/web-ui/src/main/webapp/css/foundation.min.css b/web-ui/src/main/webapp/css/foundation.min.css
diff --git a/web-ui/src/main/webapp/css/knetgraph.css b/web-ui/src/main/webapp/css/knetgraph.css
@@ -1,12 +1,12 @@
-  .very-light-green-box {
+  .very-light-green-box-padded {
     background-color: #e5f8eb;
-    width: 99%;
+    width: 95%;
     padding: 10px;
     margin: 10px auto;
   }
-  .very-light-green-box-padded {
+  .very-light-green-box {
     background-color: #e5f8eb;
-    width: 95%;
+    width: 99%;
     padding: 10px;
     margin: 10px auto;
   }
@@ -27,32 +27,163 @@
     align-items: center;
     justify-content: center;
   }
+  .banner_explore {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 40px;
+  }
   img {
     max-width: 96%;
   }
 
   .navbar {
-
-    display:block;
-    height:54px;
+    display: flex;
+    align-items: center !important; /* This will vertically center items */
+    justify-content: space-between; /* This will keep logo to the left and links to the right */
+    height: 54px;
     -webkit-box-shadow: rgb(99 97 97 / 45%) 0px 25px 20px -20px;
-    box-shadow: rgb(99 97 97 / 45%) 0px 25px 20px -20px;    background-color:#ffffff/*#2A2A2A*/;
-    margin-bottom:40px;
-    width:100%;
-
-    }
-    ul.nav {
-    float:right;
-    list-style:none;
-    }
-    ul {
-    font-size:19px;
-    }
-    .nav a {
-      color: #6F7F8F;
-      text-decoration: none;
-      padding-right: 30px;
-      }
-    .nav a:hover{
-      color:#51CE7B;
-      }
+    box-shadow: rgb(99 97 97 / 45%) 0px 25px 20px -20px;
+    background-color: #ffffff;
+    margin-bottom: 40px;
+    width: 100%;
+    padding: 0 20px; /* Added some padding to give some space on the sides */
+}
+
+ul.nav {
+    display: flex; /* This makes the list items line up horizontally */
+    list-style: none;
+    margin: 0; /* Remove default margin */
+    padding: 0; /* Remove default padding */
+}
+
+ul {
+    font-size: 19px;
+    font-family: 'Nexa'; /* Set font-family for ul */
+}
+
+.nav a {
+    color: #6F7F8F;
+    text-decoration: none;
+    padding-right: 30px;
+}
+
+.nav a:hover {
+    color: #51CE7B;
+}
+
+.navbar img.logo-top {
+    max-width: 168px;
+    height: auto;
+}
+.logo-top {
+  vertical-align: middle;
+}
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+/* Base Button Style submit query */
+.lode-button {
+  display: inline-block;
+  padding: 10px 20px;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  text-decoration: none;
+  border-radius: 5px;
+  transition: background-color 0.3s, transform 0.3s;
+  cursor: pointer;
+  border: 2px solid rgb(81,206,123);
+  background-color: rgb(81,206,123);
+  color: #fff;
+  margin-right: 10px; /* spacing between buttons */
+}
+
+/* Hover State */
+.lode-button:hover {
+  background-color: rgb(28, 147, 68);
+}
+
+/* Active State */
+.lode-button:active {
+  transform: scale(0.98);
+}
+
+/* Adding a shadow */
+.lode-button {
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+/* Base Button Style reset */
+.lode-button-reset {
+  display: inline-block;
+  padding: 10px 20px;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  text-decoration: none;
+  border-radius: 5px;
+  transition: background-color 0.3s, transform 0.3s;
+  cursor: pointer;
+  border: 2px solid #F34A4A;
+  background-color: #F34A4A;
+  color: #fff;
+  margin-right: 10px; /* spacing between buttons */
+}
+
+/* Hover State */
+.lode-button-reset:hover {
+  background-color: #741c1c;
+}
+
+/* Active State */
+.lode-button-reset:active {
+  transform: scale(0.98);
+}
+
+/* Adding a shadow */
+.lode-button-reset {
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+#data-explorer-content.grid_24 {
+  width: 100%;
+  float: none;
+}
+/*Data explorer (describe html) padding along sides */
+#data-explorer-content {
+  padding-left: 40px;
+  padding-right: 40px;
+  padding-bottom: 20px; 
+}
+#data-explorer-content h3 {
+  color: rgb(81,206,123);
+}
+#limit, #render {
+  width: 150px;
+}
+.dropdown-container {
+  display: flex;
+  align-items: left;  
+}
+.dropdown-container > p {
+  margin: 0;  
+  padding: 0 10px;
+}
+/* Scrollbar For Webkit browsers like Chrome, Safari */
+::-webkit-scrollbar {
+  width: 10px; /* Width of the vertical scrollbar */
+  height: 10px; /* Height of the horizontal scrollbar */
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1; /* Color of the track */
+  border-radius: 10px; /* Round corners of the track */
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888; /* Color of the thumb */
+  border-radius: 10px; /* Round corners of the thumb */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555; /* Color of the thumb when hovered */
+}
diff --git a/web-ui/src/main/webapp/css/lode-style.css b/web-ui/src/main/webapp/css/lode-style.css
@@ -56,7 +56,7 @@ span.pagmes {
 
 #lodestar-sparql-form {
     font-size: 100%;
-    font-family: Helvetica,sans-serif;
+    font-family: 'Nexa';
     color: black;
 }
 
@@ -69,10 +69,21 @@ span.pagmes {
 }
 
 .lodestar-grid12 {
-    width: 49.0%;
+    width: 75%; 
     display: inline;
     float: left;
     position: relative;
+    margin-right: 10px;
+}
 
+#example_queries {
+    width: 20%; 
+    display: inline;
+    float: left;
+    position: relative;
 }
 
+
+ul {
+    font-family: 'Nexa';
+}
diff --git a/web-ui/src/main/webapp/css/pop-up.css b/web-ui/src/main/webapp/css/pop-up.css
@@ -32,7 +32,7 @@
 .popup h2 {
   margin-top: 0;
   color: #333;
-  font-family: Tahoma, Arial, sans-serif;
+  font-family: 'Nexa';
 }
 .popup .close {
   position: absolute;
@@ -54,3 +54,6 @@
     width: 80%;
   }
 }
+ul {
+  font-family: 'Nexa';
+}