Small edits to the tool interface (#36) - Tommv

* Update index.css

* Update index.css

* Interface design

Several small edits to the interface design

* Update start.js

Author: tommv

src/index.css

@@ -1,38 +1,106 @@
+.c {
+    /*max-width: 90em;*/
+    padding: 4em;
+    padding-top:1em;
+}
+
+:root {
+    --font: Tahoma, Arial, Helvetica, sans-serif;
+}
+
+p{
+    margin-left:20px;
+    margin-right:20px;
+}
+
+ol{
+    margin-left:40px;
+}
+
+
+
 h1 {
+    font-family:Courier New, Courier, monospace;
+    color: #000;
     margin-top: 0px;
+    font-size: 3em;
 }
 
 h4 {
     color: #fa0;
-    font-weight: bold;
+    font-weight: normal;
+}
+
+h5 {
+    color: #000;
+    font-size: 1em;
 }
 
 .center {
     text-align: center;
 }
 
+.grassetto {
+    font-weight: bold;
+    font-size: 4em;
+}
+
+
 .center-btn {
     display: block;
     margin: auto;
 }
 
 .btn {
+    font-size: 1.1em;
     font-weight: bold;
-    margin: 0;
-    border-radius: 10px;
+    margin: 2px 0px 0px 10px;
+    border-radius: 15px;
+    background:#CCC;
+    color:#FFF;
 }
 
 .btn:disabled {
-    background-color: #ccc;
+    background-color: #ddd;
+    border-color: #ddd;
 }
 
 .btn:disabled {
     opacity: 1;
 }
 
+.btn:hover {
+    opacity: 1;
+    background-color: #005DA4;
+    border-color: #005DA4;
+}
+
+a:hover {
+    opacity: 1;
+    color: #005DA4;
+}
+
 .credits {
     text-align: right;
     font-size: 0.8em;
+    line-height: 1.2em;
+}
+
+iframe {
+    border: 10px solid #CCC;
+    border-radius: 20px;
+}
+
+.card {
+    border: 1px solid #333;
+    border-radius: 8px;
+    padding:0px 0px 0px 10px;
+    margin-top:5px;
+    color: #fa0;
+    font-family: courier;
+    height: 65px;
+    width: 85%;
+    text-wrap: wrap;
 }
 
 .flex-v {
@@ -47,8 +115,12 @@ h4 {
 
 #sigma {
     border: 1px solid black;
-    width: 70%;
-    height: 75vh;
+    width: 80%;
+    height: 70vh;
+    border-radius: 10px;
+    padding:10px;
+    margin:0px;
+    margin-bottom: 10px;
 }
 
 /* The switch - the box around the slider */
@@ -115,3 +187,64 @@ input:checked + .slider:before {
 .slider.round:before {
     border-radius: 50%;
 }
+
+
+/*********** Baseline, reset styles ***********/
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+  width: 25rem;
+}
+
+/* Removes default focus */
+input[type="range"]:focus {
+  outline: none;
+}
+
+/******** Chrome, Safari, Opera and Edge Chromium styles ********/
+/* slider track */
+input[type="range"]::-webkit-slider-runnable-track {
+  background-color: #c4c4c4;
+  border-radius: 1rem;
+  height: 0.4rem;
+}
+
+/* slider thumb */
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none; /* Override default look */
+  appearance: none;
+  margin-top: -7.2px; /* Centers thumb on the track */
+  background-color: #ffaa00;
+  border-radius: 2rem;
+  height: 1.3rem;
+  width: 1.3rem;
+}
+
+input[type="range"]:focus::-webkit-slider-thumb {
+  outline: 3px solid #ffaa00;
+  outline-offset: 0.125rem;
+}
+
+/*********** Firefox styles ***********/
+/* slider track */
+input[type="range"]::-moz-range-track {
+  background-color: #c4c4c4;
+  border-radius: 1rem;
+  height: 0.4rem;
+}
+
+/* slider thumb */
+input[type="range"]::-moz-range-thumb {
+  background-color: #ffaa00;
+  border: none; /*Removes extra border that FF applies*/
+  border-radius: 2rem;
+  height: 1.3rem;
+  width: 1.3rem;
+}
+
+input[type="range"]:focus::-moz-range-thumb{
+  outline: 3px solid #ffaa00;
+  outline-offset: 0.125rem;
+}

src/pages/filters.js

@@ -70,7 +70,7 @@ const Filters = () => {
       },
       button(
         { class: "btn", onclick: () => navigate("/search") },
-        "<= 1. Corpus",
+        " ⬅︎ 1. Corpus",
       ),
       button(
         {
@@ -80,7 +80,7 @@ const Filters = () => {
             navigate("/viz");
           },
         },
-        "3. Graph =>",
+        "3. Graph ⮕ ",
       ),
     ),
   );

src/pages/search.js

@@ -34,14 +34,12 @@ const Search = () => {
     { class: "c" },
     h1({ class: "center" }, "1. Define your corpus"),
     p(
-      { style: "font-size: 0.85em" },
       "Use the frame below to search the OpenAlex database and carve out your corpus. Make sure your search retrieves only the publications relevant for your research - for large corpuses, only the 10.000 most cited records will be processed",
     ),
     iframe({
       id: "openalex-frame",
       width: "100%",
-      height: "450px",
-      style: "border-radius: 15px",
+      height: "480px",
       allow: "clipboard-write",
       src: () =>
         url.val
@@ -66,14 +64,13 @@ const Search = () => {
         FetchWorksProgressBar,
       ),
       label(
-        { for: "url", style: "font-size: 0.9em" },
+        { for: "url"},
         'Please copy the address provided above in the "API Box" and paste it below:',
       ),
       div(
         { style: "display: flex; justify-content: space-between;" },
         input({
           class: "card",
-          style: "width: 80%",
           type: "text",
           required: true,
           pattern: urlRegex.toString().slice(1, -1),
@@ -84,7 +81,7 @@ const Search = () => {
         input({
           class: "btn primary",
           type: "submit",
-          value: "2. Filters =>",
+          value: "2. Filters ⮕ ",
           disabled: () => !isValidURL(url.val),
           onclick: async () => {
             showProgress.val = true;

src/pages/start.js

@@ -8,18 +8,18 @@ const Start = () => {
   pageStyle(``);
   return main(
     { class: "c" },
-    h1({ class: "center" }, "BiblioGraph"),
+    h1({ class: "center grassetto" }, "BiblioGraph (pre-release version)"),
     div(
-      { style: "width: 45em;margin: auto" },
+      { style: "/*width:80em;*/" },
       p(
-        "BiblioGraph allows you turn a corpus of OpenAlex records into a scientometric landscape, composed by:",
+        "BiblioGraph allows you turn a corpus of OpenAlex records into a scientometric landscape, composed of:",
       ),
       ol(
         li(
-          "A base map consisting in the network of references that appear together in the records of the corpus;",
+          "A base map consisting in the network of references that appear together in the records of the corpus",
         ),
         li(
-          "A layer of metadata extracted from the records (authors, sources, subfields...) and positioned according to their co-occurrence with the references of the base map.",
+          "A layer of metadata extracted from the records (authors, sources, subfields...) positioned according to their co-occurrence with the references of the base map",
         ),
       ),
       p(
@@ -32,7 +32,7 @@ const Start = () => {
         style: "margin: auto;margin-top: 5em",
         onclick: () => navigate("/search"),
       },
-      "Start here =>",
+      "Start here ⮕ ",
     ),
     Link(
       {
@@ -47,9 +47,9 @@ const Start = () => {
       br(),
       "Nils Bonfils",
       br(),
-      a({ href: "http://www.tommasoventurini.it/wp/" }, "Tommaso Venturini"),
+      a({ href: "http://www.tommasoventurini.it/wp/", target: "_blank" }, "Tommaso Venturini"),
       br(),
-      a({ href: "https://github.com/nbonfils/bibliograph2" }, "Fork on Github"),
+      a({ href: "https://github.com/nbonfils/bibliograph2" , target: "_blank" }, "Fork on Github"),
       br(),
     ),
   );

src/pages/viz.js

@@ -24,13 +24,15 @@ function logslider(position) {
 const Viz = () => {
   pageStyle(`
   .settings {
-    margin: 0;
+    margin: 0px;
   }
   .settings h4 {
-    margin: 0;
+    margin: 4px 0px 0px 0px;
+    color:#000;
+    font-size:1.2em;
   }
   .settings > div:first-child {
-    margin-bottom: .5em;
+    margin-bottom: 0em;
   }
   .settings input[type="range"] {
     width: 100%;
@@ -174,7 +176,7 @@ const Viz = () => {
           div(
             { class: "flex-h", style: "justify-content: space-around" },
             h4("Step1"),
-            h4("<=>"),
+            h4("⬅︎ ⮕"),
             h4("Step2"),
           ),
           label(
@@ -212,24 +214,24 @@ const Viz = () => {
       ),
     ),
     div(
-      { class: "flex-h", style: "justify-content: space-evenly;width: 70%" },
+      { class: "flex-h", style: "justify-content: space-evenly;width: 35%" },
       button(
         { class: "btn", onclick: () => navigate("/filters") },
-        "<= 2. Filters",
+        " ⬅︎ 2. Filters",
       ),
       button(
         {
           class: "btn primary",
           onclick: () => saveGexf(graph.val),
         },
-        "Download .gexf",
+        ".gexf ⬇",
       ),
       button(
         {
           class: "btn primary",
           onclick: () => saveAsPNG(sigmaInstance),
         },
-        "Download .png",
+        ".png ⬇",
       ),
     ),
   );