Skip to content

Commit c619339

Browse files
That-ThingThat-Thing
authored
Merge pull request #304 from legumeinfo/optional-examples
Optional examples for web components
2 parents 28784a4 + bc8f514 commit c619339

File tree

71 files changed

+6012
-4688
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

71 files changed

+6012
-4688
lines changed

‎dev/examples/lis-gene-search-with-linkouts.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
<body>
2121

22-
<div class="uk-container">
22+
<div class="uk-container uk-margin-bottom">
2323
<h1>&lt;lis-gene-search-element&gt; with &lt;lis-linkout-element&gt; and &lt;lis-modal-element&gt;</h1>
2424
<p>
2525
The <code>&lt;lis-gene-search-element&gt;</code> provides a form for performing gene searches and displays the results in a paginated table.

‎dev/lis-gene-search-element.html

+7-3
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
<body>
2121

22-
<div class="uk-container">
22+
<div class="uk-container uk-margin-bottom">
2323
<h1>&lt;lis-gene-search-element&gt;</h1>
2424
<p>
2525
The <code>&lt;lis-gene-search-element&gt;</code> provides a form for performing gene searches and displays the results in a paginated view.
@@ -37,11 +37,15 @@ <h1>&lt;lis-gene-search-element&gt;</h1>
3737
Similarly, all searches can be limited to a specific species by setting the <code>species</code> attribute/property in conjunction with the <code>genus</code> attribute/property.
3838
You can try setting the <code>genus</code> and <code>species</code> properties in this example using the <code>geneSearchElement</code> variable in the Web console.
3939
</p>
40+
<p>
41+
Example text for the Identifier, Description, and Gene Family ID form fields can be provided by setting the <code>identifierExample</code>, <code>descriptionExample</code>, and <code>familyExample</code> attributes/properties, respectively.
42+
</p>
4043
<hr>
44+
</div>
4145

46+
<div class="uk-container uk-container-expand">
4247
<!-- the custom gene search element -->
43-
<lis-gene-search-element id="gene-search"></lis-gene-search-element>
44-
48+
<lis-gene-search-element id="gene-search" identifierExample="Glyma.13G357700" descriptionExample="protein disulfide isomerase-like protein" familyExample="L_HZ6G4Z"></lis-gene-search-element>
4549
</div>
4650

4751
<!-- set the search function by property because functions can't be set as attributes -->

‎dev/lis-publication-search-element.html

+5-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
<body>
2121

22-
<div class="uk-container">
22+
<div class="uk-container uk-margin-bottom">
2323
<h1>&lt;lis-publication-search-element&gt;</h1>
2424
<p>
2525
The <code>&lt;lis-publication-search-element&gt;</code> provides a form for performing publication searches and displays the results in a paginated table.
@@ -30,12 +30,15 @@ <h1>&lt;lis-publication-search-element&gt;</h1>
3030
This allows users to share specific pages from a search via the URL and for the search history to be navigated via the Web browser's forward and back buttons.
3131
If the query string parameters are present when the component loads then a search will be automatically performed with the query string parameter values.
3232
</p>
33+
<p>
34+
Example text for the search field can be provided by setting the <code>titleExample</code> attribute/property.
35+
</p>
3336
<hr>
3437
</div>
3538

3639
<div class="uk-container uk-container-expand">
3740
<!-- the custom publication search element -->
38-
<lis-publication-search-element id="publication-search"></lis-publication-search-element>
41+
<lis-publication-search-element id="publication-search" titleExample="expression"></lis-publication-search-element>
3942
</div>
4043

4144
<!-- set the search function by property because functions can't be set as attributes -->

‎dev/lis-qtl-search-element.html

+5-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
<body>
2121

22-
<div class="uk-container">
22+
<div class="uk-container uk-margin-bottom">
2323
<h1>&lt;lis-qtl-search-element&gt;</h1>
2424
<p>
2525
The <code>&lt;lis-qtl-search-element&gt;</code> provides a form for performing qtl searches and displays the results in a paginated table.
@@ -30,12 +30,15 @@ <h1>&lt;lis-qtl-search-element&gt;</h1>
3030
This allows users to share specific pages from a search via the URL and for the search history to be navigated via the Web browser's forward and back buttons.
3131
If the query string parameters are present when the component loads then a search will be automatically performed with the query string parameter values.
3232
</p>
33+
<p>
34+
Example text for the search field can be provided by setting the <code>traitExample</code> attribute/property.
35+
</p>
3336
<hr>
3437
</div>
3538

3639
<div class="uk-container uk-container-expand">
3740
<!-- the custom qtl search element -->
38-
<lis-qtl-search-element id="qtl-search"></lis-qtl-search-element>
41+
<lis-qtl-search-element id="qtl-search" traitExample="flower"></lis-qtl-search-element>
3942
</div>
4043

4144
<!-- set the search function by property because functions can't be set as attributes -->

‎dev/lis-trait-association-search-element.html

+7-3
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
<body>
2121

22-
<div class="uk-container">
22+
<div class="uk-container uk-margin-bottom">
2323
<h1>&lt;lis-trait-association-search-element&gt;</h1>
2424
<p>
2525
The <code>&lt;lis-trait-association-search-element&gt;</code> provides a form for performing trait association searches of GWAS/QTL studies and displays the results in a paginated view.
@@ -37,12 +37,16 @@ <h1>&lt;lis-trait-association-search-element&gt;</h1>
3737
Similarly, all searches can be limited to a specific species by setting the <code>species</code> attribute/property in conjunction with the <code>genus</code> attribute/property.
3838
You can try setting the <code>genus</code> and <code>species</code> properties in this example using the <code>traitAssociationSearchElement</code> variable in the Web console.
3939
</p>
40+
<p>
41+
Example text for the Traits, Publication ID, and Author fields can be provided by setting the <code>traitsExample</code>, <code>publicationExample</code>, and <code>authorExample</code> attributes/properties, respectively.
42+
</p>
4043

4144
<hr>
45+
</div>
4246

47+
<div class="uk-container uk-container-expand">
4348
<!-- the custom trait association search element -->
44-
<lis-trait-association-search-element id="trait-association-search"></lis-trait-association-search-element>
45-
49+
<lis-trait-association-search-element id="trait-association-search" traitsExample="R8 full maturity" publicationExample="10.2135/cropsci2005.05-0168" authorExample="Blair"></lis-trait-association-search-element>
4650
</div>
4751

4852
<!-- set the search function by property because functions can't be set as attributes -->

‎dev/lis-trait-search-element.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
<body>
2121

22-
<div class="uk-container">
22+
<div class="uk-container uk-margin-bottom">
2323
<h1>&lt;lis-trait-search-element&gt;</h1>
2424
<p>
2525
The <code>&lt;lis-trait-search-element&gt;</code> provides a form for performing trait searches and displays the results in a paginated table.
@@ -30,12 +30,14 @@ <h1>&lt;lis-trait-search-element&gt;</h1>
3030
This allows users to share specific pages from a search via the URL and for the search history to be navigated via the Web browser's forward and back buttons.
3131
If the query string parameters are present when the component loads then a search will be automatically performed with the query string parameter values.
3232
</p>
33+
<p>
34+
Example text for the search field can be provided by setting the <code>traitExample</code> attribute/property.
3335
<hr>
3436
</div>
3537

3638
<div class="uk-container uk-container-expand">
3739
<!-- the custom trait search element -->
38-
<lis-trait-search-element id="trait-search"></lis-trait-search-element>
40+
<lis-trait-search-element id="trait-search" traitExample="flower"></lis-trait-search-element>
3941
</div>
4042

4143
<!-- set the search function by property because functions can't be set as attributes -->

‎docs/assets/navigation.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)