[Frontend] Tweaks in Inspector

open #90
Colors, spacing, properties layout mods;
Checked in mobile and snow theme;

platform/commonUI/general/res/sass/_inspector.scss

@@ -27,9 +27,10 @@
 }
 
 .l-inspect {
-    background: pullForward($colorBodyBg, 3%);
     @extend .abs;
+    background: $colorInspectorBg;
     color: $colorInspectorFg;
+    line-height: 140%;
     .pane-header {
         color: pushBack($colorInspectorFg, 20%);
         font-size: 0.8rem;
@@ -42,7 +43,7 @@
     }
 
     ul li {
-        margin-bottom: $interiorMarginLg * 2;
+        margin-bottom: $interiorMarginLg;
     }
     
     em {
@@ -54,29 +55,23 @@
         text-transform: uppercase;
     }
 
-    table tr {
-        td {
-            border: none;
-            border-top: 1px solid $colorInteriorBorder !important;
-            padding: 2px 0;
-            vertical-align: top;
-            &.label {
-                color: $colorInspectorPropName !important;
-                padding-right: $interiorMargin !important;
-                white-space: nowrap;
-            }
-            &.value {
-                word-break: break-all;
-            }
+    .inspector-properties {
+        &:not(.first) {
+            border-top: 1px solid $colorInspectorSectionHeaderBg;
         }
-
-        &:first-child td {
-            border-top: none !important;
+        padding: $interiorMarginSm 0;
+        .label {
+            color: $colorInspectorPropName;
+            text-transform: uppercase;
+        }
+        .value {
+            color: $colorInspectorPropVal;
+            word-break: break-all;
         }
     }
-    
+
     .inspector-location {
-        line-height: 180%;
+        //line-height: 180%;
         .location-item {
             cursor: pointer;
             display: inline-block;
@@ -90,12 +85,14 @@
                 }
             }
         }
-        &:not(.first):before {
+        &:not(.last) .t-object-label .t-title-label:after {
             color: pushBack($colorInspectorFg, 15%);
             content: '\3e';
             display: inline-block;
             font-family: symbolsfont;
-            font-size:7px;
+            font-size: 8px;
+            line-height: inherit;
+            margin-left: $interiorMarginSm;
             width: 4px;
         }
     }

platform/commonUI/general/res/templates/object-inspector.html

@@ -25,18 +25,18 @@
     <ul>
         <li>
             <em>Properties</em>
-            <table>
-                <tr ng-repeat="data in metadata">
-                    <td class="label">{{ data.name }}</td>
-                    <td class="value">{{ data.value }}</td>
-                </tr>
-            </table>
+            <div class="inspector-properties"
+                 ng-repeat="data in metadata"
+                 ng-class="{ first:$index === 0 }">
+                <div class="label">{{ data.name }}</div>
+                <div class="value">{{ data.value }}</div>
+            </div>
         </li>
         <li ng-if="contextutalParents.length > 0">
             <em title="The location of this linked object.">Location</em>
             <span class="inspector-location"
                   ng-repeat="parent in contextutalParents"
-                  ng-class="{ first:$index === 0 }">
+                  ng-class="{ last:($index + 1) === contextualParents.length }">
                 <mct-representation key="'label'"
                                     mct-object="parent"
                                     ng-model="ngModel"
@@ -49,7 +49,7 @@
             <em title="The location of the original object that this was linked from.">Original Location</em>
             <span class="inspector-location"
                   ng-repeat="parent in primaryParents"
-                  ng-class="{ first:$index === 0 }">
+                  ng-class="{ last:($index + 1) === primaryParents.length }">
                 <mct-representation key="'label'"
                                     mct-object="parent"
                                     ng-model="ngModel"