studio - problem speed editor: tweaking presentation of problem sub menu further

cms/static/sass/_unit.scss

@@ -56,6 +56,15 @@
       z-index: 10;
       margin: 20px 40px;
 
+
+      .title {
+        margin: 0 0 15px 0;
+        color: $mediumGrey;
+
+        .value {
+        }
+      }
+
       &.new-component-item {
         padding: 20px;
         border: none;
@@ -116,7 +125,7 @@
           a {
             position: relative;            
             border: 1px solid $darkGreen;
-            background: $green;
+            background: tint($green,20%);
             color: #fff;            
             @include transition(background-color .15s);
 
@@ -129,23 +138,71 @@
         .new-component-template {
           margin-bottom: 20px;
 
-          li:first-child {
+          li:last-child {
             a {
-              border-radius: 3px 3px 0 0;
+              border-radius: 0 0 3px 3px;
+              border-bottom: 1px solid $darkGreen;
             }
           }
 
-          li:last-child {
+          li:nth-child(2) {
             a {
-              border-radius: 0 0 3px 3px;
+              border-radius: 3px 3px 0 0;
             }
           }
 
           a {
+            @include clearfix();
             display: block;
             padding: 7px 20px;
             border-bottom: none;
             font-weight: 300;
+
+            .name {
+              float: left;
+
+              .ss-icon {
+                @include transition(opacity .15s);
+                position: relative;
+                top: 1px;
+                font-size: 13px;
+                margin-right: 5px;
+                opacity: 0.5;
+              }
+            }
+
+            .editor-indicator {
+              @include transition(opacity .15s);
+              float: right;
+              position: relative;
+              top: 3px;
+              font-size: 12px;
+              opacity: 0.1;
+            }
+
+            &:hover {
+
+              .ss-icon {
+                opacity: 1.0;
+              }
+
+              .editor-indicator {
+                opacity: 1.0;
+              }
+            }
+          }
+
+          // specific editor types 
+          .empty {
+            @include box-shadow(0 1px 3px rgba(0,0,0,0.2));
+            margin-bottom: 10px;
+
+            a {
+              border-bottom: 1px solid $darkGreen;
+              border-radius: 3px;
+              font-weight: 500;
+              background: $green;
+            }
           }
         }
 

cms/templates/unit.html

@@ -14,7 +14,6 @@
     });
   
     (function() {
-      
       $('.new-component-template').each(function(){
           $emptyEditor = $(this).find('.empty');
           $(this).prepend($emptyEditor);
@@ -158,27 +157,32 @@
               </div>
                 % for type, templates in sorted(component_templates.items()):
                 <div class="new-component-templates new-component-${type}">
+                    <h3 class="title">Select <span class="type">${type}</span> component type:</h3>
+
                     <ul class="new-component-template">
                         % for name, location, has_markdown, is_empty in templates:
 
                           % if is_empty:
                             <li class="editor-md empty">
                               <a href="#" data-location="${location}">
-                                <span class="name">${name}</span>
+                                <span class="name"><i class="ss-icon ss-symbolicons-block">&#xE714;</i> ${name}</span>
+                                <span class="editor-indicator">Simple <span class="sr">Editor</span></span>
                               </a>
                             </li>
 
                           % elif has_markdown:
                             <li class="editor-md">
                               <a href="#" data-location="${location}">
-                                <span class="name">${name}</span>
+                                <span class="name"><i class="ss-icon ss-symbolicons-block">&#xE714;</i> ${name}</span>
+                                <span class="editor-indicator">Simple <span class="sr">Editor</span></span>
                               </a>
                             </li>
 
                           % else:
                             <li class="editor-manual">
                               <a href="#" data-location="${location}">
-                                <span class="name">${name}</span>
+                                <span class="name"><i class="ss-icon ss-symbolicons-block">&#x1F527;</i> ${name}</span>
+                                <span class="editor-indicator">Advanced <span class="sr">Editor</span></span>
                               </a>
                             </li>
                           % endif