styling session
This commit is contained in:
koksnuss
parent
41d62b799f
commit
7aa9c126a5
@ -146,17 +146,29 @@ function render_response(data, td, set) {
|
||||
/* add or update marker (and name) if found */
|
||||
if (set['found'] && set['found_by'] && set['exists']) {
|
||||
div_class = set['found_by'];
|
||||
$(td).find('div.coin span').html('').html('x');
|
||||
$(td).find('div.coin span').html('').html('✔');
|
||||
|
||||
/* add/update name */
|
||||
if ('name' in data) {
|
||||
let name = escape_html(data['name']);
|
||||
if ([201, 202, 203].includes(data['value'])) {
|
||||
let c = String(value).substring(2,3);
|
||||
let div_special_name = $(td).find('div.special' + c + '_name');
|
||||
if (div_special_name.length == 0) {
|
||||
$(td).append('<div class="special' + c + '_name three_lines">' + name + '</div>');
|
||||
} else if (div_special_name.length == 1) {
|
||||
div_special_name.html(name);
|
||||
if ('name' in data) {
|
||||
let name = escape_html(data['name']);
|
||||
|
||||
/* look for div.special123_name */
|
||||
let div_special_name = $(td).find('div.special' + c + '_name');
|
||||
if (div_special_name.length == 0) {
|
||||
|
||||
/* append div if not found */
|
||||
$(td).append('<div class="special' + c + '_name three_lines">' + name + '</div>');
|
||||
} else if (div_special_name.length == 1) {
|
||||
|
||||
/* only insert inner html */
|
||||
div_special_name.html(name);
|
||||
}
|
||||
|
||||
/* remove name */
|
||||
} else if (!set['exists']) {
|
||||
$(td).find('div.special' + c + '_name').html();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -258,7 +270,7 @@ $(document).ready(function() {
|
||||
td: this
|
||||
}
|
||||
|
||||
if ([201, 202, 203].includes(value)) {
|
||||
if ([201, 202, 203].includes(value) && data['exists']) {
|
||||
let modal = new Modal('add_coin_name', add_coin_name, args);
|
||||
modal.show();
|
||||
} else {
|
||||
|
||||
@ -18,341 +18,447 @@
|
||||
|
||||
*/
|
||||
|
||||
html, table, tr, td, div {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a, a:hover, a:active, a:visited {
|
||||
text-decoration: none;
|
||||
color: black !important;
|
||||
cursor: default;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
/* General */
|
||||
|
||||
a.nav-link:hover {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0px 5px 5px 0px;
|
||||
}
|
||||
|
||||
ul.nav {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
img.country {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 63px !important;
|
||||
}
|
||||
|
||||
th {
|
||||
position: sticky;
|
||||
z-index: 1021;
|
||||
}
|
||||
|
||||
tr {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
td {
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
thead > tr:first-child > th {
|
||||
background-image: linear-gradient(0, #9fc5e8, white);
|
||||
background-position: 100% 100%;
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
thead > tr:nth-child(2) > th {
|
||||
background-color: white;
|
||||
top: 36px;
|
||||
}
|
||||
|
||||
thead > tr:nth-child(2) > th:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 1020;
|
||||
left: 0;
|
||||
top: -1px;
|
||||
width: 40px;
|
||||
height: 42px;
|
||||
line-height: 40px;
|
||||
border-top: 1px solid gray;
|
||||
border-left: 1px solid gray;
|
||||
border-bottom: 2px solid black;
|
||||
}
|
||||
|
||||
tr:nth-child(2) > th:nth-child(10):after { content: '201'; }
|
||||
tr:nth-child(2) > th:nth-child(11):after { content: '202'; }
|
||||
tr:nth-child(2) > th:nth-child(12):after { content: '203'; }
|
||||
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-weight: normal;
|
||||
}
|
||||
|
||||
tbody > tr > td {
|
||||
background-color: #b7b7b7;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
|
||||
tbody > tr > td > div.coin {
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
text-align: inherit;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
td > * {
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div.found {
|
||||
position: absolute;
|
||||
z-index: 1001;
|
||||
top: 0;
|
||||
height:40px;
|
||||
width:40px;
|
||||
clip-path: polygon(100% 70%, 100% 100%, 70% 100%);
|
||||
}
|
||||
|
||||
div.three_lines {
|
||||
font-size: 0.8rem !important;
|
||||
line-height: 13px !important;
|
||||
}
|
||||
div.two_lines {
|
||||
font-size: 0.9rem !important;
|
||||
line-height: 20px !important;
|
||||
}
|
||||
|
||||
div.special1_name, div.special2_name, div.special3_name {
|
||||
display: none;
|
||||
height: 40px;
|
||||
width: 146px;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
color: black;
|
||||
text-align: left;
|
||||
word-wrap: anywhere;
|
||||
word-break: break-all;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
/* smallest view 12 * 40 = 480px */
|
||||
@media (max-width: 654px) {
|
||||
table { width: 360px; }
|
||||
tr:nth-child(2) > th { width: 30px; }
|
||||
tr:nth-child(2) > th:after { width: 30px; }
|
||||
tbody > tr > td > div.coin {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
div.found {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
tr { height: 30px; }
|
||||
thead > tr:nth-child(2) > th:after {
|
||||
height: 32px;
|
||||
width: 30px;
|
||||
line-height:30px;
|
||||
}
|
||||
thead > tr:nth-child(2) > th, tbody > tr > td { font-size: 0.8rem; }
|
||||
}
|
||||
|
||||
/* 1st special coin: 11 * 40 + 200 = 640px */
|
||||
@media (min-width: 655px) {
|
||||
table { width: 640px; }
|
||||
tr:nth-child(2) > th:nth-child(10) {
|
||||
width: 200px;
|
||||
text-align: left;
|
||||
}
|
||||
tr:nth-child(2) > th:nth-child(10):after {
|
||||
width: 200px;
|
||||
padding-left: 5px;
|
||||
content: 'Sondermünze 1';
|
||||
}
|
||||
div.special1_name { display: block; }
|
||||
}
|
||||
|
||||
/* 2nd special coin 10 * 40 + 400 = 800px */
|
||||
@media (min-width: 815px) {
|
||||
table { width: 800px; }
|
||||
tr:nth-child(2) > th:nth-child(11) {
|
||||
width: 200px;
|
||||
text-align: left;
|
||||
}
|
||||
tr:nth-child(2) > th:nth-child(11):after {
|
||||
width: 200px;
|
||||
padding-left: 5px;
|
||||
content: 'Sondermünze 2';
|
||||
}
|
||||
div.special2_name { display: block; }
|
||||
}
|
||||
|
||||
/* 3rd special coin 9 * 40 + 600 = 960px */
|
||||
@media (min-width: 975px) {
|
||||
table { width: 960px; }
|
||||
tr:nth-child(2) > th:nth-child(12) {
|
||||
width: 200px;
|
||||
text-align: left;
|
||||
}
|
||||
tr:nth-child(2) > th:nth-child(12):after {
|
||||
width: 200px;
|
||||
padding-left: 5px;
|
||||
content: 'Sondermünze 3';
|
||||
}
|
||||
div.special3_name { display: block; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
.buy_only {
|
||||
background-color: #dd7e6b;
|
||||
}
|
||||
|
||||
.rare {
|
||||
background-color: #e69138;
|
||||
}
|
||||
|
||||
.noexist {
|
||||
color: white;
|
||||
background-color: #434343;
|
||||
}
|
||||
|
||||
td.brass, th.brass {
|
||||
background-color: #ffff99 !important;
|
||||
}
|
||||
|
||||
td.found {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
td.year {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
td.year-complete {
|
||||
background-color: #00ff00;
|
||||
}
|
||||
|
||||
td.spacer {
|
||||
border: 0;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.ec {
|
||||
color: #ff0000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.checked {
|
||||
color: #00ff00;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
display: inline-block !important;
|
||||
width: auto;
|
||||
html,
|
||||
table,
|
||||
tr,
|
||||
td,
|
||||
div {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body > div.container-fluid {
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1050;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0,0,0);
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
a,
|
||||
a:hover,
|
||||
a:active,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
color: black !important;
|
||||
cursor: pointer;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
|
||||
/* Controlbar */
|
||||
|
||||
button#begin_edit {
|
||||
position: fixed;
|
||||
z-index: 1060;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
position: fixed;
|
||||
z-index: 1060;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
}
|
||||
|
||||
nav.navbar {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
border-top: 1px solid gray;
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
border-top: 1px solid gray;
|
||||
}
|
||||
|
||||
nav.navbar > div#navbarColor03 > * {
|
||||
margin: 5px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
nav.navbar button {
|
||||
white-space: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (min-width:540px) {
|
||||
button.navbar-toggler {
|
||||
button.navbar_toggler {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
div#navbarColor03 {
|
||||
display: flex;
|
||||
flex-basis: auto;
|
||||
}
|
||||
div#navbar_toggler {
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
display: inline-block !important;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
div#navbar_toggler > label {
|
||||
float: left;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
div#buttons {
|
||||
display: block;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div#advanced_options {
|
||||
position: fixed;
|
||||
z-index: 1030;
|
||||
left: 0;
|
||||
border-top: 1px solid gray;
|
||||
bottom: 63px;
|
||||
width: 100%;
|
||||
display:none;
|
||||
background-color: #f8f9fa !important;
|
||||
position: fixed;
|
||||
z-index: 1030;
|
||||
left: 0;
|
||||
border-top: 1px solid gray;
|
||||
bottom: 63px;
|
||||
width: 100%;
|
||||
display: none;
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
|
||||
div#advanced_options > label {
|
||||
float: left;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
height: 44px;
|
||||
padding-top: 11px;
|
||||
float: left;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
height: 44px;
|
||||
padding-top: 11px;
|
||||
}
|
||||
|
||||
div#advanced_options > label:first-child {
|
||||
padding:5px !important;
|
||||
padding: 5px !important;
|
||||
}
|
||||
|
||||
input#circulation, input#found_on {
|
||||
width: 100px;
|
||||
input#circulation,
|
||||
input#found_on {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
a.nav-link:hover {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
|
||||
/* modals */
|
||||
|
||||
div.modal-container {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1050;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0, 0, 0);
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
|
||||
/* country navigation */
|
||||
|
||||
li {
|
||||
padding: 0px 5px 5px 0px;
|
||||
}
|
||||
|
||||
ul.nav {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
|
||||
/* country table */
|
||||
|
||||
|
||||
/* table head */
|
||||
|
||||
table {
|
||||
margin-bottom: 63px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
th {
|
||||
position: sticky;
|
||||
z-index: 1021;
|
||||
}
|
||||
|
||||
th > img {
|
||||
max-height: 20px;
|
||||
}
|
||||
|
||||
tr {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
thead > tr:first-child > th {
|
||||
background-image: linear-gradient(0, #9fc5e8, white);
|
||||
background-position: 100% 100%;
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
thead > tr:nth-child(2) > th {
|
||||
background-color: white;
|
||||
top: 40px;
|
||||
border-bottom: 1px solid gray;
|
||||
}
|
||||
|
||||
tr:nth-child(2) > th:nth-child(10):after,
|
||||
tr:nth-child(2) > th:nth-child(11):after,
|
||||
tr:nth-child(2) > th:nth-child(12):after {
|
||||
position: absolute;
|
||||
z-index: 1020;
|
||||
left: 0;
|
||||
top: -1px;
|
||||
width: 40px;
|
||||
height: 42px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
tr:nth-child(2) > th:nth-child(10):after {
|
||||
content: '201';
|
||||
}
|
||||
|
||||
tr:nth-child(2) > th:nth-child(11):after {
|
||||
content: '202';
|
||||
}
|
||||
|
||||
tr:nth-child(2) > th:nth-child(12):after {
|
||||
content: '203';
|
||||
}
|
||||
|
||||
tr:nth-child(2):after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-bottom: 1.2px solid gray;
|
||||
}
|
||||
|
||||
|
||||
/* table body */
|
||||
|
||||
thead > tr:nth-child(2) > th,
|
||||
table > tbody > tr > td {
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
td > * {
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* coin background colors */
|
||||
|
||||
td.coin {
|
||||
background-color: #cec6ca;
|
||||
border: 1px solid gray;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.brass {
|
||||
background-color: #edb453 !important;
|
||||
}
|
||||
|
||||
.buy_only {
|
||||
background-color: #af6464 !important;
|
||||
}
|
||||
|
||||
.rare {
|
||||
background-color: #dec1a8 !important;
|
||||
}
|
||||
|
||||
.found {
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
.year {
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
.year_complete {
|
||||
background-color: #00ff00 !important;
|
||||
}
|
||||
|
||||
.noexist {
|
||||
border: 0 !important;
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
|
||||
|
||||
/* coin div text style */
|
||||
|
||||
.ec {
|
||||
color: #dc3545;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.checked {
|
||||
color: #28a745;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
/* spacer tr row in between years */
|
||||
|
||||
tr.spacer {
|
||||
border: 0;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
div.coin {
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
text-align: inherit;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
div.found {
|
||||
position: absolute;
|
||||
z-index: 1001;
|
||||
top: 0;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
clip-path: polygon(100% 70%, 100% 100%, 70% 100%);
|
||||
}
|
||||
|
||||
|
||||
/* special coins */
|
||||
|
||||
div.special1_name,
|
||||
div.special2_name,
|
||||
div.special3_name {
|
||||
display: none;
|
||||
height: 40px;
|
||||
width: 146px;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
color: black;
|
||||
text-align: left;
|
||||
word-wrap: anywhere;
|
||||
word-break: break-all;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
div.three_lines {
|
||||
font-size: 0.8rem !important;
|
||||
line-height: 13px !important;
|
||||
}
|
||||
|
||||
div.two_lines {
|
||||
font-size: 0.9rem !important;
|
||||
line-height: 20px !important;
|
||||
}
|
||||
|
||||
|
||||
/* device width specific */
|
||||
|
||||
|
||||
/* smallest view 12 * 40 = 480px */
|
||||
|
||||
@media (max-width: 654px) {
|
||||
table {
|
||||
width: 360px;
|
||||
}
|
||||
tr:nth-child(2) > th {
|
||||
width: 30px;
|
||||
}
|
||||
tr:nth-child(2) > th:after {
|
||||
width: 30px;
|
||||
}
|
||||
tbody > tr > td > div.coin {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
div.found {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
tr {
|
||||
height: 30px;
|
||||
}
|
||||
tr:nth-child(2) > th:nth-child(10):after,
|
||||
tr:nth-child(2) > th:nth-child(11):after,
|
||||
tr:nth-child(2) > th:nth-child(12):after {
|
||||
height: 32px;
|
||||
width: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
thead > tr:nth-child(2) > th,
|
||||
tbody > tr > td {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
thead > tr:nth-child(2) > th {
|
||||
top: 36px;
|
||||
}
|
||||
button.navbar_toggler {
|
||||
display: block;
|
||||
float: right
|
||||
}
|
||||
div#buttons {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 1st special coin: 11 * 40 + 200 = 640px */
|
||||
|
||||
@media (min-width: 655px) {
|
||||
table {
|
||||
width: 640px;
|
||||
}
|
||||
tr:nth-child(2) > th:nth-child(10) {
|
||||
width: 200px;
|
||||
text-align: left;
|
||||
}
|
||||
tr:nth-child(2) > th:nth-child(10):after {
|
||||
width: 200px;
|
||||
padding-left: 5px;
|
||||
content: 'Sondermünze 1';
|
||||
}
|
||||
div.special1_name {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 2nd special coin 10 * 40 + 400 = 800px */
|
||||
|
||||
@media (min-width: 815px) {
|
||||
table {
|
||||
width: 800px;
|
||||
}
|
||||
tr:nth-child(2) > th:nth-child(11) {
|
||||
width: 200px;
|
||||
text-align: left;
|
||||
}
|
||||
tr:nth-child(2) > th:nth-child(11):after {
|
||||
width: 200px;
|
||||
padding-left: 5px;
|
||||
content: 'Sondermünze 2';
|
||||
}
|
||||
div.special2_name {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 3rd special coin 9 * 40 + 600 = 960px */
|
||||
|
||||
@media (min-width: 975px) {
|
||||
table {
|
||||
width: 960px;
|
||||
}
|
||||
tr:nth-child(2) > th:nth-child(12) {
|
||||
width: 200px;
|
||||
text-align: left;
|
||||
}
|
||||
tr:nth-child(2) > th:nth-child(12):after {
|
||||
width: 200px;
|
||||
padding-left: 5px;
|
||||
content: 'Sondermünze 3';
|
||||
}
|
||||
div.special3_name {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,109 +1,108 @@
|
||||
<style type="text/css">
|
||||
{% for user in users %}
|
||||
div.{{ user.name }} {
|
||||
background-color: {{ user.color }};
|
||||
}
|
||||
{% endfor %}
|
||||
</style>
|
||||
<button id="begin_edit" class="btn btn-info">+ hinzufügen</button>
|
||||
<style type="text/css">{% for user in users %}
|
||||
div.{{ user.name }} { background-color: {{ user.color }} !important; }{% endfor %}
|
||||
</style>
|
||||
|
||||
<button id="begin_edit" class="btn btn-info">+ hinzufügen</button>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
{% csrf_token %}
|
||||
<!-- navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
{% csrf_token %}
|
||||
|
||||
<div id="advanced_options" class="fixed-bottom">
|
||||
<label for="circulation">
|
||||
<input id="circulation" type="text" value="Auflage">
|
||||
</label>
|
||||
<label for="buy_only" id="label_buy_only" class="buy_only">
|
||||
<input id="buy_only" type="checkbox">
|
||||
Kursmünze
|
||||
</label>
|
||||
<label for="checked" id="label_checked" class="checked">
|
||||
<input id="checked" type="checkbox">
|
||||
Überprüft, einsortiert
|
||||
</label>
|
||||
<label for="ec" id="label_ec" class="ec">
|
||||
<input id="ec" type="checkbox">
|
||||
Eurocollector 2002
|
||||
</label>
|
||||
<label for="exists" class="noexist">
|
||||
<input id="exists" type="checkbox">
|
||||
Existiert nicht
|
||||
</label>
|
||||
</div>
|
||||
<!-- advanced options -->
|
||||
<div id="advanced_options" class="fixed-bottom">
|
||||
<label for="circulation">
|
||||
<input id="circulation" type="text" value="Auflage">
|
||||
</label>
|
||||
<label for="buy_only" id="label_buy_only" class="buy_only">
|
||||
<input id="buy_only" type="checkbox">
|
||||
Kursmünze
|
||||
</label>
|
||||
<label for="checked" id="label_checked" class="checked">
|
||||
<input id="checked" type="checkbox">
|
||||
Überprüft, einsortiert
|
||||
</label>
|
||||
<label for="ec" id="label_ec" class="ec">
|
||||
<input id="ec" type="checkbox">
|
||||
Eurocollector 2002
|
||||
</label>
|
||||
<label for="exists" class="noexist">
|
||||
<input id="exists" type="checkbox">
|
||||
Existiert nicht
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarColor03">
|
||||
<!-- main options -->
|
||||
<div id="navbar_toggler">
|
||||
<label for="found" id="found_label">
|
||||
<input id="found" type="checkbox" checked="checked">
|
||||
</label>
|
||||
<label for="found_by">
|
||||
<select id="found_by" name="found_by" class="form-control">{% for user in users %}
|
||||
<option value="{{ user.name }}" color="{{ user.color }}">{{ user.name }}</option>{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
<label for="found_on">
|
||||
<input type="text" name="found_on" id="found_on" value="{% now 'd.m.Y' %}">
|
||||
</label>
|
||||
<div id="buttons">
|
||||
<button id="show_advanced_options" class="btn btn-secondary">+ Mehr</button>
|
||||
<button id="show_add_user" class="btn btn-secondary">+ Name</button>
|
||||
<button id="finish_edit" class="btn btn-success">Fertig</button>
|
||||
</div>
|
||||
<button class="navbar_toggler" type="button" data-toggle="collapse" data-target="#navbar_toggler" aria-controls="navbar_toggler" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<label for="found" id="found_label">
|
||||
<input id="found" type="checkbox" checked="checked">
|
||||
</label>
|
||||
<label for="found_by">
|
||||
<select id="found_by" name="found_by" class="form-control">
|
||||
{% for user in users %}
|
||||
<option value="{{ user.name }}" color="{{ user.color }}">{{ user.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
<label for="found_on">
|
||||
<input type="text" name="found_on" id="found_on" value="{% now 'd.m.Y' %}">
|
||||
</label>
|
||||
<button id="show_advanced_options" class="btn btn-info">+ Mehr</button>
|
||||
<button id="show_add_user" class="btn btn-info">+ Name</button>
|
||||
<button id="finish_edit" class="btn btn-info">Fertig</button>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="modal_add_user" class="modal-container">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Name hinzufügen</h5>
|
||||
<button id="close_modal_add_user" type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<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">
|
||||
<!-- modal add_user -->
|
||||
<div id="modal_add_user" class="modal-container">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Name hinzufügen</h5>
|
||||
<button id="close_modal_add_user" type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="text_color">Farbe</label>
|
||||
<input type="text" name="color" id="text_color" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<span id="response"></span>
|
||||
<button type="button" id="add_user" class="btn btn-primary">+ Name hinzufügen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="text_color">Farbe</label>
|
||||
<input type="text" name="color" id="text_color" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<span id="response"></span>
|
||||
<button type="button" id="add_user" class="btn btn-primary">+ Name hinzufügen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="add_coin_name" class="modal-container">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Sondermünze</h5>
|
||||
<button id="add_coin_name_close" type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="add_coin_name_name">Name</label>
|
||||
<input type="text" name="name" id="add_coin_name_name" class="form-control">
|
||||
<!-- modal add_coin_name -->
|
||||
<div id="add_coin_name" class="modal-container">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Sondermünze</h5>
|
||||
<button id="add_coin_name_close" type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="add_coin_name_name">Name</label>
|
||||
<input type="text" name="name" id="add_coin_name_name" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<span id="response"></span>
|
||||
<button type="button" id="add_coin_name_action" class="btn btn-primary">+ Münze hinzufügen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<span id="response"></span>
|
||||
<button type="button" id="add_coin_name_action" class="btn btn-primary">+ Münze hinzufügen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<tr>
|
||||
<th colspan="12">
|
||||
<a name="{{ country.name_iso }}"></a>
|
||||
<img class="country" src="/static/coinc/images/{{ country.name_iso }}.png" />
|
||||
<img src="/static/coinc/images/{{ country.name_iso }}.png" />
|
||||
<a href="{% url 'coinc:country' country.name_iso %}">{{ country.name }}</a>{% if country.comment %}<small> - {{ country.comment }}</small>{% endif %}
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{% for stamp in year %} <tr name="{{ year_short }}" stamp="{{ stamp }}">
|
||||
<td class="year"><div class="coin">{{ stamp }}{{ year_short }}</div></td>
|
||||
<td class="year {{ year_complete }}"><div class="coin">{{ stamp }}{{ year_short }}</div></td>
|
||||
{% for value in values %}{% show_coin country year_short stamp value %}{% endfor %} </tr>{% endfor %}{% ifnotequal year|length 1 %}
|
||||
<tr>
|
||||
<td class="spacer" colspan="12"></td>
|
||||
|
||||
@ -173,7 +173,7 @@ def show_coin(country, year, stamp, value):
|
||||
marker = ''
|
||||
if coin.found_by:
|
||||
div_class = f"found {coin.found_by}"
|
||||
marker = 'x'
|
||||
marker = '✔'
|
||||
|
||||
name = coin.name if coin.name else ''
|
||||
special_class = ''
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user