Landing page layout fixes and improvements
共有 3 個文件被更改，包括 38 次插入 和 4 次删除
+ 11
- 1
app/assets/javascripts/start.js
@@ -3,8 +3,13 @@ function attachHandler(jQuery) {
|
||
| 3 | 3 |
|
| 4 | 4 |
$(window).on('load',function(){
|
| 5 | 5 |
$('#obscure_header').css('height', ($('#photo_header').height()));
|
| 6 |
+ $('#obscure_header_mobile').css('height', ($('#photo_header_mobile').height()));
|
|
| 6 | 7 |
$('#obscure_subscribe').css('height', ($('#photo_subscribe').height()));
|
| 7 | 8 |
$('#myCarousel.carousel.slide').css('height', ($('#photo_header').height()));
|
| 9 |
+ $('#myCarousel2.carousel.slide').css('height', ($('#photo_header_mobile').height()));
|
|
| 10 |
+ $('#tagline_header').css('top', (($('#photo_header').height()/7)*-5));
|
|
| 11 |
+ $('#tagline_header_mobile').css('top', (($('#photo_header_mobile').height()/10)*-9));
|
|
| 12 |
+ $('#tagline_subscribe').css('top', (($('#photo_subscribe').height()/10)*-8));
|
|
| 8 | 13 |
}); |
| 9 | 14 |
|
| 10 | 15 |
var mainbottom = $('#myCarousel').offset().top + ($('#myCarousel').height()*2)+100;
|
@@ -55,10 +60,15 @@ function attachHandler(jQuery) {
|
||
| 55 | 60 |
}); |
| 56 | 61 |
|
| 57 | 62 |
$( window ).resize(function(){
|
| 58 |
- $('#obscure_header').css('height', ($('#photo_header').height()));
|
|
| 63 |
+ $('#obscure_header').css('height', ($('#photo_header').height()));
|
|
| 64 |
+ $('#obscure_header_mobile').css('height', ($('#photo_header_mobile').height()));
|
|
| 59 | 65 |
$('#obscure_subscribe').css('height', ($('#photo_subscribe').height()));
|
| 60 | 66 |
$('#myCarousel.carousel.slide').css('height', ($('#photo_header').height()));
|
| 67 |
+ $('#myCarousel2.carousel.slide').css('height', ($('#photo_header_mobile').height()));
|
|
| 61 | 68 |
var mainbottom = $('#myCarousel').offset().top + ($('#myCarousel').height()*2)-10;
|
| 69 |
+ $('#tagline_header').css('top', (($('#photo_header').height()/7)*-5));
|
|
| 70 |
+ $('#tagline_header_mobile').css('top', (($('#photo_header_mobile').height()/10)*-9));
|
|
| 71 |
+ $('#tagline_subscribe').css('top', (($('#photo_subscribe').height()/10)*-8));
|
|
| 62 | 72 |
}); |
| 63 | 73 |
}; |
| 64 | 74 |
|
+ 1
- 0
app/views/layouts/landing_page.erb
@@ -35,6 +35,7 @@ |
||
| 35 | 35 |
<%= favicon_link_tag 'favicon.ico', :rel => 'shortcut icon' %> |
| 36 | 36 |
|
| 37 | 37 |
<%= javascript_include_tag "application" %> |
| 38 |
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
| 38 | 39 |
|
| 39 | 40 |
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script> |
| 40 | 41 |
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' /> |
+ 26
- 3
app/views/start/index.html.erb
@@ -2,7 +2,7 @@ |
||
| 2 | 2 |
|
| 3 | 3 |
<!-- Carousel |
| 4 | 4 |
================================================== --> |
| 5 |
-<div id="myCarousel" class="carousel slide" data-ride="carousel" style="height: 400px"> |
|
| 5 |
+<div id="myCarousel" class="hidden-phone carousel slide" data-ride="carousel" style="height: 400px"> |
|
| 6 | 6 |
<div class="carousel-inner" role="listbox"> |
| 7 | 7 |
<div class="item active"> |
| 8 | 8 |
<div id="obscure_header" class="obscure" style="height: 960px;"></div> |
@@ -10,7 +10,7 @@ |
||
| 10 | 10 |
<div class="container" > |
| 11 | 11 |
<div class="row"> |
| 12 | 12 |
<div class="span12" style="height: 20px;"> |
| 13 |
- <div class="" style="background-color: transparent; position: relative; top: -700px;"> |
|
| 13 |
+ <div id="tagline_header" class="" style="background-color: transparent; position: relative; top: -700px;"> |
|
| 14 | 14 |
<h1 class="header"><%= (t "landing_page.tagline").html_safe %></h1> |
| 15 | 15 |
<p class="lead header"><%= (t "landing_page.tagline_subtext").html_safe %></p> |
| 16 | 16 |
</div> |
@@ -18,8 +18,31 @@ |
||
| 18 | 18 |
</div> |
| 19 | 19 |
</div> |
| 20 | 20 |
</div> |
| 21 |
+ </div> |
|
| 21 | 22 |
</div><!-- /.carousel --> |
| 22 | 23 |
|
| 24 |
+<!-- Carousel Mobile |
|
| 25 |
+================================================== --> |
|
| 26 |
+<div id="myCarousel2" class="visible-phone carousel slide" data-ride="carousel" style="height: 400px; margin-left: -20px; margin-right: -20px;"> |
|
| 27 |
+ <div class="carousel-inner" role="listbox"> |
|
| 28 |
+ <div class="item active"> |
|
| 29 |
+ <div id="obscure_header_mobile" class="obscure" style="height: 960px;"></div> |
|
| 30 |
+ <%= image_tag "photo_mission_control.jpg", id: 'photo_header_mobile', style: 'width: 100%;' %> |
|
| 31 |
+ <div class="container" > |
|
| 32 |
+ <div class="row"> |
|
| 33 |
+ <div class="span12" style="height: 20px; padding-left: 20px; padding-right: 20px;"> |
|
| 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> |
|
| 37 |
+ </div> |
|
| 38 |
+ </div> |
|
| 39 |
+ </div> |
|
| 40 |
+ </div> |
|
| 41 |
+ </div> |
|
| 42 |
+ </div> |
|
| 43 |
+</div><!-- /.carousel --> |
|
| 44 |
+ |
|
| 45 |
+ |
|
| 23 | 46 |
<div id="about" class="container" style="margin-top: 30px;"> |
| 24 | 47 |
<div class="row"> |
| 25 | 48 |
|
@@ -124,7 +147,7 @@ |
||
| 124 | 147 |
<div class="container" > |
| 125 | 148 |
<div class="row"> |
| 126 | 149 |
<div class="span12" style="height: 0px;"> |
| 127 |
- <div class="" style="background-color: transparent; position: relative; top: -700px;"> |
|
| 150 |
+ <div id="tagline_subscribe" class="" style="background-color: transparent; position: relative; top: -700px;"> |
|
| 128 | 151 |
|
| 129 | 152 |
<h1 class="header"><%= (t "landing_page.subscribe_title").html_safe %></h1> |
| 130 | 153 |
<p class="lead header "> |