Skip to content

Commit 723e300

Browse files
rossengeorgievrossengeorgiev
committed
revision of the UI + bug fixes
* limited the minimal screen size to 320px * added chase car UI * added about UI * my the 'locate-me' icon, switch from any view to map and then pan to current location * improved GPS position polling * fixed a few bugs around the code * updated TODO
1 parent dad6be0 commit 723e300

File tree

6 files changed

+301
-41
lines changed

6 files changed

+301
-41
lines changed

‎SCREEN-SIZES‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
P = portrait
22
L = landscape
33

4-
iPhone 3G
4+
iPhone 3G,3Gs
55
-------
6-
Full mode: 320x480 (P), 480x420 (L)
6+
Full mode: 320x480 (P), 480x320 (L)

‎TODO‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,4 @@
1-
* adjust colors and fonts of the template to be more slick
2-
3-
* new menu
4-
- home is just the regular screen
5-
- current location: only on devices supporting geolocation
6-
- chase car view, where you can switch uploading of GPS data
7-
to habitat, so a chase car is displayed on the map
8-
- help cotains credits and useful info
9-
10-
* chase car option
1+
* implement functanility to actually push ChaseCar info to habitat
112

123
* move to Gmaps API3, as API2 is being shutdown in May 2013
134

@@ -21,18 +12,25 @@
2112

2213
* in the field tracking view, distance to target vehicle
2314

15+
Optimizations
16+
-----------------------
17+
18+
* minimize footprint
19+
20+
* combine+minify CSSs into a single file
21+
22+
* combine+minify JS into a single file
23+
2424
known bugs
2525
------------------------
2626

27-
* if geolocation is available, but no coordinates have
28-
the locate me button on the menu, display a popup
29-
3027
* on iphone, where the screen has higher DPI, all icons
3128
look blurry because they are blown up. Should have
3229
a mechanism to detect such display and a set of higher
3330
resolution icons
34-
35-
(all icons are not vectors 04/01/2013)
31+
32+
04/01/2013
33+
all icons are now vectors, map markers are still low res images
3634

3735

3836

‎css/main.css‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,119 @@ header > div {
121121
opacity: 0.6;
122122
}
123123

124+
#chasecarbox,
125+
#aboutbox {
126+
position: absolute;
127+
width: 100%;
128+
z-index: 4;
129+
background: #fff;
130+
}
131+
.slimContainer {
132+
margin: 20px auto;
133+
width: 300px;
134+
height: 100%;
135+
}
136+
.slimContainer hr {
137+
margin-bottom: 10px;
138+
}
139+
.slimContainer .row {
140+
width: 100%;
141+
display: block;
142+
margin: 5px;
143+
}
144+
.slimContainer .row > span {
145+
float: left;
146+
}
147+
.slimContainer .row > span.r {
148+
float: right;
149+
}
150+
151+
152+
/* iOS styled switch buttons
153+
*/
154+
.switch {
155+
float: right;
156+
height: 28px;
157+
width: 77px;
158+
border: 1px solid #979797;
159+
border-radius: 20px;
160+
margin-top: -5px;
161+
box-shadow: inset 0 1px 3px #BABABA, inset 0 12px 3px 2px rgba(232, 232, 232, 0.5);
162+
cursor: pointer;
163+
overflow: hidden;
164+
}
165+
.switch input[type=checkbox] {
166+
display: none;
167+
}
168+
.switch:before {
169+
content: "";
170+
display: block;
171+
height: 28px;
172+
width: 0px;
173+
position: absolute;
174+
border-radius: 20px;
175+
-webkit-box-shadow: inset 0 1px 2px #33B5E5, inset 0 12px 3px 2px #00A3D3;
176+
box-shadow: inset 0 1px 2px #33B5E5, inset 0 12px 3px 2px #00A3D3;
177+
background-color: #33B5E5;
178+
}
179+
.switch.on:before {
180+
width: 77px;
181+
}
182+
.switch > .thumb {
183+
display: block;
184+
width: 26px;
185+
height: 26px;
186+
position: relative;
187+
top: 0;
188+
z-index: 3;
189+
border: solid 1px #919191;
190+
border-radius: 28px;
191+
box-shadow: inset 0 2px 1px white, inset 0 -2px 1px white;
192+
background-color: #CECECE;
193+
background-image: -webkit-linear-gradient(#CECECE, #FBFBFB);
194+
background-image: -moz-linear-gradient(#CECECE, #FBFBFB);
195+
background-image: -o-linear-gradient(#CECECE, #FBFBFB);
196+
-o-transition: all 0.125s ease-in-out;
197+
-webkit-transition: all 0.125s ease-in-out;
198+
-moz-transition: all 0.125s ease-in-out;
199+
-o-transform: translateX(0px);
200+
-webkit-transform: translate3d(0,0,0);
201+
-moz-transform: translateX(0px);
202+
}
203+
.switch.on > .thumb {
204+
-webkit-transform: translate3d(49px,0,0);
205+
-o-transform: translateX(49px);
206+
-moz-transform: translateX(49px);
207+
}
208+
.switch:hover > .thumb {
209+
box-shadow: inset 0 2px 1px #fff, inset 0 -2px 1px #fff;
210+
background-image: none;
211+
}
212+
.switch > .thumb:before {
213+
font-weight: bold;
214+
font-size: 14px;
215+
color: #fff;
216+
content: "On";
217+
display: block;
218+
height: 14px;
219+
width: 14px;
220+
border: none;
221+
position: absolute;
222+
top: 3px;
223+
left: -30px;
224+
}
225+
.switch > .thumb:after {
226+
font-weight: bold;
227+
font-size: 14px;
228+
content: "Off";
229+
display: block;
230+
height: 14px;
231+
width: 14px;
232+
position: absolute;
233+
right: -28px;
234+
top: 3px;
235+
}
236+
124237
@media only screen and (min-width: 321px) {
125238
.portrait { display: none; }
126239
.landscape { display: block; }
@@ -228,3 +341,4 @@ header > div {
228341
font-size: 10px;
229342
}
230343
}
344+

‎index.html‎

Lines changed: 53 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,65 @@
3636
<ol class="nav">
3737
<li class="home"><i class="icon-habhub"></i></li>
3838
<li class="chasecar" style="display: none"><i class="icon-car"></i></li>
39-
<li class="help last"><i class="icon-question"></i></li>
39+
<li class="about last"><i class="icon-question"></i></li>
4040
</ol>
4141
<span id="locate-me" style="display: none"><i class="icon-target"></i></span>
4242
<span id="app_name"><b>mobile<br/>tracker</b></span>
4343
</div>
4444
</header>
4545

46-
47-
46+
<div id="aboutbox" style="display: none">
47+
<div class="slimContainer">
48+
<h2>About</h2>
49+
<hr>
50+
<span>ttext text texttext text texttext text texttext text textext text text</span>
51+
<h2>Issues</h2>
52+
<hr>
53+
<span>text text texttext text texttext text texttext text texttext text text</span>
54+
</div>
55+
</div>
56+
<div id="chasecarbox" style="display: none">
57+
<div class="slimContainer">
58+
<h2>Chase car mode</h2>
59+
<hr>
60+
<div class="row">
61+
<span>Enable</span>
62+
<div class="switch off">
63+
<span class="thumb"></span>
64+
<input type="checkbox" id="chasecar_on">
65+
</div>
66+
</div>
67+
<div class="row">
68+
<span>Name</span>
69+
<span class="r" id="cc_id">mobile512_chase</span>
70+
</div>
71+
<hr>
72+
<div class="row">
73+
<span>Last updated</span>
74+
<span class="r" id="cc_timestamp">never</span>
75+
</div>
76+
<div class="row">
77+
<span>Latitude</span>
78+
<span class="r" id="cc_lat">0.000000</span>
79+
</div>
80+
<div class="row">
81+
<span>Longitude</span>
82+
<span class="r" id="cc_lon">0.000000</span>
83+
</div>
84+
<div class="row">
85+
<span>Altitude</span>
86+
<span class="r" id="cc_alt">none</span>
87+
</div>
88+
<div class="row">
89+
<span>Accuracy</span>
90+
<span class="r" id="cc_accuracy">none</span>
91+
</div>
92+
<div class="row">
93+
<span>Speed</span>
94+
<span class="r" id="cc_speed">none</span>
95+
</div>
96+
</div>
97+
</div>
4898
<div id="map" style="dispaly: none"></div>
4999
<div id="main" style="dispaly: none">
50100
<div class="scrollwrapper">

0 commit comments

Comments
 (0)