CSS: fixed position for shortcut menu and top bar. Show/hide shortcut menu.

2 files changed, 55 insertions, 8 deletions

diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index 6017aed64..8abf23289 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -63,6 +63,18 @@ function init_shortcut_menu(html){
                load_shortcut_menu
         );
     });
+    $(".short-menu-close").click(function(){
+        $('#shortcut-menu div').hide();
+        $('#shortcut-menu table').hide();
+        $(".short-menu-close").hide();
+        $(".short-menu-open").show();
+    });
+    $(".short-menu-open").click(function(){
+        $('#shortcut-menu div').show();
+        $('#shortcut-menu table').show();
+        $(".short-menu-open").hide();
+        $(".short-menu-close").show();
+    });
 }
 
 function init_shortcut_fields(){
diff --git a/ishtar_common/static/media/style.css b/ishtar_common/static/media/style.css
index 8aac9e2a2..729889dc8 100644
--- a/ishtar_common/static/media/style.css
+++ b/ishtar_common/static/media/style.css
@@ -22,6 +22,8 @@ div.form, ul.form {
 
 /* color  */
 
+.short-menu-open,
+.short-menu-close,
 .pin-action,
 #window hr,
 #context_menu .red,
@@ -78,7 +80,7 @@ a.add-button,
 a.add-button, a.remove,
 #progress-content,
 div.form {
-    border:0 solid #CCC;
+    border:0 solid #EAEAEA;
 }
 
 #window hr{
@@ -347,10 +349,13 @@ div.nav-button{
 }
 
 div#header{
+    position: fixed;
+    top: 0;
+    z-index: 10;
     width:100%;
     text-align:left;
     font-size: 0.9em;
-    background-color: #CCC;
+    background-color: #EAEAEA;
     margin-bottom:10px;
     line-height:30px;
     padding:0 20px;
@@ -434,6 +439,33 @@ div#language_form_div label{
     margin-top: -20px;
 }
 
+.short-menu-open:hover,
+.short-menu-close:hover{
+    cursor: pointer;
+}
+
+.short-menu-open{
+    display: none;
+}
+
+.short-menu-open,
+.short-menu-close{
+    position: absolute;
+    right: -5px;
+    top: -5px;
+    font-size: 0.8em;
+}
+
+.short-menu-open .fa-stack-2x,
+.short-menu-close .fa-stack-2x {
+    font-size: 1.7em;
+}
+
+.short-menu-open .fa-stack-1x,
+.short-menu-close .fa-stack-1x {
+    line-height: 1.7em;
+}
+
 div#context_menu{
     height:110px;
     margin-right:10px;
@@ -444,11 +476,14 @@ div#context_menu{
 
 div#context_menu fieldset{
     margin-top: 8px;
-    background-color:#f1f2f6;
-    border:0 solid #CCC;
+    background-color: #E6E6E6;
+    border:0 solid #EAEAEA;
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     border-radius: 0;
+    position: fixed;
+    top: 40px;
+    right: 10px;
 }
 
 div#action_current_items{
@@ -627,7 +662,7 @@ ul#form_path li a:link, ul#form_path li a:visited {
 #reminder{
     padding:0.4em;
     margin-right:10px;
-    border:1px solid #CCC;
+    border:1px solid #EAEAEA;
     -moz-border-radius:0;
     -webkit-border-radius:0;
     border-radius:0;
@@ -809,7 +844,7 @@ ul.form .help_text{
 
 .delete td{
     text-align:center;
-    border-bottom:1px solid #CCC;
+    border-bottom:1px solid #EAEAEA;
     padding:6px;
 }
 
@@ -865,7 +900,7 @@ table.confirm tr.spacer td:last-child{
 .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
     background:none;
     background-color: #F1F2F6;
-    border: 1px solid #CCC;
+    border: 1px solid #EAEAEA;
     border-radius-top: 4px;
 }
 
@@ -973,7 +1008,7 @@ a.photo{
     background: #FFF;
     text-align:left;
     padding:10px;
-    border:1px solid #CCC;
+    border:1px solid #EAEAEA;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
 }