epfl-elements 4.9.2 β 5.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/components/atoms/select/select.yml +1 -1
- package/dist/components/content-types/study-plan/study-plan.yml +0 -2
- package/dist/css/elements.css +903 -3141
- package/dist/css/elements.min.css +1 -1
- package/dist/css/elements.min.css.map +1 -1
- package/dist/css/reader.css +33 -128
- package/dist/css/reader.min.css +1 -1
- package/dist/css/reader.min.css.map +1 -1
- package/dist/docs/contribute/support-and-request.html +7 -8
- package/dist/icons/icons.svg +1 -1
- package/dist/index.html +0 -1
- package/dist/js/elements.js +1 -251
- package/dist/js/elements.min.js +1 -1
- package/dist/js/elements.min.js.LICENSE.txt +0 -2
- package/dist/js/elements.min.js.map +1 -1
- package/dist/js/reader.js +223 -213
- package/dist/js/reader.min.js +1 -1
- package/dist/js/reader.min.js.map +1 -1
- package/dist/package.json +13 -12
- package/package.json +13 -12
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
To contribute and run the styleguide, you will need few things :
|
|
9
9
|
- [π Git](https://git-scm.com/) - Version control system
|
|
10
|
-
- [π NodeJS
|
|
10
|
+
- [π NodeJS 18+](https://nodejs.org/en/) - JavaScript runtime used to build the project
|
|
11
11
|
- [π Yarn](https://yarnpkg.com/lang/en/) - Dependency manager built on top of the NPM registry
|
|
12
12
|
|
|
13
13
|
Then, to install the project onto your workstation:
|
|
@@ -6,6 +6,6 @@ variants:
|
|
|
6
6
|
notes: |
|
|
7
7
|
This variation of the select component enables **multiple choices**. Again, keep your list to the smallest. Think of having a βselect all/noneβ item when the list is long.
|
|
8
8
|
notes: |
|
|
9
|
-
The select component is mainly used in **forms**. Use it when people have to **choose options from a list**. The select component doesn't trigger actions: it stores a choice before submission. Don't use it when the number of options is low (2 to 3). Use the [checkboxes](#/atoms/checkbox) or [radio buttons](#/atoms/radio) instead. Pay attention to **long lists**: beyond 7 or 8 options, people struggle to make
|
|
9
|
+
The select component is mainly used in **forms**. Use it when people have to **choose options from a list**. The select component doesn't trigger actions: it stores a choice before submission. Don't use it when the number of options is low (2 to 3). Use the [checkboxes](#/atoms/checkbox) or [radio buttons](#/atoms/radio) instead. Pay attention to **long lists**: beyond 7 or 8 options, people struggle to make an educated choice. In any case, keep your list below 15-ish items.
|
|
10
10
|
|
|
11
11
|
### Standard select
|
|
@@ -5,6 +5,4 @@ notes: |
|
|
|
5
5
|
|
|
6
6
|
Please override the columns width (if they do not fit your needs) by using a CSS variable: `<div class="study-plan table-like" style="--table-columns: 1fr minmax(200px, 3fr) minmax(auto, 1fr) minmax(200px, 3fr) 3fr 1fr">`.
|
|
7
7
|
|
|
8
|
-
The default behaviour is kept on IE, the content stays readable (the table might be a bit wonky when some columns are missing though).
|
|
9
|
-
|
|
10
8
|
On mobile, the tables are scrollable horizontally.
|