style: add support for a sidepage (#7284)

gadjo/static/css/gadjo.css

@@ -15,6 +15,15 @@ html, body {
 	color: #3c3c33;
 }
 
+html {
+	min-height: 100%;
+	position: relative;
+}
+
+body {
+	height: 100%;
+}
+
 a {
 	color: #0066cc;
 	text-decoration: none;
@@ -103,7 +112,7 @@ div#header {
 	padding-left: 25px;
 	border-bottom: 1px solid #888;
 	position: relative;
-	height: 92px;
+	height: 5em;
 }
 
 div#header h1:after {
@@ -506,7 +515,7 @@ div.ui-dialog {
 	box-shadow: rgb(102, 102, 102) 0px 0px 20px 2px;
 	padding: 0;
 	border-radius: 0;
-	max-width: 90%;
+	max-width: 80%;
 }
 
 div.ui-dialog .ui-dialog-titlebar {
@@ -570,3 +579,99 @@ form.small button + button,
 form.small button + a.button {
 	margin-left: 1em;
 }
+
+#sidepage {
+	position: absolute;
+	z-index: 100;
+	background: black;
+	width: 220px;
+	height: 2em;
+	text-align: left;
+	transition: all 0ms ease-in;
+	overflow: hidden;
+}
+
+#main.sidepage-expanded {
+	margin-left: 220px;
+}
+
+#main.enable-transitions,
+#sidepage.enable-transitions {
+	transition-duration: 100ms;
+}
+
+#sidepage.sidepage-expanded {
+	height: 100%;
+	background: #23282d url(texture.png);
+	overflow: initial;
+}
+
+#main {
+	transition: margin-left 0ms ease-in;
+}
+
+#sidepage span#applabel {
+	padding-left: 1em;
+	font-weight: bold;
+	cursor: pointer;
+	display: block;
+	background: black;
+}
+
+#sidepage ul#sidepage-menu {
+	list-style: none;
+	padding: 0;
+}
+
+#sidepage ul#sidepage-menu a {
+	border: none;
+	display: block;
+}
+
+#sidepage ul#sidepage-menu li {
+	padding-left: 1em;
+	position: relative;
+	line-height: 24px;
+}
+
+ul#sidepage-menu li a {
+	background: transparent no-repeat 0 50%;
+	padding: 5px 0 5px 25px;
+}
+
+#sidepage ul#sidepage-menu .active a {
+	color: #eee;
+}
+
+#sidepage ul#sidepage-menu li.active,
+#sidepage ul#sidepage-menu li.active:hover {
+	background: #215D9C;
+}
+
+#sidepage ul#sidepage-menu li:hover {
+	background: rgba(0, 0, 0, 0.3);
+}
+
+
+#sidepage ul#sidepage-menu li.active:after {
+	content: "";
+	position: absolute;
+	display: block;
+	top: 0;
+	background: #215D9C;
+	right: -17px;
+	width: 34px;
+	height: 34px;
+	-moz-transform: scale(0.4, 0.707) rotate(45deg);
+	-webkit-transform: scale(0.4, 0.707) rotate(45deg);
+	transform: scale(0.4, 0.707) rotate(45deg);
+}
+
+ul#sidepage-menu li a.icon-management { background-image: url(small-icon-management.png); }
+ul#sidepage-menu li a.icon-submission { background-image: url(small-icon-submission.png); }
+ul#sidepage-menu li a.icon-categories { background-image: url(small-icon-categories.png); }
+ul#sidepage-menu li a.icon-workflows { background-image: url(small-icon-workflows.png); }
+ul#sidepage-menu li a.icon-forms { background-image: url(small-icon-forms.png); }
+ul#sidepage-menu li a.icon-roles { background-image: url(small-icon-roles.png); }
+ul#sidepage-menu li a.icon-users { background-image: url(small-icon-users.png); }
+ul#sidepage-menu li a.icon-settings { background-image: url(small-icon-settings.png); }

gadjo/static/js/gadjo.js

@@ -150,5 +150,27 @@ function displayPopup(event)
 }
 
 $(function() {
-    $(document).on('click.gadjo', 'a[rel=popup]', displayPopup);
+  $(document).on('click.gadjo', 'a[rel=popup]', displayPopup);
+
+  var sidepage_button = $('#sidepage #applabel');
+  sidepage_button.on('click', function() {
+    $('#sidepage, #main').addClass('enable-transitions');
+    $('#sidepage, #main').toggleClass('sidepage-expanded');
+    if ($('#sidepage').hasClass('sidepage-expanded')) {
+       window.localStorage.sidepage_status = 'expanded';
+    } else {
+       window.localStorage.sidepage_status = null;
+    }
+  });
+  if (window.location.protocol == 'file:') {
+    /* don't open sidepage when loading from a file:// */
+    window.localStorage.sidepage_status = null;
+  }
+  if (window.localStorage.sidepage_status === undefined &&
+      typeof(GADJO_DEFAULT_SIDEPAGE_STATUS) !== "undefined") {
+    window.localStorage.sidepage_status = GADJO_DEFAULT_SIDEPAGE_STATUS;
+  }
+  if (window.localStorage.sidepage_status == 'expanded') {
+    $('#sidepage, #main').toggleClass('sidepage-expanded');
+  }
 });

gadjo/templates/gadjo/base.html

@@ -17,6 +17,9 @@
   </head>
   <body>
   <div id="top">
+    <div id="sidepage">
+      <span id="applabel"> </span>
+    </div>
     {% block user-links %}
     <ul class="user-info">
   {% if user.is_authenticated %}