Responsive layout

danieltmbr · Feb 1, 2016 · 46707e0 · 46707e0
1 parent ac442ee
commit 46707e0
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 20 deletions.
diff --git a/Source/JsonToSwift.html b/Source/JsonToSwift.html
@@ -8,20 +8,23 @@
 
 <h1>JSON to Swift converter</h1>
 
-<div class="preferences">
+<div id="preferences">
 <form>	
-	<input type="checkbox" id="cb-let" checked="checked">Declare properties as 'let'<br/>
-	<input type="checkbox" id="cb-double" checked="checked">Always declare number-value-properties as Double<br/>
-	<input type="checkbox" id="cb-collection" checked="checked">Generate collection initializer<br/>
-	<input type="checkbox" id="cb-recursive" checked="checked">Allow recursion (create DTOs for for inner objects)<br/>
+	<div><input type="checkbox" id="cb-let" checked="checked"/>Declare properties as 'let'</div>
+	<div><input type="checkbox" id="cb-double" checked="checked"/>Always declare number-value-properties as Double</div>
+	<div><input type="checkbox" id="cb-collection" checked="checked"/>Generate collection initializer</div>
+	<div><input type="checkbox" id="cb-recursive" checked="checked"/>Allow recursion (create DTOs for for inner objects)</div>
 	<!-- yyyy-MM-dd'T'HH:mm:ss.SSSZ - 2015-07-04T23:10:00.000+02:00 -->
-	<br/>Date format: <input type="text" id="tb-dateformat" value="yyyy-MM-dd'T'HH:mm:ss.SSSZ"/><br/><input id="b-convert" type="button" value="Generate NSDate initializer for this format" onclick="generateDateExtension()" style="width:294px;" />
-	<pre><code id="date-extension"></code></pre>
+	<div class="date">
+	<div>Date format: <input type="text" id="tb-dateformat" value="yyyy-MM-dd'T'HH:mm:ss.SSSZ"/></div>
+	<div><input id="b-convert" type="button" value="Generate NSDate initializer for this format" onclick="generateDateExtension()" style="width:294px;" /></div>
+	<br/><div><pre><code id="date-extension"></code></pre></div>
+	</div>
 <br/>
 </form>
 </div>
 
-<div class="input">
+<div id="input">
 <h3 id="h3-json">JSON:</h3>
 <form>
 	<textarea id="ta-json" placeholder="Insert your JSON here..." autofocus>{
@@ -51,10 +54,9 @@ <h3 id="h3-json">JSON:</h3>
 </form>
 </div>
 
-<div class="output">
+<div id="output">
 <h3>Swift:</h3>
-<pre>
-<code id="swift"><!--<span class="definition">final class</span> <span class="replace">ClassName</span>: <span class="var">ResponseJSONSerializable, ResponseJSONCollectionSerializable</span> {
+<pre><code id="swift"><!--<span class="definition">final class</span> <span class="replace">ClassName</span>: <span class="var">ResponseJSONSerializable, ResponseJSONCollectionSerializable</span> {
 
     <span class="definition">let</span> type: <span class="type">String</span>
     <span class="definition">let</span> contact: <span class="type">String</span>
@@ -80,8 +82,7 @@ <h3>Swift:</h3>
     }
     </span>
 }-->
-</code>
-</pre>
+</code></pre>
 </div>
 
 </body>

diff --git a/Source/converter.js b/Source/converter.js
@@ -14,7 +14,6 @@ function parseJson(json, className) {
     	var object = JSON.parse(json);
 	} catch(err) {
 		invalidInput();
-	    // document.getElementById("demo").innerHTML = err.message;
 	}
 	createClass(className, object);
 }
@@ -238,4 +237,4 @@ function removeError() {
 
 function clearData() {
 	classes = {};
-}
+}
diff --git a/Source/stylesheet.css b/Source/stylesheet.css
@@ -29,8 +29,12 @@ h3#h3-json.error::before {
 	content: "Invalid ";
 }
 
-input:hover {
-	cursor: pointer;
+#preferences form div input {
+	margin-right: 8px;
+}
+
+input {
+	cursor: pointer !important;
 }
 
 input[type="button"] {
@@ -47,10 +51,9 @@ input[type="button"] {
 
 input[type="text"] {
 	min-width: 200px;
-	border-width: 1px;
-	border-radius: 3px;
-	border-color: #AAA;
 	min-height: 18px;
+	border: solid 1px #AAA;
+	border-radius: 3px;
 }
 
 textarea#ta-json {
@@ -80,6 +83,10 @@ code {
 	font-size: 11px;
 }
 
+div.date {
+	margin-top: 12px;
+}
+
 span.definition {
 	color: rgb(207, 0, 160);
 }
@@ -111,4 +118,45 @@ span.replace::after {
 
 .hidden {
 	display: none;
+}
+
+@media only screen and (min-width: 1280px) {
+
+	body {
+		text-align: center;
+	}
+
+	#input {
+		display: inline-block;
+		vertical-align: top;
+		width: 37%;
+		margin: auto auto;
+		text-align: left;
+	}
+
+	textarea#ta-json {
+		min-height: 400px;
+	}
+
+	#output {
+		display: inline-block;
+		width: auto;
+		min-width: 37%;
+		text-align: left;
+		margin-left: 30px;
+	}
+
+	#preferences form div {
+		display: inline-block;
+		margin: 10px 10px;
+	}
+
+	#preferences form div.date {
+		display: block;
+	}
+
+	#preferences pre {
+		text-align: left;
+	}
+
 }