Skip to content

Commit 343f6f9

Browse files
jasburjasbur
committed
Manually added design work from @tiito78 
1 parent b8ce100 commit 343f6f9

File tree

2 files changed

+116
-40
lines changed

2 files changed

+116
-40
lines changed

‎Configuration App/app/assets/stylesheets/application.css

+112-38
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,128 @@
1-
/*
2-
* This is a manifest file that'll be compiled into application.css, which will include all the files
3-
* listed below.
4-
*
5-
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
6-
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
7-
*
8-
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
9-
* compiled file so the styles you add here take precedence over styles defined in any styles
10-
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
11-
* file per style scope.
12-
*
13-
*= require_tree .
14-
*= require_self
15-
*/
16-
1+
/* General
2+
---------------------------------------------------------*/
3+
*, :after, :before {
4+
box-sizing: border-box;
5+
}
176
body{
18-
background-color: #E4DD9C;
7+
background-color: #000;
8+
margin:0;
199
}
2010

2111
div#mainContent{
22-
background-color: #8BC34A;
23-
width: 725px;
24-
margin: 74px 0px 0px 9%;
25-
padding: 30px 60px 63px 0px;
26-
text-align: center;
27-
font-size: 3.5em;
28-
color: #505050;
29-
box-shadow: 13px 17px 41px #505050;
12+
background-color: #000;
13+
max-width:680px;
14+
width: 100%;
15+
margin: 0 auto;
16+
text-align: center;
17+
font-size: 3.5rem;
18+
color: #fff;
19+
}
20+
21+
div#mainContent h1 {
22+
margin:0;
3023
}
3124

3225
div#mainContent ul{
33-
list-style: none;
26+
list-style: none;
27+
margin: 0;
28+
padding: 0;
29+
}
30+
31+
/* Select
32+
---------------------------------------------------------*/
33+
34+
li label {
35+
display:inline-block;
36+
margin: 0.5em 0;
37+
padding: 0.5em 0;
38+
}
39+
40+
li.wifiNetwork {
41+
position: relative;
42+
display: inline-block;
43+
margin: 0;
3444
}
3545

36-
div#mainContent li{
37-
margin: 0px 0px 45px 0px;
46+
li.wifiNetwork:after {
47+
content: '▼';
48+
position: absolute;
49+
width: 50px;
50+
color: #deab04;
51+
font-weight: bold;
52+
font-size: 2rem;
53+
right: 10px;
54+
bottom: 50px;
55+
border-radius: 3px;
56+
pointer-events: none;
57+
z-index: 2;
58+
}
59+
60+
select.wifiNetworkInputs {
61+
position: relative;
62+
max-width:680px;
63+
width: 100vw;
64+
background: #111;
65+
color: #999;
66+
border: none;
67+
outline: none;
68+
font-size: 2.5rem;
69+
padding: 1em;
70+
margin: 0;
71+
border-radius: 3px;
72+
cursor: pointer;
73+
height: auto;
74+
-webkit-appearance: none;
75+
-moz-appearance: none;
76+
appearance: none;
3877
}
3978

4079
.wifiNetworkInputs{
41-
width: 100%;
42-
font-size: .8em;
43-
color: #505050;
80+
max-width:680px;
81+
width: 100vw;
82+
padding:1em 0;
83+
font-size: .8em;
84+
color: #999;
85+
background: #111;
86+
border:#999 solid 1px;
4487
}
4588

4689
.wifiConnectButton{
47-
width: 310px;
48-
height: 150px;
49-
margin: 68px 0px 105px 0px;
50-
background-color: #D6D2AA;
51-
border: 7px solid #505050;
52-
font-size: 1em;
53-
color: #505050;
90+
width: 310px;
91+
height: 150px;
92+
margin:1.5em 0 0 0;
93+
background-color: #deab04;
94+
font-size: 3rem;
95+
color: #fff;
96+
-webkit-appearance: none;
97+
-moz-appearance: none;
98+
appearance: none;
99+
}
100+
101+
.reset input {
102+
background:#BF1A2F;
103+
border:#BF1A2F;
104+
color:white;
105+
padding:1em;
106+
margin-top:1.5em;
107+
font-size:1.5rem;
108+
-webkit-appearance: none;
109+
-moz-appearance: none;
110+
appearance: none;
111+
}
112+
113+
/* Wifi Icon
114+
---------------------------------------------------------*/
115+
116+
.wifiIcon {
117+
padding: 20px;
118+
}
119+
.wifiIcon, .wifiIcon:before {
120+
display: inline-block;
121+
border: 60px double transparent;
122+
border-top-color: currentColor;
123+
border-radius: 50%;
124+
}
125+
.wifiIcon:before {
126+
content: '';
127+
width: 0; height: 0;
54128
}

‎Configuration App/app/views/main/index.html.erb

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<div id="mainContent">
22
<h1>WiFi Setup</h1>
3+
<div class="wifiIcon" /></div>
34
<%=form_tag("/main/save_credentials", method: "get") do%>
45
56
<ul>
67
<li><%=label_tag(:ssid, "Select your WiFi network")%></li>
7-
<li>
8+
<li class="wifiNetwork">
89
<select id="ssid" name="ap_info", class="wifiNetworkInputs">
910
<%for ap in @wifi_ap_hash do%>
1011
<option value='<%=ap[:ssid]%>+<%=ap[:encryption_type]%>'><%=ap[:ssid]%></option>
@@ -21,8 +22,9 @@
2122
</ul>
2223

2324
<%end%>
24-
25+
<div class="reset">
2526
<%=form_tag("/main/reset_all", method: "get") do%>
2627
<%=submit_tag("RESET DEVICE")%>
28+
</div>
2729
<%end%>
2830
</div>

0 commit comments

Comments
 (0)