Skip to content

Commit 40dc145

Browse files
LidaronLidaron
committed
menu redesign
1 parent 14396ce commit 40dc145

File tree

5 files changed

+108
-76
lines changed

5 files changed

+108
-76
lines changed

‎earthlapse-hci/menu-section-arrow.png‎

10.6 KB
Loading

‎earthlapse-hci/modes-default.css‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1+
.earthlapse-modes-default-container h1 {
2+
text-shadow: 5px 5px 15px rgba(0,0,0,0.65);
3+
}
4+
15
.earthlapse-modes-default-container h2 {
2-
font-size: 400%;
6+
font-size: 64px;
37
margin: 0.5em 0;
8+
text-shadow: 5px 5px 15px rgba(0,0,0,0.65);
49
}
510

611
.earthlapse-modes-default-content {
@@ -9,6 +14,6 @@
914
bottom: 0;
1015
left: 0;
1116
right: 0;
12-
height: 21em;
17+
height: 18.5em;
1318
margin: auto;
1419
}

‎earthlapse-hci/modes-menu.css‎

Lines changed: 80 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,101 @@
1+
.earthlapse-modes-menu-container {
2+
text-align: left;
3+
padding: 0 0 0 20%;
4+
}
5+
6+
.earthlapse-modes-menu-container h1 {
7+
margin: 2em 0 1em 0;
8+
line-height: 1;
9+
text-shadow: 5px 5px 15px rgba(0,0,0,0.65);
10+
}
11+
112
.earthlapse-modes-menu-container h2 {
2-
margin: 1.5em 0 1.1em 0;
13+
margin: 0 0 0.5em -100px;
14+
font-weight: 400;
15+
padding: 0 0 0 100px;
16+
font-size: 60px;
17+
text-shadow: 5px 5px 15px rgba(0,0,0,0.65);
18+
}
19+
20+
.earthlapse-modes-menu-section {
21+
margin: 5em 0;
22+
padding: 0 0 0 80px;
23+
position: relative;
24+
}
25+
26+
.earthlapse-modes-menu-section::before {
27+
content: '';
28+
position: absolute;
29+
left: -10px;
30+
top: 0;
31+
background: url(menu-section-arrow.png) no-repeat left;
32+
background-size: contain;
33+
height: 80px;
34+
width: 80px;
35+
}
36+
37+
.earthlapse-modes-menu-section-stories::before {
38+
background-position: 0 7px;
39+
}
40+
41+
.earthlapse-modes-menu-section-explore::before {
42+
background-position: 0 23px;
343
}
444

45+
/* Stories Section
46+
-------------------------------------------------- */
47+
548
.earthlapse-modes-menu-container div.img {
6-
margin: 5px;
49+
margin: 0 30px 30px 0;
750
float: left;
8-
}
51+
position: relative;
52+
}
53+
54+
.earthlapse-modes-menu-container div.img img {
55+
display: block;
56+
}
957

1058
.earthlapse-modes-menu-container div.desc {
1159
padding: 15px;
1260
text-align: center;
13-
font-weight: 400;
61+
font-weight: 300;
62+
font-size: 1.8em;
63+
position: absolute;
64+
bottom: 0;
65+
left: 0;
66+
right: 0;
67+
background: rgba(0,0,0,0.65);
68+
padding: 10px;
1469
}
1570

71+
/* Explore Section
72+
-------------------------------------------------- */
73+
1674
.earthlapse-modes-menu-container .earthlapse-modes-menu-explore::before {
17-
content: 'or';
1875
font-size: 36px;
1976
display: block;
2077
margin: 36px;
2178
}
2279

2380
.earthlapse-modes-menu-container .earthlapse-modes-menu-explorebutton {
2481
font: inherit;
25-
font-size: 36px;
26-
text-transform: lowercase;
27-
background: #7f7f7f;
28-
padding: 20px 50px;
29-
border: 0;
30-
border-radius: 20px;
31-
color: #fff;
82+
font-size: 48px;
83+
background: none;
84+
padding: 20px 30px;
85+
border: 5px solid #ffffff;
86+
box-shadow: 5px 5px 15px rgba(0,0,0,0.50), 5px 5px 15px rgba(0,0,0,0.50) inset;
87+
text-shadow: 5px 5px 15px rgba(0,0,0,0.65);
88+
color: #ffffff;
3289
outline: none;
33-
font-weight: 300;
90+
font-weight: 400;
91+
transition-duration: 0.2s;
92+
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
93+
}
94+
95+
.earthlapse-modes-menu-explorebutton.hasfocus,
96+
.earthlapse-modes-menu-explorebutton:active {
97+
background: #ffffff;
98+
color: #000000;
99+
box-shadow: 5px 5px 15px rgba(0,0,0,0.50);
100+
text-shadow: 0 0 0 rgba(0,0,0,0);
34101
}

‎earthlapse-hci/modes-menu.html‎

Lines changed: 21 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,15 @@
1818
});
1919

2020
// On selection of explore button, initiate exploration mode
21-
$(".earthlapse-modes-menu-container").on("click", ".earthlapse-modes-menu-explorebutton", function (e) {
21+
$(".earthlapse-modes-menu-container").on("mousedown", ".earthlapse-modes-menu-explorebutton", function (e) {
22+
$(this).addClass("hasfocus");
23+
}).on("mouseup", ".earthlapse-modes-menu-explorebutton", function (e) {
24+
var $this = $(this);
25+
26+
// If this button had focus, then we should execute an action
27+
if (!$this.hasClass("hasfocus")) { return; }
28+
$this.removeClass("hasfocus");
29+
2230
EarthlapseUI.Modes.changeModeTo("explore");
2331
});
2432

@@ -62,67 +70,20 @@
6270
});
6371
</script>
6472
<div class="earthlapse-modes-screen">
65-
<h2>Choose a story to begin</h2>
66-
67-
<div class="earthlapse-stories-gallery">
68-
<!-- div class="ui-button earthlapse-modes-menu-item" data-storyid="las-vegas">
69-
<div class="img">
70-
<img src="http://thumbnails.cmucreatelab.org/thumbnail?root=http://earthengine.google.org/timelapse/data/20130507&boundsLTRB=239833.73508091227,522897.15176901396,243314.48721083216,524958.4096709508&width=250&height=150&frameTime=2.1">
71-
<div class="desc">Las Vegas</div>
72-
</div>
73-
</div>
74-
75-
<div class="ui-button earthlapse-modes-menu-item" data-storyid="lake-urmia">
76-
<div class="img">
77-
<img src="http://thumbnails.cmucreatelab.org/thumbnail?root=http://earthengine.google.org/timelapse/data/20130507&boundsLTRB=829953.5478804687,512969.2419359944,842765.3283798227,520556.2182004556&width=250&height=150&frameTime=1.5">
78-
<div class="desc">Lake Urmia</div>
79-
</div>
80-
</div>
81-
82-
<div class="ui-button earthlapse-modes-menu-item" data-storyid="fires-at-night">
83-
<div class="img">
84-
<img src="http://thumbnails.cmucreatelab.org/thumbnail?root=http://earthengine.google.org/timelapse/data/20130507&boundsLTRB=69258.77206860541,209520.56620188005,1212884.3532619216,886761.3400647969&width=250&height=150&frameTime=1.6">
85-
<div class="desc">Fire at Night</div>
86-
</div>
87-
</div>
88-
89-
<div class="ui-button earthlapse-modes-menu-item" data-storyid="example">
90-
<div class="img">
91-
<img src="http://placehold.it/250x150">
92-
<div class="desc">Amazon Deforestation</div>
93-
</div>
94-
</div>
73+
<h1>Welcome to Planet Earth!</h1>
9574

96-
<div class="ui-button earthlapse-modes-menu-item" data-storyid="example">
97-
<div class="img">
98-
<img src="http://placehold.it/250x150">
99-
<div class="desc">Columbia Glacier</div>
100-
</div>
101-
</div>
102-
103-
<div class="ui-button earthlapse-modes-menu-item" data-storyid="example">
104-
<div class="img">
105-
<img src="http://placehold.it/250x150">
106-
<div class="desc">Solar Panel in California</div>
107-
</div>
108-
</div>
75+
<section class="earthlapse-modes-menu-section earthlapse-modes-menu-section-stories">
76+
<h2 class="earthlapse-modes-menu-section-heading">Choose a story to begin</h2>
10977

110-
<div class="ui-button earthlapse-modes-menu-item" data-storyid="example">
111-
<div class="img">
112-
<img src="http://placehold.it/250x150">
113-
<div class="desc">U.S. Solar</div>
114-
</div>
78+
<div class="earthlapse-stories-gallery">
79+
<!-- Todo: Columbia Glacier -->
80+
<!-- Todo: Solar Panel in California -->
81+
<!-- Todo: U.S. Solar -->
82+
<!-- Todo: U.S. Wind -->
11583
</div>
84+
</section>
11685

117-
<div class="ui-button earthlapse-modes-menu-item" data-storyid="example">
118-
<div class="img">
119-
<img src="http://placehold.it/250x150">
120-
<div class="desc">U.S. Solar</div>
121-
</div>
122-
</div -->
123-
</div>
124-
125-
<div class="earthlapse-modes-menu-explore">
126-
<button class="ui-button earthlapse-modes-menu-explorebutton">Explore on your own</button>
127-
</div>
86+
<section class="earthlapse-modes-menu-section earthlapse-modes-menu-section-explore">
87+
<button class="earthlapse-modes-menu-section-heading ui-button earthlapse-modes-menu-explorebutton">Explore on your own</button>
88+
</section>
12889
</div>

‎earthlapse-hci/modes.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ body.earthlapse-modes-story .earthlapse-modes-story-container,
1212
body.earthlapse-modes-explore .earthlapse-modes-explore-container {
1313
visibility: visible;
1414
opacity: 1;
15-
transform: none;
1615
}
1716

1817
body.earthlapse-modes-default .earthlapse-modes-screen.earthlapse-modes-default-container,

0 commit comments

Comments
 (0)