diff options
Diffstat (limited to 'artifacts/ui-demo.html')
| -rw-r--r-- | artifacts/ui-demo.html | 119 |
1 files changed, 68 insertions, 51 deletions
diff --git a/artifacts/ui-demo.html b/artifacts/ui-demo.html index 6fe3a18..09dc9cb 100644 --- a/artifacts/ui-demo.html +++ b/artifacts/ui-demo.html @@ -11,6 +11,10 @@ padding: 0; } + .model::before { + content: "➥"; + } + .topbar { background-color: var(--balboa); box-shadow: 0 0 0.5em black; @@ -31,6 +35,10 @@ padding: 14px 14px; } + .topbar li.right { + float: right; + } + .topbar li a { color: white; text-decoration: none; @@ -42,38 +50,46 @@ z-index: -1; position: fixed; top: 3em; - left: -20%; + left: 0; width: 20%; height: 100%; transition: 0.25s; } - .sidebar ul { - list-style-type: none; + .sidebar button { + display: block; + background: none; + border: 0 none; + cursor: pointer; + color: white; } - .sidebar a { - color: white; - text-decoration: none; + .model { + margin-left: 20px; } - #menu:target .sidebar { - left: 0; + .model::before { + content: "➥"; } - .menuToggle a.closeMenu { - display: none; + #hidden:target .sidebar { + left: -20%; } - #menu:target .menuToggle a.closeMenu { - display: block; + + .menuToggle a.openMenu { + display: none; } - #menu:target .menuToggle a.openMenu { + #hidden:target .menuToggle a.closeMenu { display: none; } - #menu:target section { - margin-left: 20%; + #hidden:target .menuToggle a.openMenu { + display: block; + } + + #hidden:target section { + margin-left: 0; } .catalogTable { @@ -105,6 +121,7 @@ } section { + margin-left: 20%; transition: margin-left 0.25s; padding-top: 2em; padding-left: 2em; @@ -112,12 +129,12 @@ } </style> </head> - <body id="menu"> + <body id="hidden"> <nav class="topbar"> <ul> <li> <div class="menuToggle"> - <a class="openMenu" href="#menu" + <a class="openMenu" href="#" ><span ><svg style="width: 24px; height: 24px" viewBox="0 0 24 24"> <path @@ -125,7 +142,7 @@ d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /></svg></span ></a> - <a class="closeMenu" href="#" + <a class="closeMenu" href="#hidden" ><span ><svg style="width: 24px; height: 24px" viewBox="0 0 24 24"> <path @@ -135,57 +152,57 @@ ></a> </div> </li> - <li><a href="#menu">Catalog</a></li> - <li><a href="#">Parts List</a></li> - <li><a href="#">Cars List</a></li> + <li><a href="#">Index</a></li> + <li><a href="#">Parts</a></li> + <li><a href="#">Cars</a></li> <li><a href="#">Suggestions</a></li> <li><a href="#">About</a></li> - <li><a href="#">Login</a></li> + <li class="right"><a href="#">Login</a></li> </ul> </nav> <nav class="sidebar"> - <ul> - <li> - <a href="#menu">Hudson</a> - <ul> - <li><a href="#menu">Hornet</a></li> - </ul> - </li> - <li><a href="#menu">Essex</a></li> - <li><a href="#menu">Terraplane</a></li> - </ul> + {{#each makes}} + <form action="/parts"> + {{#if (eq this ../selected_make)}} + <button disabled class="make"> + {{ this }} + </button> + <input type="hidden" name="make" value="{{ ../selected_make }}" /> + {{#each ../models}} + {{#if (eq this ../../selected_model)}} + <button disabled class="model">{{ this }}</button> + {{else}} + <button class="model" name="model" value="{{ this }}"> + {{ this }} + </button> + {{/if}} + {{else}} + <button disabled class="model">(No models found)</button> + {{/each}} + {{else}} + <button class="make" name="make" value="{{ this }}">{{ this }}</button> + {{/if}} + </form> + {{else}} + No makes found. + {{/each}} </nav> <section> <form> - <input autofocus type="search" placeholder="hit enter to search!" /> + <input autofocus type="search" placeholder="hit enter to search" /> </form> </section> <section> <table class="catalogTable"> - <thead> - <tr> - <th>Make</th> - <th>Model</th> - <th>Engine CID</th> - <th>Year</th> - </tr> - </thead> <tbody> + {{#each parts}} <tr> - <td>Hudson</td> - <td>Wasp</td> - <td>262ci</td> - <td>1952</td> - </tr> - <tr> - <td>Hudson</td> - <td>Hornet</td> - <td>308ci</td> - <td>1953</td> + <td>{{ this }}</td> </tr> + {{/each}} </tbody> </table> </section> |