diff --git a/dmnverifierfrontend/src/main/resources/META-INF/resources/css/stylesheets.css b/dmnverifierfrontend/src/main/resources/META-INF/resources/css/stylesheets.css index c62e741da0fda74cc8f697d579af08f15532c8ea..fc98b25c009326c533f127b6e6e7b50a98a84d69 100644 --- a/dmnverifierfrontend/src/main/resources/META-INF/resources/css/stylesheets.css +++ b/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; +} diff --git a/dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerifier.js b/dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerifier.js index 6083706133aff2b5f1551c3587da5473d82cec9b..691014e0f6a8e9c4a9a9f9122749cf278207a607 100644 --- a/dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerifier.js +++ b/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; } /**