Positions: More UI enhancements

platforms/common/css-compiled/g-admin.css

@@ -3498,6 +3498,7 @@ i.fa-gantry, i.fa-gantry-logo, i.fa-gantry-symbol, i.fa-gantry-logo-both, i.fa-g
 #g5-container #positions .position-container ul {
   position: relative;
   min-height: 95%;
+  font-size: 1rem;
 }
 #g5-container #positions .position-container ul:empty:after {
   content: "Drop positions here...";
@@ -3557,6 +3558,12 @@ i.fa-gantry, i.fa-gantry-logo, i.fa-gantry-symbol, i.fa-gantry-logo-both, i.fa-g
   justify-content: flex-start;
   -ms-flex-pack: start;
 }
+#g5-container #positions .position-container li:hover .item-settings {
+  opacity: 1;
+  -webkit-transition: opacity 0.2s;
+  -moz-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
 #g5-container #positions .position-container .position-dragging.sortable-fallback {
   background: #fff;
 }
@@ -3564,19 +3571,26 @@ i.fa-gantry, i.fa-gantry-logo, i.fa-gantry-symbol, i.fa-gantry-logo-both, i.fa-g
   margin: 0.625rem 1.25rem;
 }
 #g5-container #positions .item-reorder, #g5-container #positions .item-settings, #g5-container #positions .title-status {
-  color: #bbb;
+  color: #333;
   text-align: left;
   line-height: 1.2rem;
 }
 #g5-container #positions .item-reorder:hover, #g5-container #positions .item-settings:hover, #g5-container #positions .title-status:hover {
   color: #111;
 }
+#g5-container #positions .title-status {
+  margin-right: 0.469rem;
+}
 #g5-container #positions .title-status, #g5-container #positions .title-status:hover {
   color: inherit;
 }
 #g5-container #positions .item-settings {
   cursor: pointer;
   text-align: right;
+  opacity: 0;
+  -webkit-transition: opacity 0.2s;
+  -moz-transition: opacity 0.2s;
+  transition: opacity 0.2s;
 }
 
 #g5-container [data-mode-indicator="production"] {

platforms/common/scss/admin/_positions.scss

@@ -28,6 +28,7 @@
             ul {
                 position: relative;
                 min-height: 95%;
+                font-size: 1rem;
 
                 &:empty:after {
                     content: "Drop positions here...";
@@ -52,6 +53,13 @@
                 @include display(flex);
                 @include flex-direction(row);
                 @include justify-content(flex-start);
+
+                &:hover {
+                    .item-settings {
+                        opacity: 1;
+                        @include transition(opacity 0.2s);
+                    }
+                }
             }
 
             .position-dragging {
@@ -66,7 +74,7 @@
         }
 
         .item-reorder, .item-settings, .title-status {
-            color: #bbb;
+            color: #333;
             text-align: left;
             line-height: 1.2rem;
 
@@ -75,6 +83,10 @@
             }
         }
 
+        .title-status {
+            margin-right: $content-padding / 2;
+        }
+
         .title-status, .title-status:hover {
             color: inherit;
         }
@@ -82,6 +94,8 @@
         .item-settings {
             cursor: pointer;
             text-align: right;
+            opacity: 0;
+            @include transition(opacity 0.2s);
         }
     }
 }

platforms/common/templates/layouts/position.html.twig

@@ -44,7 +44,7 @@
                 <div class="title size-90">
                     <div>
                         <span class="title-status" title="{{ status.label }}" data-tip="{{ status.label }}" aria-label="{{ status.label }}">{{ status.icon|raw }}</span>
-                        {{ module.title|default(module.name) }} ({{ module.subtype }})
+                        <span class="title-name" title="Type: {{ module.subtype }}">{{ module.title|default(module.name) }}</span>
                     </div>
                 </div>
                 <i class="fa item-settings fa-cog size-10"></i>