UI Improvement

files/style.css

@@ -1,13 +1,83 @@
-body { 
-     font-family: Verdana,Geneva,Arial,Sans-serif; 
-	font-size: 12px; 
-	background-color : #FFFFFF 
+ * {
+  box-sizing: border-box;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: auto;
+  gap: 10px;
+  padding: 10px;
+}
+
+@media only screen and (min-width: 768px) {
+    .grid-container { grid-template-columns: 300px auto;}
+}
+
+ul.topbar {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid #e7e7e7;
+  background-color: #f3f3f3;
+}
+
+ul.topbar li {
+    height: 100%;
+    display: block;
+    float: left;
+    height: 50px;
+}
+
+ul.topbar li a {
+  display: block;
+  color: #666;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  text-align: center;
+  height: 50px;
+}
+
+ul.topbar li a:hover:not(.active) {background-color: #ddd;}
+
+ul.topbar li a.active {background-color: #04AA6D;}
+
+ul.topbar li.right {float: right;}
+
+@media screen and (max-width: 768px) {
+  ul.topbar li.right,
+  ul.topbar li {
+      float: none;
+      border: 1px solid #e7e7e7;
+  }
+}
+
+.center-horizontal {
+  display: grid;
+  grid-template-columns: auto auto;
+  align-items: center;
+  justify-content: center;
+  height: 55%;
+  padding: 0;
+  margin: 0;
+}
+
+body {
+    font-family: Verdana,Geneva,Arial,Sans-serif;
+	font-size: 12px;
+	background-color : #FFFFFF;
+    margin: 0;
 }
 
 img {
     border: 0px none;
 }
 
+.topbar img {
+    padding-right: 5px;
+}
+
 a:visited { color : #000080; ; text-decoration : underline; }
 a:link { color : #2222FF; ; text-decoration : underline; }
 a:hover { text-decoration : none; }
@@ -25,12 +95,6 @@ a.missing_page:visited { color : Red; text-decoration : underline; }
 a.missing_page:link    { color : Red; text-decoration : underline; }
 a.missing_page:hover   { color : Red; text-decoration : none; }
 
-/* Accesskey'd links -- first letter underlined */
-a.ak {	text-decoration: underline; }
-a.ak:hover { color:#2222FF; text-decoration: none;}
-a.ak:focus { color:#2222FF; text-decoration: none;}
-a.ak:first-letter { color:#2222FF; text-decoration: none; font-weight:bold; }
-
 a.palette0 { color:rgb(128, 6, 25); }
 a.palette1 { color:rgb(0, 104, 28); }
 a.palette2 { color:rgb(0, 148, 145); }
@@ -101,7 +165,7 @@ h1 {
 }
 
 h1.left_aligned {
-  text-align: left; 
+  text-align: left;
 }
 
 h4 {
@@ -139,7 +203,7 @@ html, body {
 
 #login_align_middle {
   position:absolute;
-  top: 35%; 
+  top: 35%;
   left: 30%;
   text-align:left;
   padding: 5px;
@@ -174,7 +238,7 @@ table.login_box {
   color:#000;
 }
 
-.undo_link { 
+.undo_link {
   color:#338;
 }
 
@@ -202,17 +266,13 @@ table.login_box {
 }
 
 #navbar {
-	width: 300px;
-	float: left;
-	margin-left: 0px;
 	margin-top: 2px;
 	padding: 12px;
+    background-color: #f1f1f1;
 }
-
-
+
 #content {
 	padding: 5px;
-	margin-left: 400px;
 }
 
 a#login_help_url {

ocsigenserver.conf.in

@@ -16,8 +16,9 @@
     <!-- Sqlite is needed by ocsipersist, which is used by Eliom: -->
     <extension findlib-package="sqlite3"/>
 
-    <extension findlib-package="ocsigenserver.ext.ocsipersist-sqlite"/>
+    <extension findlib-package="ocsipersist.sqlite"/>
     <extension findlib-package="eliom.server"/>
+    <extension findlib-package="netstring"/>
 
     <host defaulthostname="localhost">
       <site dir="" charset="UTF-8">

src/database.ml

@@ -22,8 +22,6 @@ open Config
 
 type connection = Psql.connection
 
-let ( |> ) f g = g f
-
 module ConnectionPool =
   struct
     open Psql

src/history.ml

@@ -32,8 +32,6 @@ open CalendarLib
 
 module Db = Database
 
-let ( & ) f x = f x
-
 let n_log_items_per_page = 300
 
 let descr_of_activity_type = function
@@ -203,7 +201,7 @@ let view_history_page ~cur_user ~nth_page =
                      [tr [td ~a:[a_class ["no_break"; "h_date_heading"]] date_text]] @ lst_acc,
                    prettified_date))
                activity_groups ([],"")))) in
-  return & Html_util.html_stub ~title:"History"
+  return @@ Html_util.html_stub ~title:"History"
     (Html_util.navbar_html ~cur_user
        ([h1 [txt "Blast from the past"]] @
           (page_links nth_page n_total_pages) @ [br (); br ()] @

src/html_util.ml

@@ -41,11 +41,12 @@ let html_stub ?(javascript=[]) ~title body_html =
   html ~a:[a_xmlns `W3_org_1999_xhtml]
     (head
        (Eliom_content.Html.F.title (txt (title ^ " — Nurpawiki")))
-       ((scripts) @
-          [css_link ~a:[] ~uri:(make_uri ~service:(static_dir ())
-                                  ["style.css"]) ();
-           css_link ~a:[] ~uri:(make_uri ~service:(static_dir ())
-                                  ["jscalendar"; "calendar-blue2.css"]) ()]))
+       (meta ~a:[ a_name "viewport"; a_content "width=device-width, initial-scale=1" ] () ::
+        css_link ~a:[] ~uri:(make_uri ~service:(static_dir ())
+                                  ["style.css"]) ()::
+        css_link ~a:[] ~uri:(make_uri ~service:(static_dir ())
+                                    ["jscalendar"; "calendar-blue2.css"]) ()::
+        scripts))
     (body body_html)
 
 let is_guest user =
@@ -54,23 +55,23 @@ let is_guest user =
 let navbar_html ~cur_user ?(top_info_bar=[]) ?(wiki_revisions_link=[]) ?(wiki_page_links=[]) ?(todo_list_table=[]) content =
   let home_link link_text =
     a ~service:wiki_view_page
-      ~a:[a_accesskey 'h'; a_class ["ak"]] link_text
+      ~a:[a_accesskey 'h'] link_text
       (Config.site.cfg_homepage, (None, (None, None))) in
   let scheduler_link =
     a ~service:scheduler_page
-      ~a:[a_accesskey 'r'; a_class ["ak"]]
-      [img ~alt:"Scheduler" ~src:(make_static_uri ["calendar.png"]) ();
-       txt "Scheduler"] () in
+      ~a:[a_accesskey 'r']
+      [div ~a:[a_class ["center-horizontal"]] [img ~alt:"Scheduler" ~src:(make_static_uri ["calendar.png"]) ();
+       txt "Scheduler"]] () in
   let history_link =
     a ~service:history_page
-      ~a:[a_accesskey 'r'; a_class ["ak"]]
-      [img ~alt:"History" ~src:(make_static_uri ["home.png"]) ();
-       txt "History"] None in
+      ~a:[a_accesskey 'r']
+      [div ~a:[a_class ["center-horizontal"]] [img ~alt:"History" ~src:(make_static_uri ["home.png"]) ();
+       txt "History"]] None in
 
   let search_input =
     [get_form ~service:search_page
        (fun (chain : ([`One of string] param_name)) ->
-          [p [input ~input_type:`Submit ~value:"Search" Form.string;
+           [p [input ~a:[a_class ["button"]] ~input_type:`Submit ~value:"Search" Form.string;
               input ~input_type:`Text ~name:chain Form.string]])] in
 
   (* Greet user and offer Login link if guest *)
@@ -89,48 +90,39 @@ let navbar_html ~cur_user ?(top_info_bar=[]) ?(wiki_revisions_link=[]) ?(wiki_pa
         [] in
 
   let disconnect_link =
-    if is_guest cur_user then [] else [disconnect_box "Logout"] in
+    if is_guest cur_user then [] else [li ~a:[a_class ["right"]] [disconnect_box "Logout"]] in
 
   let my_preferences_link =
     if is_guest cur_user then
       []
     else
-      [a ~service:edit_user_page [txt "My Preferences"]
-         (None,cur_user.user_login)] in
+      [li ~a:[a_class ["right"]] [a ~service:edit_user_page [txt "My Preferences"]
+      (None,cur_user.user_login)]] in
 
   let edit_users_link =
     if Privileges.can_view_users cur_user then
-      [a ~service:user_admin_page [txt "Edit Users"] ()]
+      [li ~a:[a_class ["right"]] [a ~service:user_admin_page [txt "Edit Users"] ()]]
     else
       [] in
 
-  [div ~a:[a_id "topbar"]
-     [table ~a:[a_class ["top_menu_size"]]
-        [tr
-           [td ~a:[a_class ["top_menu_left_align"]]
-              [table
-                 [tr [td [home_link
-                            [img ~alt:"Home" ~src:(make_static_uri ["home.png"]) ();
-                             txt "Home"]];
-                      td [scheduler_link];
-                      td [history_link];
-                      td wiki_page_links]]
-                 ];
-            td ~a:[a_class ["top_menu_right_align"]]
-              ([a ~service:about_page [txt "About"] ()] @
-                 [txt " "] @
-                 my_preferences_link @
-                 [txt " "] @
-                 edit_users_link @
-                 [txt " "] @
-                 disconnect_link)]]]]
-  @
+  ul ~a:[a_class ["top_menu_size"; "topbar"]]
+    ([li [home_link [div ~a:[a_class ["center-horizontal"]] [img ~alt:"Home"
+            ~src:(make_static_uri ["home.png"]) (); txt "Home"]]];
+       li [scheduler_link];
+       li [history_link]] @
+       List.map (fun l -> li [l]) wiki_page_links @
+       [li ~a:[a_class ["right"]]  [a ~service:about_page [txt "About"] ()]] @
+          my_preferences_link @
+          edit_users_link @
+          disconnect_link)
+  ::
     (if top_info_bar = [] then [] else [div ~a:[a_id "top_action_bar"] top_info_bar])
   @
-    [div ~a:[a_id "navbar"]
-       (user_greeting @ [br ()] @ search_input @ wiki_revisions_link @ todo_list_table);
-     div ~a:[a_id "content"]
-       content]
+    [div ~a:[a_id "page"; a_class ["grid-container"]]
+      [div [div ~a:[a_id "navbar";]
+      (user_greeting @ [br ()] @ search_input @ wiki_revisions_link @ todo_list_table)];
+        div ~a:[a_id "content"]
+        content]]
 
 let error text =
   span ~a:[a_class ["error"]] [txt text]