mission list layout

jamesperet 10 anni fa
parent
commit
f9e05120d9

+ 2 - 2
app/assets/javascripts/start.js

@@ -59,9 +59,9 @@ function attachHandler(jQuery) {
59 59
 	    // we round here to reduce a little workload
60 60
 	    stop = Math.round($(document).scrollTop());
61 61
 	    if (stop > mainbottom) {
62
-	        $('.navbar-inner').addClass('past-main');
62
+	        $('.navbar-inner.nav_fx').addClass('past-main');
63 63
 	    } else {
64
-	        $('.navbar-inner').removeClass('past-main');
64
+	        $('.navbar-inner.nav_fx').removeClass('past-main');
65 65
 	   }
66 66
 
67 67
 	});

+ 177 - 0
app/assets/stylesheets/avalanche_theme.css.less

@@ -1,5 +1,39 @@
1 1
 // Avalanche Theme
2 2
 
3
+.top-container {
4
+	margin-top: 85px
5
+}
6
+
7
+.page-header {
8
+	padding-bottom: 0;
9
+	margin: 20px 0 30px;
10
+	border-bottom: 2px solid #D4D4DE;
11
+}
12
+
13
+.page-header h1 {
14
+	font-family: 'Helvetica-LightOblique', 'Helvetica Light Oblique', "Helvetica Neue";
15
+	font-style: italic;
16
+	font-weight: 300;
17
+	text-transform: uppercase;
18
+	font-size: 64px;
19
+	color: #1D1D26;
20
+	line-height: 77px;
21
+	margin-bottom: 0px;
22
+}
23
+
24
+.page-header h1 .btn {
25
+	margin-bottom: 9px;
26
+}
27
+
28
+h2 {
29
+	font-family: Avenir-LightOblique;
30
+	font-size: 32px;
31
+	color: #000000;
32
+	line-height: 44px;
33
+	font-style: italic;
34
+	font-weight: 200;
35
+}
36
+
3 37
 .thumbnail {
4 38
 	display: block;
5 39
 	line-height: 20px;
@@ -51,6 +85,12 @@
51 85
 
52 86
 .thumbnail-mission-description { height: 110px;}
53 87
 
88
+.thumbnails.mission-list {
89
+	margin-bottom: 60px;
90
+}
91
+
92
+// Mission Status
93
+
54 94
 .mission-status {
55 95
 	padding-left: 6px;
56 96
 	padding-right: 6px;
@@ -64,6 +104,18 @@
64 104
 	background-color: #D4D4DE;
65 105
 }
66 106
 
107
+.status-launched {
108
+	background-color: #55B3DA;
109
+}
110
+
111
+.status-completed {
112
+	background-color: #92BC64;
113
+}
114
+
115
+.status-failed {
116
+	background-color: #F26C63;
117
+}
118
+
67 119
 .mission-counter {
68 120
 	font-family: Avenir-Medium;
69 121
 	font-size: 18px;
@@ -85,4 +137,129 @@
85 137
 	margin-left: auto;
86 138
 	margin-right: auto;
87 139
 	text-align: center;
140
+}
141
+
142
+// Buttons
143
+
144
+.btn.btn-success {
145
+	color: #92BC64;
146
+	border-color: #92BC64;
147
+}
148
+
149
+.btn {
150
+	display: inline-block;
151
+	padding: 4px 12px;
152
+	margin-bottom: 0;
153
+	text-align: center;
154
+	vertical-align: middle;
155
+	cursor: pointer;
156
+	color: #333333;
157
+	background-color: transparent;
158
+	border: 2px solid #cccccc;
159
+	border-bottom-color: #b3b3b3;
160
+	border-radius: 4px;
161
+	text-shadow: none;
162
+	/* Create Mission: */
163
+	font-family: Avenir-Book;
164
+	font-style: normal;
165
+	color: #333333;
166
+	text-transform: none;
167
+}
168
+
169
+// Footer
170
+
171
+footer {
172
+	font-family: "Avenir";
173
+	font-weight: 600;
174
+	text-align: center;
175
+	color: #1D1D26;
176
+	margin-top: 30px;
177
+	padding-top: 20px;
178
+}
179
+
180
+.footer-white {
181
+	
182
+}
183
+
184
+.footer-black {
185
+	background-color: #202020;
186
+	color: white;
187
+}
188
+
189
+.footer-white a {
190
+	color: #1D1D26;
191
+	font-weight: bold;
192
+}
193
+
194
+.footer-white a:hover {
195
+	color: #55B3DA;
196
+	font-weight: bold;
197
+	text-transform: underline;
198
+}
199
+
200
+.footer-black a {
201
+	color: white;
202
+	font-weight: bold;
203
+	background-color: transparent;
204
+}
205
+
206
+.footer-black a:hover {
207
+	color: #55B3DA;
208
+	font-weight: bold;
209
+	text-transform: underline;
210
+	background-color: transparent;
211
+}
212
+
213
+footer .column .column-inner {
214
+	min-height: 90px
215
+}
216
+
217
+footer .column .column-inner.centered {
218
+	min-height: 75px
219
+}
220
+
221
+.column {
222
+	width: 20%;
223
+	float: left;
224
+}
225
+
226
+.column-inner {
227
+	padding-left: 10px;
228
+	padding-right: 10px;
229
+	padding-top: 10px;
230
+}
231
+
232
+.footer-white .column-inner {
233
+	border-right: 2px solid #1D1D26;
234
+}
235
+
236
+.footer-black .column-inner {
237
+	border-right: 2px solid white;
238
+}
239
+
240
+.column-inner.first {
241
+	margin-left: 30px;
242
+}
243
+
244
+.column-inner.last {
245
+	border-right: none;
246
+	margin-right: 30px;
247
+}
248
+
249
+.column-inner.centered {
250
+	padding-top: 25px;
251
+}
252
+		
253
+footer .column .column-inner i {
254
+	margin-right: 15px;
255
+	margin-left: 15px;
256
+}
257
+
258
+footer .copyright {
259
+	margin-top: 10px;
260
+	text-transform: uppercase;
261
+}
262
+
263
+footer hr {
264
+	margin-bottom: 10px;
88 265
 }

+ 2 - 3
app/assets/stylesheets/bootstrap_and_overrides.css.less

@@ -29,9 +29,8 @@
29 29
 // Example:
30 30
 // @linkColor: #ff0000;
31 31
 
32
-.top-container {
33
-	margin-top: 60px;
34
-}
32
+
33
+
35 34
 
36 35
 // Admin Dashboard Stats layout
37 36
 

+ 0 - 68
app/assets/stylesheets/start.css.less

@@ -322,72 +322,4 @@ color: white;
322 322
 		text-transform: uppercase;
323 323
 	}
324 324
 	
325
-}
326
-
327
-// Footer
328
-
329
-.footer-white {
330
-	font-family: "Avenir";
331
-	font-weight: 600;
332
-	text-align: center;
333
-	color: #1D1D26;
334
-	margin-top: 50px;
335
-}
336
-
337
-.footer-white a {
338
-	color: #1D1D26;
339
-	font-weight: bold;
340
-}
341
-
342
-.footer-white a:hover {
343
-	color: #55B3DA;
344
-	font-weight: bold;
345
-	text-transform: underline;
346
-}
347
-
348
-footer .column .column-inner {
349
-	min-height: 90px
350
-}
351
-
352
-footer .column .column-inner.centered {
353
-	min-height: 75px
354
-}
355
-
356
-.column {
357
-	width: 20%;
358
-	float: left;
359
-}
360
-
361
-.column-inner {
362
-	padding-left: 10px;
363
-	padding-right: 10px;
364
-	padding-top: 10px;
365
-	border-right: 1px solid #1D1D26;
366
-}
367
-
368
-.column-inner.first {
369
-	margin-left: 30px;
370
-}
371
-
372
-.column-inner.last {
373
-	border-right: none;
374
-	margin-right: 30px;
375
-}
376
-
377
-.column-inner.centered {
378
-	padding-top: 25px;
379
-}
380
-		
381
-footer .column .column-inner i {
382
-	margin-right: 15px;
383
-	margin-left: 15px;
384
-}
385
-
386
-footer .copyright {
387
-	margin-top: 10px;
388
-	text-transform: uppercase;
389
-}
390
-
391
-footer hr {
392
-	margin-bottom: 10px;
393 325
 }

+ 2 - 0
app/controllers/missions_controller.rb

@@ -5,6 +5,8 @@ class MissionsController < ApplicationController
5 5
   # GET /missions.json
6 6
   def index
7 7
     @missions = Mission.all
8
+    @open_missions = Mission.where("status = ? OR status = ?", 1, 2)
9
+    @finished_missions = Mission.where("status = ? OR status = ?", 3, 4)
8 10
   end
9 11
 
10 12
   # GET /missions/1

+ 4 - 0
app/helpers/missions_helper.rb

@@ -6,6 +6,10 @@ module MissionsHelper
6 6
       content_tag(:div, (t 'status.planning'), class: 'mission-status status-planning pull-right')
7 7
     when 2
8 8
       content_tag(:div, (t 'status.launched'), class: 'mission-status status-launched pull-right')
9
+    when 3
10
+      content_tag(:div, (t 'status.completed'), class: 'mission-status status-completed pull-right')
11
+    when 4
12
+      content_tag(:div, (t 'status.failed'), class: 'mission-status status-failed pull-right')
9 13
     else
10 14
       content_tag(:div, (t 'status.error'), class: 'mission-status status-error pull-right')
11 15
     end

+ 54 - 8
app/views/layouts/_footer.html.erb

@@ -1,9 +1,55 @@
1
-<footer>
2
-  <p style="text-align: center;">
3
-  	<a href="https://mixpanel.com/f/partner"><img src="//cdn.mxpnl.com/site_media/images/partner/badge_light.png" alt="Mobile Analytics" /></a>
4
-  </p>
5
-  <hr>
6
-  <p style="text-align: center;">
7
-	  &copy; <%= @config.website_name %> <%= Time.now.year %>
8
-  </p>
1
+<footer class="footer-black">
2
+	<div class="container">
3
+		<div class="row">
4
+			<div class="column first">
5
+				<div class="column-inner first centered">
6
+			    	     <ul class="nav btn">
7
+			    	          <li class="dropdown">
8
+			    	            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
9
+			    	              <%= t('landing_page.lang') %>
10
+			    	              <span class="caret"></span>
11
+			    	            </a>
12
+			    	            <ul class="dropdown-menu dropdown-menu-right" role="menu">
13
+			    	              <li>
14
+			    	                <%= link_to t('landing_page.en'), change_locale_path(:en) %>
15
+			    	              </li>
16
+			    	              <li>
17
+			    	                <%= link_to t('landing_page.pt-BR'), change_locale_path(:"pt-BR") %>
18
+			    	              </li>
19
+			    	            </ul>
20
+			    	          </li>
21
+			    	      </ul>
22
+				 </div>
23
+			 </div>
24
+			 <div class="column">
25
+				 <div class="column-inner">
26
+  		 		    <a class="btn-about" href="#about"><%= (t "landing_page.about").html_safe %></a><br>
27
+  		 		    <a class="btn-features" href="#features"><%= (t "landing_page.features").html_safe %></a><br>
28
+  		 		    <a class="btn-subscribe" href="#subscribe"><%= (t "landing_page.subscribe").html_safe %></a><br>
29
+  		 		    <%= link_to (t "registration.sign_in"), new_user_session_path, class: "btn-login" %><br>
30
+			    </div>
31
+			 </div>
32
+			 <div class="column">
33
+				 <div class="column-inner">
34
+				 	<p><%= t 'contact.contact'%><br><a href="mailto:<%= t 'contact.email_contact'%>@avalanche.network"><%= t 'contact.email_contact'%>@avalanche.network</a><br><%= t 'contact.current_location'%></p>
35
+				 </div>
36
+			 </div>
37
+			 <div class="column">
38
+				 <div class="column-inner centered">
39
+					 <a href="https://www.facebook.com/pages/Avalanche-Network/932907863393529"><i class="fa fa-facebook-square fa-4x"></i></a>
40
+				 	 <a href="https://twitter.com/avalanche_net"><i class="fa fa-twitter fa-4x"></i></a>
41
+				</div>
42
+			 </div>
43
+			 <div class="column">
44
+				 <div class="column-inner last centered">
45
+				  	<a href="https://mixpanel.com/f/partner"><img src="//cdn.mxpnl.com/site_media/images/partner/badge_light.png" alt="Mobile Analytics" /></a>
46
+				</div>
47
+			 </div>
48
+		</div>
49
+		<div class="row" style="max-width: 1150px;
50
+margin-left: 0px;">
51
+			<hr style="margin-top: 20px; border-top: 1px solid #000000;">
52
+			<p class="copyright" style="text-align: center;">&copy; Avalanche Network <%= Time.now.year %></p>
53
+		</div>
54
+	</div>
9 55
 </footer>

+ 1 - 1
app/views/layouts/_logo.html.erb

@@ -1 +1 @@
1
-<a class="brand" href="/"><%= @config.website_name %></a>
1
+<a class="nav-responsive-link btn-logo" href="/"><%= image_tag "logo_avalanche_mobile.png", class: 'brand', style: 'height: 36px;' %></a>

+ 3 - 5
app/views/layouts/application.html.erb

@@ -39,7 +39,7 @@
39 39
   <body>
40 40
 
41 41
     <div class="navbar navbar-fixed-top">
42
-      <div class="navbar-inner">
42
+      <div class="navbar-inner past-main">
43 43
         <div class="container">
44 44
           <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
45 45
             <span class="icon-bar"></span>
@@ -61,11 +61,9 @@
61 61
             <%= yield %>
62 62
           </div>
63 63
         </div><!--/row-->
64
-
65
-      <%= render 'layouts/footer' %>
66
-
67
-
68 64
     </div> <!-- /container -->
65
+    
66
+    <%= render 'layouts/footer' %>
69 67
 
70 68
   </body>
71 69
 </html>

+ 1 - 1
app/views/layouts/landing_page.erb

@@ -45,7 +45,7 @@
45 45
   <body data-no-turbolink='true'>
46 46
 
47 47
     <nav class="navbar navbar-fixed-top">
48
-      <div class="navbar-inner">
48
+      <div class="navbar-inner nav_fx">
49 49
         <div class="container">
50 50
           <a  class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse" style="margin-top: 13px;">
51 51
             <span class="icon-bar"></span>

+ 15 - 0
app/views/missions/_mission_box.html.erb

@@ -0,0 +1,15 @@
1
+<%= content_tag(:li, class: 'span4') do %>
2
+	<% content_tag(:div, class: 'thumbnail') do %>
3
+		<%= image_tag('http://placehold.it/400x300')%>
4
+		<%= content_tag(:div, class: 'thumbnail-content') do%>
5
+	          <%= content_tag(:h3, link_to(mission.title, mission)) %>
6
+			<%= content_tag(:p, mission.owner.full_name, class: 'mission-director-name') %>
7
+	          <%= content_tag(:p, mission.objective, class: 'thumbnail-mission-description') %>
8
+			<%= content_tag(:div) do %>
9
+				<%= mission_agent_counter(mission) %>
10
+				<%= status(mission.status) %>
11
+				<%= mission_steps_counter(mission) %>
12
+			<% end %>
13
+		<% end %>
14
+	<% end %>
15
+<% end %>

+ 17 - 19
app/views/missions/index.html.erb

@@ -1,25 +1,23 @@
1
-<h1>Listing missions</h1>
1
+<div class="page-header">
2
+  <h1>Missions <%= link_to 'New Mission', new_mission_path, class: 'btn btn-success' %></h1>
3
+</div>
2 4
 
3
-<%= content_tag(:ul, class: 'thumbnails') do %>
4
-	<% @missions.each do |mission| %>
5
-		<%= content_tag(:li, class: 'span4') do %>
6
-			<% content_tag(:div, class: 'thumbnail') do %>
7
-				<%= image_tag('http://placehold.it/400x300')%>
8
-				<%= content_tag(:div, class: 'thumbnail-content') do%>
9
-			          <%= content_tag(:h3, link_to(mission.title, mission)) %>
10
-					<%= content_tag(:p, mission.owner.full_name, class: 'mission-director-name') %>
11
-			          <%= content_tag(:p, mission.objective, class: 'thumbnail-mission-description') %>
12
-					<%= content_tag(:div) do %>
13
-						<%= mission_agent_counter(mission) %>
14
-						<%= status(mission.status) %>
15
-						<%= mission_steps_counter(mission) %>
16
-					<% end %>
17
-				<% end %>
18
-			<% end %>
19
-		<% end %>
5
+<%= content_tag(:h2, (t 'mission.open_missions'))%>
6
+
7
+<%= content_tag(:ul, class: 'thumbnails mission-list') do %>
8
+	<% @open_missions.each do |mission| %>
9
+		<%= render partial: "mission_box", locals: {mission: mission} %>
10
+	<% end %>
11
+<% end %>
12
+
13
+<%= content_tag(:h2, (t 'mission.finished_missions'))%>
14
+
15
+<%= content_tag(:ul, class: 'thumbnails mission-list') do %>
16
+	<% @finished_missions.each do |mission| %>
17
+		<%= render partial: "mission_box", locals: {mission: mission} %>
20 18
 	<% end %>
21 19
 <% end %>
22 20
 
23 21
 <br>
24 22
 
25
-<%= link_to 'New Mission', new_mission_path %>
23
+