Responsive table
This commit is contained in:
parent
3d868cc774
commit
a16ef8a316
1
form.php
1
form.php
|
@ -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*")?>" />
|
||||||
|
|
|
@ -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"/>
|
||||||
|
|
13
kaform.js
13
kaform.js
|
@ -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>`;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
17
master.css
17
master.css
|
@ -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) {
|
||||||
|
|
16
master.scss
16
master.scss
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue