feed: add inline form for writing new messages

Just a prototype, not functioning yet
pull/2/head
OFF0 2 years ago
parent bac4b9c5e6
commit 44568060c0
Signed by: offbyn
GPG Key ID: 94A2F643C51F37FA

@ -3,7 +3,7 @@ form {
input,
textarea {
color: var(--bgcolor-accent);
color: var(--color);
font-family: monospace;
font-size: 1.6rem;
margin-bottom: 1.2rem;
@ -12,7 +12,6 @@ textarea {
button,
label {
color: var(--bgcolor-accent);
display: block;
font-family: monospace;
font-size: 1.6rem;
@ -21,12 +20,16 @@ label {
text-indent: 0;
}
label {
color: var(--bgcolor-accent);
}
input[type="password"],
input[type="text"] {
border: .2rem solid #b7b7b7;
border-radius: .2rem;
display: block;
outline-color: rgb(102, 102, 102);
margin: 0;
width: 100%;
}
input[type="password"]:focus,
@ -39,16 +42,19 @@ input[type="text"]:focus {
align-items: center;
display: flex;
justify-content: flex-end;
margin-top: 2rem;
min-height: 3.2rem;
}
.buttons-bottombar {
bottom: 2rem;
padding: 0 1rem;
position: sticky;
button {
background-color: var(--bgcolor-accent);
border: none;
border-radius: .2rem;
cursor: pointer;
outline-offset: 1px;
}
.buttons-bottombar button {
font-size: 2rem;
margin: 1rem;
button:focus {
}
.button-inline {
@ -58,14 +64,6 @@ input[type="text"]:focus {
padding: .3rem;
}
button {
background-color: var(--bgcolor-accent);
border: none;
border-radius: .2rem;
color: white;
cursor: pointer;
}
button:disabled {
background-color: var(--bgcolor-inactive);
cursor: default;
@ -80,3 +78,21 @@ button:disabled {
flex-grow: 1;
padding: 1rem 1.8rem;
}
.form-inline {
display: flex;
flex-grow: 1;
gap: 1rem;
}
.form-inline input[type=text] {
flex-grow: 1;
}
.form-inline button {
flex-grow: 0;
}
.focus-active {
}

@ -12,10 +12,16 @@
<input type="radio" name="maintabs" id="homefeed" checked>
<label for="homefeed">feed</label>
<div class="content">
<div class="cards" id="feedlist"></div>
<div class="buttons buttons-bottombar">
<button type="button" class="button-big" id="publish">Write</button>
<article class="mbox">
<img class="mbox-img" src="bubble.svg">
<div class="mbox-body">
<form class="form-inline">
<input type="text" name="message">
<button type="button" id="publish">send</button>
</form>
</div>
</article>
<div class="cards" id="feedlist"></div>
</div>
</div>

Loading…
Cancel
Save