annotation_dashboard/commit

apply bootstrap dashboard template

diff --git a/applications/dashboard.pl b/applications/dashboard.pl
index 08c681d..0ed6e66 100644
--- a/applications/dashboard.pl
+++ b/applications/dashboard.pl
@@ -9,7 +9,7 @@
 
 :- use_module(library(graph_version)).
 :- use_module(user(user_db)).
-:- use_module(components(label)).
+% :- use_module(components(label)).
 :- use_module(cliopatria(hooks)).
 
 :- http_handler(cliopatria(annotate/dashboard/home), http_dashboard_home, []).
@@ -20,6 +20,13 @@
 
 cliopatria:menu_item(100=annotation/http_dashboard_home, 'dashboard').
 
+:- html_resource(bootstrap,
+	      [ virtual(true),
+		requires(
+		    [ '//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'
+		    ])
+	      ]).
+
 :- multifile
 	show_user_annotations//3.
 
@@ -49,14 +56,35 @@ user_page(User, _Options) :-
 dashboard_page(_Options) :-
 	find_users(Users),
 	length(Users, NrOfUsers),
-	reply_html_page([title('Tag experiment dashboard')],
-			[
-			 div(['Total number of users so far: ', NrOfUsers]),
-			 table([
-			     tr([th('User id'), th('Number of annotations')]),
-			        \show_users(Users)
-			       ])
-			]).
+	reply_html_page(
+	    [ title('Tag experiment dashboard'),
+	      meta([name(viewport),
+		    content('width=device-width, initial-scale=1')],
+		   []),
+	      \html_requires(
+		   [bootstrap,
+		    css('dashboard.css')
+		   ])
+	    ],
+	    [ div([class('navbar navbar-inverse navbar-fixed-top'),
+		   role('navigation')],
+		  [nav_to_be_done]),
+	      div([class('container-fluid')],
+		  [ div([class(row)],
+			[ div([class('col-sm-3 col-md-2 sidebar')],
+			      [nav_to_be_done]),
+			  div([class('col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main')],
+			      [ h1([class('page-header')], ['Dashboard']),
+				h2([class('sub-header')],
+				   ['Total number of users so far: ', NrOfUsers]),
+				table([
+				    tr([th('User id'), th('Number of annotations')]),
+				    \show_users(Users)
+				])
+			      ])
+			])
+		  ])
+	    ]).
 
 
 show_users([]) --> !.
diff --git a/web/css/dashboard.css b/web/css/dashboard.css
new file mode 100644
index 0000000..70c7029
--- /dev/null
+++ b/web/css/dashboard.css
@@ -0,0 +1,96 @@
+/*
+ * Base structure
+ */
+
+/* Move down content because we have a fixed navbar that is 50px tall */
+body {
+  padding-top: 50px;
+}
+
+
+/*
+ * Global add-ons
+ */
+
+.sub-header {
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+
+/*
+ * Sidebar
+ */
+
+/* Hide for mobile, show later */
+.sidebar {
+  display: none;
+}
+@media (min-width: 768px) {
+  .sidebar {
+    position: fixed;
+    top: 51px;
+    bottom: 0;
+    left: 0;
+    z-index: 1000;
+    display: block;
+    padding: 20px;
+    overflow-x: hidden;
+    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+    background-color: #f5f5f5;
+    border-right: 1px solid #eee;
+  }
+}
+
+/* Sidebar navigation */
+.nav-sidebar {
+  margin-right: -21px; /* 20px padding + 1px border */
+  margin-bottom: 20px;
+  margin-left: -20px;
+}
+.nav-sidebar > li > a {
+  padding-right: 20px;
+  padding-left: 20px;
+}
+.nav-sidebar > .active > a {
+  color: #fff;
+  background-color: #428bca;
+}
+
+
+/*
+ * Main content
+ */
+
+.main {
+  padding: 20px;
+}
+@media (min-width: 768px) {
+  .main {
+    padding-right: 40px;
+    padding-left: 40px;
+  }
+}
+.main .page-header {
+  margin-top: 0;
+}
+
+
+/*
+ * Placeholder dashboard ideas
+ */
+
+.placeholders {
+  margin-bottom: 30px;
+  text-align: center;
+}
+.placeholders h4 {
+  margin-bottom: 0;
+}
+.placeholder {
+  margin-bottom: 20px;
+}
+.placeholder img {
+  display: inline-block;
+  border-radius: 50%;
+}