Merge pull request #42 from lehors/update-class-names

Update class names - fix layout

web/modules/mof/css/layout/model_list.css

@@ -15,6 +15,10 @@ table .model-updated {
   width: 145px;
 }
 
+table th.badge {
+  width: 305px;
+}
+
 table td.badge svg {
   display: block;
   margin: 6px 0;

web/modules/mof/src/ModelListBuilder.php

@@ -107,7 +107,10 @@ public function buildHeader(): array {
         'specifier' => 'changed',
         'class' => ['model-updated'],
       ],
-      'badge' => $this->t('Badge'),
+      'badge' => [
+        'data' => $this->t('Badge'),
+        'class' => ['badge'],
+      ],
     ];
   }
 

web/modules/mof/templates/badge.html.twig

@@ -1,12 +1,12 @@
 <svg xmlns="http://www.w3.org/2000/svg" height="20">
   <linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient>
   <rect rx="3" width="250" height="20" fill="#555"/>
-  <rect rx="3" x="150" width="115" height="20" fill="{{ background_color }}"/>
+  <rect rx="3" x="180" width="115" height="20" fill="{{ background_color }}"/>
   <rect rx="3" height="20" fill="url(#b)"/>
   <g text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
-    <text x="75" y="15" fill="#000" fill-opacity=".8">{{ label }}</text>
-    <text x="75" y="14" fill="#fff">{{ label }}</text>
-    <text x="210" y="15" fill="#fff" fill-opacity=".3">{{ status }}</text>
-    <text x="210" y="14" fill="{{ text_color }}">{{ status }}</text>
+    <text x="90" y="15" fill="#000" fill-opacity=".8">{{ label }}</text>
+    <text x="90" y="14" fill="#fff">{{ label }}</text>
+    <text x="238" y="15" fill="#fff" fill-opacity=".3">{{ status }}</text>
+    <text x="238" y="14" fill="{{ text_color }}">{{ status }}</text>
   </g>
 </svg>