[Front-end] Markup and CSS refinements

Fixes #1729
Internal markup and CSS now sets heights
internally - menu height will now not be smaller
than the list of menu items OR the description
area;

platform/commonUI/edit/res/templates/create/create-button.html

@@ -23,7 +23,7 @@
     <div class="s-menu-button major create-button" ng-click="createController.toggle()">
 		<span class="title-label">Create</span>
     </div>
-    <div class="menu super-menu" ng-show="createController.isActive()">
+    <div class="menu super-menu l-create-menu" ng-show="createController.isActive()">
         <mct-representation mct-object="domainObject" key="'create-menu'">
         </mct-representation>
     </div>

platform/commonUI/edit/res/templates/create/create-menu.html

@@ -33,6 +33,7 @@
     </div>
     <div class="col menu-item-description">
         <div class="desc-area icon {{ representation.activeMetadata.cssClass }}"></div>
+        <div class="w-title-desc">
             <div class="desc-area title">
                 {{representation.activeMetadata.name}}
             </div>
@@ -40,4 +41,5 @@
                 {{representation.activeMetadata.description}}
             </div>
         </div>
+    </div>
 </div>

platform/commonUI/general/res/sass/controls/_menus.scss

@@ -41,7 +41,8 @@
         $d: 10px;
         display: inline-block;
         border: 1px solid rgba($colorBtnFg, 0.2);
-        height: $d; width: $d;
+        height: $d;
+        width: $d;
         vertical-align: middle;
         margin-left: $interiorMarginSm;
         margin-top: -2px;
@@ -171,7 +172,6 @@
     $plw: 50%;
     $prw: 100% - $plw;
     position: absolute;
-    width: 500px;
     .w-menu {
         align-items: stretch;
         display: flex;
@@ -181,7 +181,6 @@
     .col {
         box-sizing: border-box;
         flex: 1 1 auto;
-        max-height: 70vh;
         overflow-x: hidden;
         &.menu-items {
             border-right: 1px solid pullForward($colorMenuBg, 10%);
@@ -197,21 +196,19 @@
             }
         }
         &.menu-item-description {
+            $p: $interiorMargin * 3;
             overflow-y: hidden;
-			padding: $interiorMargin * 5;
+            padding: $p $p 0 $p;
             width: $prw;
+
             .desc-area {
                 &.icon {
                     color: $colorCreateMenuLgIcon;
-                    font-size: 8em;
-                    margin-bottom: $interiorMargin * 3;
                     position: relative;
                     text-align: center;
                 }
                 &.title {
                     color: $colorCreateMenuText;
-                    font-size: 1.2em;
-                    margin-bottom: $interiorMargin * 2;
                 }
                 &.description {
                     color: pushBack($colorCreateMenuText, 20%);
@@ -222,28 +219,63 @@
         }
     }
 
+    .w-title-desc {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden; // Height set in specific menu instances
+    }
+
+    // Specific menu instances
+    &.l-create-menu {
+        width: 500px;
+        .col {
+            max-height: 70vh;
+        }
+        .w-title-desc {
+            height: 190px;
+        }
+        .desc-area {
+            &.icon {
+                font-size: 8em;
+                height: 135px;
+                margin-bottom: $interiorMargin * 3;
+            }
+            &.title {
+                font-size: 1.2em;
+                margin-bottom: $interiorMargin * 2;
+            }
+        }
+    }
+
     &.mini {
         width: 400px;
         .col {
-            height: 320px;
             max-height: 50vh;
             &.menu-items {
                 font-size: 0.8em;
             }
             &.menu-item-description {
-                padding: $interiorMargin * 3;
+                $p: $interiorMargin * 2;
+                padding: $p $p 0 $p;
+            }
+        }
+        .w-title-desc {
+            height: 180px;
+        }
         .desc-area {
             &.icon {
                 font-size: 4em;
+                height: 70px;
+                margin-bottom: $interiorMargin * 3;
             }
             &.title {
                 font-size: 1em;
-                    }
+                margin-bottom: $interiorMargin * 2;
-                }
             }
         }
     }
 }
+
 .context-menu {
     font-size: 0.80rem;
 }
@@ -282,5 +314,6 @@
 }
 
 .menus-up .menu {
-    bottom: $btnStdH; top: auto;
+    bottom: $btnStdH;
+    top: auto;
 }

platform/features/conductor/core/res/templates/mode-selector/mode-menu.html

@@ -34,6 +34,7 @@
     </div>
     <div class="col menu-item-description">
         <div class="desc-area ui-symbol icon type-icon {{ngModel.activeMetadata.cssClass}}"></div>
+        <div class="w-title-desc">
             <div class="desc-area title">
                 {{ngModel.activeMetadata.name}}
             </div>
@@ -41,4 +42,5 @@
                 {{ngModel.activeMetadata.description}}
             </div>
         </div>
+    </div>
 </div>

platform/features/conductor/core/res/templates/mode-selector/mode-selector.html

@@ -24,7 +24,7 @@
          ng-click="modeController.toggle()">
 		<span class="title-label">{{ngModel.selected.name}}</span>
     </div>
-    <div class="menu super-menu mini mode-selector-menu"
+    <div class="menu super-menu mini l-mode-selector-menu"
          ng-show="modeController.isActive()">
         <mct-include key="'mode-menu'"
                      ng-model="ngModel">