diff options
Diffstat (limited to 'docs/components/ui/LinkedList')
| -rw-r--r-- | docs/components/ui/LinkedList/DemoCSS.jinja | 83 | ||||
| -rw-r--r-- | docs/components/ui/LinkedList/DemoHTML.jinja | 35 | ||||
| -rw-r--r-- | docs/components/ui/LinkedList/DemoResult.jinja | 89 | ||||
| -rw-r--r-- | docs/components/ui/LinkedList/LinkedList.css | 96 |
4 files changed, 303 insertions, 0 deletions
diff --git a/docs/components/ui/LinkedList/DemoCSS.jinja b/docs/components/ui/LinkedList/DemoCSS.jinja new file mode 100644 index 0000000..0927d4e --- /dev/null +++ b/docs/components/ui/LinkedList/DemoCSS.jinja @@ -0,0 +1,83 @@ +{% filter markdown %}{% raw %} +```css +.ui-linkedlist { + padding: 0px; + background-color: rgb(255 255 255); + overscroll-behavior: contain; + overflow-y: scroll; + list-style-type: none; + height: 16rem; + margin: 0px; + border: 1px solid rgb(128 128 128); + border-radius: 0.25rem; + font-size: 0.85rem; +} +.ui-linkedlist li { + cursor: pointer; + display: flex; + padding: 0.25rem 1rem; + align-items: center; +} +.ui-linkedlist li[disabled] { + color: rgb(156 156 156); + cursor: default; +} +.ui-linkedlist li:hover { + background-color: rgb(243 244 246); +} +.ui-linkedlist input[type="checkbox"] { + margin-right: 0.5rem; +} +label { + display: inline-block; + font-weight: bold; + background-color: white; + padding: 0.25rem 2rem; + border: 1px solid rgb(128 128 128); + border-radius: 0.25rem 0.25rem 0 0; + font-size: 0.7rem; + margin-bottom: -1px; +} + +button { + margin-top: 0.5rem; + display: inline-flex; + cursor: pointer; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + align-items: center; + justify-content: center; +} +button > :not([hidden]) ~ :not([hidden]) { + margin-left: 0.25rem; +} +button { + white-space: nowrap; + border-radius: 0.25rem; + border: 1px solid transparent; + background-color: rgb(229 231 235); + padding: 0.5rem 0.75rem; + text-align: center; + font-size: 0.75rem; + line-height: 1rem; +} +button:hover { + border-color: rgb(219 234 254); + background-color: rgb(243 244 246); +} +button:focus { + background-color: rgb(229 231 235); + outline-offset: 1px; + outline-color: #3b82f6; +} +@media (min-width: 640px) { + button { + padding: 0.25rem 0.5rem; + } +} +button.select-all { + float: right; +} +``` +{% endraw %}{% endfilter %}
\ No newline at end of file diff --git a/docs/components/ui/LinkedList/DemoHTML.jinja b/docs/components/ui/LinkedList/DemoHTML.jinja new file mode 100644 index 0000000..375ddd7 --- /dev/null +++ b/docs/components/ui/LinkedList/DemoHTML.jinja @@ -0,0 +1,35 @@ +{% filter markdown %}{% raw %} +```html+jinja +<div> + <label>Known Mutants</label> + <LinkedList id="linkedlist-demo-list1" linked_to="linkedlist-demo-list2"> + <li><input type="checkbox" name="users" value="1" /> + Alexander Summers</li> + <!-- ... etc ... --> + <li><input type="checkbox" name="users" value="27" /> + Warren Worthington III</li> + </LinkedList> + + <button + type="button" + class="select-all" + onclick="document.getElementById('linkedlist-demo-list1').dispatchEvent(new CustomEvent('jxui:linked:sendall'));" + > + Select all » + </button> +</div> +<div> + <label>X-Men</label> + <LinkedList id="linkedlist-demo-list2" linked_to="linkedlist-demo-list1" active> + </LinkedList> + + <button + type="button" + class="remove-all" + onclick="document.getElementById('linkedlist-demo-list2').dispatchEvent(new CustomEvent('jxui:linked:sendall'));" + > + « Remove all + </button> +</div> +``` +{% endraw %}{% endfilter %}
\ No newline at end of file diff --git a/docs/components/ui/LinkedList/DemoResult.jinja b/docs/components/ui/LinkedList/DemoResult.jinja new file mode 100644 index 0000000..e3d9631 --- /dev/null +++ b/docs/components/ui/LinkedList/DemoResult.jinja @@ -0,0 +1,89 @@ +{#css ui/LinkedList/LinkedList.css #} + +<div class="bg-cover" + style="background-image:linear-gradient(to right, rgba(132,204,22,0.7), rgba(22,163,74,0.7))" + data-md-skip +></div> + +<div id="linkedlist-demo" data-md-skip> + <div> + <label>Known Mutants</label> + <LinkedList id="linkedlist-demo-list1" linked_to="linkedlist-demo-list2"> + <li><input type="checkbox" name="users" value="1" /> + Alexander Summers</li> + <li><input type="checkbox" name="users" value="2" /> + Alison Blaire</li> + <li><input type="checkbox" name="users" value="3" /> + Anna Marie LeBeau</li> + <li><input type="checkbox" name="users" value="4" /> + Charles Francis Xavier</li> + <li><input type="checkbox" name="users" value="5" /> + Elizabeth Braddock</li> + <li><input type="checkbox" name="users" value="6" /> + Emma Grace Frost</li> + <li disabled><input type="checkbox" name="users" value="7" disabled /> + Erik Magnus Lehnsherr</li> + <li><input type="checkbox" name="users" value="8" /> + Henry Philip McCoy</li> + <li><input type="checkbox" name="users" value="9" /> + James Howlett</li> + <li><input type="checkbox" name="users" value="10" /> + Jean Elaine Grey</li> + <li><input type="checkbox" name="users" value="11" /> + John Proudstar</li> + <li><input type="checkbox" name="users" value="12" /> + Jubilation Lee</li> + <li><input type="checkbox" name="users" value="13" /> + Katherine Anne Pryde</li> + <li><input type="checkbox" name="users" value="14" /> + Kurt Wagner</li> + <li><input type="checkbox" name="users" value="15" /> + Lucas Bishop</li> + <li><input type="checkbox" name="users" value="16" /> + Nathan Summers</li> + <li><input type="checkbox" name="users" value="17" /> + Ororo Munroe</li> + <li><input type="checkbox" name="users" value="18" /> + Piotr Nikolaievitch Rasputin</li> + <li><input type="checkbox" name="users" value="19 + Rachel Anne Summers</li> + <li><input type="checkbox" name="users" value="20" /> + Raven Darkhölme</li> + <li><input type="checkbox" name="users" value="21" /> + Remy Etienne LeBeau</li> + <li><input type="checkbox" name="users" value="22" /> + Robert Louis Drake</li> + <li><input type="checkbox" name="users" value="23" /> + Roberto da Costa</li> + <li><input type="checkbox" name="users" value="24" /> + Scott Summers</li> + <li><input type="checkbox" name="users" value="25" /> + Sean Cassidy</li> + <li><input type="checkbox" name="users" value="26" /> + Shiro Yoshida</li> + <li><input type="checkbox" name="users" value="27" /> + Warren Worthington III</li> + </LinkedList> + + <button + type="button" + class="select-all" + onclick="document.getElementById('linkedlist-demo-list1').dispatchEvent(new CustomEvent('jxui:linked:sendall'));" + > + Select all » + </button> + </div> + <div> + <label>X-Men</label> + <LinkedList id="linkedlist-demo-list2" linked_to="linkedlist-demo-list1" active> + </LinkedList> + + <button + type="button" + class="remove-all" + onclick="document.getElementById('linkedlist-demo-list2').dispatchEvent(new CustomEvent('jxui:linked:sendall'));" + > + « Remove all + </button> + </div> +</div>
\ No newline at end of file diff --git a/docs/components/ui/LinkedList/LinkedList.css b/docs/components/ui/LinkedList/LinkedList.css new file mode 100644 index 0000000..fd69adc --- /dev/null +++ b/docs/components/ui/LinkedList/LinkedList.css @@ -0,0 +1,96 @@ +@scope (#linkedlist-demo) { + :scope { + position: relative; + display: block; + display: flex; + align-items: center; + justify-content: center; + padding: 0.5rem; + height: 360px; + margin: 0 auto; + } + :scope > div { + width: 100%; + margin: 0 1rem; + } + + .ui-linkedlist { + padding: 0px; + background-color: rgb(255 255 255); + overscroll-behavior: contain; + overflow-y: scroll; + list-style-type: none; + height: 16rem; + margin: 0px; + border: 1px solid rgb(128 128 128); + border-radius: 0.25rem; + font-size: 0.85rem; + } + .ui-linkedlist li { + cursor: pointer; + display: flex; + padding: 0.25rem 1rem; + align-items: center; + } + .ui-linkedlist li[disabled] { + color: rgb(156 156 156); + cursor: default; + } + .ui-linkedlist li:hover { + background-color: rgb(243 244 246); + } + .ui-linkedlist input[type="checkbox"] { + margin-right: 0.5rem; + } + label { + display: inline-block; + font-weight: bold; + background-color: white; + padding: 0.25rem 2rem; + border: 1px solid rgb(128 128 128); + border-radius: 0.25rem 0.25rem 0 0; + font-size: 0.7rem; + margin-bottom: -1px; + } + + button { + margin-top: 0.5rem; + display: inline-flex; + cursor: pointer; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + align-items: center; + justify-content: center; + } + button > :not([hidden]) ~ :not([hidden]) { + margin-left: 0.25rem; + } + button { + white-space: nowrap; + border-radius: 0.25rem; + border: 1px solid transparent; + background-color: rgb(229 231 235); + padding: 0.5rem 0.75rem; + text-align: center; + font-size: 0.75rem; + line-height: 1rem; + } + button:hover { + border-color: rgb(219 234 254); + background-color: rgb(243 244 246); + } + button:focus { + background-color: rgb(229 231 235); + outline-offset: 1px; + outline-color: #3b82f6; + } + @media (min-width: 640px) { + button { + padding: 0.25rem 0.5rem; + } + } + button.select-all { + float: right; + } +}
\ No newline at end of file |