Responsive table

2 years ago · a16ef8a316
parent 3d868cc774
commit a16ef8a316
5 changed files with 23 additions and 25 deletions
--- 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 {