added gc site search bar and main container working examples #2185
Conversation
josephdiab
changed the title
There was a problem hiding this comment.
As discussed,
- create independent working example for the main element by leveraging the "layout: core"
- Fix the lintspacing. You can probably configure your editorconfig plugin for your text editor
- Remove the custom style or if needed lets chat about it I would like to understand it.
| "dateModified": "2023-07-04", | ||
| "description": "Documentation on how to use main container.", | ||
| "language": "en", | ||
| "title": "Main Container example" |
There was a problem hiding this comment.
Use the layout "core" like this page: https://github.com/wet-boew/GCWeb/blob/master/sites/layouts/default.html
replace {{content}} by your content page
sites/search/index.json-ld
Outdated
| }, | ||
| "modified": "2023-07-05", | ||
| "componentName": "search-bar", | ||
| "processing": "baseline", |
There was a problem hiding this comment.
This property is only for the component in the common folder.
| "processing": "baseline", |
sites/search/index.json-ld
Outdated
| "fr": "Documentation sur l'utilisation de la barre de recherche." | ||
| }, | ||
| "modified": "2023-07-05", | ||
| "componentName": "search-bar", |
There was a problem hiding this comment.
The component name must match the folder name
| "componentName": "search-bar", | |
| "componentName": "search", |
sites/search/search-en.html
Outdated
| <style> | ||
| .btn-square { | ||
| border-radius: 0; | ||
| } | ||
| </style> |
There was a problem hiding this comment.
What is that custom style for? We should not have any custom style. Regarding the boder radius, I do think we already have an CSS class that already do it.
sites/search/search-en.html
Outdated
| <section class="col-xs-12 col-sm-5 col-md-4"> | ||
| <form action="#" method="post" name="cse-search-box" role="search" class="form-inline"> | ||
| <div class="form-group wb-srch-qry"> | ||
| <label for="wb-srch-q" class="wb-inv">Search Canada.ca</label> | ||
| <div class="input-group"> | ||
| <input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Search Canada.ca" style="display: inline-block; width: calc(100% - 42px);" /> | ||
| <div class="input-group-append" style="white-space: nowrap;"> | ||
| <button type="submit" class="btn btn-primary btn-square" style="margin-left: -1px;"> | ||
| <span class="glyphicon-search glyphicon"></span> | ||
| <span class="wb-inv">Search</span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <datalist id="wb-srch-q-ac"></datalist> | ||
| </div> | ||
| </form> | ||
| </section> |
There was a problem hiding this comment.
Instead of reproducing it here, you can simply add a paragraph which mention this page example are located in the site header.
sites/search/search-en.html
Outdated
| </form> | ||
| </section> | ||
|
|
||
| <br> |
There was a problem hiding this comment.
<br> should not be used for spacing, like to separate paragraph. Rarely the br element is needed in web content.
| <br> |
sites/search/search-fr.html
Outdated
| <style> | ||
| .btn-square { | ||
| border-radius: 0; | ||
| } | ||
| </style> | ||
|
|
||
| <section class="col-xs-12 col-sm-5 col-md-4"> | ||
| <form action="#" method="post" name="cse-search-box" role="search" class="form-inline"> | ||
| <div class="form-group wb-srch-qry"> | ||
| <label for="wb-srch-q" class="wb-inv">Rechercher dans Canada.ca</label> | ||
| <div class="input-group"> | ||
| <input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Rechercher dans Canada.ca" style="display: inline-block; width: calc(100% - 42px);" /> | ||
| <div class="input-group-append" style="white-space: nowrap;"> | ||
| <button type="submit" class="btn btn-primary btn-square" style="margin-left: -1px;"> | ||
| <span class="glyphicon-search glyphicon"></span> | ||
| <span class="wb-inv">Search</span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <datalist id="wb-srch-q-ac"></datalist> | ||
| </div> | ||
| </form> | ||
| </section> | ||
|
|
||
| <br> |
There was a problem hiding this comment.
See my comment in English, apply an equivalent fix
sites/search/search-fr.html
Outdated
| </div> | ||
| </form> | ||
| </section> | ||
| </code></pre> |
There was a problem hiding this comment.
You need an empty line at the end of the file.
| </div> | |
| </form> | |
| </section> | |
| </code></pre> | |
| </div> | |
| </form> | |
| </section> | |
| </code></pre> | |
| <!-- heading level 1 --> | ||
|
|
||
| <!-- content page --> |
There was a problem hiding this comment.
When you will move this example in its own page, please add the h1 and for the content you can add a paragraph of lorem ipsum
No description provided.