feat: VivesPOS landing on Winter CMS 1.2 — theme + plugin + Dockerfile
Some checks are pending
Module sub-split / Sub-split (push) Waiting to run
Some checks are pending
Module sub-split / Sub-split (push) Waiting to run
- Base: wintercms/winter branch 1.2 (full framework) - Theme vivespos: Canvas 7 + Bootstrap 5 CDN, custom CSS - Layout: deferred GTM/GA4 tracking, JSON-LD SoftwareApplication - Partials: hero (offline-first), features, modes (offline/nube toggle), screenshots, pricing (3 planes), comparison, FAQ, CTA - Plugin VivesPOS.Site with ContactForm - Dockerfile: PHP 8.2 Apache, port 80, healthcheck - Added winter/wn-pages, blog, sitemap, seo plugins - Active theme set to vivespos
This commit is contained in:
336
modules/system/assets/ui/docs/list.md
Normal file
336
modules/system/assets/ui/docs/list.md
Normal file
@@ -0,0 +1,336 @@
|
||||
### Basic example
|
||||
|
||||
<div class="control-list">
|
||||
<table class="table data">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sort-desc"><a href="/">Title</a></th>
|
||||
<th class="active sort-asc"><a href="/">Created</a></th>
|
||||
<th><span>Categories</span></th>
|
||||
<th><span>Updated</span></th>
|
||||
<th class="list-setup"><a href="/" title="List options"></a></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Welcome to Winter</td>
|
||||
<td>Oct 01, 2013</td>
|
||||
<td>News</td>
|
||||
<td>Oct 01, 2013</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
### Complete example
|
||||
|
||||
<div class="control-list">
|
||||
<table class="table data" data-control="rowlink">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="list-checkbox">
|
||||
<div class="checkbox custom-checkbox nolabel">
|
||||
<input type="checkbox" id="checkboxAll" />
|
||||
<label for="checkboxAll"></label>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-desc"><a href="/">Title</a></th>
|
||||
<th class="active sort-asc"><a href="/">Created</a></th>
|
||||
<th class="sort-desc"><a href="/">Author</a></th>
|
||||
<th><span>Categories</span></th>
|
||||
<th><span>Published</span></th>
|
||||
<th><span>Updated</span></th>
|
||||
<th class="list-setup"><a href="/" title="List options"></a></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="list-checkbox nolink">
|
||||
<div class="checkbox custom-checkbox nolabel">
|
||||
<input id="checkbox_1" type="checkbox" />
|
||||
<label for="checkbox_1">Check</label>
|
||||
</div>
|
||||
</td>
|
||||
<td><a href="/">Welcome to Winter</a></td>
|
||||
<td>Oct 01, 2013</td>
|
||||
<td>Adam Person</td>
|
||||
<td>News</td>
|
||||
<td>Oct 01, 2013</td>
|
||||
<td>Oct 01, 2013</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr class="active">
|
||||
<td class="list-checkbox nolink">
|
||||
<div class="checkbox custom-checkbox nolabel">
|
||||
<input id="checkbox_2" type="checkbox" checked="checked" /><label for="checkbox_2">Check The marketplace is open!</label>
|
||||
</div>
|
||||
</td>
|
||||
<td><a href="/">The marketplace is open!</a></td>
|
||||
<td>Oct 15, 2013</td>
|
||||
<td>Sam Georges</td>
|
||||
<td>Features</td>
|
||||
<td>Oct 16, 2013</td>
|
||||
<td>Oct 16, 2013</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="list-checkbox nolink">
|
||||
<div class="checkbox custom-checkbox nolabel">
|
||||
<input id="checkbox_3" type="checkbox" />
|
||||
<label for="checkbox_3">Check Welcome to the Builder!</label>
|
||||
</div>
|
||||
</td>
|
||||
<td><a href="/">Welcome to the Builder!</a></td>
|
||||
<td>Oct 21, 2013</td>
|
||||
<td>Alexey Bobkov</td>
|
||||
<td>News, Features</td>
|
||||
<td>Oct 21, 2013</td>
|
||||
<td>Oct 21, 2013</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="list-checkbox nolink">
|
||||
<div class="checkbox custom-checkbox nolabel">
|
||||
<input id="checkbox_4" type="checkbox" />
|
||||
<label for="checkbox_4">Check Components explained</label>
|
||||
</div>
|
||||
</td>
|
||||
<td><a href="/">Components explained</a></td>
|
||||
<td>Nov 12, 2013</td>
|
||||
<td>Alexey Bobkov</td>
|
||||
<td>Tutorials</td>
|
||||
<td>Nov 12, 2013</td>
|
||||
<td>Nov 12, 2013</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="list-checkbox nolink">
|
||||
<div class="checkbox custom-checkbox nolabel">
|
||||
<input id="checkbox_5" type="checkbox" />
|
||||
<label for="checkbox_5">Check Creating a module in 90 seconds</label>
|
||||
</div>
|
||||
</td>
|
||||
<td><a href="/">Creating a module in 90 seconds</a></td>
|
||||
<td>Nov 15, 2013</td>
|
||||
<td>Sam Georges</td>
|
||||
<td>Tutorials</td>
|
||||
<td>Nov 15, 2013</td>
|
||||
<td>Nov 15, 2013</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</body>
|
||||
</table>
|
||||
<div class="list-footer">
|
||||
<div class="list-pagination">
|
||||
<div class="control-pagination">
|
||||
<span class="page-iteration">1-5 of 20</span>
|
||||
<a href="#" class="page-back" title="Previous page"></a><a href="#" class="page-next" title="Next page"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Empty list
|
||||
|
||||
Use the `no-data` class to display a list that contains no records.
|
||||
|
||||
<div class="control-list">
|
||||
<table class="table data">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sort-desc"><a href="/">Title</a></th>
|
||||
<th class="active sort-asc"><a href="/">Created</a></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="no-data">
|
||||
<td colspan="100" class="nolink">
|
||||
<p class="no-data">
|
||||
There are no records in this view.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
### Row classes
|
||||
|
||||
The following colored classes are available to use on the table row elements.
|
||||
|
||||
<div class="control-list">
|
||||
<table class="table data">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sort-desc"><a href="/">Class</a></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Normal text</td></tr>
|
||||
<tr class="hidden"><td>.hidden</td></tr>
|
||||
<tr class="strike"><td>.strike</td></tr>
|
||||
<tr class="frozen"><td>.frozen</td></tr>
|
||||
<tr class="processing"><td>.processing</td></tr>
|
||||
<tr class="negative"><td>.negative</td></tr>
|
||||
<tr class="positive"><td>.positive</td></tr>
|
||||
<tr class="disabled"><td>.disabled / .deleted</td></tr>
|
||||
<tr class="new"><td>.new / .important</td></tr>
|
||||
<tr class="safe"><td>.safe / .special</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
### Status column
|
||||
|
||||
It might be fun to include a status column!
|
||||
|
||||
<div class="control-list">
|
||||
<table class="table data">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px"><span>Status</span></th>
|
||||
<th class="active sort-asc"><a href="/">Title</a></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="wn-icon-circle text-muted">
|
||||
Draft
|
||||
</span>
|
||||
</td>
|
||||
<td>Welcome to Winter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="wn-icon-circle text-info">
|
||||
Pending
|
||||
</span>
|
||||
</td>
|
||||
<td>What a wonderful day</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="wn-icon-circle text-success">
|
||||
Approved
|
||||
</span>
|
||||
</td>
|
||||
<td>The sun is shining</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="wn-icon-circle text-danger">
|
||||
Cancelled
|
||||
</span>
|
||||
</td>
|
||||
<td>The weather is sweet here</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
### Badge column
|
||||
|
||||
You can also include an icon badge inside a column.
|
||||
|
||||
<div class="control-list">
|
||||
<table class="table data">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px"><span>Status</span></th>
|
||||
<th class="active sort-asc"><a href="/">Title</a></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="list-badge badge-info">
|
||||
<i class="icon-info"></i>
|
||||
</span>
|
||||
Draft
|
||||
</td>
|
||||
<td>Welcome to Winter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="list-badge badge-warning">
|
||||
<i class="icon-exclamation"></i>
|
||||
</span>
|
||||
Pending
|
||||
</td>
|
||||
<td>What a wonderful day</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="list-badge badge-success">
|
||||
<i class="icon-check"></i>
|
||||
</span>
|
||||
Approved
|
||||
</td>
|
||||
<td>The sun is shining</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="list-badge badge-danger">
|
||||
<i class="icon-times"></i>
|
||||
</span>
|
||||
Cancelled
|
||||
</td>
|
||||
<td>The weather is sweet here</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
### Linking rows
|
||||
|
||||
You may link an entire row by adding the `data-control="rowlink"` attribute to the table element. The first table data (TD) column with an anchor will be used to link the entire row. To bypass this behavior, simply add the `nolink` class to the column.
|
||||
|
||||
<div class="control-list">
|
||||
<table class="table data" data-control="rowlink">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://wintercms.com">Link to this</a>
|
||||
</td>
|
||||
<td>Row will be linked</td>
|
||||
<td>This will also be linked</td>
|
||||
<td class="nolink">No link applied here</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
### Button column
|
||||
|
||||
You may add a small button to a list column by adding the `column-button` class to the table data (TD) element.
|
||||
|
||||
<div class="control-list">
|
||||
<table class="table data" data-control="rowlink">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px"><span>Action</span></th>
|
||||
<th><a href="javascript:;">Name</a></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="column-button nolink">
|
||||
<a
|
||||
href="http://google.com"
|
||||
target="_blank"
|
||||
class="btn btn-secondary btn-sm">
|
||||
Open Google
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="javascript:;">
|
||||
Petoria
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
Reference in New Issue
Block a user