Manually added design work from @tiito78

jasbur · Oct 26, 2017 · 343f6f9 · 343f6f9
1 parent b8ce100
commit 343f6f9
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 40 deletions.
diff --git a/Configuration App/app/assets/stylesheets/application.css b/Configuration App/app/assets/stylesheets/application.css
@@ -1,54 +1,128 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any styles
- * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
- * file per style scope.
- *
- *= require_tree .
- *= require_self
- */
-
+/* General
+---------------------------------------------------------*/
+*, :after, :before {
+	box-sizing: border-box;
+}
 body{
-  background-color: #E4DD9C;
+	background-color: #000;
+	margin:0;
 }
 
 div#mainContent{
-  background-color: #8BC34A;
-  width: 725px;
-  margin: 74px 0px 0px 9%;
-  padding: 30px 60px 63px 0px;
-  text-align: center;
-  font-size: 3.5em;
-  color: #505050;
-  box-shadow: 13px 17px 41px #505050;
+	background-color: #000;
+	max-width:680px;
+	width: 100%;
+	margin: 0 auto;
+	text-align: center;
+	font-size: 3.5rem;
+	color: #fff;
+}
+
+div#mainContent h1 {
+	margin:0;
 }
 
 div#mainContent ul{
-  list-style: none;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+ /* Select
+---------------------------------------------------------*/
+
+li label {
+  display:inline-block;
+  margin: 0.5em 0;
+  padding: 0.5em 0;
+}
+
+li.wifiNetwork {
+  position: relative;
+  display: inline-block;
+  margin: 0;
 }
 
-div#mainContent li{
-  margin: 0px 0px 45px 0px;
+li.wifiNetwork:after {
+	content: '▼';
+	position: absolute;
+	width: 50px;
+	color: #deab04;
+	font-weight: bold;
+	font-size: 2rem;
+	right: 10px;
+	bottom: 50px;
+	border-radius: 3px;
+	pointer-events: none;
+	z-index: 2;
+}
+
+select.wifiNetworkInputs {
+	position: relative;
+	max-width:680px;
+	width: 100vw;
+	background: #111;
+	color: #999;
+	border: none;
+	outline: none;
+	font-size: 2.5rem;
+	padding: 1em;
+	margin: 0;
+	border-radius: 3px;
+	cursor: pointer;
+	height: auto;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
 }
 
 .wifiNetworkInputs{
-  width: 100%;
-  font-size: .8em;
-  color: #505050;
+	max-width:680px;
+	width: 100vw;
+	padding:1em 0;
+	font-size: .8em;
+	color: #999;
+	background: #111;
+	border:#999 solid 1px;
 }
 
 .wifiConnectButton{
-  width: 310px;
-  height: 150px;
-  margin: 68px 0px 105px 0px;
-  background-color: #D6D2AA;
-  border: 7px solid #505050;
-  font-size: 1em;
-  color: #505050;
+	width: 310px;
+	height: 150px;
+	margin:1.5em 0 0 0;
+	background-color: #deab04;
+	font-size: 3rem;
+	color: #fff;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+}
+
+.reset input {
+	background:#BF1A2F;
+	border:#BF1A2F;
+	color:white;
+	padding:1em;
+	margin-top:1.5em;
+	font-size:1.5rem;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+}
+
+  /* Wifi Icon
+---------------------------------------------------------*/
+
+.wifiIcon {
+  padding: 20px;
+}
+.wifiIcon, .wifiIcon:before {
+  display: inline-block;
+  border: 60px double transparent;
+  border-top-color: currentColor;
+  border-radius: 50%;
+}
+.wifiIcon:before {
+  content: '';
+  width: 0; height: 0;
 }
diff --git a/Configuration App/app/views/main/index.html.erb b/Configuration App/app/views/main/index.html.erb
@@ -1,10 +1,11 @@
 <div id="mainContent">
   <h1>WiFi Setup</h1>
+  <div class="wifiIcon" /></div>
   <%=form_tag("/main/save_credentials", method: "get") do%>
 
     <ul>
       <li><%=label_tag(:ssid, "Select your WiFi network")%></li>
-      <li>
+      <li class="wifiNetwork">
         <select id="ssid" name="ap_info", class="wifiNetworkInputs">
           <%for ap in @wifi_ap_hash do%>
               <option value='<%=ap[:ssid]%>+<%=ap[:encryption_type]%>'><%=ap[:ssid]%></option>
@@ -21,8 +22,9 @@
     </ul>
 
   <%end%>
-
+  <div class="reset">
   <%=form_tag("/main/reset_all", method: "get") do%>
     <%=submit_tag("RESET DEVICE")%>
+  </div>
   <%end%>
 </div>