Browse Source

Responsive table

master
Tobias Herre 1 year ago
parent
commit
a16ef8a316
  1. 1
      form.php
  2. 1
      index.php
  3. 13
      kaform.js
  4. 17
      master.css
  5. 16
      master.scss

1
form.php

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

1
index.php

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

13
kaform.js

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

17
master.css

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

16
master.scss

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

Loading…
Cancel
Save