From 5287bad0283739b4e9e109304ecf6fdecbb344d6 Mon Sep 17 00:00:00 2001
From: Nirmal <nirmalkjoshi99@gmail.com.com>
Date: Wed, 21 Feb 2018 15:51:43 +0530
Subject: [PATCH] UI improvements

---
 index.html | 149 ++++++++++++++++++++++++-----------------------------
 style.css  |   7 +++
 2 files changed, 74 insertions(+), 82 deletions(-)
 create mode 100644 style.css
diff --git a/index.html b/index.html
index 1390537..5e8f4aa 100644
--- a/index.html
+++ b/index.html
@@ -3,85 +3,57 @@
 
 <head>
     <meta name="description" content="Mine Versions">
-
-    <style>
-        body {
-            font-family: sans-serif;
-            color: #333;
-        }
-
-        .note {
-            background:#eee; border-left:solid 3px cornflowerblue;
-            padding: 1em;
-            border-radius: 2px;
-            margin-top: 0.5em;
-        }
-
-        .note pre {
-            display: inline
-        }
-
-        .failed {
-            background: rgba(150, 0, 50, 0.1);
-            padding: 1em;
-            border-left: solid 3px firebrick;
-        }
-
-        main {
-            display: flex;
-            flex-grow: 1;
-            justify-content: space-around;
-            flex-wrap: wrap;
-        }
-
-        table {
-            margin: 1em;
-        }
-
-        table tr:nth-child(even) {
-            background-color: rgba(0, 0, 0, 0.05);
-            color: #111
-        }
-
-        td {
-            padding: 0.1em 2em
-        }
-
-        a {
-            color: #222;
-        }
-
-        a:hover {
-            background-color: rgba(255, 255, 0, 0.1)
-        }
-
-        a:visited {
-            color: rgb(80, 0, 80)
-        }
-
-        table a {
-            display: block;
-        }
-
-        h1 {text-align:center; background-color:#447; color: #fff; padding:0.5em}
-    </style>
+    <meta name="viewport" content="width=device-width, shrink-to-fit=no">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+        crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 
 <body>
-    <h1>InterMine version checker</h1>
-    <main>
-        <table>
-            <th>Mine</th>
-            <th>InterMine Version</th>
-            <tbody id="mineList"></tbody>
-        </table>
-        <div class="statuses">
-            <div class="note failed"> Failed to load:
-                <ul id="poorlymines"></ul>
+    
+    <nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-info">
+        <span class=" text-centre navbar-brand mb-0 h3">Mine-Versions-InterMine Version Checker</span>
+    </nav>
+    <main role="main" class="container">
+       
+        <div class="container">
+            <div class="text-center">
+                <h1>MineVersions</h1>
+                <p class="lead sub-head">Mini JS app to report versions of known mines.
+                    <br>
             </div>
-            <div class="note">Note: Mines prior to 1.6.6 had no <pre>/version/intermine</pre> method and consequently return the <pre>/version</pre> default method instead.</div>
-            <div class="note">To add or remove a mine, add it to to the mines array here: <a href="https://github.com/intermine/mineversions/">https://github.com/intermine/mineversions/</a></div>
+
+            <table class=" text-center table">
+                <thead class="thead-light ">
+                    <tr>
+                        <th>List of All Available Mines
+                            <br>(Click on the mine name to view Mine Documentation)</th>
+                    </tr>
+                </thead>
+            </table>
+            <table class=" text-center table table-hovertable-bordered ">
+
+
+                <thead class="thead-dark">
+                    <tr>
+
+                        <th scope="col">Mine</th>
+                        <th scope="col">InterMine Version</tr>
+                    </tr>
+                </thead>
+                <tbody id="mineList"></tbody>
+            </table>
+
+            <table class="table text-center ">
+                <thead class="thead-dark">
+                    <tr>
+                        <th scope="col" class="text-danger">Failed to load mines</th>
+                    </tr>
+                </thead>
+                <tbody id="poorlymines"></tbody>
+            </table>
         </div>
+
     </main>
     <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
     <script>
@@ -90,7 +62,7 @@ <h1>InterMine version checker</h1>
             ["HumanMine", 'http://www.humanmine.org/humanmine'],
             ["MouseMine", 'http://www.mousemine.org/mousemine'],
             ["YeastMine", 'http://yeastmine.yeastgenome.org/yeastmine'],
-            ["YeastMine Dev" , 'http://yeastmine-test-aws.yeastgenome.org/yeastmine-dev/'],
+            ["YeastMine Dev", 'http://yeastmine-test-aws.yeastgenome.org/yeastmine-dev/'],
             ["ZebrafishMine", 'http://www.zebrafishmine.org/'],
             ["WormMine", 'http://intermine.wormbase.org/tools/wormmine'],
             ["SoyMine", 'https://mines.legumeinfo.org/soymine'],
@@ -109,7 +81,7 @@ <h1>InterMine version checker</h1>
             ["HymenopteraMine", 'http://hymenopteragenome.org/hymenopteramine'],
             ["Mitominer", 'http://mitominer.mrc-mbu.cam.ac.uk/release-4.0'],
             ["TargetMine", 'http://targetmine.mizuguchilab.org/targetmine'],
-// :(            ["ToxoMine", 'http://toxomine.org/beta/'],
+            // :(            ["ToxoMine", 'http://toxomine.org/beta/'],
             ["INDIGO", "http://www.cbrc.kaust.edu.sa/indigo"],
             ["Shaare", "http://www.shaare.org.uk/release-1.0"],
             ["XenMine", "http://www.xenmine.org/xenmine"],
@@ -124,21 +96,34 @@ <h1>InterMine version checker</h1>
         var errors = document.getElementById("poorlymines");
 
 
-        mines.map(function(mine) {
+        mines.map(function (mine) {
             var mineName = mine[0],
                 mineLink = mine[1],
                 mineUrl = mineLink + "/service";
-            $.ajax(mineUrl + "/version/intermine").done(function(response) {
+            $.ajax(mineUrl + "/version/intermine").done(function (response) {
                 display.innerHTML += "<tr><td><a href='" + mineLink + "'>" + mineName +
                     "</a></td><td>" + response +
                     "</td></tr>";
-            }).fail(function(response) {
-                errors.innerHTML += "<li><a href='" + mineLink + "'>" + mineName +
-                    ":</a> " + response.statusText + "</li>";
+            }).fail(function (response) {
+                errors.innerHTML += "<tr><td><a href='" + mineLink + "'>" + mineName +
+                    "</a></td></tr> ";
             });
 
         });
     </script>
+
+    <div class="alert alert-info">
+        <i class="fas fa-info-circle"></i>
+        Mines prior to 1.6.6 had no
+        <u>/version/intermine</u> method and consequently return the
+        <u>/version</u> default method instead.
+    </div>
+    <div class=" text-center alert alert-secondary" >
+            <i class="fas fa-edit"></i> Want to Contribute?<br>
+       Follow the link to add or remove a mine from mines array:<a href="https://github.com/intermine/mineversions/" > Project Code</a> 
+    </div>
 </body>
 
-</html>
+<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..e82b45e
--- /dev/null
+++ b/style.css
@@ -0,0 +1,7 @@
+.sub-head{
+    font-weight: 500;
+}
+
+td{
+    font-size: 18px;
+}
\ No newline at end of file
