[Mobile] Create Menu

Create menu text has ellipsis attribute now, so if text is cut off it will have a '...' appended to it. Also added comments to mixins.
2024-12-29 17:38:53 +00:00 · 2015-07-17 10:28:19 -07:00 · 2015-07-17 10:28:19 -07:00 · 0d7387080d
commit 0d7387080d
parent 1e2e20b145
5 changed files with 67 additions and 61 deletions
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@ -37,10 +37,8 @@
                                            ng-model="treeModel">
                        </mct-representation>
                    </div>
-                     <div class='createBtnPos'>
                        <mct-representation key="'create-button'" mct-object="navigatedObject">
                        </mct-representation>
-                    </div>                
                </div>
                
                <mct-splitter class="mobile-splitter"></mct-splitter>
--- a/platform/commonUI/browse/res/templates/create/create-button.html
+++ b/platform/commonUI/browse/res/templates/create/create-button.html
@ -23,7 +23,7 @@
    <div class="btn btn-menu create-btn major" ng-click="createController.toggle()">
 	    Create
    </div>
-    <div class="menu dropdown super-menu" ng-show="createController.isActive()">
+    <div class="menu dropdown super-menu mobile-super-menu" ng-show="createController.isActive()">
        <mct-representation mct-object="domainObject" key="'create-menu'">
        </mct-representation>
    </div>
--- a/platform/commonUI/browse/res/templates/create/create-menu.html
+++ b/platform/commonUI/browse/res/templates/create/create-menu.html
@ -20,11 +20,11 @@
 at runtime from the About dialog for additional information.
 -->
 <div class="contents" ng-controller="CreateMenuController">
-    <div class="pane left menu-items pane-special left">
+    <div class="pane left menu-items mobile-super-menu">
        <ul>

            <li ng-repeat="createAction in createActions">
-                <a
+                <a class="mobile-super-menu-text"
                   ng-click="createAction.perform()"
                   ng-mouseover="representation.activeMetadata = createAction.getMetadata()"
                   ng-mouseleave="representation.activeMetadata = undefined">
@ -37,7 +37,7 @@

        </ul>
    </div>
-    <div class="pane right menu-item-description">
+    <div class="pane right menu-item-description mobile-right-create">
        <div class="desc-area ui-symbol icon type-icon">
            {{representation.activeMetadata.glyph}}
        </div>
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@ -762,13 +762,11 @@ mct-container {
    transition-duration: 0.2s;
    transition-timing-function: ease;
    width: 0px !important;
-    right: auto !important; }
-    /* line 54, ../sass/mobile/_layout.scss */
-    .browse-hidetree .pane-special.left .createBtnPos {
-      overflow-y: hidden;
-      overflow-x: hidden; } }
+    right: auto !important;
+    overflow-y: hidden;
+    overflow-x: hidden; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 61, ../sass/mobile/_layout.scss */
+  /* line 58, ../sass/mobile/_layout.scss */
  .browse-hidetree .pane-special.right {
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
@ -779,7 +777,7 @@ mct-container {
    left: 0px !important; } }

@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 71, ../sass/mobile/_layout.scss */
+  /* line 68, ../sass/mobile/_layout.scss */
  .browse-showtree .pane-special.left {
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
@ -787,30 +785,27 @@ mct-container {
    transition-duration: 0.2s;
    transition-timing-function: ease;
    display: block !important;
-    right: auto !important; }
-    /* line 77, ../sass/mobile/_layout.scss */
-    .browse-showtree .pane-special.left .createBtnPos {
-      height: inherit;
-      overflow-y: hidden;
-      overflow-x: hidden; } }
+    right: auto !important;
+    overflow-y: hidden;
+    overflow-x: hidden; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 71, ../sass/mobile/_layout.scss */
+  /* line 68, ../sass/mobile/_layout.scss */
  .browse-showtree .pane-special.left {
    width: 80% !important; } }
@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 71, ../sass/mobile/_layout.scss */
+  /* line 68, ../sass/mobile/_layout.scss */
  .browse-showtree .pane-special.left {
    width: 30% !important; } }
@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 71, ../sass/mobile/_layout.scss */
+  /* line 68, ../sass/mobile/_layout.scss */
  .browse-showtree .pane-special.left {
    width: 35% !important; } }
@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 71, ../sass/mobile/_layout.scss */
+  /* line 68, ../sass/mobile/_layout.scss */
  .browse-showtree .pane-special.left {
    width: 25% !important; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 96, ../sass/mobile/_layout.scss */
+  /* line 89, ../sass/mobile/_layout.scss */
  .browse-showtree .pane-special.right {
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
@ -819,29 +814,29 @@ mct-container {
    transition-timing-function: ease;
    width: auto !important; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 96, ../sass/mobile/_layout.scss */
+  /* line 89, ../sass/mobile/_layout.scss */
  .browse-showtree .pane-special.right {
    left: 80% !important; } }
@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 96, ../sass/mobile/_layout.scss */
+  /* line 89, ../sass/mobile/_layout.scss */
  .browse-showtree .pane-special.right {
    left: 30% !important; } }
@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 96, ../sass/mobile/_layout.scss */
+  /* line 89, ../sass/mobile/_layout.scss */
  .browse-showtree .pane-special.right {
    left: 35% !important; } }
@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 96, ../sass/mobile/_layout.scss */
+  /* line 89, ../sass/mobile/_layout.scss */
  .browse-showtree .pane-special.right {
    left: 25% !important; } }

@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 116, ../sass/mobile/_layout.scss */
+  /* line 109, ../sass/mobile/_layout.scss */
  .mobile-splitter {
    display: none; } }

@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 124, ../sass/mobile/_layout.scss */
+  /* line 117, ../sass/mobile/_layout.scss */
  .button-pos {
    position: absolute;
    -moz-transition-duration: 0.2s;
@ -851,40 +846,50 @@ mct-container {
    transition-timing-function: ease; } }

@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 131, ../sass/mobile/_layout.scss */
+  /* line 124, ../sass/mobile/_layout.scss */
  .object-header-mobile {
    position: relative;
    left: 30px; } }

-/* line 138, ../sass/mobile/_layout.scss */
+/* line 131, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
  display: inline-block; }
  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 138, ../sass/mobile/_layout.scss */
+    /* line 131, ../sass/mobile/_layout.scss */
    .mobile-menu-icon {
      font-size: 125%; } }
  @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 138, ../sass/mobile/_layout.scss */
+    /* line 131, ../sass/mobile/_layout.scss */
    .mobile-menu-icon {
      font-size: 175%; } }
  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 138, ../sass/mobile/_layout.scss */
+    /* line 131, ../sass/mobile/_layout.scss */
    .mobile-menu-icon {
      display: none; } }

@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 152, ../sass/mobile/_layout.scss */
+  /* line 144, ../sass/mobile/_layout.scss */
+  .mobile-super-menu {
+    width: 100% !important; } }
+
+/* line 150, ../sass/mobile/_layout.scss */
+.mobile-super-menu-text {
+  overflow-x: hidden !important;
+  text-overflow: ellipsis !important; }
+
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 155, ../sass/mobile/_layout.scss */
+  .mobile-right-create {
+    width: 0px !important;
+    padding: 0px !important; } }
+
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 162, ../sass/mobile/_layout.scss */
  .mobile-hide {
    display: none; } }

-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 158, ../sass/mobile/_layout.scss */
-  .mobile-text-hide {
-    width: 0px;
-    overflow: hidden; } }
-
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 165, ../sass/mobile/_layout.scss */
+  /* line 168, ../sass/mobile/_layout.scss */
  .phone-hide {
    display: none; } }

--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@ -50,11 +50,8 @@
            @include slMenuTransitions;
            width: 0px !important;
            right: auto !important;
-            
-            .createBtnPos {
-                overflow-y: hidden;
-                overflow-x: hidden;
-            }            
+            overflow-y: hidden;
+            overflow-x: hidden;       
        }
    }

@ -73,12 +70,8 @@
            @include slMenuTransitions;
            display: block !important;
            right: auto !important;
-            
-            .createBtnPos {
-                height: inherit;
-                overflow-y: hidden;
-                overflow-x: hidden;
-            }
+            overflow-y: hidden;
+            overflow-x: hidden;
        }
        @include phonePortrait {
            width: $phoneMenuSizePortrait !important;
@ -148,6 +141,23 @@
    }       
 }

+.mobile-super-menu {
+    @include phoneandtablet {
+        width: 100% !important;
+    }
+}
+
+.mobile-super-menu-text {
+    overflow-x: hidden !important;
+    text-overflow: ellipsis !important;
+}
+
+.mobile-right-create {
+    @include phoneandtablet {
+        width: 0px !important;
+        padding: 0px !important;
+    }
+}

 .mobile-hide {
    @include phoneandtablet {
@ -155,13 +165,6 @@
    }
 }

-.mobile-text-hide {
-    @include phoneandtablet {
-        width: 0px;
-        overflow:hidden;
-    }
-}
-
 .phone-hide {
    @include phone {
        display: none;