From db0e336f91c7b891c41381f7c65846b67e2b7a6c Mon Sep 17 00:00:00 2001 From: Jan Kowalleck Date: Fri, 27 Nov 2020 14:30:47 +0100 Subject: [PATCH 1/4] use scss to generate `style.css` --- package.json | 7 +++++-- src/.gitattributes | 3 +++ .../resources/style.css => layout/css/style.scss} | 0 3 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 src/.gitattributes rename src/{pytest_html/resources/style.css => layout/css/style.scss} (100%) diff --git a/package.json b/package.json index 5ed4089e..fb02d1b2 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,11 @@ "grunt-contrib-qunit": "^4.0.0", "phantomjs-prebuilt": "2.1.15" }, - "devDependencies": {}, + "devDependencies": { + "sass": "^1.29.0" + }, "scripts": { - "test": "grunt test" + "test": "grunt test", + "build:css": "sass --no-source-map --no-error-css src/layout/css/style.scss src/pytest_html/resources/style.css" } } diff --git a/src/.gitattributes b/src/.gitattributes new file mode 100644 index 00000000..9a59a76d --- /dev/null +++ b/src/.gitattributes @@ -0,0 +1,3 @@ + +# see https://github.com/github/linguist#generated-code +pytest_html/resources/style.css linguist-generated diff --git a/src/pytest_html/resources/style.css b/src/layout/css/style.scss similarity index 100% rename from src/pytest_html/resources/style.css rename to src/layout/css/style.scss From d14aee12ba4c97981f6482e5a06aaa9986792dd6 Mon Sep 17 00:00:00 2001 From: Jan Kowalleck Date: Fri, 27 Nov 2020 14:38:09 +0100 Subject: [PATCH 2/4] added linter for sass/scss --- .pre-commit-config.yaml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index 5a590ba8..68819f94 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -52,3 +52,7 @@ repos: files: ^(CHANGES.rst|development.rst|README.rst)$ language: python additional_dependencies: [pygments, restructuredtext_lint] +- repo: https://github.com/elidupuis/mirrors-sass-lint + rev: '5cc45653263b423398e4af2561fae362903dd45d' + hooks: + - id: sass-lint From 281360f1644fa12cfe25df2c3c782bc78998f1f8 Mon Sep 17 00:00:00 2001 From: Jan Kowalleck Date: Fri, 27 Nov 2020 14:43:21 +0100 Subject: [PATCH 3/4] generated `style.css` from scss. --- src/pytest_html/resources/style.css | 183 ++++++++++++++++++++++++++++ 1 file changed, 183 insertions(+) create mode 100644 src/pytest_html/resources/style.css diff --git a/src/pytest_html/resources/style.css b/src/pytest_html/resources/style.css new file mode 100644 index 00000000..76adc6a2 --- /dev/null +++ b/src/pytest_html/resources/style.css @@ -0,0 +1,183 @@ +body { + font-family: Helvetica, Arial, sans-serif; + font-size: 12px; + /* do not increase min-width as some may use split screens */ + min-width: 800px; + color: #999; +} + +h1 { + font-size: 24px; + color: black; +} + +h2 { + font-size: 16px; + color: black; +} + +p { + color: black; +} + +a { + color: #999; +} + +table { + border-collapse: collapse; +} + +/****************************** + * SUMMARY INFORMATION + ******************************/ +#environment td { + padding: 5px; + border: 1px solid #E6E6E6; +} + +#environment tr:nth-child(odd) { + background-color: #f6f6f6; +} + +/****************************** + * TEST RESULT COLORS + ******************************/ +span.passed, .passed .col-result { + color: green; +} + +span.skipped, span.xfailed, span.rerun, .skipped .col-result, .xfailed .col-result, .rerun .col-result { + color: orange; +} + +span.error, span.failed, span.xpassed, .error .col-result, .failed .col-result, .xpassed .col-result { + color: red; +} + +/****************************** + * RESULTS TABLE + * + * 1. Table Layout + * 2. Extra + * 3. Sorting items + * + ******************************/ +/*------------------ + * 1. Table Layout + *------------------*/ +#results-table { + border: 1px solid #e6e6e6; + color: #999; + font-size: 12px; + width: 100%; +} + +#results-table th, #results-table td { + padding: 5px; + border: 1px solid #E6E6E6; + text-align: left; +} + +#results-table th { + font-weight: bold; +} + +/*------------------ + * 2. Extra + *------------------*/ +.log:only-child { + height: inherit; +} + +.log { + background-color: #e6e6e6; + border: 1px solid #e6e6e6; + color: black; + display: block; + font-family: "Courier New", Courier, monospace; + height: 230px; + overflow-y: scroll; + padding: 5px; + white-space: pre-wrap; +} + +div.image { + border: 1px solid #e6e6e6; + float: right; + height: 240px; + margin-left: 5px; + overflow: hidden; + width: 320px; +} + +div.image img { + width: 320px; +} + +div.video { + border: 1px solid #e6e6e6; + float: right; + height: 240px; + margin-left: 5px; + overflow: hidden; + width: 320px; +} + +div.video video { + overflow: hidden; + width: 320px; + height: 240px; +} + +.collapsed { + display: none; +} + +.expander::after { + content: " (show details)"; + color: #BBB; + font-style: italic; + cursor: pointer; +} + +.collapser::after { + content: " (hide details)"; + color: #BBB; + font-style: italic; + cursor: pointer; +} + +/*------------------ + * 3. Sorting items + *------------------*/ +.sortable { + cursor: pointer; +} + +.sort-icon { + font-size: 0px; + float: left; + margin-right: 5px; + margin-top: 5px; + /*triangle*/ + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; +} + +.inactive .sort-icon { + /*finish triangle*/ + border-top: 8px solid #E6E6E6; +} + +.asc.active .sort-icon { + /*finish triangle*/ + border-bottom: 8px solid #999; +} + +.desc.active .sort-icon { + /*finish triangle*/ + border-top: 8px solid #999; +} From 681c54175315d2e0f37b822cd3f09064bb30adcd Mon Sep 17 00:00:00 2001 From: Jan Kowalleck Date: Mon, 30 Nov 2020 19:25:48 +0100 Subject: [PATCH 4/4] developer notes for SASS/SCSS/CSS --- development.rst | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/development.rst b/development.rst index 576810dd..6745c9ec 100644 --- a/development.rst +++ b/development.rst @@ -70,6 +70,24 @@ Run the following to execute the tests: $ npm test +SASS/SCSS/CSS +------------- + +You will need `npm `_ installed to compile the CSS, +which is generated via `SASS/SCSS `_. + +Once ``npm`` is installed, you can install all needed dependencies by running: + +.. code-block:: bash + + $ npm install + +Run the following to generate the CSS: + +.. code-block:: bash + + $ npm run build:css + Releasing a new version -----------------------