Admin Drawer

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

5/22/2017 3:57:20 PM
Gravatar
Total Posts 73

Admin Drawer

I can't find the CSS to make the admin drawer be a fixed column instead of over top.  In other words, when the button is selected for the admin, I would like it to move the content to the right and take up a column on the left instead of flying over the content.  Any ideas where I can start?  I have not yet looked at the layout, just the CSS that is generated. 

5/22/2017 5:36:57 PM
Gravatar
Total Posts 182
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: Admin Drawer

Hi Jonathan,

There is no CSS for this built into framework at the moment. I think the approach I'd take to accomplish this would be pretty simple though, so here's a rundown:

  1. Make sure you wrap your entire site in a single div (.sitewrap or something). This includes the header/footer & any other "in-page" content.
  2. When the admin drawer is opened, use JavaScript to add a class to the .sitewrap div that adds a padding on the left equal to the width of the admin drawer (by default, the admin drawer is 250px wide).
  3. Ensure that your entire site is responsive using a flexbox or percentage grid, so that it still displays correctly when the drawer is open.
  4. Consider using css transitions to animate the padding: .sitewrap { padding-left: 250px; transition: padding 300ms ease; }

If your site is phone-friendly, you'll probably need to make special considerations for that. Many mobile apps just have any side drawers kind of push the site out of the way when they open, and you could probably do that pretty easily with this method.

By the way, the HTML for the admin drawer is in [skin-name]/includes/administration-drawer.html, the LESS (css) is in [skin-name]/less/administration-drawer.less, and the JavaScript is in [skin-name]/js/administration.js. Any adjustments you make should be made in those files.

Hope this helps!

-Isaac

5/23/2017 10:34:43 AM
Gravatar
Total Posts 73

Re: Admin Drawer

Sweet.  Thank you.  I will try that.

8/1/2017 8:41:00 PM
Gravatar
Total Posts 73

Re: Admin Drawer

I have gone to the drawing board and now know where I would like to put the admin drawer, just not sure the specifics.  Here is what I was thinking.  The first image is the anonymous.  The second is admin login and the 3rd is normal login.  Any suggestions to getting started?

http://delfraisse.com/Mancon-WebServices-Layout.png

8/2/2017 8:07:24 AM
Gravatar
Total Posts 182
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: Admin Drawer

Jonathan,

The first thing you'll need to do is move the admin-drawer HTML call in the layout.Master into the right spot (probably just beneath your header). In Framework, you'll find this ;<!--#include file="includes/administration-drawer.html"--> on line 37, this is the bit that calls in the code from the administration-drawer.html file. You can move this, and all the code in that file will go with it.

I can't give you exact instructions on building your new admin bar, but I'd suggest you completely change the HTML and CSS that are included and build your own, just copying over the bits that suit your new style. Also, you'll want to consider removing/editing the script in /js/administration.js from lines 71 - 133, if you don't want the drawer to have show/hide functionality anymore.

Hope this helps.

8/2/2017 8:11:45 AM
Gravatar
Total Posts 73

Re: Admin Drawer

That does and thank you.  Sorry for such a basic question.  If I run into anything more specific, I will come back.  I also plan to submit my changes for a new theme if anyone else wants this type of change.