Responsive table

3 years ago · a16ef8a316
--- a/form.php
+++ b/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*")?>" />
--- a/index.php
+++ b/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"/>
--- a/kaform.js
+++ b/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>`;

 }

--- a/master.css
+++ b/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) {
--- a/master.scss
+++ b/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 {