Making manager more mobile friendly#12776
Conversation
|
Pretty sure you should not include the rendered .css file. Other than that, awesome work! |
|
This looks awesome, JP! |
There was a problem hiding this comment.
Any reason this shouldn't be removed?
There was a problem hiding this comment.
Lol whoops! That's what I get for submitting a pr during a MODXpo lecture. I'll fix it.
—
Sent from Mailbox
On Sat, Nov 21, 2015 at 11:20 PM, Mike Reid notifications@github.com
wrote:
this._loadActionButtons();
- console.log(document.getElementById('modx-container').innerHTML);
Any reason this shouldn't be removed?
Reply to this email directly or view it on GitHub:
https://github.com/modxcms/revolution/pull/12776/files#r45551647
jpdevries
force-pushed
the
responsive-header
branch
from
99883f8 to
4a4ca38
Compare
|
@OptimusCrime AFAIK it is part of the workflow to build the files before committing. When conflicts happen with CSS Integrators can just re-run I removed the console.log statement and cleaned up by squashing the commits into one |
|
@jpdevries Actually @OptimusCrime is right - to prevent conflicts from occurring it's better if the compiled CSS is not included in pull requests, the integrators will take care of updating that as things get merged. It's okay though, can sort it out either way. Could you update your PR with the template from https://github.com/modxcms/revolution/blob/2.x/CONTRIBUTING.md#template-1? Gotta set the right example ;) |
jpdevries
force-pushed
the
responsive-header
branch
from
4a4ca38 to
8903ee2
Compare
|
@Mark-H Oh I see, wasn't aware of that. done and done, i pulled the css out too |
|
Thanks man :) This looks really good from your screenshot, but it looks like it might need some further tweaks. Let's look at this together tomorrow?
|
|
Huh, ya i am not sure what is going on there. I originally branched off develop, but submitted the pr to 2.4.x. Not sure if that could have anything to do with it or not. — On Sun, Nov 22, 2015 at 1:09 AM, Mark Hamstra notifications@github.com
|
|
That could be related for sure, let's find out tomorrow, could also be an issue with my dev environment as I just started a fresh one. |
|
I reproduced it kind of but then after I cleared cache and refreshed the page it looks right again. Ya let's look at it tomorrow. It would be nice to try and figure out a way to format the uber bar too and maybe even re order the preview button (using flex-order) so it is last and big like the help button is now. — On Sun, Nov 22, 2015 at 1:19 AM, Mark Hamstra notifications@github.com
|
|
Great idea for a PR, @jpdevries! |
Gets the fixed and absolute positioned silliness out of the way on small screens
jpdevries
force-pushed
the
responsive-header
branch
from
8903ee2 to
ed1b82f
Compare
|
@mindeffects i'm not opposed to removing the lines, just mostly been focusing on responsive layout with this PR. @Mark-H I think I know what is going on. The layout is still messed up if the tree is open Tree Open 😢Tree Closed 😄 |
|
With a bit more work I managed to get the lefthand sidebar (tree) to be more supported on mobile. It is kind of weird how you expand and collapse the tree, but I'm making do with what I can. If you scroll down to the bottom of the page there is a button to expand / collapse the tree Haven't pushed yet but will soon. |
|
👍 |
|
I intended to only work on the header (hints the responsive-header branch name) but figured I'd try and work my way down the page. How about making the content entry area a bit more mobile friendly? Also made the settings tab more mobile friendly |
jpdevries
changed the title
|
Cool! |
woohoo Content tab Settings tab
|
Just updated the expand / collapse sidebar button to be responsive. It’s a little weird because the component is all the way at the bottom |
There was a problem hiding this comment.
Is there any particular reason you moved this line down to line 359?
There was a problem hiding this comment.
that is from when I was trying to figure out how to change the order of where the action buttons where on the page, but I do't think all those changes to modx.component.js are needed. I'll try removing some of them
jpdevries
force-pushed
the
responsive-header
branch
2 times, most recently
from
a567759 to
36e7dea
Compare
|
This PR does change where the MODX action bars get rendered to (so they can be before the main area) so I suppose that could cause some edge cases but all it is really doing is giving it another wrapper. If people are selecting the actions box by the id to do things like add their own buttons all that should work fine. |
|
I dld a little more work while I was Uberbar FocusedUberbar ResultsCreate/Edit Template
Create/Edit Template Variable
Create/Edit Chunk
Properties Tab
Create New Snippet
Create New Plugin
New Category Modal
Import HTML
Media Sources
Package Management
Clear Console
Settings Page
Context Page
ACLs Page
Create Property Set
Namespaces Page
#Lexicon Management |
|
Good job 👍 |
jpdevries
force-pushed
the
responsive-header
branch
from
19e2ed7 to
39d051e
Compare
|
Fantastic job JP! 🎉 👍 |
|
Awesome! |
@mindeffects I did as well but it has been slated for 2.5.0 mostly because it moves where the actions toolbar is in the DOM. It still uses the same exact id, so I see no reason why this would break anything. I intend to install 2.4.3 built from my fork so I can start my clients on it early. I can share the zip ;) |
|
amazing! never thought this would come before modx 3 |
|
Squee! |
|
Absolutely awesome work & effort! Huge 👍 from here! My only concern is about code comments (as in many other core code places, unfortunately). It's hard for other maintainers/contributors to understand the intention, or even what's supposed to be targeted, without comments. |
|
@rtripault glad you like it! The Sass is certainly nasty. Overly specific selectors and !important declarations are needed to override the inline styling of ExtJS. I could certainly add some comments to help organize things. Also, I would like to adjust the styles for certain components but would need some help from an ExtJS contributor that could help add a few classes in certain areas and maybe change the order of a couple of things in the DOM if possible. |
|
@jpdevries I haven't had a chance to test this yet, but one observation on the "Uberbar Focused" and "Uberbar Results" images above: It seems to have regressed the 'up arrow' visual connector, which previously was designed to align with the magnifying glass at each width / breakpoint: BeforeNotice at the end (once resized smaller) |
|
Awesomesauce! Can't wait for 2.5. 👍 |
|
@pixelchutes good call on the arrow that should be an easy fix |
Import HTML Import Static HTML Resource Groups Content Types Media Sources Installer Manager Customizations Dashboard Contexts Menus ACLs Property Sets Lexicon Management Namespace
jpdevries
force-pushed
the
responsive-header
branch
from
39d051e to
af66ce7
Compare
|
updated |
|
This has been merged into 2.x for inclusion in 2.5, thank you @jpdevries for making MODX more usable!! |
|
@Mark-H what can I say i can't 💤 on |
|
Will this work with touch? A big part of how the manager works depends on right clicking menu items. How will we do this on mobile device / tablet? |
|
@noahlearner This pull request doesn't change that, this just makes sure that you're actually able of navigating through the manager without wanting to poke your eyes out. :) Various mobile devices/tablets have different ways of doing right clicks.. long or force tabs typically. I'm sure there'll be further improvements in the future specifically to target the right clicks, but this one is not that yet. |
|
Will the solution look like a javascript solution to listen for a hold down to map to right click? Kind of like the solution on: http://stackoverflow.com/questions/2625210/long-press-in-javascript or the http://www.jquery-plugins.info/longclick-00014475.htm |
…ger themes The more mobile-friendly manager introduced in modxcms#12776 relies on a new div with id modx-action-buttons-container being present in the header.tpl, however with custom manager themes that have their own header.tpl file that may not always be the case. With this commit in place, it ensures the action buttons are still inserted into the page (albeit in the wrong page), rather than throwing a js error if it can't find the new div.
|
Just rising an "slightly boring" issue :
|
13 participants
What does it do ?
small screens by combatting ExtJS' nature of aggressively preventing usability on small viewports
Why is it needed ?
So it is more feasible to navigate the manager and edit resources on mobile devices.
Related issue(s)/PR(s)
n/a
Before
After