diff options
Update Filters code
1 files changed, 45 insertions, 42 deletions
| -rw-r--r-- | docs/experimentals.html | 87 |
diff --git a/docs/experimentals.html b/docs/experimentals.html index fe2ad92..f85877e 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -567,110 +567,110 @@ <div class="columns"> <div class="column col-12"> <div class="filter"> - <input type="radio" id="tag-all" class="filter-tag" name="filter-radio" hidden checked> - <input type="radio" id="tag-action" class="filter-tag" name="filter-radio" hidden> - <input type="radio" id="tag-roleplaying" class="filter-tag" name="filter-radio" hidden> - <input type="radio" id="tag-shooter" class="filter-tag" name="filter-radio" hidden> - <input type="radio" id="tag-sports" class="filter-tag" name="filter-radio" hidden> + <input type="radio" id="tag-0" class="filter-tag" name="filter-radio" hidden checked> + <input type="radio" id="tag-1" class="filter-tag" name="filter-radio" hidden> + <input type="radio" id="tag-2" class="filter-tag" name="filter-radio" hidden> + <input type="radio" id="tag-3" class="filter-tag" name="filter-radio" hidden> + <input type="radio" id="tag-4" class="filter-tag" name="filter-radio" hidden> <div class="filter-nav"> - <label class="chip" for="tag-all">All</label> - <label class="chip" for="tag-action">Action</label> - <label class="chip" for="tag-roleplaying">Roleplaying</label> - <label class="chip" for="tag-shooter">Shooter</label> - <label class="chip" for="tag-sports">Sports</label> + <label class="chip" for="tag-0">All</label> + <label class="chip" for="tag-1">Action</label> + <label class="chip" for="tag-2">Roleplaying</label> + <label class="chip" for="tag-3">Shooter</label> + <label class="chip" for="tag-4">Sports</label> </div> <div class="filter-body columns"> - <div class="column col-4" data-tag="tag-roleplaying"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-2"> + <div class="card"> <div class="card-header"> <div class="card-title">Fallout 4</div> <div class="card-subtitle">Roleplaying</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-shooter"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-3"> + <div class="card"> <div class="card-header"> <div class="card-title">Halo 5</div> <div class="card-subtitle">Shooter</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-action"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-1"> + <div class="card"> <div class="card-header"> <div class="card-title">Quantum Break</div> <div class="card-subtitle">Action</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-sports"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-4"> + <div class="card"> <div class="card-header"> <div class="card-title">Forza Horizon 3</div> <div class="card-subtitle">Sports</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-roleplaying"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-2"> + <div class="card"> <div class="card-header"> <div class="card-title">Final Fantasy XV</div> <div class="card-subtitle">Roleplaying</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-sports"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-4"> + <div class="card"> <div class="card-header"> <div class="card-title">NBA 2K17</div> <div class="card-subtitle">Sports</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-shooter"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-3"> + <div class="card"> <div class="card-header"> <div class="card-title">Battlefield 1</div> <div class="card-subtitle">Shooter</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-action"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-1"> + <div class="card"> <div class="card-header"> <div class="card-title">GTA V</div> <div class="card-subtitle">Action</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-sports"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-4"> + <div class="card"> <div class="card-header"> <div class="card-title">FIFA 17</div> <div class="card-subtitle">Sports</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-shooter"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-3"> + <div class="card"> <div class="card-header"> <div class="card-title">Overwatch</div> <div class="card-subtitle">Shooter</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-shooter"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-3"> + <div class="card"> <div class="card-header"> <div class="card-title">Titanfall 2</div> <div class="card-subtitle">Shooter</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-shooter"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-3"> + <div class="card"> <div class="card-header"> <div class="card-title">Gears of Wars 4</div> <div class="card-subtitle">Shooter</div> @@ -681,24 +681,27 @@ </div> </div> </div> + <div class="docs-note"> + <p>Filters use <code>tag-1</code> to <code>tag-8</code> to flag different tags. <code>tag-0</code> is reserved for clearing filter (or showing all). You can overwrite <code>$filter-number</code> in <code>_filters.scss</code> to have more filters.</p> + </div> <!-- filters --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-all"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span> <span class="atn">checked</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-action"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-roleplaying"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-0"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span> <span class="atn">checked</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-1"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-2"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-nav"</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-all"</span>>All<<span class="tag">/label</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-action"</span>>Action<<span class="tag">/label</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-roleplaying"</span>>Roleplaying<<span class="tag">/label</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-0"</span>>All<<span class="tag">/label</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-1"</span>>Action<<span class="tag">/label</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-2"</span>>Roleplaying<<span class="tag">/label</span>> <<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-body"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-item card"</span> <span class="atn">data-tag</span>=<span class="atv">"tag-action"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-item card"</span> <span class="atn">data-tag</span>=<span class="atv">"tag-1"</span>> <span class="com"><!-- Filter item content --></span> <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-item card"</span> <span class="atn">data-tag</span>=<span class="atv">"tag-roleplaying"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-item card"</span> <span class="atn">data-tag</span>=<span class="atv">"tag-2"</span>> <span class="com"><!-- Filter item content --></span> <<span class="tag">/div</span>> <span class="com"><!-- Filter items --></span> |