mgoetz/soundboard
1
0
Fork 0
forked from server/soundboard
Code Issues Pull Requests Releases Wiki Activity

Design nice tag input field

Browse Source
This commit is contained in:
Martin Müller 2017-07-18 19:13:56 +02:00
parent ab381d2729
commit 102dd681a0
2 changed files with 34 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
static/main.css
View File

@ -29,7 +29,7 @@ input {
border-radius: 5px; border-radius: 5px;
color: #eee; color: #eee;
margin: 0; margin: 0;
padding: 1em; padding: 5px;
vertical-align: middle; vertical-align: middle;
} }
@ -39,8 +39,34 @@ input {
margin-right: auto; margin-right: auto;
} }
.editform input { .editform input, .tagcontainer {
margin: 0.5em; margin: 5px;
}
.tagcontainer {
background-color: #666;
border: 1px solid #999;
border-radius: 5px;
}
.tags span {
background-color: #333;
border-radius: 2px;
font-size: 0.9em;
margin: 5px;
padding: 2px 5px 2px 5px;
}
.tags, .taginput {
display: inline-block;
}
.taginput {
background: none;
border: none;
border-radius: 0;
margin: 0 !important;
padding: 5px 5px 5px 0px;
} }
.youtube label { .youtube label {
@ -48,8 +74,8 @@ input {
} }
nav { nav {
text-align: center;
margin: 1em; margin: 1em;
text-align: center;
} }
nav > a { nav > a {
@ -136,4 +162,3 @@ nav .extra > a {
.table-cell { .table-cell {
display: table-cell; display: table-cell;
} }

5
templates/edit.html
View File

@ -10,7 +10,10 @@
<label for="tags">Tags</label> <label for="tags">Tags</label>
</div> </div>
<div class="table-cell"> <div class="table-cell">
<input type="input" name="tags" id="tags" /> <div class="tagcontainer">
<div class="tags"><span>Test</span></div>
<input class="taginput" type="input" name="tags" id="tags" />
</div>
</div> </div>
</div> </div>
<div class="table-row"> <div class="table-row">