Commit 922d700d authored by Steffen van Bergerem's avatar Steffen van Bergerem

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

Rework mobile drawer transition
parents 23c83b94 4aef8de5
...@@ -43,6 +43,7 @@ With the port to Bootstrap 3, app/views/terms/default.haml has a new structure. ...@@ -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) * 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) * 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) * 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 ## Bug fixes
* Destroy Participation when removing interactions with a post [#5852](https://github.com/diaspora/diaspora/pull/5852) * Destroy Participation when removing interactions with a post [#5852](https://github.com/diaspora/diaspora/pull/5852)
......
...@@ -38,21 +38,21 @@ $(document).ready(function(){ ...@@ -38,21 +38,21 @@ $(document).ready(function(){
}; };
/* Drawer menu */ /* Drawer menu */
$('#menu_badge').bind("tap click", function(evt){ $("#menu_badge").bind("tap click", function(evt){
evt.preventDefault(); evt.preventDefault();
$("#app").toggleClass('draw'); $("#app").toggleClass("draw");
}); });
/* Show / hide aspects in the drawer */ /* Show / hide aspects in the drawer */
$('#all_aspects').bind("tap click", function(evt){ $("#all_aspects").bind("tap click", function(evt){
evt.preventDefault(); evt.preventDefault();
$("#all_aspects + li").toggleClass('hide'); $("#all_aspects + li").toggleClass("hide");
}); });
/* Show / hide followed tags in the drawer */ /* Show / hide followed tags in the drawer */
$('#followed_tags').bind("tap click", function(evt){ $("#followed_tags > a").bind("tap click", function(evt){
evt.preventDefault(); evt.preventDefault();
$("#followed_tags + li").toggleClass('hide'); $("#followed_tags + li").toggleClass("hide");
}); });
/* Heart toggle */ /* Heart toggle */
......
...@@ -65,26 +65,19 @@ header { ...@@ -65,26 +65,19 @@ header {
bottom: 0; bottom: 0;
width: $drawer-width; width: $drawer-width;
@media (max-width: $drawer-width-offset) { @media (max-width: $drawer-width-offset) {
width: 100%; width: 80%;
.avatar{ display: none; }
} }
left: 100%; left: 100%;
background-color: #444; background-color: #444;
box-shadow: none; box-shadow: none;
header { header {
position: static; width: 100%;
left: 100%; position: absolute;
right: -80%;
#global_search { #global_search {
position: relative;
@media (max-width: $drawer-width-offset) { width: 80%; }
form { form {
position: absolute;
left: 0;
right: 22%;
padding: 0 15px; padding: 0 15px;
width: 100%; width: 100%;
...@@ -92,12 +85,10 @@ header { ...@@ -92,12 +85,10 @@ header {
input { input {
box-shadow: 0 1px 1px #444; box-shadow: 0 1px 1px #444;
border-radius: 15px; border-radius: 15px;
width: 100%;
margin-top: 5px; margin-top: 5px;
background-color: #444; background-color: #444;
border: 1px solid #222; border: 1px solid #222;
font-size: 13px; font-size: 13px;
padding: 6px;
color: black; color: black;
&.active { &.active {
...@@ -123,7 +114,7 @@ header { ...@@ -123,7 +114,7 @@ header {
width: 100%; width: 100%;
li { li {
font-size: 25px; font-size: 1.8rem;
line-height: 25px; line-height: 25px;
font-weight: bold; font-weight: bold;
color: $light-grey; color: $light-grey;
...@@ -174,8 +165,24 @@ header { ...@@ -174,8 +165,24 @@ header {
} }
} }
#main_nav,
#drawer {
transition: all 0.25s ease;
z-index: 10;
}
/* This class is added when the user open the drawer */ /* This class is added when the user open the drawer */
#app.draw > * { #app.draw {
transform: translateX(-$drawer-width); #main_nav,
@media (max-width: $drawer-width-offset) { transform: translateX(-80%); } #drawer {
transform: translateX(-$drawer-width);
}
@media (max-width: $drawer-width-offset) {
#main_nav {
transform: translateX(-80%);
}
#drawer {
transform: translateX(-100%);
}
}
} }
...@@ -33,7 +33,6 @@ body { ...@@ -33,7 +33,6 @@ body {
h3 { margin-top: 0; } h3 { margin-top: 0; }
.clear { clear: both; } .clear { clear: both; }
#app > * { transition: all 0.25s ease; }
#main { padding: 55px 10px 0 10px; } #main { padding: 55px 10px 0 10px; }
.message { .message {
......
...@@ -62,22 +62,16 @@ Feature: Navigate between pages using the header menu and the drawer ...@@ -62,22 +62,16 @@ Feature: Navigate between pages using the header menu and the drawer
Scenario: navigate to the followed tags page Scenario: navigate to the followed tags page
Given "bob@bob.bob" has a public post with text "bob is da #boss" 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 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" And I follow "#Followed tags"
Then I should see "#boss" within "#followed_tags + li > ul" Then I should see "#boss" within "#followed_tags + li > ul"
And I follow "#boss" And I follow "#boss"
Then I should see "bob is da #boss" within "#main_stream" 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 When I open the drawer
And I follow "#Followed tags" And I follow "#Followed tags"
Then I should see "Manage followed tags" within "#followed_tags + li > ul" Then I should see "Manage followed tags" within "#followed_tags + li > ul"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment