Merge pull request #6233 from Flaburgan/improve-mobile-drawer-transition

Rework mobile drawer transition

Changelog.md

@@ -43,6 +43,7 @@ With the port to Bootstrap 3, app/views/terms/default.haml has a new structure.
 * Replace some mobile icons with Entypo [#6218](https://github.com/diaspora/diaspora/pull/6218)
 * Refactor publisher backbone view [#6228](https://github.com/diaspora/diaspora/pull/6228)
 * Replace MBP.autogrow with autosize on mobile [#6261](https://github.com/diaspora/diaspora/pull/6261)
+* Improve mobile drawer transition [#6233](https://github.com/diaspora/diaspora/pull/6233)
 
 ## Bug fixes
 * Destroy Participation when removing interactions with a post [#5852](https://github.com/diaspora/diaspora/pull/5852)

app/assets/javascripts/mobile/mobile.js

@@ -38,21 +38,21 @@ $(document).ready(function(){
   };
 
   /* Drawer menu */
-  $('#menu_badge').bind("tap click", function(evt){
+  $("#menu_badge").bind("tap click", function(evt){
     evt.preventDefault();
-    $("#app").toggleClass('draw');
+    $("#app").toggleClass("draw");
   });
 
   /* Show / hide aspects in the drawer */
-  $('#all_aspects').bind("tap click", function(evt){
+  $("#all_aspects").bind("tap click", function(evt){
     evt.preventDefault();
-    $("#all_aspects + li").toggleClass('hide');
+    $("#all_aspects + li").toggleClass("hide");
   });
 
   /* Show / hide followed tags in the drawer */
-  $('#followed_tags').bind("tap click", function(evt){
+  $("#followed_tags > a").bind("tap click", function(evt){
     evt.preventDefault();
-    $("#followed_tags + li").toggleClass('hide');
+    $("#followed_tags + li").toggleClass("hide");
   });
 
   /* Heart toggle */

app/assets/stylesheets/mobile/header.scss

@@ -65,26 +65,19 @@ header {
   bottom: 0;
   width: $drawer-width;
   @media (max-width: $drawer-width-offset) {
-    width: 100%;
+    width: 80%;
-    .avatar{ display: none; }
   }
   left: 100%;
   background-color: #444;
   box-shadow: none;
 
   header {
-    position: static;
+    width: 100%;
-    left: 100%;
+    position: absolute;
-    right: -80%;
 
     #global_search {
-      position: relative;
-      @media (max-width: $drawer-width-offset) { width: 80%; }
 
       form {
-        position: absolute;
-        left: 0;
-        right: 22%;
         padding: 0 15px;
         width: 100%;
 
@@ -92,12 +85,10 @@ header {
         input {
           box-shadow: 0 1px 1px #444;
           border-radius: 15px;
-          width: 100%;
           margin-top: 5px;
           background-color: #444;
           border: 1px solid #222;
           font-size: 13px;
-          padding: 6px;
           color: black;
 
           &.active {
@@ -123,7 +114,7 @@ header {
     width: 100%;
 
     li {
-      font-size: 25px;
+      font-size: 1.8rem;
       line-height: 25px;
       font-weight: bold;
       color: $light-grey;
@@ -174,8 +165,24 @@ header {
   }
 }
 
-/* This class is added when the user open the drawer */
+#main_nav,
-#app.draw > * {
+#drawer {
-  transform: translateX(-$drawer-width);
+  transition: all 0.25s ease;
-  @media (max-width: $drawer-width-offset) { transform: translateX(-80%); }
+  z-index: 10;
+}
+
+/* This class is added when the user open the drawer */
+#app.draw {
+  #main_nav,
+  #drawer {
+    transform: translateX(-$drawer-width);
+  }
+  @media (max-width: $drawer-width-offset) {
+    #main_nav {
+      transform: translateX(-80%);
+    }
+    #drawer {
+      transform: translateX(-100%);
+    }
+  }
 }

app/assets/stylesheets/mobile/mobile.scss

@@ -33,7 +33,6 @@ body {
 
 h3 {  margin-top: 0; }
 .clear { clear: both; }
-#app > * { transition: all 0.25s ease; }
 #main { padding: 55px 10px 0 10px; }
 
 .message {

features/mobile/drawer.feature

@@ -62,22 +62,16 @@ Feature: Navigate between pages using the header menu and the drawer
 
   Scenario: navigate to the followed tags page
     Given "bob@bob.bob" has a public post with text "bob is da #boss"
-    And I toggle the mobile view
-    And I search for "#boss"
-    And I press "Follow #boss"
-    And I toggle the mobile view
     When I open the drawer
+    And I search for "#boss"
+    And I click on selector ".tag_following_action"
+    # Loading another page to refresh the drawer and make the now followed tag appears
+    And I click on selector "#compose_badge"
+    And I open the drawer
     And I follow "#Followed tags"
     Then I should see "#boss" within "#followed_tags + li > ul"
     And I follow "#boss"
     Then I should see "bob is da #boss" within "#main_stream"
-
-  Scenario: navigate to the manage followed tags page
-    Given "bob@bob.bob" has a public post with text "bob is da #boss"
-    And I toggle the mobile view
-    And I search for "#boss"
-    And I press "Follow #boss"
-    And I toggle the mobile view
     When I open the drawer
     And I follow "#Followed tags"
     Then I should see "Manage followed tags" within "#followed_tags + li > ul"