feat: Replace ui explorer with liquid template
- Explorer screen uses app.liquid layout instead of _app_frame.njk - Rename to just Explorer
This commit is contained in:
parent
a85dbbe27c
commit
bbd1a9674e
2 changed files with 145 additions and 146 deletions
145
source/screens/demo/examples/ui/explorer.liquid
Normal file
145
source/screens/demo/examples/ui/explorer.liquid
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
---
|
||||
title: Explorer
|
||||
tags:
|
||||
- ui
|
||||
---
|
||||
{% assign bodyClass = "body_frame" -%}
|
||||
{% layout "hippie/app.liquid" %}
|
||||
|
||||
{% block body %}
|
||||
{% render 'hippie/partials/frame-header.liquid' %}
|
||||
<main class="io">
|
||||
<aside class="io">
|
||||
<nav>
|
||||
<span>location-pane</span>
|
||||
<ul class="vertical">
|
||||
<li>
|
||||
<a class="a_button" href="">
|
||||
<span>Start/Home</span>
|
||||
<i class="bi bi-pin-fill"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="a_button" href="">
|
||||
<span>System</span>
|
||||
<i class="bi bi-pin-fill"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<hr>
|
||||
<nav>
|
||||
<ul class="vertical">
|
||||
<li>
|
||||
<a class="a_button" href="">
|
||||
<span>💽 disc link</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="a_button" href="">
|
||||
<span>📁 folder link</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="a_button" href="">
|
||||
<span>🔗 location link</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
<section>
|
||||
<header class="io">
|
||||
<nav>
|
||||
<button title="back">
|
||||
<i class="bi bi-caret-left"></i>
|
||||
</button>
|
||||
<button title="up">
|
||||
<i class="bi bi-caret-up"></i>
|
||||
</button>
|
||||
<button title="forward">
|
||||
<i class="bi bi-caret-right"></i>
|
||||
</button>
|
||||
<button title="reload">
|
||||
<i class="bi bi-arrow-clockwise"></i>
|
||||
</button>
|
||||
<input placeholder="//" type="text">
|
||||
</nav>
|
||||
<nav>
|
||||
<span>location-bar</span>
|
||||
<hr class="vertical">
|
||||
<button title="search">
|
||||
<i class="bi bi-search"></i>
|
||||
</button>
|
||||
<input placeholder="*" type="text">
|
||||
</nav>
|
||||
</header>
|
||||
<header class="io">
|
||||
<nav>
|
||||
<button title="add">
|
||||
<i class="bi bi-plus-circle"></i>
|
||||
</button>
|
||||
<div class="spacer a"></div>
|
||||
<button title="cut">
|
||||
<i class="bi bi-scissors"></i>
|
||||
</button>
|
||||
<button title="copy">
|
||||
<i class="bi bi-copy"></i>
|
||||
</button>
|
||||
<button title="paste">
|
||||
<i class="bi bi-clipboard-check-fill"></i>
|
||||
</button>
|
||||
<div class="spacer b"></div>
|
||||
<button title="delete">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</nav>
|
||||
<hr class="vertical">
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<button title="collapse">
|
||||
<i class="bi bi-arrows-collapse"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button title="expand">
|
||||
<i class="bi bi-arrows-expand-vertical"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<span>options-bar</span>
|
||||
</nav>
|
||||
<nav></nav>
|
||||
</header>
|
||||
<div id="content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>name</th>
|
||||
<th>date</th>
|
||||
<th>type</th>
|
||||
<th>size</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>folder</td>
|
||||
<td>YYYY-MM-DD</td>
|
||||
<td>folder</td>
|
||||
<td>4KB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>file</td>
|
||||
<td>YYYY-MM-DD</td>
|
||||
<td>folder</td>
|
||||
<td>1B</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% render 'hippie/partials/frame-status.liquid' %}
|
||||
</section>
|
||||
</main>
|
||||
{% render 'hippie/partials/frame-mode.liquid' %}
|
||||
{% endblock %}
|
||||
|
|
@ -1,146 +0,0 @@
|
|||
---
|
||||
title: GUI explorer
|
||||
tags:
|
||||
- ui
|
||||
---
|
||||
{% set pageId = page.fileSlug %}
|
||||
|
||||
{% extends "hippie/_app_frame.njk" %}
|
||||
|
||||
{% block body %}
|
||||
{{ io.frameHeader('title-bar') }}
|
||||
<main class="io">
|
||||
<aside class="io">
|
||||
<nav>
|
||||
<span>location-pane</span>
|
||||
<ul class="vertical">
|
||||
<li>
|
||||
<a class="a_button" href="">
|
||||
<span>Start/Home</span>
|
||||
<i class="bi bi-pin-fill"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="a_button" href="">
|
||||
<span>System</span>
|
||||
<i class="bi bi-pin-fill"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<hr>
|
||||
<nav>
|
||||
<ul class="vertical">
|
||||
<li>
|
||||
<a class="a_button" href="">
|
||||
<span>💽 disc link</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="a_button" href="">
|
||||
<span>📁 folder link</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="a_button" href="">
|
||||
<span>🔗 location link</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
<section>
|
||||
<header class="io">
|
||||
<nav>
|
||||
<button title="back">
|
||||
<i class="bi bi-caret-left"></i>
|
||||
</button>
|
||||
<button title="up">
|
||||
<i class="bi bi-caret-up"></i>
|
||||
</button>
|
||||
<button title="forward">
|
||||
<i class="bi bi-caret-right"></i>
|
||||
</button>
|
||||
<button title="reload">
|
||||
<i class="bi bi-arrow-clockwise"></i>
|
||||
</button>
|
||||
<input placeholder="//" type="text">
|
||||
</nav>
|
||||
<nav>
|
||||
<span>location-bar</span>
|
||||
<hr class="vertical">
|
||||
<button title="search">
|
||||
<i class="bi bi-search"></i>
|
||||
</button>
|
||||
<input placeholder="*" type="text">
|
||||
</nav>
|
||||
</header>
|
||||
<header class="io">
|
||||
<nav>
|
||||
<button title="add">
|
||||
<i class="bi bi-plus-circle"></i>
|
||||
</button>
|
||||
<div class="spacer a"></div>
|
||||
<button title="cut">
|
||||
<i class="bi bi-scissors"></i>
|
||||
</button>
|
||||
<button title="copy">
|
||||
<i class="bi bi-copy"></i>
|
||||
</button>
|
||||
<button title="paste">
|
||||
<i class="bi bi-clipboard-check-fill"></i>
|
||||
</button>
|
||||
<div class="spacer b"></div>
|
||||
<button title="delete">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</nav>
|
||||
<hr class="vertical">
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<button title="collapse">
|
||||
<i class="bi bi-arrows-collapse"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button title="expand">
|
||||
<i class="bi bi-arrows-expand-vertical"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<span>options-bar</span>
|
||||
</nav>
|
||||
<nav></nav>
|
||||
</header>
|
||||
<div id="content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>name</th>
|
||||
<th>date</th>
|
||||
<th>type</th>
|
||||
<th>size</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>folder</td>
|
||||
<td>YYYY-MM-DD</td>
|
||||
<td>folder</td>
|
||||
<td>4KB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>file</td>
|
||||
<td>YYYY-MM-DD</td>
|
||||
<td>folder</td>
|
||||
<td>1B</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{ io.statusBar() }}
|
||||
</section>
|
||||
</main>
|
||||
{{ io.frameFooter('mode-bar') }}
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue