feat: added rule editor
This commit is contained in:
Sara
parent
31c465edda
commit
376e940f34
114
index.html
114
index.html
|
|
@ -92,6 +92,7 @@ input {
|
|||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 3px var(--input-padding);
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
input:hover {
|
||||
|
|
@ -126,7 +127,7 @@ main {
|
|||
nav {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: stretch;
|
||||
justify-content: space-between;
|
||||
background-color: var(--back-color-1);
|
||||
color: var(--front-color-1);
|
||||
width: calc(var(--sidebar-width) + var(--sidebar-padding) * 2);
|
||||
|
|
@ -136,20 +137,43 @@ nav {
|
|||
padding: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
nav.left {
|
||||
float: left;
|
||||
left: 0;
|
||||
border-right: var(--border-width) solid var(--front-color-1);
|
||||
}
|
||||
|
||||
nav.right {
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
right: 0;
|
||||
float: right;
|
||||
border-left: var(--border-width) solid var(--front-color-1);
|
||||
}
|
||||
|
||||
nav > section {
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
flex-flow: column nowrap;
|
||||
height: 50%;
|
||||
max-height: 50%;
|
||||
flex-grow: 1;
|
||||
max-height: auto;
|
||||
overflow-y: hidden;
|
||||
padding: 0px var(--sidebar-padding);
|
||||
border-bottom: var(--border-width) solid var(--front-color-1);
|
||||
padding-bottom: 0.5em;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
nav > #rule-editor > form {
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
flex-flow: row nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
nav > #rule-editor > form > :first-child {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
nav > section > div {
|
||||
|
|
@ -176,9 +200,10 @@ nav > section > div > h2 > a {
|
|||
nav > section > div > h2 > img {
|
||||
display: inline;
|
||||
height: 1em;
|
||||
vertical-align: sub;
|
||||
object-position: right;
|
||||
margin: 0px 2px;
|
||||
align-self: center;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
||||
nav > section > input {
|
||||
|
|
@ -186,7 +211,6 @@ nav > section > input {
|
|||
|
||||
padding: 5px var(--hpadd);
|
||||
width: calc(100% - var(--hpadd) * 2);
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
search {
|
||||
|
|
@ -281,7 +305,7 @@ img.favicon-big {
|
|||
</head>
|
||||
<!---------------------- HERE BEGINS THE LAYOUT -------------------->
|
||||
<body>
|
||||
<nav>
|
||||
<nav class="left">
|
||||
<section id="your-lists">
|
||||
<h1>Your Lists</h1>
|
||||
<input placeholder="Add (List name or URL)" inputmode="verbatim" class="add-element">
|
||||
|
|
@ -307,37 +331,6 @@ img.favicon-big {
|
|||
<h2><a href="index.html">Makers</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h1>'Home' List</h1>
|
||||
<input placeholder="Add (Feed or page URL)" inputmode="verbatim">
|
||||
<button>Subscribe</button>
|
||||
<div>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Newspaper A</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Blog Z</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Podcast Y</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Reviewer N</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Chef V</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Artist P</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Newspaper A</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Blog Z</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Podcast Y</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Reviewer N</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Chef V</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Artist P</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Newspaper A</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Blog Z</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Podcast Y</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Reviewer N</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Chef V</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Artist P</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Newspaper A</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Blog Z</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Podcast Y</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Reviewer N</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Chef V</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Artist P</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
</div>
|
||||
</section>
|
||||
</nav>
|
||||
<main>
|
||||
<search>
|
||||
|
|
@ -439,5 +432,50 @@ img.favicon-big {
|
|||
</article></a>
|
||||
</section>
|
||||
</main>
|
||||
<nav class="right">
|
||||
<section id="rule-editor">
|
||||
<h1>'Home' Rules</h1>
|
||||
<form>
|
||||
<input id="points-input" placeholder="+1" inputmode="numeric" style="width:3em">
|
||||
<input placeholder="Rules" inputmode="verbatim" style="flex-grow:1;width:100%">
|
||||
</form>
|
||||
<button>Add</button>
|
||||
<div>
|
||||
<h2><a>+10 contains:rpg</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a>-10 tag:sponsored</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h1>'Home' List</h1>
|
||||
<input placeholder="Add (Feed or page URL)" inputmode="verbatim">
|
||||
<button>Subscribe</button>
|
||||
<div>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Newspaper A</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Blog Z</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Podcast Y</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Reviewer N</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Chef V</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Artist P</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Newspaper A</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Blog Z</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Podcast Y</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Reviewer N</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Chef V</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Artist P</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Newspaper A</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Blog Z</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Podcast Y</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Reviewer N</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Chef V</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Artist P</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Newspaper A</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Blog Z</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Podcast Y</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Reviewer N</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Chef V</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Artist P</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||
</div>
|
||||
</section>
|
||||
</nav>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue