Skip to content

Commit a78a5dd

Browse files
rossengeorgievrossengeorgiev
committed
UI & pan improvements
1 parent 88c862e commit a78a5dd

File tree

6 files changed

+73
-23
lines changed

6 files changed

+73
-23
lines changed

‎cache.manifest‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
CACHE MANIFEST
2-
# version 204
2+
# version 207
33

44
# gogole maps files
55
http://maps.google.com/maps/api/js?v=3.10&sensor=false&language=en_us&key=AIzaSyCOqkcNey4CCyG4X0X5qxHAhCgD8g5DwXg

‎css/main.css‎

Lines changed: 64 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22
* Main style sheet
33
*
44
*/
5+
@font-face {
6+
font-family: 'Roboto';
7+
font-style: normal;
8+
font-weight: 400;
9+
src: local('Roboto Regular'), local('Roboto-Regular'), url(../font/Roboto-regular.woff) format('woff');
10+
}
511

612
html, body {
713
margin: 0;
@@ -10,6 +16,13 @@ html, body {
1016
height: 100%;
1117
overflow: hidden;
1218
}
19+
body {
20+
font-family: "Roboto", Ariel, sans-serif;
21+
}
22+
23+
i.right {
24+
float: right;
25+
}
1326

1427
.scrollStyleV {
1528
z-index: 100;
@@ -139,11 +152,6 @@ header > div {
139152
.nav > li:active { background-color: #33b5e5; }
140153
.nav > li:hover { border-bottom: 5px solid #fff; }
141154

142-
.header .arrow {
143-
font-weight: normal;
144-
float: right;
145-
color: #aaa;
146-
}
147155

148156
#main .data {
149157
cursor: url('../img/openhand.cur'), row-resize;
@@ -159,12 +167,25 @@ header > div {
159167
height: 20px;
160168
padding: 10px;
161169
padding-right: 3px;
170+
padding-left: 5px;
162171
border-bottom: 1px solid #33b5e5;
163172
position: relative;
164173
z-index: 4;
165174
cursor: pointer;
166175
background-color: #fff;
176+
border-left: 5px solid #fff;
177+
}
178+
#main .row.selected {
179+
border-left: 5px solid #00A3D3;
180+
}
181+
#main .row:hover .header {
182+
border-left: 5px solid #00A3D3;
167183
}
184+
185+
#main .row:hover .data {
186+
border-left: 5px solid #ccc;
187+
}
188+
168189
#main .vehicle0 .header {
169190
border-top: 1px solid #33b5e5;
170191
}
@@ -175,14 +196,43 @@ header > div {
175196
line-height: 100px;
176197
border: 0;
177198
}
199+
#main .header.empty:hover {
200+
border:0;
201+
}
178202
#main .header span {
179203
overflow: hidden;
180204
display: block;
181205
width: 90%;
182206
float: left;
183207
}
184-
.row .header .arrow:after { content: "▲"; }
185-
.row.active .header .arrow:after { content: "▼"; }
208+
209+
.header .arrow {
210+
font-weight: normal;
211+
float: right;
212+
color: #aaa;
213+
display: block;
214+
height: 14px;
215+
width: 16px;
216+
line-height: 11px;
217+
font-size: 16px;
218+
margin-top: 4px;
219+
transition: 0.2s linear;
220+
transform-origin: center;
221+
-ms-transform-origin: center;
222+
-webkit-transform-origin: center;
223+
}
224+
225+
226+
.row .header .arrow:after {
227+
content: "▲";
228+
}
229+
.row:hover .arrow {
230+
transform: rotate(-90deg);
231+
color: #00a3d3;
232+
}
233+
.row.active .header .arrow {
234+
transform: rotate(-180deg);
235+
}
186236

187237
#main .row {
188238
background-color: #f4f4f4;
@@ -192,8 +242,11 @@ header > div {
192242
}
193243
#main .row .header {
194244
}
195-
#main .row:hover .header { color: #33b5e5; font-weight: bold; }
196-
#main .row .data { display: none; width: 100%; }
245+
#main .row .data {
246+
display: none;
247+
width: 100%;
248+
border-left: 5px solid #F4F4F4;
249+
}
197250
#main .row.active .data { display: inline-block; }
198251
#main .row .data .left,
199252
#main .row .data .right {
@@ -405,7 +458,7 @@ header > div {
405458
#main .data .left {
406459
float: left;
407460
width: 160px;
408-
padding-left: 10px;
461+
padding-left: 5px;
409462
}
410463
#main .data dl > dt {
411464
color: #000;
@@ -448,7 +501,7 @@ header > div {
448501
#main .data .left {
449502
float: left;
450503
width: 65%;
451-
padding-left: 10px;
504+
padding-left: 5px;
452505
padding-right: 20px;
453506
}
454507
#main .data .right {

‎font/Roboto-regular.woff‎

20.6 KB
Binary file not shown.

‎index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,14 @@
1515
<link rel="apple-touch-icon" sizes="144x144" href="img/apple-touch-icon.png" />
1616
<link rel="fluid-icon" href="img/fluidicon.png" title="Mobile Tracker" />
1717
<link rel="icon" type="image/x-icon" href="favicon.ico" />
18-
<!--
1918
<link rel="stylesheet" href="css/base.css"/>
2019
<link rel="stylesheet" href="css/skeleton.css"/>
2120
<link rel="stylesheet" href="css/layout.css"/>
2221
<link rel="stylesheet" href="css/habitat-font.css"/>
2322
<link rel="stylesheet" href="css/main.css"/>
24-
-->
23+
<!--
2524
<link rel="stylesheet" href="css/mobile.css"/>
25+
-->
2626
</head>
2727
<body>
2828

@@ -48,7 +48,7 @@
4848

4949
<div id="aboutbox" style="display: none">
5050
<div class="slimContainer">
51-
<h2>About</h2>
51+
<h2><i class="icon-question right"></i>About</h2>
5252
<hr>
5353
<span>
5454
Welcome to the Habitat Mobile Tracker beta. This webpage is specifically crafted with mobile devices in mind.
@@ -65,7 +65,7 @@ <h2>Contribute</h2>
6565
</div>
6666
<div id="settingsbox" style="display: none">
6767
<div class="slimContainer">
68-
<h2>Settings</h2>
68+
<h2><i class="icon-settings right"></i>Settings</h2>
6969
<hr>
7070
<div class="row option">
7171
<span><b>Daylight overlay</b></span>

‎js/app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -258,7 +258,7 @@ $(window).ready(function() {
258258

259259
// disable following only we are collapsing the followed vehicle
260260
if(follow_vehicle == parseInt(e.attr('class').match(/vehicle(\d+)/)[1])) {
261-
followVehicle(parseInt(e.attr('class').match(/vehicle(\d+)/)[1]));
261+
stopFollow();
262262
}
263263
} else {
264264
// expand data for selected vehicle

‎js/tracker.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -277,16 +277,13 @@ function stopFollow() {
277277
function followVehicle(index) {
278278
if(follow_vehicle != -1 && vehicles.length) vehicles[follow_vehicle].follow = false;
279279

280-
if(follow_vehicle == index) {
281-
vehicles[follow_vehicle].follow = false;
282-
follow_vehicle = -1;
283-
} else if(follow_vehicle != index) {
280+
if(follow_vehicle != index) {
284281
follow_vehicle = index;
285282
vehicles[follow_vehicle].follow = true;
286-
panTo(index);
287-
288283
updateGraph(index, true);
289284
}
285+
286+
panTo(index);
290287
}
291288

292289
function roundNumber(number, digits) {

0 commit comments

Comments
 (0)