Create a slide-up admin panel with CSS3

21 Oct 2010 01:38

21 Oct 2010 01:38

Create a slide-up admin panel with CSS3

Put administrative links for your site in easy reach with this slide-up admin panel.

admin panel

Partly inspired by a forum thread on the community site, and partly something I've always wanted to add but never got around to it, I decided to create an administrative panel that can be accessed on any page of the site, only by me, and always just a mouse hover away. And because I'm the only one using it, I got to fill it with all sorts of CSS3 goodies. Read on for more details…

Showing it to specific users only

Firstly, we'll deal with only showing it to the site's admin. While you could use James Kanjo's very handy SUO, I decided to create my own - with CSS (of course, what else would I use?). It's very simple, and possibly how James' is done as well (I've never got around to examining the very complicated source code). The idea is that we want to hide a div block to everyone except a select few users. So by default, the div is hidden. Then using the ListUsers module, we can add the username to the class of the div. If that username matches the list of accepted users, the div is displayed. And because everything is rendered inside the ListUsers module, non-logged in visitors won't see it either. Pretty simple, but very powerful.

The markup
[[module ListUsers users="."]]
[[div class="admin-panel %%name%%"]]

This is only visible to accepted users, as defined in the CSS (below).

[[/div]]
[[/module]]
The CSS

It's important to put this CSS at the very bottom of your stylesheet to ensure it is not overridden by any other styles added to the .admin-panel class.

.admin-panel {display: none;}
.admin-panel.username {display: block;}

Create the panel

Now moving on to what to put inside the panel. I used unordered lists to populate the panel with a number of handy links, related to both the current page (edit, tags, source, history, rename, files) and general site links to other administrative areas.

[[module ListUsers users="."]]
[[div class="admin-panel %%name%%"]]

[[div class="list one"]]
* [[button edit text="edit page"]]
* [[button tags text="tags"]]
* [[button files text="files"]]
* [[button source text="page source"]]
* [[button rename text="rename"]]
* [[button history text="history"]]
[[/div]]

[[div class="list two"]]
* [[[start:start |home]]]
* [[[admin:manage |manager]]]
* [[[admin:dashboard |dashboard]]]
* [[[admin:projects |projects]]]
* [[[css:theme |CSS theme]]]
* [[[blog:_start |blog]]]
[[/div]]

[[/div]]
[[/module]]

Style the panel

And finally the cool part - styling the panel with CSS. I wanted to position it at the bottom of the screen, so that when you hover your mouse near the bottom of the browser, the panel slides up. If you would prefer the panel to be located somewhere else, such as on the side or top, you would just need to change to code below to suit.
Firstly, the panel needs to have the position property set to fixed, so it is always in handy reach. And when not active it should be hidden from view, so we give it opacity:0 and nudge it down with bottom:-60px. The hover state is given bottom:0 and opacity:1. The height is 70px + 15px padding, which gives you 25px to hover over to 'pull' it up. If you find accessing the panel difficult, just decrease the value of the bottom property in the .admin-panel to something like -30px. A background gradient, and a high z-index so it's on top of everything on your page and we're almost done. Add in a webkit transition to animate everything, and you've got yourself a handy admin panel that only you know about.

.admin-panel {
    position: fixed;
    display: block;
    width: 100%;
    height: 70px;
    bottom: -60px;
    left: 0;
    padding-top: 15px;
    background-color: #424242;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#333));
    -webkit-transition: all 300ms ease-out;
    -webkit-box-shadow: 0 -1px 3px rgba(0,0,0,0.65);
    opacity: 0;
    z-index: 200;
}
.admin-panel:hover {
    bottom: 0;
    opacity: 1;
}

There's a bit more CSS required to format the list properly, which you can see in the full code below. You may also have noticed the icons next to all of the links, which is done with some more CSS that looks something like this…

.admin-panel .list.one ul li:nth-child(1) a { /* edit */
    background: transparent url(/images/edit.png) no-repeat;
}

… repeated for the remaining 11 links.

I decided to use the nth-child selector so that I didn't have to add a whole lot of spans to the markup, but if this was going to be used by many people, you would have to consider that not every browser supports the selector.

And finally, there's a little info flipper in the bottom left corner that I couldn't resist adding. I'll save explaining how that was done for another day.

Shortfalls

One thing that would make the panel complete would be the option to choose to 'pin' it to the screen so that it didn't disappear when you moved your mouse away from it, but I'm reasonably sure that cannot be achieved with CSS alone.
EDIT: This has now been implemented - see below for how it was achieved.

Something else that would make it even more complete would be the ability to put a tag cloud in the panel. When tagging new blog posts I often have to open up the site dashboard to look at the tag cloud to check for related tags - having the cloud handy at the bottom of the screen would be a great improvement, but unfortunately adding the tag cloud seems to break the panel - I'm just not sure why… yet.

Another problem is that on narrow displays the floated info flipper causes the lists to collapse below it, where they cannot be accessed. This could easily be resolved by removing the flipper, but then how would I entertain myself?

The panel works well in Safari and Chrome, and I'm reasonably sure it's okay in Firefox and Opera, but I haven't tested it in Internet Explorer - I have better things to do with my time.

The complete code

Here's the complete CSS that was used for the panel. And after the break there's a screenshot of the panel for anyone who hasn't yet figured out there's a demo enabled for all users on this page.

+ show CSS
admin panel in action

Edit - a realisation I had…

Making the panel 'sticky'

Okay, so I've just worked out how we can add a toggle option to make the panel sticky. And unlike my comment below, this doesn't require the new wish be implemented. Here's how it works…
Using the pseudo selector :target, we can define different states for the .admin-panel class depending on whether or not a parent id is 'active' in the url. We can use existing ids in the wikidot page structure, which are parents of the .admin-panel class, to toggle this sticky state.

So, first with the toggle buttons, all we need to do is link to the id #content-wrap to turn it on, and any other id to turn it off.

[#content-wrap make footer sticky]
[#page-top unsticky it!]

Then for the CSS, we define the :target state of the #content-wrap item, which will pull it up from the bottom of the screen and make it 'sticky':

#content-wrap:target .admin-panel {
    bottom: 0;
    opacity: 1;
}

Now when the user clicks the link for #content-wrap, the admin panel will be activated and become sticky. Selecting any other id, or reloading the page, will 'unstick' the panel.

I'll go into this in more detail in another post sometime soon. In the meantime, enjoy the new sticky functionality of the admin panel!

Enjoy the article? Tweet it!

tags — admin fixed gradient suo transition

Discussion - No comments yet…8 comments

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
Help: wiki text quick reference
_archive2010adminfixedgradientsuotransition
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.