Responsive table

This commit is contained in:
Tobias Herre 2021-09-13 11:33:03 +02:00
parent 3d868cc774
commit a16ef8a316
5 changed files with 23 additions and 25 deletions

View file

@ -92,7 +92,6 @@
<div class="is-row"> <div class="is-row">
<div class="is-col"> <div class="is-col">
<input type="input" size="32" id="n_iban" name="n_iban" placeholder="<?=_("Kontonummer*")?>" /> <input type="input" size="32" id="n_iban" name="n_iban" placeholder="<?=_("Kontonummer*")?>" />
</div> </div>
<div class="is-col"> <div class="is-col">
<input type="input" size="32" id="n_bic" name="n_bic" placeholder="<?=_("BIC/SWIFT*")?>" /> <input type="input" size="32" id="n_bic" name="n_bic" placeholder="<?=_("BIC/SWIFT*")?>" />

View file

@ -36,6 +36,7 @@
</head> </head>
<body> <body>
<div class="page is-container"> <div class="page is-container">
<div class="main-sidebar text-centered"> <div class="main-sidebar text-centered">
<img class="wmdelogo" alt="wikimedia logo" src="Wikimedia_Deutschland-Logo.svg"/> <img class="wmdelogo" alt="wikimedia logo" src="Wikimedia_Deutschland-Logo.svg"/>

View file

@ -148,7 +148,7 @@ function getUploadField(rid)
data-url="upload.php?row=${rid}" data-url-remove="delete.php" data-url="upload.php?row=${rid}" data-url-remove="delete.php"
data-progress="true" data-progress="true"
data-size="40" data-size="40"
data-placeholder="drag!"> data-placeholder="Datei">
</div> </div>
<div id="upload-target${rid}" class="upload-target small"></div> <div id="upload-target${rid}" class="upload-target small"></div>
</div> </div>
@ -165,13 +165,13 @@ function getRow(rid,num) {
+ `${num}` + `${num}`
+"</td>" +"</td>"
+ "<td data-label=\"Datum\">" + "<td data-label=\"Datum\">"
+ `<input name="date[${rid}]" value="" type="date" placeholder="Datum*"/>` + `<input class="tab_input" name="date[${rid}]" value="" type="date" placeholder="Datum*"/>`
+ "</td>" + "</td>"
+ "<td data-label=\"Beschr.\">" + "<td data-label=\"Beschr.\">"
+ `<input name="desc[${rid}]" type="text" placeholder="Beschreibung"/>` + `<input class="tab_input" name="desc[${rid}]" type="text" placeholder="Beschreibung"/>`
+ "</td>" + "</td>"
+ "<td>" + "<td data-label=\"Betrag\">"
+ `<input name="amount[${rid}] type="text" placeholder="0.00"/>` + `<input class="tab_input" name="amount[${rid}] type="text" placeholder="0.00"/>`
+ "</td>" + "</td>"
+ "<td style=\"vertical-align: middle\">" + "<td style=\"vertical-align: middle\">"
+ cur + cur
@ -192,7 +192,8 @@ function getRow(rid,num) {
`<td><span `<td><span
onclick="deleteTableRow(${rid})" onclick="deleteTableRow(${rid})"
class="close is-large"> class="close is-large">
</span></td>`; </span>
</td>`;
} }

View file

@ -1,9 +1,9 @@
body { body {
margin: auto; margin: auto;
padding: 1em; padding: 1em;
border: 1px solid red; border: 0px solid red;
max-width: 90em; max-width: 90em;
min-width: 75em; min-width: 78em;
} }
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
body { body {
@ -19,14 +19,13 @@ body {
} }
} }
input { .tab_input {
width: 50%; display: inline;
} }
@media only screen and (max-width: 767px) {
table { .tab_input {
text-align: right; width: 50%;
border: 1px solid red; }
background-color: red;
} }
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {

View file

@ -7,9 +7,9 @@
body { body {
margin: auto; margin: auto;
padding:1em; padding:1em;
border:1px solid red; border:0px solid red;
max-width:90em; max-width:90em;
min-width:75em; min-width:78em;
@include for-mobile { @include for-mobile {
min-width: 2em; min-width: 2em;
padding:0.5em; padding:0.5em;
@ -23,13 +23,11 @@ fieldset {
} }
} }
input { .tab_input {
width:50%; display:inline;
} @include for-mobile {
table { width:50%;
text-align:right; }
border:1px solid red;
background-color:red;
} }
h1 { h1 {