moritz/coinmanager
1
0
Fork 0
Code Issues 22 Pull Requests Releases Wiki Activity

simplify css, add more control elements to control bar

Browse Source
This commit is contained in:
koksnuss 2020-05-02 01:22:29 +02:00
parent c6fd777ca0
commit 4572af6d7b
2 changed files with 59 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
coinmanager/coinc/static/coinc/styles.css
View File

@ -17,6 +17,7 @@
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
html, table, tr, td, div {
margin: 0;
padding: 0;
@ -53,56 +54,62 @@ table {
margin-bottom: 30px !important;
}
table tr {
th {
position: sticky;
}
tr {
height: 30px;
}
table td {
td {
overflow: hidden;
vertical-align: middle;
white-space: nowrap;
}
table > thead > tr > th {
position: sticky;
}
table > thead > tr:first-child > th {
border-bottom: 1.7px solid black;
thead > tr:first-child > th {
background-image: linear-gradient(0, #9fc5e8, white);
background-position: 100% 100%;
padding: 5px;
text-align: left;
top: 0;
}
table > thead > tr:nth-child(2) > th {
background-color: white;
}
table > thead > tr:nth-child(2) > th:after {
content: '';
position: absolute;
left: -0.7px;
top: -1.4px;
width: 30px;
height: 30px;
border-top: 1px solid gray;
border-left: 1px solid gray;
border-bottom: 1px solid gray;
}
table > thead > tr:nth-child(2) > th, table > tbody > tr > td {
text-align: center;
font-size: 0.8rem;
font-weight: normal;
thead > tr:nth-child(2) > th {
background-color: white;
top: 36px;
}
table > tbody > tr > td {
thead > tr:nth-child(2) > th:after {
content: '';
position: absolute;
left: 0;
top: -1px;
width: 30px;
height: 32px;
border-top: 1px solid gray;
border-left: 1px solid gray;
border-bottom: 2px solid black;
}
thead > tr:nth-child(2) > th:last-child:after {
border-right: 1px solid gray;
}
thead > tr:nth-child(2) > th, table > tbody > tr > td {
text-align: center;
font-size: 0.8rem;
font-weight: normal;
}
tbody > tr > td {
background-color: #b7b7b7;
border: 1px solid gray;
}
table > tbody > tr > td > div.coin {
tbody > tr > td > div.coin {
position: relative;
height: 30px;
width: 30px;
@ -163,10 +170,6 @@ div.found {
clip-path: polygon(100% 70%, 100% 100%, 70% 100%);
}
div.Moritz {
background-color: red;
}
div.username {
position: fixed;
left: 0;
@ -200,5 +203,3 @@ div#username {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.hide { display: none; }

33
coinmanager/coinc/templates/coinc/username.html
View File

@ -1,11 +1,26 @@
<div class="username">
<label for="select_usernames" id="for_select_usernames">Name</label>
<select id="select_usernames" name="username" form="username_form" class="form-control">
{% for user in users %}
<option value="{{ user.name }}" color="{{ user.color }}">{{ user.name }}</option>
{% endfor %}
</select>
<span id="user_message"><button id="show_add_user" class="btn btn-info">+ Namen hinzufügen</button></span>
<label for="found" id="found_label">
<input id="found" type="checkbox" checked="checked">
gefunden von
</label>
<label for="select_usernames" id="for_select_usernames">
<select id="select_usernames" name="username" form="username_form" class="form-control">
{% for user in users %}
<option value="{{ user.name }}" color="{{ user.color }}">{{ user.name }}</option>
{% endfor %}
</select>
</label>
<label for="datetime_now">
<input type="radio" name="datetime" id="datetime_now" checked="checked">
jetzt
</label>
<label for="datetime_custom">
<input type="radio" name="datetime" id="datetime_custom">
Datum
</label>
<button id="show_add_user" class="btn btn-info">+ Namen hinzufügen</button>
</div>
<div id="modal_add_user" class="modal-container">
@ -20,11 +35,11 @@
<div class="modal-body">
<div class="form-group">
<label for="text_user">Name</label>
<input type="text" name="user" id="text_user" class="form-control" />
<input type="text" name="user" id="text_user" class="form-control">
</div>
<div class="form-group">
<label for="text_color">Farbe</label>
<input type="text" name="color" id="text_color" class="form-control" />
<input type="text" name="color" id="text_color" class="form-control">
</div>
</div>
<div class="modal-footer">