Feature Request: Make Template Responsive

[ACPK]

Should be self explanatory.

[ACPK]

@graysonwright - I was thinking about working on this next week, as I can only view the left side menu on my phone. The width seems to be responsive, but not the divs.

Before I begin, any thoughts on the feature, and suggestions?

[frostini]

Is there any real interest for this feature?

@ACPK are you still game to work on this? While I'm not planning on working/finishing this feature in the immediate horizon (next couple of days), I could chip away at it over the next few weeks as it is something that I'd like to see implemented eventually, though not mission critical. I'd be happy to collaborate on this @ACPK or whomever is interested. In terms of implementation pointers, after a quick perusal of source, I was thinking it may be best to just bite the bullet and conduct some CSSurgery to implement a mobile-first solution? Seeing as they are using BEM, perhaps we can target responsiveness in order B->E->M? I think the low-hanging fruit would be to start with containers/Blocks to make the overall layout responsive and then move onto the individual elements and then finally modifiers (if necessary). Though I do have two main questions:

1. what breakpoints to target and what units should we use for the media queries?
2. a major point for responsiveness would be to hide the sidebar/menu, saving all that screen real estate, and trade the sidebar for a hamburger triggered off-canvas menu. Is this something that we would want? And secondly, would we want to keep this pure JS implementation or is there any libraries/dependencies that we'd feel comfortable working with for this?

[jondkinney]

@frostini I'm interested in this feature. Trying to do anything from the phone is tough. Off-canvas hamburger menu sounds good to me.

[greatseth]

Please don't force hamburgers on people. That kind of thing should be possible to layer on top of a simpler, less presumptuous design if somebody is, for some reason, hellbent on making their users' experience worse.

At any rate, I am starting a new project, and this shortcoming regarding the responsiveness was one of the first issues I noticed. I like a lot of other things about the project, so I'm going to try my hand at customizing the design. I was going to start by seeing how far I could get just layering my styles on top of the default, but if there is a redesign effort ongoing that could use some help, I'd be happy to chip in what I can.

[nickcharlton]

I do see value in this being implemented in the future. But it's not something I'd be likely to include until we're past 1.0. I'd like to hope we can do something which is not too much of a departure from our current front-end implementation, too.

I've admittedly not thought too deeply about the implementation of this, but there's some implications in the plugins too and I'd like us to come up with a solution which avoids as much JavaScript as possible (I'm mostly concerned about complexity). Much like @greatseth I too am not a fan of hamburger menus, either.

I'm going to label this with post-1.0 in the mean time.

[greatseth]

Here are some rules I layered on top of the default which solve some amount of the problem by having the nav go on top when below a certain threshold of width:

// This number was chosen fairly arbitrarily but seems like it might be reasonable. Adjust to taste.
$administrate_mobile_threshold: 500px;

.app-container {
    display: block;
}

.navigation__link {
    display: inline-block;
}

@media (min-width: $administrate_mobile_threshold) {
    .app-container {
        display: flex;
    }

    .navigation__link {
        display: block;
    }
}

There are a number of other relatively small adjustments I would want to make so far, but they are not entirely related to the core of the issue here. Some are related to these adjustments but get into the realm of taste for things like amount of whitespace or changing positioning, labeling, emphasis, etc. of certain UI elements, so I figured I'd leave them out for now.

Edit: Added a rule to the @media statement which I forgot the first time. It restores the navigation links to full-width buttons when the nav is on the side.

[mshka]

+1 🙏