offbyn
/
nostrweb
forked from nostr/nostrweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feed: add inline form for writing new messages 

Just a prototype, not functioning yet
OFF0 2022-11-09 20:54:25 +01:00
parent bac4b9c5e6
commit 44568060c0
Signed by: offbyn
GPG Key ID: 94A2F643C51F37FA
2 changed files with 43 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/form.css
View File

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

@ -12,10 +12,16 @@
<input type="radio" name="maintabs" id="homefeed" checked> <input type="radio" name="maintabs" id="homefeed" checked>
<label for="homefeed">feed</label> <label for="homefeed">feed</label>
<div class="content"> <div class="content">
<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 class="cards" id="feedlist"></div>
<div class="buttons buttons-bottombar">
<button type="button" class="button-big" id="publish">Write</button>
</div>
</div> </div>
</div> </div>