Changeset 345 for Dev

Timestamp:

06/21/12 14:31:38 (13 years ago)

Author:

tjcschipper

Message:

• Fixed Index Menu layout and overlays.

Location:

Dev/branches/rest-dojo-ui/client

Files:

• mMenu.html (modified) (2 diffs)
• rft/css/layout.css (modified) (5 diffs)
• rft/css/rftButtons.css (modified) (5 diffs)

Dev/branches/rest-dojo-ui/client/mMenu.html

@@ -61 +61 @@
             <!-- Main content window -->
             <div class="content" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
-                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
+                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 600px;">
                     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
                         <h2>
@@ -72 +72 @@
 
                         <div class="rftIndexMenuBlock">
+                            <div class="rftIndexMenuMask">
+                                <span class="rftIcon rftIconSession"></span><span class="label">Sessions</span>
+                            </div>
                             <div data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'green twoHeight', iconClass: 'rftIcon rftIconPlus'">Create and edit</div>
                             <div data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'green twoHeight', iconClass: 'rftIcon rftIconForward'">Facilitate</div>
                         </div>
-                        
-
 
                         <div class="rftIndexMenuBlock">
+                            <div class="rftIndexMenuMask">
+                                <span class="rftIcon rftIconInspect"></span><span class="label">Content</span>
+                            </div>
                             <div data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'blue oneHeight', iconClass: 'rftIcon rftIconSurvey'">Surveys</div>
                             <div data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'orange oneHeight', iconClass: 'rftIcon rftIconQuestion'">Questions</div>
                             <div data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'purple oneHeight', iconClass: 'rftIcon rftIconApplication'">Applications</div>
                             <div data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'red oneHeight', iconClass: 'rftIcon rftIconDashboard'">Dashboards</div>
+
                         </div>
-                        
-
 
                         <div class="rftIndexMenuBlock">
-
+                            <div data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'blue fourHeight', iconClass: 'rftIcon rftIconGameData'">Results</div>
                         </div>
-                        
                     </div>
-
                 </div>
             </div>

Dev/branches/rest-dojo-ui/client/rft/css/layout.css

@@ -172 +172 @@
     width: 190px;
 }
-
 .claro .dijitTab.dijitTabHover {
     color: #ffffff;
@@ -196 +195 @@
     -o-transition: all 0.1s;
 }
-
 .claro .dijitTabContainer.blue .dijitTab.dijitTabChecked {
     background-color: #0072bc;
@@ -212 +210 @@
     background-color: #3aa605;
 }
-
 .claro .dijitTabContainer.blue .dijitTab.dijitTabActive {
     color: #0072bc;
@@ -229 +226 @@
 }
 
-
 /* Index Menu */
-.rftIndexMenuBlock {
+.claro .rftIndexMenuBlock {
     width: 400px;
     height: 400px;
@@ -237 +233 @@
     float: left;
     margin: 16px;
-    padding: 0;
-}
-
-.rftIndexMenuBlockMask {
+    overflow: hidden;
+}
+.claro .rftIndexMenuMask {
     height: 400px;
     width: 400px;
-    margin: 0 0 0 -400px;
-    background: #ff00ff;
-    color: #999999;
-    visibility: visible;
-    float: left;
-}
-.rftIndexMenuBlockMask:hover {
-    visibility: hidden;
-}
+    background: #444444;
+    color: #999999;
+    margin-top: 0;
+}
+.claro .rftIndexMenuBlock:hover .rftIndexMenuMask {
+    margin-top: -400px;
+}
+.claro .rftIndexMenuMask .label {
+    color: #999999;
+    font-size: 32px;
+    line-height: 28px;
+    height: 32px;
+    margin: 184px 0;
+    float: left;
+}
+.claro .rftIndexMenuMask .rftIcon {
+    width: 32px;
+    height: 32px;
+    background-image: url('images/icons/rftIcons32.png');
+    margin: 184px 8px 0 8px;
+    float: left;
+}
+

Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css

@@ -216 +216 @@
     font-weight: normal;
 }
+.claro .rftIndexMenuButton .dijitButtonText {
+    padding-bottom: 10px;
+    line-height: 20px;
+    transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    -webkit-transition: all 0.3s;
+    -o-transition: all 0.3s;
+}
+.claro .rftIndexMenuButton .dijitButtonContents {
+    vertical-align: top;
+}
 .claro .rftIndexMenuButton .rftIcon {
     height: 32px;
@@ -222 +233 @@
     padding: 0;
     background-image: url('images/icons/rftIcons32.png');
+    vertical-align: top;
 }
 .claro .oneHeight {
@@ -242 +254 @@
 }
 .claro .rftIndexMenuButton.rftIndexMenuButtonHover,
-.claro .rftIndexMenuButton.rftIndexMenuButtonHover .rftButtonText{
+.claro .rftIndexMenuButton.rftIndexMenuButtonHover .dijitButtonText {
+    color: #ffffff;
     transition: all 0.1s;
     -moz-transition: all 0.1s;
@@ -248 +261 @@
     -o-transition: all 0.1s;
 }
-.claro .rftIndexMenuButton.rftIndexMenuButtonHover .dijitButtonText {
-    color: #ffffff;
-}
 .claro .rftIndexMenuButton.rftIndexMenuButtonHover.blue {
     background: #0072bc;
@@ -266 +276 @@
     background: #ff5b12;
 }
+.claro .rftIndexMenuButton.rftIndexMenuButtonActive {
+    color: #000000;
+    background: #ffffff;
+    transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    -webkit-transition: all 0.3s;
+    -o-transition: all 0.3s;
+}
+.claro .rftIndexMenuButton.rftIndexMenuButtonActive .rftIcon {
+    background-image: url('images/icons/rftIcons32b.png');
+}
+