Toggle navibar on mobile #190

artemanufrij · 2017-06-16T22:46:22Z

Signed-off-by: Artem Anufrij artem.anufrij@live.de

artemanufrij · 2017-06-16T22:47:10Z

fix for #185

codecov · 2017-06-16T22:52:18Z

Codecov Report

Merging #190 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #190   +/-   ##
=======================================
  Coverage   76.56%   76.56%           
=======================================
  Files          33       33           
  Lines         973      973           
=======================================
  Hits          745      745           
  Misses        228      228

juliusknorr · 2017-06-17T08:23:35Z

New stack button has lost some padding
The menu toggle button doesn't look centered to the home icon / board title
The toggle button should also show up on desktop systems, as it was before

Apart from that 👍

artemanufrij · 2017-06-17T09:07:08Z

The menu toggle button doesn't look centered to the home icon / board title

I have same position like files and I know its not perfect but its have same look

artemanufrij · 2017-06-17T09:45:26Z

@juliushaertl

'new stack' has same margin/padding as before
fixed: toggle in desktop mode

pixelipo · 2017-06-17T10:55:36Z

js/app/Run.js

+    });
+
+    $('#app-navigation-toggle').click(function(){
+        if($(window).width() > 768) {


remove this if, since the toggle should always be visible - then you won't need !important in CSS

it for different behavior. on mobile devices app-content will be moved to the right. on desktop app-navigation will be hide.

does it even work, @artemanufrij ? Look at the next line toggle('hidde') is not correct 😉

it works fine....

pixelipo · 2017-06-17T10:56:04Z

templates/main.php

@@ -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>


why do you need additional <div> here?

otherwise it doesn't work with core-functions

which function exactly? I tested locally and didn't find any errors.

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

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

@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.

pixelipo · 2017-06-17T10:59:53Z

templates/part.board.mainView.php

-		<i class="icon icon-home"></i>
-		<span class="hidden-visually"><?php p($l->t('All Boards')); ?></span>
-	</a>
+<div id="controls">


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

no, but it's same code like files

"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

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.

pixelipo · 2017-06-17T11:00:28Z

templates/part.boardlist.php

-		<span class="hidden-visually"><?php p($l->t('All Boards')); ?></span>
-	</a>
+<div id="controls">
+	<div class="breadcrumb">


same as above.

pixelipo · 2017-06-19T19:54:52Z

css/style.css

@@ -173,7 +173,7 @@ button.button-inline:hover {

 #app-navigation-toggle {
 	width: 45px;


this should be 44 as well

pixelipo · 2017-06-19T19:55:25Z

js/app/Run.js

@@ -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');


👍 that's what I was talking about :)

Signed-off-by: Artem Anufrij <artem.anufrij@live.de>

Signed-off-by: Julius Härtl <jus@bitgrid.net>

artemanufrij added this to the 0.2.0 milestone Jun 16, 2017

artemanufrij added the 3. to review label Jun 16, 2017

artemanufrij self-assigned this Jun 16, 2017

artemanufrij requested review from juliusknorr and pixelipo June 16, 2017 22:52

pixelipo requested changes Jun 17, 2017

View reviewed changes

juliusknorr mentioned this pull request Jun 19, 2017

Prepare 0.2 release #192

Merged

3 tasks

juliusknorr force-pushed the toggle-navibar-on-mobile branch from 26f680b to 2eddaab Compare June 19, 2017 19:42

pixelipo reviewed Jun 19, 2017

View reviewed changes

juliusknorr force-pushed the toggle-navibar-on-mobile branch from 2eddaab to db7a91e Compare June 19, 2017 19:58

pixelipo approved these changes Jun 19, 2017

View reviewed changes

artemanufrij and others added 2 commits June 19, 2017 21:59

Toggle navigation bar on mobile and desktop devices

efb14bd

Signed-off-by: Artem Anufrij <artem.anufrij@live.de>

Fix app-navigation-toggle height and small typo

812ed56

Signed-off-by: Julius Härtl <jus@bitgrid.net>

juliusknorr force-pushed the toggle-navibar-on-mobile branch from db7a91e to 812ed56 Compare June 19, 2017 20:00

juliusknorr approved these changes Jun 19, 2017

View reviewed changes

juliusknorr merged commit 630104c into master Jun 19, 2017

juliusknorr deleted the toggle-navibar-on-mobile branch June 19, 2017 20:11

juliusknorr mentioned this pull request Jul 27, 2017

Use of snap.js in desktop view makes right sidebar disappear/glitch if you select text in the sidebar #262

Closed

This was referenced Feb 3, 2024

[Snyk] Security upgrade @nextcloud/vue-dashboard from 0.1.8 to 2.0.1 qmutz/deck#19

Open

[Snyk] Security upgrade @nextcloud/vue-dashboard from 0.1.8 to 2.0.1 GOMYWAY-NETWORKS-LLC/deck#16

Open

This was referenced Mar 15, 2024

[Snyk] Fix for 1 vulnerabilities qmutz/deck#21

Open

[Snyk] Fix for 1 vulnerabilities GOMYWAY-NETWORKS-LLC/deck#17

Open

This was referenced Mar 23, 2024

[Snyk] Security upgrade @nextcloud/vue-dashboard from 0.1.8 to 2.0.1 GOMYWAY-NETWORKS-LLC/deck#18

Open

[Snyk] Security upgrade @nextcloud/vue-dashboard from 0.1.8 to 2.0.1 qmutz/deck#23

Open

This was referenced May 13, 2024

[Snyk] Security upgrade @nextcloud/vue-dashboard from 0.1.8 to 2.0.1 GOMYWAY-NETWORKS-LLC/deck#21

Open

[Snyk] Security upgrade @nextcloud/vue-dashboard from 0.1.8 to 2.0.1 qmutz/deck#26

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Toggle navibar on mobile #190

Toggle navibar on mobile #190

artemanufrij commented Jun 16, 2017

artemanufrij commented Jun 16, 2017

codecov bot commented Jun 16, 2017 •

edited

Loading

juliusknorr commented Jun 17, 2017

artemanufrij commented Jun 17, 2017 •

edited

Loading

artemanufrij commented Jun 17, 2017

pixelipo Jun 17, 2017

artemanufrij Jun 17, 2017

pixelipo Jun 17, 2017

artemanufrij Jun 17, 2017

pixelipo Jun 17, 2017

artemanufrij Jun 17, 2017

pixelipo Jun 17, 2017

artemanufrij Jun 17, 2017

pixelipo Jun 19, 2017

juliusknorr Jun 19, 2017

pixelipo Jun 17, 2017

artemanufrij Jun 17, 2017

pixelipo Jun 17, 2017

juliusknorr Jun 19, 2017

pixelipo Jun 17, 2017

pixelipo Jun 19, 2017

pixelipo Jun 19, 2017

		@@ -173,7 +173,7 @@ button.button-inline:hover {

		#app-navigation-toggle {
		width: 45px;

Toggle navibar on mobile #190

Toggle navibar on mobile #190

Conversation

artemanufrij commented Jun 16, 2017

artemanufrij commented Jun 16, 2017

codecov bot commented Jun 16, 2017 • edited Loading

Codecov Report

juliusknorr commented Jun 17, 2017

artemanufrij commented Jun 17, 2017 • edited Loading

artemanufrij commented Jun 17, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Jun 16, 2017 •

edited

Loading

artemanufrij commented Jun 17, 2017 •

edited

Loading