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 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 ----------------------- 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/layout/css/style.scss b/src/layout/css/style.scss new file mode 100644 index 00000000..e80e4e88 --- /dev/null +++ b/src/layout/css/style.scss @@ -0,0 +1,177 @@ +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; +} diff --git a/src/pytest_html/resources/style.css b/src/pytest_html/resources/style.css index e80e4e88..76adc6a2 100644 --- a/src/pytest_html/resources/style.css +++ b/src/pytest_html/resources/style.css @@ -1,59 +1,59 @@ 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; + 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; + font-size: 24px; + color: black; } h2 { - font-size: 16px; - color: black; + font-size: 16px; + color: black; } p { - color: black; + color: black; } a { - color: #999; + color: #999; } table { - border-collapse: collapse; + border-collapse: collapse; } /****************************** * SUMMARY INFORMATION ******************************/ - #environment td { - padding: 5px; - border: 1px solid #E6E6E6; + padding: 5px; + border: 1px solid #E6E6E6; } #environment tr:nth-child(odd) { - background-color: #f6f6f6; + background-color: #f6f6f6; } /****************************** * TEST RESULT COLORS ******************************/ span.passed, .passed .col-result { - color: green; + 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; + color: orange; } +span.error, span.failed, span.xpassed, .error .col-result, .failed .col-result, .xpassed .col-result { + color: red; +} /****************************** * RESULTS TABLE @@ -63,115 +63,121 @@ span.error, span.failed, span.xpassed, .error .col-result, .failed .col-result, * 3. Sorting items * ******************************/ - /*------------------ * 1. Table Layout *------------------*/ - #results-table { - border: 1px solid #e6e6e6; - color: #999; - font-size: 12px; - width: 100% + 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 + padding: 5px; + border: 1px solid #E6E6E6; + text-align: left; } + #results-table th { - font-weight: bold + font-weight: bold; } /*------------------ * 2. Extra *------------------*/ - .log:only-child { - height: inherit + 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 + 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 + border: 1px solid #e6e6e6; + float: right; + height: 240px; + margin-left: 5px; + overflow: hidden; + width: 320px; } + div.image img { - width: 320px + width: 320px; } + div.video { - border: 1px solid #e6e6e6; - float: right; - height: 240px; - margin-left: 5px; - overflow: hidden; - width: 320px + border: 1px solid #e6e6e6; + float: right; + height: 240px; + margin-left: 5px; + overflow: hidden; + width: 320px; } + div.video video { - overflow: hidden; - width: 320px; - height: 240px; + overflow: hidden; + width: 320px; + height: 240px; } + .collapsed { - display: none; + display: none; } + .expander::after { - content: " (show details)"; - color: #BBB; - font-style: italic; - cursor: pointer; + content: " (show details)"; + color: #BBB; + font-style: italic; + cursor: pointer; } + .collapser::after { - content: " (hide details)"; - color: #BBB; - font-style: italic; - cursor: pointer; + content: " (hide details)"; + color: #BBB; + font-style: italic; + cursor: pointer; } /*------------------ * 3. Sorting items *------------------*/ .sortable { - cursor: pointer; + 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; + 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; + /*finish triangle*/ + border-top: 8px solid #E6E6E6; } .asc.active .sort-icon { - /*finish triangle*/ - border-bottom: 8px solid #999; + /*finish triangle*/ + border-bottom: 8px solid #999; } .desc.active .sort-icon { - /*finish triangle*/ - border-top: 8px solid #999; + /*finish triangle*/ + border-top: 8px solid #999; }