My latest project involves a comparison script using Groovyscript to analyze two distinct files. Embedded within the Groovyscript is HTML code that utilizes CSS and potentially Bootstrap of any version.
I have successfully implemented counters with a title at the top of my HTML page, but unfortunately, they are not dynamic or responsive. Adjusting the width and height of the page causes layout issues. I've heard that Bootstrap/CSS can assist in reorganizing the page when the resolution changes. Thus, I decided to use cards. While this improved the situation, the layout still gets distorted when resizing the page.
<html lang='en'>
<head>
<!-- Required meta tags -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<!-- Bootstrap CSS -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' integrity='sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ' crossorigin='anonymous'>
<title>GroovyCardsBootstrap</title>
<style>
h{color:#86BEB6; font-size:50px;}
* {box-sizing: border-box;}
body {font-family: Arial,Helvetica, sans-serif;}
.row {margin: 0 -3px;}
.row:after {
content: '';display: table;clear: both;
}
.card {
display:inline-block;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
}
.card-group [class*='col-']{
float:none;}
</style>
</head>
<body>
<div class='card-group'>
<div class='card'>
<div class='card-block'>
<img class='card-text' src='FODBosa.png' alt='FodBosa.png' width='400' height='150' />
</div>
</div>
<div class='card' style='flex-grow: 3'>
<div class='card-block'>
<span class='card-text' style='padding:0 5px'>Text 2</span><span class='card-text' style='padding:0 5px'>More text 2</span><span class='card-text' style='padding:0 5px'>More text 2</span>
</div>
</div>
</div>
<h>Test results comparison KBO with PDC</h>
<div style = 'border:1px solid black; border-collapse: collapse;'>
<p>Automated tests are executed in ReadyAPI. These are the results of the comparison on the responses between KBO and PDC</p>
</div>"outputFile.append "<div class='card-group'><div class='card' style='background-color:black; color:white;'><div class='card-block'> <h3>Not found in KBO</h3> <p>" +notInPDCCounter+ "</p></div></div>"
outputFile.append "<div class='card-group'><div class='card' style='background-color:#DA4747;'><div class='card-block'> <h3>Failed - PDC not same as KBO</h3> <p>" +hasDifferences+ "</p></div> </div>"
outputFile.append "<div class='card-group'><div class='card' style='background-color:#ff8080;'><div class='card-block'> <h3>Total lines read</h3> <p>"+ failed + "</p></div></div>"
outputFile.append "<div class='card-group'><div class='card' style='background-color:#52DA69;'><div class='card-block'> <h3>Passed - Info is in PDC</h3> <p>" +(totalTotal-failed)+ "</p></div> </div> </div>"The organized boxes generated by outputFile.append appear below the opening paragraph on the HTML page (due to including the code for visibility). My goal is to display these results inside the cards created initially (located next to <img>). How can I integrate the dynamically generated counter results from the Groovy script into the right card at the top? Any advice would be greatly appreciated.