Add linter for CSS files:

- Add Github Action.
- Update .gitignore.
- Add .stylelintignore for vendor related files.
- Fix format.css to match rules (includes hacks with @todo).
This commit is contained in:
Fabien Basmaison 2021-03-31 16:15:30 +02:00
parent 8b9b70d9cd
commit cc01105bf0
7 changed files with 2020 additions and 34 deletions

24
.github/workflows/linters-frontend.yaml vendored Normal file
View file

@ -0,0 +1,24 @@
# @url https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions
name: Frontend Linters
on:
push:
branches: [ main, ci ]
paths:
- 'static/**'
pull_request:
branches: [ main, ci ]
jobs:
linters:
name: linters
runs-on: ubuntu-20.04
steps:
# Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
- uses: actions/checkout@v2
- name: stylelinter
uses: actions-hub/stylelint@v1.1.3
env:
PATTERN: "*.css"

3
.gitignore vendored
View file

@ -21,3 +21,6 @@
#PyCharm #PyCharm
.idea .idea
#Node tools
/node_modules/

2
.stylelintignore Normal file
View file

@ -0,0 +1,2 @@
bookwyrm/static/css/bulma.*.css*
bookwyrm/static/css/icons.css

17
.stylelintrc.js Normal file
View file

@ -0,0 +1,17 @@
/* global module */
module.exports = {
"extends": "stylelint-config-standard",
"plugins": [
"stylelint-order"
],
"rules": {
"order/order": [
"custom-properties",
"declarations"
],
"indentation": 4
}
};

View file

@ -7,6 +7,7 @@ html {
.image { .image {
overflow: hidden; overflow: hidden;
} }
.navbar .logo { .navbar .logo {
max-height: 50px; max-height: 50px;
} }
@ -21,25 +22,33 @@ html {
} }
/* --- SHELVING --- */ /* --- SHELVING --- */
/** @todo Replace icons with SVG symbols.
@see https://www.youtube.com/watch?v=9xXBYcWgCHA */
.shelf-option:disabled > *::after { .shelf-option:disabled > *::after {
font-family: "icomoon"; font-family: "icomoon"; /* stylelint-disable font-family-no-missing-generic-family-keyword */
content: "\e918"; content: "\e918";
margin-left: 0.5em; margin-left: 0.5em;
} }
/* --- TOGGLES --- */ /* --- TOGGLES --- */
.toggle-button[aria-pressed=true], .toggle-button[aria-pressed=true]:hover { .toggle-button[aria-pressed=true],
.toggle-button[aria-pressed=true]:hover {
background-color: hsl(171, 100%, 41%); background-color: hsl(171, 100%, 41%);
color: white; color: white;
} }
.hide-active[aria-pressed=true], .hide-inactive[aria-pressed=false] {
.hide-active[aria-pressed=true],
.hide-inactive[aria-pressed=false] {
display: none; display: none;
} }
.hidden { .hidden {
display: none !important; display: none !important;
} }
.hidden.transition-y, .hidden.transition-x {
.hidden.transition-y,
.hidden.transition-x {
display: block !important; display: block !important;
visibility: hidden !important; visibility: hidden !important;
height: 0; height: 0;
@ -47,18 +56,22 @@ html {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.transition-y { .transition-y {
transition-property: height, margin-top, margin-bottom, padding-top, padding-bottom; transition-property: height, margin-top, margin-bottom, padding-top, padding-bottom;
transition-duration: 0.5s; transition-duration: 0.5s;
transition-timing-function: ease; transition-timing-function: ease;
} }
.transition-x { .transition-x {
transition-property: width, margin-left, margin-right, padding-left, padding-right; transition-property: width, margin-left, margin-right, padding-left, padding-right;
transition-duration: 0.5s; transition-duration: 0.5s;
transition-timing-function: ease; transition-timing-function: ease;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.transition-x, .transition-y { .transition-x,
.transition-y {
transition-duration: 0.001ms !important; transition-duration: 0.001ms !important;
} }
} }
@ -71,36 +84,46 @@ html {
margin: 0; margin: 0;
display: inline; display: inline;
} }
.rate-stars:hover .icon:before {
.rate-stars:hover .icon::before {
content: '\e9d9'; content: '\e9d9';
} }
.rate-stars form:hover ~ form .icon:before{
.rate-stars form:hover ~ form .icon::before {
content: '\e9d7'; content: '\e9d7';
} }
/* stars in a review form */ /** stars in a review form
.form-rate-stars:hover .icon:before { *
* @todo Simplify the logic for those icons.
*/
.form-rate-stars input + .icon.icon::before {
content: '\e9d9'; content: '\e9d9';
} }
.form-rate-stars input + .icon:before {
.form-rate-stars:hover .icon.icon::before {
content: '\e9d9'; content: '\e9d9';
} }
.form-rate-stars input:checked + .icon:before {
.form-rate-stars input:checked + .icon.icon::before {
content: '\e9d9'; content: '\e9d9';
} }
.form-rate-stars input:checked + * ~ .icon:before {
content: '\e9d7'; .form-rate-stars input:checked + * ~ .icon.icon::before {
}
.form-rate-stars:hover label.icon:before {
content: '\e9d9';
}
.form-rate-stars label.icon:hover:before {
content: '\e9d9';
}
.form-rate-stars label.icon:hover ~ label.icon:before{
content: '\e9d7'; content: '\e9d7';
} }
.form-rate-stars:hover label.icon.icon::before {
content: '\e9d9';
}
.form-rate-stars label.icon:hover::before {
content: '\e9d9';
}
.form-rate-stars label.icon:hover ~ label.icon.icon::before {
content: '\e9d7';
}
/* --- BOOK COVERS --- */ /* --- BOOK COVERS --- */
.cover-container { .cover-container {
@ -108,46 +131,46 @@ html {
width: max-content; width: max-content;
max-width: 250px; max-width: 250px;
} }
.cover-container.is-large { .cover-container.is-large {
height: max-content; height: max-content;
max-width: 330px; max-width: 330px;
} }
.cover-container.is-large img { .cover-container.is-large img {
max-height: 500px; max-height: 500px;
height: auto; height: auto;
} }
.cover-container.is-medium { .cover-container.is-medium {
height: 150px; height: 150px;
} }
.cover-container.is-small { .cover-container.is-small {
height: 100px; height: 100px;
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
.cover-container { .cover-container {
height: 200px; height: 200px;
width: max-content; width: max-content;
} }
.cover-container.is-medium { .cover-container.is-medium {
height: 100px; height: 100px;
} }
} }
.cover-container.is-medium .no-cover div {
font-size: 0.9em;
padding: 0.3em;
}
.cover-container.is-small .no-cover div {
font-size: 0.7em;
padding: 0.1em;
}
.book-cover { .book-cover {
height: 100%; height: 100%;
object-fit: scale-down; object-fit: scale-down;
} }
.no-cover { .no-cover {
position: relative; position: relative;
white-space: normal; white-space: normal;
} }
.no-cover div { .no-cover div {
position: absolute; position: absolute;
padding: 1em; padding: 1em;
@ -157,38 +180,51 @@ html {
text-align: center; text-align: center;
} }
.cover-container.is-medium .no-cover div {
font-size: 0.9em;
padding: 0.3em;
}
.cover-container.is-small .no-cover div {
font-size: 0.7em;
padding: 0.1em;
}
/* --- AVATAR --- */ /* --- AVATAR --- */
.avatar { .avatar {
vertical-align: middle; vertical-align: middle;
display: inline; display: inline;
} }
.is-32x32 { .is-32x32 {
min-width: 32px; min-width: 32px;
min-height: 32px; min-height: 32px;
} }
.is-96x96 { .is-96x96 {
min-width: 96px; min-width: 96px;
min-height: 96px; min-height: 96px;
} }
/* --- QUOTES --- */ /* --- QUOTES --- */
.quote blockquote { .quote blockquote {
position: relative; position: relative;
padding-left: 2em; padding-left: 2em;
} }
.quote blockquote:before, .quote blockquote:after {
.quote blockquote::before,
.quote blockquote::after {
font-family: 'icomoon'; font-family: 'icomoon';
position: absolute; position: absolute;
} }
.quote blockquote:before {
.quote blockquote::before {
content: "\e906"; content: "\e906";
top: 0; top: 0;
left: 0; left: 0;
} }
.quote blockquote:after {
.quote blockquote::after {
content: "\e905"; content: "\e905";
right: 0; right: 0;
} }

7
package.json Normal file
View file

@ -0,0 +1,7 @@
{
"devDependencies": {
"stylelint": "^13.12.0",
"stylelint-config-standard": "^21.0.0",
"stylelint-order": "^4.1.0"
}
}

1897
yarn.lock Normal file

File diff suppressed because it is too large Load diff