forked from tohe/wmdeit_kaform
				
			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-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*")?>" />
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
								
								
								
								
							
							
						
						
									
										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
								
								
								
								
							
							
						
						
									
										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
								
								
								
								
							
							
						
						
									
										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…
	
		Reference in New Issue