Skip to content

Use scss #385

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Dec 1, 2020
Merged

Use scss #385

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
db0e336
use scss to generate `style.css`
jkowalleck Nov 27, 2020
d14aee1
added linter for sass/scss
jkowalleck Nov 27, 2020
281360f
generated `style.css` from scss.
jkowalleck Nov 27, 2020
681c541
developer notes for SASS/SCSS/CSS
jkowalleck Nov 30, 2020
c2f591b
Merge branch 'master' into use_scss
gnikonorov Dec 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .pre-commit-config.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use this scss linter instead? It's more actively maintained and from the pre-commit org which makes me feel like it's more likely to stay maintained.

Also, if we move to the above linter, we can specify the revision as a tag instead of a sha. I think it's easier for people to read and understand tags v shas

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actually i read about https://github.com/pre-commit/mirrors-scss-lint
this uses https://github.com/sds/scss-lint. and this one states "Consider other tools before adopting SCSS-Lint" in its readme.
so i think this one is worth a discussion, @gnikonorov

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do @ssbarnea and @BeyondEvil think? My main concern is the fact that https://github.com/elidupuis/mirrors-sass-lint hasn't been updated since 2017.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some projects reach a high level of maturity and won't see any updates for quite some time, that doesn't mean it's not a valuable project.

How about using stylint?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As long as styling is well maintained I have no objections. What do you think @jkowalleck ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure.
need to research if stylint works well for the case and how it needs to be configured.

will come back to this topic later.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jkowalleck let's not bloat this PR. Can you create a follow up issue for this so we don't lose track of it? I think the current linter is fine for now

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

created #391 to keep track of it.

rev: '5cc45653263b423398e4af2561fae362903dd45d'
hooks:
- id: sass-lint
18 changes: 18 additions & 0 deletions development.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,24 @@ Run the following to execute the tests:

$ npm test

SASS/SCSS/CSS
-------------

You will need `npm <https://www.npmjs.com>`_ installed to compile the CSS,
which is generated via `SASS/SCSS <https://sass-lang.com/>`_.

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

Expand Down
7 changes: 5 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there anyway we can add a github action step that ensures that scss was compiled into css for all PRs? That way we don't have to accidentally worry about people forgetting to run this before they open a PR.

@ssbarnea what do you think?

Copy link
Contributor Author

@jkowalleck jkowalleck Nov 28, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

very good idea, @gnikonorov.
is this what you meant by "I would also mention the use os SCSS happens at compile time.", @ssbarnea ?

but we might need reproducible builds, then. which means npm's package-lock.json should be under version control.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's not bloat this PR. Can you create a follow up issue for this @jkowalleck ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added #392 to keep track of this topic.

"build:css": "sass --no-source-map --no-error-css src/layout/css/style.scss src/pytest_html/resources/style.css"
}
}
3 changes: 3 additions & 0 deletions src/.gitattributes
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@

# see https://github.com/github/linguist#generated-code
pytest_html/resources/style.css linguist-generated
177 changes: 177 additions & 0 deletions src/layout/css/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Loading