FSN#35094 Style aanpassingen en hamburger dropdown menu werkend gemaakt

svn path=/Website/trunk/; revision=31365

APPL/Shared/default.csx

@@ -251,7 +251,7 @@ input[readonly], select[readonly], textarea[readonly] {
   background-color: transparent;
   color: ==textcolor==;
   border:0;
-  padding: 0;
+  xpadding: 0;
 }
 
 div#finRefInfoList td div
@@ -309,9 +309,11 @@ a[href^="mailto:"] {
     text-decoration: none;
     color: ==textcolor==;
 }
+a {
+    cursor: pointer;
+}
 a:hover {
     text-decoration: underline;
-    cursor: pointer;
 }
 a[href^="mailto:"].fldmailto {
     background-color: ==backgroundcolor==;
@@ -434,6 +436,8 @@ th {
     padding-right: 2px;
 }
 #loggedinuser span {
+    padding-left: 3px;
+    padding-right: 1px;
     cursor: pointer;
 }
 #headerlogout:hover, #headerhelp:hover, #loggedinuser span:hover {
@@ -574,6 +578,9 @@ div.fcltframe {
 .fcltframeheader span {
    padding-top: 2px;
 }
+.hambdropdown {
+    background-color: ==frameheaderbackgroundcolor==;
+}
 
 #iframerextratitle {
   font-weight: normal;
@@ -905,12 +912,14 @@ div.wbackground {
 .usermsgdate { white-space: nowrap;}
 .usermessage a {text-decoration: none; cursor:pointer;}
 .usermessage a:hover {text-decoration: underline; color: #f26522;}
-.newstextFreshRed {font-weight: bold; color: red;}
-.newstextFresh {font-weight: normal; color: ==textcolor==;}
-.newstext {
+
+.newstextFreshRed td {font-weight: bold; color: red;}
+.newstextFresh td {font-weight: 600; color: ==textcolor==;}
+.newstext td{
     color: ==textcolor==;
-    filter: alpha(opacity=80);
-    opacity: 0.8;
+    font-weight: 200;
+    xfilter: alpha(opacity=80);
+    xopacity: 0.8;
 }
 td.markread  {
     width: 24px;
@@ -1042,6 +1051,10 @@ padding-right: 15px!important;
     white-space: nowrap;
 }
 
+.hambdropdown ul {
+    padding: 0px 0px!important;
+}
+
 /* een button */
 #buttons ul li,
 #buttons ul li a {
@@ -1088,6 +1101,13 @@ span.button:hover {
     transition: background-color 0.4s;
 }
 
+#buttons ul li.byHamburger,
+#buttons ul li.byHamburger a {
+    border-left: 0px;
+    border-top: 1px solid rgba(255,255,255,0.25);
+    padding: 3px 3px 3px 3px;
+}
+
 #buttons ul li.hasIcon:hover,
 #buttons ul li.hasIcon a:hover {
     color: ==iconhovercolor==;
@@ -3355,8 +3375,8 @@ tr.listfatal td {
     background-color: ==backgroundcolor==;
     padding-left:1px;
     padding-right:2px;
-    border-right: 1px solid black;
-    border-bottom: 1px solid black;
+    border-right: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
     position: absolute;
     top: 0px;
     left: 0px;
@@ -3463,43 +3483,55 @@ td.selectable {
 {
     width: 199px;
 }
+/* note: the order is which the next definitions appear is
+   significant, and more of these are defined in slnkdwf.css
+ */
 .openFG, .closedFG, .fixedFG {
-    background-repeat:no-repeat;
-    background-position: 4px 5px;
     width: 220px;
-}
-.openFG, .closedFG {
     background-color: ==frameheaderbackgroundcolor==;
     color: ==frameheadercolor==;
 }
-.fixedFG {
+.openFG, .closedFG {
+    background-repeat: no-repeat;
+    background-position: 4px 5px;
+    -webkit-transition: background-color 0.4s; /* Safari */
+    transition: background-color 0.4s;
+    cursor: pointer;
+}
+
+.openFG:hover, .closedFG:hover {
     background-color: ==blockheaderbackgroundcolor==;
     color: ==blockheadercolor==;
 }
 .openFG {
     background-image:url(../appl/Pictures/up.png);
-    cursor: pointer;
 }
 .closedFG {
     background-image:url(../appl/Pictures/down.png);
-    color: #ddd;
-    cursor: pointer;
 }
 .fixedFG {
     line-height: 2em;
     border-top: 2px solid white;
-    text-align: center;
-}
-.openFG tr, .closedFG tr {
+    padding-left: 8px;
 }
 .openFG td, .closedFG td {
     line-height: 2em;
     padding-left: 25px;
     border-top: 2px solid white;
 }
-.closedFG:hover {
-    color: #fff;
+
+#navbuttons {
+    background-color: ==frameheaderbackgroundcolor==;
+    color: ==frameheadercolor==;
 }
+#navbuttons span.active {
+    color: ==buttonhoverbackgroundcolor==; /* ja?*/
+}
+#navbuttons span:hover {
+    color: ==iconhovercolor==;
+    background-color: ==buttonhoverbackgroundcolor==;
+}
+
 #toggler {
     float: left;
     width: 12px;
@@ -3965,6 +3997,7 @@ li.hasIcon:hover span {
 @media all and (min-width: 0){
     .icontxt { display: none; }
 }
+
 @media all and (min-width: 45em){
     .icontxt {display: inline; }
 }

APPL/Shared/iface.inc

@@ -13,6 +13,8 @@ if (JSON_Result)
 
 FCLTHeader.Requires({ plugins: ["jQuery"], js: ["iface.js"]})
 var isPrinting = getQParamInt("print", 0) == 1;
+var hambuttons = [];
+var hamburger = false;
 
 function CreateButton(tekst, onClick, btn, params) //akey, id, params)
 {
@@ -65,7 +67,7 @@ function CreateButtons(buttons, params)
       { // too bad this hidden button takes up some space, especially with the vertical buttons
         %><li class="hiddenbutton"><input type="submit" style="height:0;width:0"></li><%
       }
-      var hamburger = false;
+      hamburger = false;
       for (var i=0; i< buttons.length; i++)
       {
           var btn = buttons[i];
@@ -73,15 +75,20 @@ function CreateButtons(buttons, params)
           {
               if (inArray(btn.icon, ["print.png", "email.png", "fa-print", "fa-table"]))
               {
-                hamburger = true;
-                btn.xclass = 'hidden byhamburger';
+                if (!hamburger) {
+                    hamburger = true;
+                    // btn.xclass = 'hidden byHamburger';
+                }
+                hambuttons.push(i);
+              } else {
+                CreateButton(btn.title, btn.action, btn, params );
               }
-              CreateButton(btn.title, btn.action, btn, params );
           }
       }
+
       if (hamburger)
       {
-        var btn = { icon: "fa-bars", tooltip: L("lcl_more"), action: "$('li.byhamburger').toggleClass('hidden').length" }
+        var btn = { icon: "fa-bars", tooltip: L("lcl_more"), action: "$('li.byHamburger').toggleClass('hidden').length" }
         CreateButton(null, btn.action, btn, params );
       }
  %>
@@ -156,12 +163,25 @@ function IFRAMER_HEADER(titel, buttons, params)
     %><div class="fcltframeheader <%= iscoll && !(params && params.nocollaps) ? ' collapsed' : ''%>" <%=params && params.nocollaps? "" : "onclick=\"$(this).next().toggle();$(this).toggleClass('collapsed');FcltMgr.resized(window)\""%>>
         <span style="float:left"><nobr><%=titel %>&nbsp;<span id="iframerextratitle"></span></nobr></span><%
         if (buttons) {
-            %><div class="buttoncontainer" style="float:right"><%
+            %><div class="buttoncontainer" style="float:right;"><%
             CreateButtons(buttons, { showIcons: true })
             %></div><%
         }
     %></div>
-<%
+
+    <%
+
+      if (hamburger) {
+
+        // z-index floating header = 10, so z-index hamburger = 11
+        Response.write("<div id=\"buttons\" class=\"hambdropdown\" style=\"display: block; position: absolute; z-index: 11; right: 0px;\"><ul onclick=\"FcltMgr.stopPropagation(event);\">");
+        for (x in hambuttons) {
+            btn = buttons[hambuttons[x]];
+            btn.xclass = 'hidden byHamburger';
+            CreateButton(btn.title, btn.action, btn, { showIcons: true, vertical: true });
+        }
+        Response.write("</ul></div>");
+      }
 }
 
 // Bij leeg label krijg je helemaal geen <td>'s