[ux] implement pretty ux using bootstrap

nexacenter · Apr 20, 2016 · 1fbf536 · 1fbf536
1 parent e14c888
commit 1fbf536
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 26 deletions.
diff --git a/lib/server/cmd_slave.js b/lib/server/cmd_slave.js
@@ -35,6 +35,7 @@ app.get("/api/version", (_, res) => {
     });
 });
 app.use(express.static(`${__dirname}/../../static`));
+app.use(express.static(`${__dirname}/../../node_modules/bootstrap/dist/css`));
 
 exports.main = () => {
     console.log("Slave worker started");

diff --git a/static/app.css b/static/app.css
@@ -32,10 +32,19 @@ span.policymaker_name {
 }
 
 #pasteur-logo {
-    width: 150px;
+    width: 250px;
 }
 
 img.center {
     display: block;
     margin: 0 auto;
 }
+
+.expandable {
+    cursor: pointer;
+    cursor: hand;
+}
+
+hr {
+    visibility: hidden;
+}
diff --git a/static/img/forkme.png b/static/img/forkme.png
diff --git a/static/img/nexa.png b/static/img/nexa.png
diff --git a/static/index.html b/static/index.html
@@ -1,21 +1,57 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>H2020 compliance of roarmap database</title>
+    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="app.css">
+    <link rel="stylesheet" type="text/css" href="sticky-footer.css">
   </head>
+
   <body ng-app="roarmap-h2020-view">
-    <a href="http://www.pasteur4oa.eu/">
-      <img src="img/pasteur.png" alt="Pasteur4oa logo" class="center"
-           id="pasteur-logo" />
-    </a>
-    <div class="center">
-      <a href="#/search">[search]</a>
-      <a href="#/by/country">[by country]</a>
-      <a href="#/by/type">[by type]</a>
+    <div class="container">
+
+      <a href="https://github.com/nexacenter/roarmap-h2020-view">
+        <img style="position: absolute; top: 0; left: 0; border: 0;"
+             src="img/forkme.png" alt="Fork me on GitHub"></a>
+
+      <a href="https://nexa.polito.it/">
+        <img style="position: absolute; top: 0; right: 0; border: 0;"
+             src="img/nexa.png" alt="Nexa Center" width="200px"></a>
+
+      <div class="page-header center">
+        <a href="http://www.pasteur4oa.eu/">
+          <img src="img/pasteur.png" alt="Pasteur4oa logo" class="center"
+               id="pasteur-logo" />
+        </a>
+        View H2020 compliancy of ROARMAP policies.
+      </div>
+
+      <div>
+        <ul class="nav nav-pills nav-justified">
+          <li><a href="#/search">Search</a></li>
+          <li><a href="#/by/country">By country</a></li>
+          <li><a href="#/by/type">By type</a></li>
+        </ul>
+      </div>
+
+      <hr>
+      <div class="row" ng-view></div>
     </div>
-    <div ng-view></div>
+
+    <footer class="footer center">
+      <div class="container">
+        <p class="text-muted"><a href="http://www.pasteur4oa.eu/">PASTEUR4OA</a>—Open
+          Access Policy Alignment Strategies for European Union Research
+          funded by the <a href="http://cordis.europa.eu/fp7/home_en.html">Seventh
+          Framework Programme for Research and Development (FP7)</a>.</p>
+        <p class="text-muted">Site developed by
+          <a href="https://nexa.polito.it/">Nexa Center for Internet
+          &amp; Society, Politecnico di Torino, DAUIN</a>.</p>
+      </div>
+    </footer>
+
     <script src="app.bundle.js"></script>
   </body>
 </html>
diff --git a/static/partials/by_country.html b/static/partials/by_country.html
@@ -2,15 +2,16 @@
   <div ng-show="g.aggregate">
 
     <!-- The following always gives me headache -->
-    <ul ng-repeat="(k, v) in g.aggregate">
-      <li>{{k}}</li>
-      <ul ng-repeat="(k1, v1) in v">
-        <li>{{k1}}</li>
-        <ul ng-repeat="(k2, v2) in v1">
-          <li ng-init="view = false"
+    <ul ng-repeat="(k, v) in g.aggregate" class="list-group">
+      <li class="list-group-item">{{k}}</li>
+      <ul ng-repeat="(k1, v1) in v" class="list-group-item">
+        <li class="list-group-item">{{k1}}</li>
+        <ul ng-repeat="(k2, v2) in v1" class="list-group-item expandable">
+          <li ng-init="view = false" class="list-group-item"
               ng-click="view = !view">{{k2}}</li>
-          <ul ng-repeat="inst in v2">
-            <li ng-show="view">
+          <ul ng-repeat="inst in v2" ng-show="view"
+              class="list-group-item">
+            <li class="list-group-item">
               <a href="#/institutions/{{inst.eprintid}}">{{inst.title}}</a>
             </li>
           </ul>

diff --git a/static/partials/by_type.html b/static/partials/by_type.html
@@ -1,11 +1,11 @@
 <div ng-controller="ByTypeController">
 
   <div ng-show="g.aggregate">
-    <ul ng-repeat="(k, v) in g.aggregate">
-      <li ng-init="view = false"
+    <ul ng-repeat="(k, v) in g.aggregate" class="list-group">
+      <li ng-init="view = false" class="list-group-item expandable"
           ng-click="view = !view">{{k}}</li>
-      <ul>
-        <li ng-repeat="elem in v" ng-show="view">
+      <ul class="list-group-item" ng-show="view">
+        <li ng-repeat="elem in v" class="list-group-item">
           <a href="#/institutions/{{elem.eprintid}}">{{elem.title}}</a>
         </li>
       </ul>

diff --git a/static/partials/search.html b/static/partials/search.html
@@ -5,12 +5,13 @@
       <input type="text" ng-model="g.terms">
       <button>Search</button>
     </form>
+    <hr>
     <div ng-show="g.result">
-      <ol>
-        <li ng-repeat="entry in g.result">
+      <ul class="list-group">
+        <li ng-repeat="entry in g.result" class="list-group-item">
           <a href="#/institutions/{{entry.eprintid}}">{{entry.title}}</a>
         </li>
-      </ol>
+      </ul>
     </div>
   </div>
 

diff --git a/static/sticky-footer.css b/static/sticky-footer.css
@@ -0,0 +1,32 @@
+/* Sticky footer styles
+-------------------------------------------------- */
+html {
+  position: relative;
+  min-height: 100%;
+}
+body {
+  /* Margin bottom by footer height */
+  margin-bottom: 120px;
+}
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  /* Set the fixed height of the footer here */
+  height: 120px;
+  background-color: #f5f5f5;
+}
+
+
+/* Custom page CSS
+-------------------------------------------------- */
+/* Not required for template or sticky footer method. */
+
+.container {
+  width: auto;
+  max-width: 680px;
+  padding: 0 15px;
+}
+.container .text-muted {
+  margin: 20px 0;
+}