-
Notifications
You must be signed in to change notification settings - Fork 130
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Minor - Feature/most requested stable (#2159)
* Most requested stabilization * Update _base.scss * resubmitting commit * Most requested: updating documentation * Most requested: small change to working examples * Most requested: new markup, updated doc * Most requested: isolating working example in sample file * Most requested: small doc edits --------- Co-authored-by: David Elisma <[email protected]> Co-authored-by: Marc-André Garneau <[email protected]> Co-authored-by: Marc-André Garneau <[email protected]>
- Loading branch information
4 people
authored
Apr 15, 2024
1 parent
2e80898
commit 5c3bc94
Showing
14 changed files
with
563 additions
and
209 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 13 additions & 0 deletions
13
_includes/components/gc-most-requested/gc-most-requested.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <section class="gc-most-requested"> | ||
| <div class="container"> | ||
| <h2>{% if page.language == "en" %}Most requested{% else %}En demande{% endif %}</h2> | ||
| <ul> | ||
| <li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Tâche principale{% endif %} 1]</a></li> | ||
| <li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Tâche principale{% endif %} 2]</a></li> | ||
| <li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Tâche principale{% endif %} 3]</a></li> | ||
| <li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Tâche principale{% endif %} 4]</a></li> | ||
| <li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Tâche principale{% endif %} 5]</a></li> | ||
| <li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Tâche principale{% endif %} 6]</a></li> | ||
| </ul> | ||
| </div> | ||
| </section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,25 @@ | ||
| /* Provisional most requested component */ | ||
| /* | ||
| Most requested component | ||
| */ | ||
|
|
||
| .provisional.gc-most-requested { | ||
| border: none; | ||
| // Make sure the component is not inside a container | ||
| main:not(.container) .gc-most-requested, | ||
| div:not(.container) .gc-most-requested { | ||
| background-color: #f5f5f5; | ||
| margin-bottom: 20px; | ||
| padding: 24px 0 12px; | ||
|
|
||
| h2 { | ||
| font-size: $font-size-h4; | ||
| margin-top: $space-md; | ||
| margin-top: 0; | ||
| } | ||
| ul { | ||
| margin-bottom: $space-md; | ||
| margin-top: $space-md; | ||
|
|
||
| ul { | ||
| li { | ||
| font-family: "Lato", sans-serif; | ||
| font-size: $small-size; | ||
| font-size: 19px; | ||
| font-weight: $bold-weight; | ||
| line-height: 1.5em; | ||
| line-height: 1.8em; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| /* | ||
| Most requested component | ||
| */ | ||
|
|
||
| // Make sure the component is not inside a container | ||
| main:not(.container) .gc-most-requested, | ||
| div:not(.container) .gc-most-requested { | ||
| h2 { | ||
| float: left; | ||
| width: 16.666667%; | ||
| } | ||
|
|
||
| ul { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| list-style-position: inside; | ||
| padding-left: 1.3em; | ||
|
|
||
| li { | ||
| flex-basis: 50%; | ||
| font-size: $small-size; | ||
| } | ||
| } | ||
| } |
50 changes: 50 additions & 0 deletions
50
components/gc-most-requested/gc-most-requested-bad-en.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| --- | ||
| { | ||
| "altLangPage": "gc-most-requested-bad-fr.html", | ||
| "dateModified": "2024-02-14", | ||
| "description": "Bad implementation example for the Most requested component.", | ||
| "language": "en", | ||
| "title": "Most requested - bad implementation", | ||
| "breadcrumbs": [ | ||
| { "title": "Most requested - Documentation", "link": "components/gc-most-requested/gc-most-requested-doc-en.html" } | ||
| ], | ||
| "pageclass": "wb-prettify all-pre" | ||
| } | ||
| --- | ||
|
|
||
| <p class="mrgn-bttm-lg">Below is an example for a bad implementation of the Most requested component. In this example, the component is located inside another element with the class <code>container</code>, which is not allowed.</p> | ||
|
|
||
| <section class="gc-most-requested"> | ||
| <div class="container"> | ||
| <h2>Most requested</h2> | ||
| <ul> | ||
| <li><a href="#">[Top task hyperlink 1]</a></li> | ||
| <li><a href="#">[Top task hyperlink 2]</a></li> | ||
| <li><a href="#">[Top task hyperlink 3]</a></li> | ||
| <li><a href="#">[Top task hyperlink 4]</a></li> | ||
| <li><a href="#">[Top task hyperlink 5]</a></li> | ||
| <li><a href="#">[Top task hyperlink 6]</a></li> | ||
| </ul> | ||
| </div> | ||
| </section> | ||
|
|
||
| <details> | ||
| <summary>Code</summary> | ||
| <pre><code><main class="container"> | ||
| ... | ||
| <section class="gc-most-requested"> | ||
| <div class="container"> | ||
| <h2>Most requested</h2> | ||
| <ul> | ||
| <li><a href="#">[Top task hyperlink 1]</a></li> | ||
| <li><a href="#">[Top task hyperlink 2]</a></li> | ||
| <li><a href="#">[Top task hyperlink 3]</a></li> | ||
| <li><a href="#">[Top task hyperlink 4]</a></li> | ||
| <li><a href="#">[Top task hyperlink 5]</a></li> | ||
| <li><a href="#">[Top task hyperlink 6]</a></li> | ||
| </ul> | ||
| </div> | ||
| </section> | ||
| ... | ||
| </main></code></pre> | ||
| </details> |
Oops, something went wrong.