nextcloud
Buttons jump below the controls bar in portrait mode on small screens
From @oparoz on March 8, 2016 20:4
Bug report
Steps to reproduce
- Use the app with a very narrow window. That's typically the portrait mode on a mobile device
Expected behaviour
The GUI should adapt and it should still be possible to use all the features of the app
Actual behaviour
The breadcrumb takes half the screen and there is no room for the buttons which jump on a 2nd, invisible row.
Solution
- On small screen in portrait mode, the buttons should be replaced by the 3-dots button.
- Pressing on that button will reveal a 2nd row containing all the usual buttons
- Pressing on buttons on that row should not make the 2nd row disappear since they often open other dialogues.
Note that one that screenshot, the [+] button for upload and the settings buttons are missing, but there should be enough room for them.
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
Copied from original issue: owncloud/gallery#566
From @gauravmittal1995 on March 9, 2016 14:17
@oparoz Hi, I want to work on this. Can you please give me more detail on this?
Hi, it would be easier if you had specific questions. That way I can update the OP.
From @gauravmittal1995 on March 9, 2016 15:14
@oparoz Hi, i just wanted some clarifications. i.e Right now, the buttons are all in the same row (Sort, Share, FileView) ... what we want is that it should have a 3 dot button after the path which when clicked slides down a second row which will contain the sort, share and fileview button? Is this correct?
That's correct, yes. When there isn't enough room in the controls bar, all buttons should be replaced by the 3-dots button. In reality, they will be placed on a hidden div which scrolls down when the 3-dots button is scrolled.
That's my vision of how things would work best, but I welcome suggestions if anybody thinks they can do better :)
From @shubhrajodiya on March 24, 2016 10:8
@oparoz The probable solution to this issue may be Current Style #breadcrumbs { float: left; } #content-wrapper { position: absolute; height: 100%; width: 100%; overflow-x: hidden; padding-top: 45px; box-sizing: border-box; } Changes Required #breadcrumbs { width:100%; //this style rule float: left; } #content-wrapper { position: absolute; height: 100%; width: 100%; overflow-x: hidden; padding-top: 95px; //this style rule box-sizing: border-box; }
Thanks @shubhrajodiya. I did try a CSS solution (to create the screenshot above), but I had some issue with the alignment of buttons and it automatically wastes a full row for something users don't always use, so the best solution would be to put all the buttons in a drawer which can be hidden and replaced by a button under certain circumstances
From @jancborchardt on April 8, 2016 8:10
@oparoz as also said in the preceding issue, I disagree with the wrapping solution for this. There should be a 3-dots-menu richt in the breadcrumbs bar instead.
Otherwise like now, there are three bars covering the top. That's about a third of the viewport which is always used up by UI instead of content. This is an absolute no-go, especially for an image gallery where you want your pictures front and center.
cc @owncloud/designers
From @skjnldsv on April 8, 2016 8:23
I can't reproduce with the last update (9.0.1). The breadcrumbs doesn't show anything.
@skjnldsv - It happens if you add more buttons. There is now an upload button and it's progress bar and an info button can show up sometimes. It's just getting too crowded, thus the need to only show the essential ones.
From @shubhrajodiya on April 8, 2016 22:53
@oparoz I have implemented this please check it out
1.Full Screen
2.Just before the change take place
3.Just after the change take place
4.Final Screen
am i on the right path ?
Yes, that's how it should work.
TODO
- Use a 3 dots icon
- Make modifications to the width checks so that we can have a breadcrumb which fills the entire width
- Introduce a drawer for the hidden buttons
- Make the drawer adaptable, so that it can auto-resize over 2 rows when the screen is super tiny
From @shubhrajodiya on April 9, 2016 21:1
@oparoz is it good to use another js library i am thinking to use classie js
I don't think classie is required as we already have jQuery or am I missing something?
From @jancborchardt on April 10, 2016 12:2
Yep, nice job @shubhrajodiya! :)
The correct icon you can use can be loaded by giving the button a class icon-more. Also, can you show a screenshot of the menu being open?
From @shubhrajodiya on April 13, 2016 15:30
@jancborchardt @oparoz Actually i am having a couple of doubts regarding the functioning of the ellipsis a whole div can be inserted upon the click event on the ellipsis or a pop may be generated which one is suggested can you please tell me
From my pov, the div should be pre-existing, but hidden underneath the controls and would be revealed via a slide out mechanism. We can't have a menu there because having 2-3 sorting buttons on one line of the menu doesn't look right.
Normal
All buttons are shown
Reduced
- 3-dots are shown
- Buttons are moved to the hidden div (This might break a few actions because of change in CSS paths)
- Clicking on the 3-dots reveals the buttons
From @shubhrajodiya on April 14, 2016 8:5
@oparoz @jancborchardt I have implemented the 3-dot(icon-more) and written the js also but have trouble in integrating it can you please guide me
From @shubhrajodiya on April 15, 2016 13:46
@oparoz I want to trigger the click event handler on the ellipsis and show the hidden div which contains all the buttons but my script is not running i dont know why it's happening ??
From @jancborchardt on April 15, 2016 14:6
cc @owncloud/javascript for help on the 3-dot-menu.
@shubhrajodiya - May you're not targeting the right element? Do you get any error in the console? It's difficult to tell without being able to look at the code.
From @skjnldsv on April 15, 2016 14:9
Is there an associated pr? Where can we see your code to help you @shubhrajodiya ? :)
From @shubhrajodiya on April 15, 2016 16:16
@skjnldsv No as i am working on it there is no pr I am able to make changes in css and manipulate the scenario in the gallery app but when i am trying to trigger an event handler on the ellipsis(3-dot button) using the script its not working. can you please guide me how to add new script which will work as expected because i tried creating a new js file in the js folder and also embedded the script but its not working.
From @skjnldsv on April 15, 2016 16:59
We're going to need more information, what did you changed for now, only css?