首页 探索 帮助
注册 登录
avalanche
/
avalanche2
关注 2
点赞 0
派生 0

浏览代码
Landing page responsive layout conclusion

jamesperet 11 年之前
父节点
f8ea73e4d1
当前提交
8f3f83cce0
共有 5 个文件被更改，包括 248 次插入 和 30 次删除
显示文件统计
  1. 二进制
      app/assets/images/logo_avalanche_mobile.png
  2. 65 16
      app/assets/javascripts/start.js
  3. 47 0
      app/assets/stylesheets/start.css.less
  4. 7 6
      app/views/layouts/landing_page.erb
  5. 129 8
      app/views/start/index.html.erb

二进制
app/assets/images/logo_avalanche_mobile.png
查看文件


+ 65 - 16
app/assets/javascripts/start.js
查看文件 

@@ -5,14 +5,16 @@ function attachHandler(jQuery) {
5 5 
 		$('#obscure_header').css('height', ($('#photo_header').height()));
6 6 
 		$('#obscure_header_mobile').css('height', ($('#photo_header_mobile').height()));
7 7 
 		$('#obscure_subscribe').css('height', ($('#photo_subscribe').height()));
8 
+		$('#obscure_subscribe2').css('height', ($('#photo_subscribe2').height()));
8 9 
 		$('#myCarousel.carousel.slide').css('height', ($('#photo_header').height()));
9 10 
 		$('#myCarousel2.carousel.slide').css('height', ($('#photo_header_mobile').height()));
10 11 
 		$('#tagline_header').css('top', (($('#photo_header').height()/7)*-5));
11 
-		$('#tagline_header_mobile').css('top', (($('#photo_header_mobile').height()/10)*-9));
12 
+		$('#tagline_header_mobile').css('top', (($('#photo_header_mobile').height()/10)*-8));
12 13 
 		$('#tagline_subscribe').css('top', (($('#photo_subscribe').height()/10)*-8));
14 
+		$('#tagline_subscribe2').css('top', (($('#photo_subscribe2').height()/10)*-7));
13 15 
 	});
14 16
15 
-	var mainbottom = $('#myCarousel').offset().top + ($('#myCarousel').height()*2)+100;
17 
+	var mainbottom = $('#myCarousel').height();
16 18
17 19 
 	// on scroll,
18 20 
 	$(window).on('scroll',function(){
 
@@ -30,45 +32,92 @@ function attachHandler(jQuery) {
30 32 
 	// scroll to 'header'
31 33 
 	$(".btn-logo").click(function() {
32 34 
 	    event.preventDefault();
33 
-	    $('html, body').animate({
34 
-	        scrollTop: $("#myCarousel").offset().top
35 
-	    }, 1000);
35 
+	    doc_with = $(document).width();
36 
+	    if (doc_with > 979) {
37 
+	    		$('html, body').animate({
38 
+			    scrollTop: $("#myCarousel").offset().top
39 
+			}, 1000);
40 
+		} else if (doc_with < 979 && doc_with > 780) {
41 
+	    		$('html, body').animate({
42 
+			    scrollTop: ($("#myCarousel").offset().top - 56)
43 
+			}, 1000);
44 
+		} else {
45 
+	    		$('html, body').animate({
46 
+			    scrollTop: ($("#myCarousel2").offset().top - 56)
47 
+			}, 1000);
48 
+		}
49 
+
36 50 
 	});
37 51
38 52 
 	// scroll to 'about'
39 53 
 	$(".btn-about").click(function() {
40 54 
 	    event.preventDefault();
41 
-	    $('html, body').animate({
42 
-	        scrollTop: ($("#about").offset().top - 150)
43 
-	    }, 1000);
55 
+	    doc_with = $(document).width();
56 
+	    if (doc_with > 979) {
57 
+		    $('html, body').animate({
58 
+		        scrollTop: ($("#about").offset().top - 80)
59 
+		    }, 1000);
60 
+	    } else if (doc_with < 979 && doc_with > 780){
61 
+		    $('html, body').animate({
62 
+		        scrollTop: ($("#about").offset().top - 270)
63 
+		    }, 1000);
64 
+	    } else {
65 
+		    $('html, body').animate({
66 
+		        scrollTop: ($("#about").offset().top - 270)
67 
+		    }, 1000);
68 
+	    }
44 69 
 	});
45 70
46 71 
 	// scroll to 'features'
47 72 
 	$(".btn-features").click(function() {
48 73 
 	    event.preventDefault();
49 
-	    $('html, body').animate({
50 
-	        scrollTop: ($("#features").offset().top - 50)
51 
-	    }, 1000);
74 
+	    doc_with = $(document).width();
75 
+	    if (doc_with > 979) {
76 
+		    $('html, body').animate({
77 
+		        scrollTop: ($("#features").offset().top - 50)
78 
+		    }, 1000);
79 
+	    } else if (doc_with < 979 && doc_with > 780){
80 
+		    $('html, body').animate({
81 
+		        scrollTop: ($("#features").offset().top - 230)
82 
+		    }, 1000);
83 
+	    } else {
84 
+		    $('html, body').animate({
85 
+		        scrollTop: ($("#features2").offset().top - 230)
86 
+		    }, 1000);
87 
+	    }
52 88 
 	});
53 89
54 90 
 	// scroll to 'subscribe'
55 91 
 	$(".btn-subscribe").click(function() {
56 92 
 	    event.preventDefault();
57 
-	    $('html, body').animate({
58 
-	        scrollTop: ($("#subscribe").offset().top)
59 
-	    }, 1000);
93 
+	    doc_with = $(document).width();
94 
+	    if (doc_with > 979) {
95 
+		    $('html, body').animate({
96 
+		        scrollTop: ($("#subscribe").offset().top)
97 
+		    }, 1000);
98 
+	    } else if (doc_with < 979 && doc_with > 780){
99 
+		    $('html, body').animate({
100 
+		        scrollTop: ($("#subscribe").offset().top  - 100)
101 
+		    }, 1000);
102 
+	    } else {
103 
+		    $('html, body').animate({
104 
+		        scrollTop: ($("#subscribe2").offset().top  - 230)
105 
+		    }, 1000);
106 
+	    }
60 107 
 	});
61 108
62 109 
 	$( window ).resize(function(){
63 110 
 		$('#obscure_header').css('height', ($('#photo_header').height()));
64 111 
 		$('#obscure_header_mobile').css('height', ($('#photo_header_mobile').height()));
65 
-		$('#obscure_subscribe').css('height', ($('#photo_subscribe').height()));
112 
+		$('#obscure_subscribe').css('height', ($('#photo_subscribe').height()));
113 
+		$('#obscure_subscribe2').css('height', ($('#photo_subscribe2').height()));
66 114 
 		$('#myCarousel.carousel.slide').css('height', ($('#photo_header').height()));
67 115 
 		$('#myCarousel2.carousel.slide').css('height', ($('#photo_header_mobile').height()));
68 116 
 		var mainbottom = $('#myCarousel').offset().top + ($('#myCarousel').height()*2)-10;
69 117 
 		$('#tagline_header').css('top', (($('#photo_header').height()/7)*-5));
70 
-		$('#tagline_header_mobile').css('top', (($('#photo_header_mobile').height()/10)*-9));
118 
+		$('#tagline_header_mobile').css('top', (($('#photo_header_mobile').height()/10)*-8));
71 119 
 		$('#tagline_subscribe').css('top', (($('#photo_subscribe').height()/10)*-8));
120 
+		$('#tagline_subscribe2').css('top', (($('#photo_subscribe2').height()/10)*-7));
72 121 
 	});
73 122 
 };
74 123

+ 47 - 0
app/assets/stylesheets/start.css.less
查看文件 

@@ -214,10 +214,26 @@ p.footer a {
214 214 
 	text-transform: underline;
215 215 
 }
216 216
217 
+h2.landing_page {
218 
+	margin-bottom: 45px;
219 
+	margin-top: 35px;
220 
+}
221 
+
217 222 
 @media (max-width: 979px) {
223 
+	h2.landing_page {
224 
+		font-size: 26px;
225 
+		margin-top: 0px;
226 
+	}
218 227 
 	.navbar-fixed-top {
219 228 
 		background-color: black;
220 229 
 		margin-bottom: 0px;
230 
+		position: fixed;
231 
+		right: 0;
232 
+		left: 0;
233 
+		z-index: 1030;
234 
+		margin-bottom: 0;
235 
+		padding-right: 20px;
236 
+		padding-left: 20px;
221 237 
 	}
222 238 
 	.navbar .btn-navbar {
223 239 
 		float: right;
 
@@ -232,5 +248,36 @@ p.footer a {
232 248 
 		background-color: rgba(0, 0, 0,0);
233 249 
 		transition: all 0.25s ease;
234 250 
 	}
251 
+	p.mobile {
252 
+		font-size: 21px;
253 
+		font-style: italic;
254 
+		text-align: center;
255 
+	}
256 
+	h1.mobile {
257 
+		font-size: 55px;
258 
+		text-transform: uppercase;
259 
+		text-align: center;
260 
+		line-height: 50px;
261 
+	}
262 
+	#myCarousel2 {
263 
+		margin-top: 56px;
264 
+	}
265 
+	.navbar .nav > li > a:hover {
266 
+		text-shadow: 0 0 0 #ffffff;
267 
+		color: white;
268 
+		background-color: gray;
269 
+		//text-decoration: underline;
270 
+	}
271 
+	.navbar-inner.past-main {
272 
+	    background-color: black;
273 
+	    color:#444;
274 
+	}
235 275 
 }
236 276
277 
+@media (max-width: 480px) {
278 
+	.media .pull-left, .media .pull-right {
279 
+		float: left;
280 
+	}
281 
+
282 
+
283 
+}

+ 7 - 6
app/views/layouts/landing_page.erb
查看文件 

@@ -45,18 +45,19 @@
45 45 
     <nav class="navbar navbar-fixed-top">
46 46 
       <div class="navbar-inner">
47 47 
         <div class="container">
48 
-          <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse" style="margin-top: 13px;">
48 
+          <a  class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse" style="margin-top: 13px;">
49 49 
             <span class="icon-bar"></span>
50 50 
             <span class="icon-bar"></span>
51 51 
             <span class="icon-bar"></span>
52 52 
           </a>
53 
-          <a class="btn-logo" href="/"><%= image_tag "logo_avalanche.png", class: 'brand', style: 'width: 250px;' %></a>
53 
+          <a class="nav-responsive-link btn-logo hidden-phone" href="/"><%= image_tag "logo_avalanche.png", class: 'brand', style: 'width: 250px;' %></a>
54 
+		<a class="nav-responsive-link btn-logo visible-phone" href="/"><%= image_tag "logo_avalanche_mobile.png", class: 'brand', style: 'height: 36px;' %></a>
54 55
55 
-		<div class="container nav-collapse ">
56 
+		<div id="close-responsive-menu" class="container nav-collapse ">
56 57 
 		  <ul class="nav pull-right">
57 
-		    <li><a class="btn-about" href="#about"><%= (t "landing_page.about").html_safe %></a></li>
58 
-		    <li><a class="btn-features" href="#features"><%= (t "landing_page.features").html_safe %></a></li>
59 
-		    <li><a class="btn-subscribe" href="#subscribe"><%= (t "landing_page.subscribe").html_safe %></a></li>
58 
+		    <li><a class="nav-responsive-link btn-about" href="#about"><%= (t "landing_page.about").html_safe %></a></li>
59 
+		    <li><a class="nav-responsive-link btn-features" href="#features"><%= (t "landing_page.features").html_safe %></a></li>
60 
+		    <li><a class="nav-responsive-link btn-subscribe" href="#subscribe"><%= (t "landing_page.subscribe").html_safe %></a></li>
60 61 
 		    <li><%= link_to (t "registration.sign_in"), new_user_session_path, class: "btn-login" %></li>
61 62
62 63 
 	   		<% if user_signed_in? %>

+ 129 - 8
app/views/start/index.html.erb
查看文件 

@@ -32,8 +32,7 @@
32 32 
 		  <div class="row">
33 33 
 			  <div class="span12" style="height: 20px; padding-left: 20px; padding-right: 20px;">
34 34 
 			       <div id="tagline_header_mobile" class="" style="background-color: transparent; position: relative; top: -700px;">
35 
-			         <h1 class="header"><%= (t "landing_page.tagline").html_safe %></h1>
36 
-			         <p class="lead header"><%= (t "landing_page.tagline_subtext").html_safe %></p>
35 
+			         <h1 class="header mobile">Avalanche Network</h1>
37 36 
 			    	  </div>
38 37 
 		    	  </div>
39 38 
 	       </div>
 
@@ -43,11 +42,12 @@
43 42 
 </div><!-- /.carousel -->
44 43
45 44
45 
+
46 46 
 <div id="about" class="container" style="margin-top: 30px;">
47 47 
 	<div class="row">
48 48
49 49 
 		<div class="span6">
50 
-			<h2 style="margin-bottom: 45px; margin-top: 35px;"><%= (t "landing_page.about_title").html_safe %></h2>
50 
+			<h2 class="landing_page"><%= (t "landing_page.about_title").html_safe %></h2>
51 51 
 			<%= (t "landing_page.about_text").html_safe %>
52 52
53 53 
 		</div>
 
@@ -58,7 +58,8 @@
58 58 
 	</div>
59 59 
 </div>
60 60
61 
-<div id="features" class="container" style="margin-top: 60px;">
61 
+<!-- FEATURES -->
62 
+<div id="features" class="container hidden-phone" style="margin-top: 60px;">
62 63 
 	<div class="row">
63 64
64 65 
 		<div class="span6">
 
@@ -137,9 +138,94 @@
137 138 
 	</div>
138 139 
 </div>
139 140
141 
+<!-- FEATURES MOBILE -->
142 
+
143 
+<div id="features2" class="container visible-phone" style="margin-top: 60px;">
144 
+	<div class="row">
145 
+
146 
+		<div class="span6">
147 
+			<h2 style="margin-bottom: 45px; margin-top: 35px;"><%= (t "landing_page.feature_headline_1").html_safe %></h2>
148 
+			<p class="lead"><%= (t "landing_page.feature_text_1").html_safe  %></p>
149 
+
150 
+			<div class="media">
151 
+			  <span class="pull-left" href="#" style="">
152 
+			    <%= image_tag "icons/icon_mission_64x64.png", class: 'media-object', style: 'width: 64px;' %>
153 
+			  </span>
154 
+			  <div class="media-body">
155 
+			    <p class="lead"><%= (t "landing_page.feature_1_item_1").html_safe  %></p>
156 
+			  </div>
157 
+			</div>
158 
+			<div class="media">
159 
+			  <span class="pull-left" href="#">
160 
+			    <%= image_tag "icons/icon_chat_64x64.png", style: 'width: 64px;' %>
161 
+			  </span>
162 
+			  <div class="media-body">
163 
+			    <p class="lead"><%= (t "landing_page.feature_1_item_2").html_safe %></p>
164 
+			  </div>
165 
+			</div>
166 
+			<div class="media">
167 
+			  <span class="pull-left" href="#">
168 
+			    <%= image_tag "icons/icon_task_64x64.png", style: 'width: 64px;' %>
169 
+			  </span>
170 
+			  <div class="media-body">
171 
+			    <p class="lead"><%= (t "landing_page.feature_1_item_3").html_safe %></p>
172 
+			  </div>
173 
+			</div>
174 
+			<div class="media">
175 
+			  <span class="pull-left" href="#">
176 
+			    <%= image_tag "icons/icon_diamond_64x64.png", style: 'width: 64px;' %>
177 
+			  </span>
178 
+			  <div class="media-body">
179 
+			    <p class="lead"><%= (t "landing_page.feature_1_item_4").html_safe %></p>
180 
+			  </div>
181 
+			</div>
182 
+
183 
+		</div>
184 
+		<div class="span6">
185 
+			<h2 style="margin-bottom: 45px; margin-top: 35px;"><%= (t "landing_page.feature_headline_2").html_safe  %></h2>
186 
+			<p class="lead"><%= (t "landing_page.feature_text_2").html_safe  %></p>
187 
+
188 
+			<div class="media">
189 
+			  <span class="pull-left" href="#">
190 
+			    <%= image_tag "icons/icon_mission_64x64.png", style: 'width: 64px;' %>
191 
+			  </span>
192 
+			  <div class="media-body">
193 
+			    <p class="lead"><%= (t "landing_page.feature_2_item_1").html_safe %></p>
194 
+			  </div>
195 
+			</div>
196 
+			<div class="media">
197 
+			  <span class="pull-left" href="#">
198 
+			    <%= image_tag "icons/icon_radar_64x64.png", style: 'width: 64px;' %>
199 
+			  </span>
200 
+			  <div class="media-body">
201 
+			    <p class="lead"><%= (t "landing_page.feature_2_item_2").html_safe %></p>
202 
+			  </div>
203 
+			</div>
204 
+			<div class="media">
205 
+			  <span class="pull-left" href="#">
206 
+			    <%= image_tag "icons/icon_gift_64x64.png", style: 'width: 64px;' %>
207 
+			  </span>
208 
+			  <div class="media-body">
209 
+			    <p class="lead"><%= (t "landing_page.feature_2_item_3").html_safe %></p>
210 
+			  </div>
211 
+			</div>
212 
+		</div>
213 
+
214 
+	</div>
215 
+	<div class="row" style="margin-top: 25px;">
216 
+
217 
+		<div class="span6">
218 
+
219 
+		</div>
220 
+		<div class="span6">
221 
+
222 
+		</div>
223 
+	</div>
224 
+</div>
140 225
226 
+<!-- SUBSCRIBE -->
141 227
142 
-<div id="subscribe" class="carousel slide" data-ride="carousel" style="height: 400px; margin-top: 60px;">
228 
+<div id="subscribe" class="hidden-phone carousel slide" data-ride="carousel" style=" margin-top: 60px;">
143 229 
 	 <div class="carousel-inner" role="listbox">
144 230 
 	   <div class="item active">
145 231 
 		<div class="obscure" id="obscure_subscribe" style="height: 970px;"></div>
 
@@ -156,7 +242,7 @@
156 242 
 				    <%= bootstrap_form_for(@subscription) do |f| %>
157 243 
 				      <%= f.alert_message "Please fix the errors below."%>
158 244 
 				      <%= f.form_group :email, style: 'margin-top: -35px;' do %>
159 
-				        	<%= f.text_field :email, hide_label: true, class: 'span4 input-large', required: true, style: 'height: 30px; font-size: 24px;' %>
245 
+				        	<%= f.text_field :email, hide_label: true, value: 'Email', class: 'span4 input-large', required: true, style: 'height: 30px; font-size: 24px;' %>
160 246 
 				      <% end %>
161 247 
 				      <%= f.submit (t 'subscription.submit'), class: 'btn btn-large', id: 'submit_subscription' %>
162 248 
 				    <% end %>
 
@@ -165,7 +251,42 @@
165 251 
 	      </div>
166 252 
           </div>
167 253 
 	  </div>
168 
-</div><!-- /.carousel -->
254 
+  </div>
255 
+</div>
256 
+
257 
+<!-- SUBSCRIBE MOBILE -->
258 
+
259 
+<div id="subscribe2" class="visible-phone carousel slide" data-ride="carousel" style="margin-top: 20px; margin-left: -20px; margin-right: -20px;">
260 
+	 <div class="carousel-inner" role="listbox">
261 
+	   <div class="item active">
262 
+		<div class="obscure" id="obscure_subscribe2" style="height: 970px;"></div>
263 
+	     <%= image_tag "photo_everest.jpg", id: 'photo_subscribe2', style: 'width: 100%;' %>
264 
+	     <div class="container" >
265 
+		  <div class="row">
266 
+			  <div class="span12" style="height: 0px;">
267 
+			       <div id="tagline_subscribe2" class="" style="background-color: transparent; position: relative; top: -700px;">
268 
+			  		<h1 class="header mobile"><%= (t "landing_page.subscribe_title").html_safe %></h1>
269 
+
270 
+			    </div>
271 
+		    </div>
272 
+	      </div>
273 
+          </div>
274 
+	  </div>
275 
+  </div>
276 
+</div>
277 
+
278 
+<div class="visible-phone" style="margin-bottom: 80px;">
279 
+    <p class="lead" >
280 
+	    <%= (t "landing_page.subscribe_text").html_safe %>
281 
+    </p>
282 
+    <%= bootstrap_form_for(@subscription) do |f| %>
283 
+      <%= f.alert_message "Please fix the errors below."%>
284 
+      <%= f.form_group :email, style: 'margin-top: -35px;' do %>
285 
+        	<%= f.text_field :email, hide_label: true, value: 'Email', class: 'span4', required: true, style: 'height: 50px; font-size: 24px;' %>
286 
+      <% end %>
287 
+      <%= f.submit (t 'subscription.submit'), class: 'btn btn-large', id: 'submit_subscription' %>
288 
+    <% end %>
289 
+</div>
169 290
170 291
171 292 
 
@@ -174,7 +295,7 @@
174 295
175 296 
 <div style="margin-top: 0px;">
176 297 
 	<footer class="velvet">
177 
-	  <hr style="">
298 
+	  <hr style="border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff;">
178 299
179 300 
 	<div class="container nav-collapse">
180 301