IOT-354 add styling to datatarget overview

Author: Jeppe Elkjær Jørgensen

src/app/views/datatarget/datatarget/datatarget.component.html

@@ -3,23 +3,37 @@
     <div class="px-5">
       <div class="application-component">
         <div class="col-12 mb-4 py-3 bottom-separator">
-          <div class="col-12 col-sm-4">
-            <h4>{{ 'DATATARGET.DESCRIPTION' | translate }}</h4>
+          <div class="col-12 py-4">
+            <div class="col-12 col-sm-12">
+              <h4>{{ 'DATATARGET.NAME' | translate }}</h4>
+            </div>
+            <div class="col-12 pt-2 col-sm-8">
+              <p>{{datatarget.name}}</p>
+            </div>
           </div>
-          <div class="col-12 pt-2 col-sm-8">
-            <p>{{datatarget.name}}</p>
+          <div class="col-12 py-4">
+            <div class="col-12 col-sm-12">
+              <h4>{{ 'DATATARGET.URL' | translate }}</h4>
+            </div>
+            <div class="col-12 pt-2 col-sm-8">
+              <p>{{datatarget.url}}</p>              
+            </div>
           </div>
-          <div class="col-12 pt-2 col-sm-8">
-            <p>{{datatarget.name}}</p>
+          <div class="col-12 py-4">
+            <div class="col-12 col-sm-12">
+              <h4>{{ 'DATATARGET.TIMEOUT' | translate }}</h4>
+            </div>
+            <div class="col-12 col-sm-12">
+              <p>{{datatarget.timeout}}</p>
+            </div>
           </div>
-          <div class="col-12 pt-2 col-sm-8">
-            <p>{{datatarget.url}}</p>
-          </div>
-          <div class="col-12 pt-2 col-sm-8">
-            <p>{{datatarget.timeout}}</p>
-          </div>
-          <div class="col-12 pt-2 col-sm-8">
-            <p>{{datatarget.type}}</p>
+          <div class="col-12 py-4">
+            <div class="col-12 col-sm-12">
+              <h4>{{ 'DATATARGET.TYPE' | translate }}</h4>
+            </div>
+            <div class="col-12 pt-2 col-sm-8">
+              <p>{{datatarget.type}}</p>              
+            </div>
           </div>
         </div>
       </div>

src/assets/i18n/da.json

@@ -45,7 +45,11 @@
   },
   "DATATARGET": {
     "SAVE": "Gem datatarget",
-    "DESCRIPTION": "Beskrivelse"
+    "DESCRIPTION": "Beskrivelse",
+    "URL": "URL",
+    "TIMEOUT": "Timeout",	
+    "TYPE": "Type",
+    "NAME": "Datatarget navn"
   },
   "APPLICATION-TABLE": {
     "NAME": "NAVN",