Merge pull request #388 from coopdevs/fix/first-pages-on-mobile

Optimised first pages on mobile

Author: enricostano

app/assets/images/home_back.jpg

@@ -1,6 +1,6 @@
 .footer {
   padding: 8px 0;
-  line-height: 40px;
+  line-height: 34px;
   width: 100%;
   background: rgba($palette-dark-turkey ,0.8);
 
@@ -63,6 +63,7 @@
     & {
       background-color: transparent;
       border: 1px solid white;
+      padding: 4px 8px;
     }
 
     &:hover {

app/assets/images/home_back_mobile.jpg

@@ -13,7 +13,6 @@ html {
 }
 
 .content {
-  min-height: 500px;
   margin-bottom: 76px;
 }
 
@@ -31,7 +30,8 @@ html {
   padding: 10px 16px;
 
   @media(max-width: $screen-sm-min) {
-    padding: 10px;
+    padding: 8px;
+    font-size: 15px;
   }
 }
 
@@ -50,7 +50,7 @@ html {
     border: 0;
     border-radius: 0.3rem;
     margin: 0;
-    padding: 1rem 0 1.4rem 0;
+    padding: 0;
   }
 
   form .material-icons {
@@ -112,10 +112,15 @@ html {
 
   .input-group-addon {
     border-radius: 0.3rem 0 0 0.3rem;
+
+    @media(max-width: $screen-sm-min) {
+      padding: 10px;
+    }
   }
 
   .input-lg, #user_email {
     border-radius: 0 0.3rem 0.3rem 0;
+    padding: 0 4px;
   }
 
   #user_password {
@@ -129,12 +134,20 @@ html {
     color: $form-input-glyph;
     font-size: 2.24rem;
     letter-spacing: -0.0040rem;
+
+    @media(max-width: $screen-sm-min) {
+      font-size: 1.8rem;
+    }
   }
 
   .form-control {
     border: 0;
     font-weight: 400;
     height: 7.5rem;
+
+    @media(max-width: $screen-sm-min) {
+      height: 6rem;
+    }
   }
 
   .form-control:focus {
@@ -379,18 +392,36 @@ label[required]::after{
   background: image-url('home_back.jpg') no-repeat center center fixed;
   background-size: cover;
 
+  @media(max-width: $screen-sm-min) {
+    background: image-url('home_back_mobile.jpg') no-repeat center center fixed;
+    background-size: cover;
+  }
+
   .back-overlay {
     display: block;
     filter: alpha(opacity = 60); /* For IE8 and earlier */
     opacity: 0.2;
   }
 
-  .vertical-align {
+  .login-wrapper {
     position: absolute;
-    top: 46%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    top: 20%;
+    left: 0;
     width: 100%;
+    z-index: 1;
+
+    @media(max-width: $screen-sm-min) {
+      top: 60px;
+    }
+  }
+
+  .home-wrapper {
+    position: absolute;
+    top: 20%;
+    left: 0;
+    padding: 26px;
+    width: 100%;
+    z-index: 1;
   }
 
   .container-inner {
@@ -414,6 +445,11 @@ label[required]::after{
   background-size: cover;
   text-align: center;
 
+  @media(max-width: $screen-sm-min) {
+    background: image-url('home_back_mobile.jpg') no-repeat center center fixed;
+    background-size: cover;
+  }
+
   .back-overlay {
     filter: alpha(opacity = 15); /* For IE8 and earlier */
     opacity: 0.15;
@@ -610,6 +646,11 @@ label[required]::after{
     padding: 8rem 1rem;
     text-align: center;
 
+    @media(max-width: $screen-sm-min) {
+      background: image-url('home_back_mobile.jpg') no-repeat center center fixed;
+      background-size: cover;
+    }
+
     h2 {
       font-size: 2.88em;
       font-weight: 600;

app/assets/stylesheets/_footer.scss

@@ -1,4 +1,4 @@
-<div class="vertical-align">
+<div class="login-wrapper">
   <div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 col-sm-offset-2 col-md-offset-3 col-lg-offset-3">
     <div class="panel" id="login-box">
       <div class="panel-body">

app/assets/stylesheets/application.css.scss

@@ -1,7 +1,7 @@
 <div class="content">
-  <div class="vertical-align">
+  <div class="home-wrapper">
     <h2><%= t("application.landing.slogan") %></h2>
     <h3><%= t("application.landing.sub_slogan") %></h3>
     <a href="/login" class="btn btn-info" role="button"><%= t("application.landing.button") %></a>
   </div>
-</div>
+</div>