#8 Formatting verification message text and preparing formatting of buttons

dmnverifierfrontend/src/main/resources/META-INF/resources/css/stylesheets.css

@@ -208,22 +208,65 @@ span.select2 {
 }
 
 .verifier-type-description > p {
-  max-width: 400px;
+  max-width: 800px;
+  text-align: justify;
+}
+
+.verification-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: stretch;
+  margin: 10px;
+  border-top: #0d82b7 2px;
+  border-top-style: ridge;
+}
+
+.dmn-verification-icon {
+  width: 32px;
+  height: 30px;
+  display: inline-block;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center center;
 }
 
 .dmn-ERROR {
-  list-style-image: url("img/ERROR.png");
+  background-image: url("img/ERROR.png");
 }
 
 .dmn-WARNING {
-  list-style-image: url("img/WARNING.png");
+  background-image: url("img/WARNING.png");
 }
 
 .dmn-FATAL_ERROR {
-  list-style-image: url("img/FATAL_ERROR.png");
+  background-image: url("img/FATAL_ERROR.png");
 }
 
 .dmn-INFO {
-  list-style-image: url("img/INFO.png");
+  background-image: url("img/INFO.png");
+}
+
+.verification-message {
+  padding-top: 8px;
+  padding-left: 8px;
+  width: 100%;
+  flex-shrink: 1;
+  flex-basis: 65%;
+}
+
+.verification-container-fix-buttons {
+  float: right;
+  padding-top: 8px;
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  justify-content: space-between;
+  flex-wrap: wrap;
 }
 
+.verification-fix-button {
+  height: 25px;
+  min-width: 100px;
+  margin: 2px 2px 2px 10px;
+  background: white;
+}

dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerifier.js

@@ -288,10 +288,8 @@ function renderVerifier(verifier) {
 
   // Add entries if min 1 result
   if (verifier.entries.length > 0) {
-    let $entryList = $(`<ul>`);
-    $verifierEntries.append($entryList);
     for (let i = 0; i < verifier.entries.length; i++) {
-      $entryList.append(renderVerificationEntry(verifier.entries[i]));
+      $verifierEntries.append(renderVerificationEntry(verifier.entries[i]));
     }
   }
   $verifierContent.append($verifierType);
@@ -305,17 +303,25 @@ function renderVerifier(verifier) {
  * @Type VerificationEntry
  */
 function renderVerificationEntry(verificationEntry) {
-  let $li = $(`
-    <li class="dmn-${verificationEntry.verificationClassification}">
-     </li>
-  `);
-  $li.append($(`
+  let $entryContainer = $(`<div class="verification-container"></div>`);
+  $entryContainer.append($(`
+      <span class="dmn-verification-icon dmn-${verificationEntry.verificationClassification}"/>
+  `));
+  $entryContainer.append($(`
       <div class="verification-message">${verificationEntry.message}</div>
   `));
-  let fixButtons = $(`<div class="verification-container-fix-buttons"></div>`);
-  fixButtons.append($(`<button class="clickable">Show</button>`));
-  $li.append(fixButtons); // TODO: render buttons
-  return $li;
+  // "dmn-${verificationEntry.verificationClassification}"
+  let $fixButtons = $(`<div class="verification-container-fix-buttons"></div>`);
+
+  /*
+  $fixButtons.append(
+      $(`<button class="verification-fix-button clickable">Show</button>`));
+  $fixButtons.append(
+      $(`<button class="verification-fix-button clickable">Fix</button>`));
+  $fixButtons.append(
+      $(`<button class="verification-fix-button clickable">Fix</button>`)); */
+  $entryContainer.append($fixButtons); // TODO: render buttons
+  return $entryContainer;
 }
 
 /**