-
Notifications
You must be signed in to change notification settings - Fork 278
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Toggle navibar on mobile #190
Conversation
fix for #185 |
Codecov Report
@@ Coverage Diff @@
## master #190 +/- ##
=======================================
Coverage 76.56% 76.56%
=======================================
Files 33 33
Lines 973 973
=======================================
Hits 745 745
Misses 228 228 |
I have same position like |
|
}); | ||
|
||
$('#app-navigation-toggle').click(function(){ | ||
if($(window).width() > 768) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
remove this if
, since the toggle should always be visible - then you won't need !important
in CSS
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it for different behavior. on mobile devices app-content will be moved to the right. on desktop app-navigation will be hide.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
does it even work, @artemanufrij ? Look at the next line toggle('hidde')
is not correct 😉
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it works fine....
@@ -62,7 +62,8 @@ | |||
<?php print_unescaped($this->inc('part.navigation')); ?> | |||
<?php /* print_unescaped($this->inc('part.settings')); */ ?> | |||
</div> | |||
<div id="app-content" ng-class="{ 'details-visible': sidebar.show }" ui-view> | |||
<div id="app-content" ng-class="{ 'details-visible': sidebar.show }"> | |||
<div ui-view></div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why do you need additional <div>
here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
otherwise it doesn't work with core-functions
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
which function exactly? I tested locally and didn't find any errors.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the toggle button will be created by js.js
from core (see line 1569) automatically. it works only if ui-view
is in a separate div instead in app-content
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why do we create a DOM element using JS if it has to be present in 100% of cases? Seems like a waste of resources. cc @juliushaertl
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@pixelipo This is part of the logic from core, so that apps don't need to care about adding this sidebar slide functionality. But since we use our own js code to toggle those of course we could also just keep the existing structure and add the toggle button to the template.
<i class="icon icon-home"></i> | ||
<span class="hidden-visually"><?php p($l->t('All Boards')); ?></span> | ||
</a> | ||
<div id="controls"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
please revert to previous version of this code. It was decided some time ago that it's a good approach. CHanges here are not needed to make toggle work.
I do agree with renaming #board-header
to #controls
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
no, but it's same code like files
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"same code as files" I remember that discussion from a different PR 😉 files also has a wrong. This is what is causing issue with positioning of icons mentioned by @juliushaertl
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I remember we discussed that some times ago, yes, although I'm not sure what exactly the reason was for that. 🙈 Let's use our fixed approach, we can always go to the way files does it once it is implemented properly there.
<span class="hidden-visually"><?php p($l->t('All Boards')); ?></span> | ||
</a> | ||
<div id="controls"> | ||
<div class="breadcrumb"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
same as above.
26f680b
to
2eddaab
Compare
css/style.css
Outdated
@@ -173,7 +173,7 @@ button.button-inline:hover { | |||
|
|||
#app-navigation-toggle { | |||
width: 45px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this should be 44 as well
js/app/Run.js
Outdated
@@ -63,9 +63,9 @@ app.run(function ($document, $rootScope, $transitions, BoardService) { | |||
|
|||
$('#app-navigation-toggle').click(function(){ | |||
if($(window).width() > 768) { | |||
$('#app-navigation').toggle('hidde'); | |||
$('#app-navigation').toggle('hidden'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 that's what I was talking about :)
2eddaab
to
db7a91e
Compare
Signed-off-by: Artem Anufrij <artem.anufrij@live.de>
Signed-off-by: Julius Härtl <jus@bitgrid.net>
db7a91e
to
812ed56
Compare
Signed-off-by: Artem Anufrij artem.anufrij@live.de