Как я могу поместить результат счетчика в карты в верхней части HTML-страницы? - PullRequest
Новая
       4

Как я могу поместить результат счетчика в карты в верхней части HTML-страницы?

0 голосов
/ 08 апреля 2019

Для моего проекта я создал скрипт сравнения с Groovyscript для сравнения 2 разных файлов. В Groovyscript я добавил HTML, который использует CSS и в конечном итоге Bootstrap (независимо от версии).

Мне уже удалось разместить счетчики с заголовком на моей HTML-странице, но он не динамический и не отвечает. При изменении ширины и высоты страницы макет разбивается. Я читал, что Bootstrap / CSS может помочь с реорганизацией страницы при изменении разрешения. Поэтому меня привлекло использование карт. Это работало нормально, но все же, когда страница становится больше или меньше, макет отключается. 

    <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>"
После этого Groovyscript завершается следующими строчками: 

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>"

outputFile.append дает мне красивые поля под моим абзацем в начале html-страницы (мне нужно было вставить код в HTML, чтобы вы могли его видеть, поэтому результат не очень хороший), но я на самом деле хотелось бы получить ответы в самой карточке, которую я создал в начале (см. следующий рядом с image.) Как я могу поместить результат счетчиков, сгенерированных с помощью скрипта groovy, посередине всех это, и, следовательно, только дать результат в конце, в правом верхнем углу карты, пожалуйста? Заранее спасибо.

enter image description here

Ответы [ 2 ]

0 голосов
/ 09 апреля 2019

Я узнал об этом с помощью подсказки Эрики Равазолло:

Я поместил этот скрипт 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>

Я немного урезал ящики для себя, как в моем примере, который я вам дал, вы увидите ящик в ящике в ящике.:-)

0 голосов
/ 08 апреля 2019

Не уверен, правильно ли я понял:

Вы пытаетесь отобразить 4 карты в правом верхнем углу страницы рядом? И вы хотели бы, чтобы эти карты реагировали на разные vw?

Я не знаком с Groovy, но если вы можете обернуть свои карты в div (или нацелить div через id или что-то подобное), то вы можете использовать CSS Grid (для отзывчивости), чтобы создать сетку из 4 столбцов и установить ширина каждого столбца, чтобы они входили в новую строку, когда ширина становится меньше.

Надеюсь, это помогло!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...