Question

For my project I've created a comparison script with Groovyscript to compare 2 different files. Within the Groovyscript I've added HTML that uses CSS and eventually Bootstrap(whatever version).

I've already managed to have my counters with a title on top of my HTML page, but it's not dynamic/responding. When you change the width and height of the page the layout is smashed. I've read that Bootstrap/CSS can help with re-arranging the page when the resolution changes. Therefore I was attracted to use cards. That worked fine, but still when the page becomes bigger or smaller the layout is off.

    <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;}
        /* Float 4 columns side by side 
        .column4 {float: left;width: 15%;padding: 0 20px;position:absolute; top:10px; right:5px;}
        .column3 {float: left;width: 15%;padding: 0 20px;position:absolute; top:10px; right:205px;}
        .column2 {float: left;width: 15%;padding: 0 20px;position:absolute; top:10px; right:405px;}
        .column1 {float: left;width: 15%;padding: 0 20px;position:absolute; top:10px; right:605px;}*/
        /* Remove extra left and right margins, due to padding */
        .row {margin: 0 -3px;}
        /* Clear floats after the columns */
        .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>"

After this, the Groovyscript is running ending with these lines to write:

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 outputFile.append is giving me beautiful placed boxes under my paragraph at the beginning of the html page (I needed to insert the code into HTML for you to be able to see it, so the outcome is not ok) but I actually would like those answers in the card itself that I've created in the beginning (see the one next to <img>.) How could I put the result of the counters, that are generated with the groovy script in the middle of all this, and thus only giving result at the end, in the top right card please? Thanks in advance.

Answer 1

Not sure if I got this right:

You are trying to display 4 cards in the top right corner of the page, side by side? And you would like for these cards to be responsive at different vw?

I am not familiar with Groovy, but if you can wrap your cards into a div (or target the div through id or such), then you could use CSS Grid (for responsiveness) to create a 4-column grid and set the width of each column so they go in a new row as the width gets smaller.

Hope that helped!

Answer 2

我已经发现了Erika Ravazollo的技巧：

我已将此JQuery脚本放在页面底部（当然在正文中！）

outputFile.append "<script> \$('#source').appendTo('#destination');</script>"

显然，对于Groovyscript，您需要使用反斜杠省略美元符号。我虽然不知道。在为顶部定义卡片的部分中，插入目的地：

        <div class='card' style='flex-grow: 3' id='destination'></div>

我删除了span标签

在定义卡片的部分中，我将其添加为来源：

<div class='card-block' id='source'>....</div>

我已经为自己修剪了一些盒子，就像在我给您的示例中，您会在一个盒子中看到一个盒子。 :-)

How can I put the result of the counter into the cards on top of an html page?

2 个答案: