Jump to content

Simple responsive documentation admin theme

Michael Murphy

By Michael Murphy,
in Themes and Profiles

 Share

Recommended Posts

Michael Murphy Sr. Member

Michael Murphy

Posted
Posted

I’ve been working on a simple admin theme. I originally just wanted to add a simple dashboard area on the home page to display some quick links to key actions and documentation for clients, but I ended up doing a whole theme. The main focus of the theme is for the client / editor role, so it’s not been optimised for the developer usage yet. There are a few enhancements which are aimed at clients (opening previews in a new window, showing tree actions on hover). I have also tried to optimise it for mobile layout. You can see a preview on this video

It’s using the Bootstrap framework and Open Sans font.

The main issues I currently have are a conflict with the Bootstrap framework scripts and the older version of Jquery that ships with the PW admin. If I upgrade to Jquery 1.8.2 a lot of PW admin functionality breaks (sorting, ask select, modals). If I stick with the currently shipped version of jQuery 1.6, the bootstrap scripts do not work (drop downs, message alerts, mobile navigation).

The other big issue, is I made a few simple hacks to some core js files (/wire/modules/Process/ProcessPageList/ProcessPageList.js, and /wire/modules/Jquery/JqueryWireTabs/JqueryWireTabs.js) - this was mainly to insert extra css classes here and there or to show if the tree has children. Is there a better way to do this?

Other issues I am thinking about

Is there a way to modify the “add new page” workflow? So when the user adds a new page, I’d like to change the default “You are adding a page using the …” message. Maybe this could be an additionally template field called “instructions” or “”details” ? It could be a used as a kind of “templates documentation”, which could be used to document the project for other devs and designers and for the clients / editors.

How can you modify the login screen without overriding this file (/wire/modules/Process/ProcessLogin/ProcessLogin.module)?

Also not to sure if having two save buttons is good for usability - maybe I will just have one in the header and make it fixed as you scroll.

  • Like 15
Link to comment
Share on other sites
apeisa Hero Member

apeisa

Posted
Posted

Looks very nice and some very great thinking there!

About adding new page: what I have been missing would be a quick way to add multiple pages at once. Something like:

  1. Click "new"
  2. Opens "inline" or modal view for page title, name and possible template
  3. Click save, page is added as unpublished to a tree
  4. You can click "new" again etc...
Link to comment
Share on other sites
ryan Hero Member

ryan

Posted
Posted

Looking great! Love what you are doing with this.

The main issues I currently have are a conflict with the Bootstrap framework scripts and the older version of Jquery that ships with the PW admin. If I upgrade to Jquery 1.8.2 a lot of PW admin functionality breaks (sorting, ask select, modals). If I stick with the currently shipped version of jQuery 1.6, the bootstrap scripts do not work (drop downs, message alerts, mobile navigation).

The dev branch (targeted as the upcoming v2.3) currently has jQuery 1.8.3 and the latest jQuery UI, so this issue will resolve itself shortly. If you'd like to switch to it on your dev server, I could definitely use help testing.

The other big issue, is I made a few simple hacks to some core js files (/wire/modules/Process/ProcessPageList/ProcessPageList.js, and /wire/modules/Jquery/JqueryWireTabs/JqueryWireTabs.js) - this was mainly to insert extra css classes here and there or to show if the tree has children. Is there a better way to do this?

If you can tell me more specifically what you need changed, I can update the core to support it, or can suggest an alternative.

Is there a way to modify the “add new page” workflow? So when the user adds a new page, I’d like to change the default “You are adding a page using the …” message. Maybe this could be an additionally template field called “instructions” or “”details” ? It could be a used as a kind of “templates documentation”, which could be used to document the project for other devs and designers and for the clients / editors.

I'm not totally sure I understand the request. You mentioned workflow, but sounds like you are mainly interested in just changing some text? Either way, I'm sure I can make it hookable if it's not already. For really major changes, another option is you can always add another Page Add process of your own (under a different name) and update the 'process' variable of /processwire/page/add/ to point to your process rather than the default one.

How can you modify the login screen without overriding this file (/wire/modules/Process/ProcessLogin/ProcessLogin.module)?

Several things are hookable here, and if we don't have what you need now, I'm happy to modify it to make it more hookable. Tell me more specifically what you are trying to do here and I should be able to find a way.

Also not to sure if having two save buttons is good for usability - maybe I will just have one in the header and make it fixed as you scroll.

Technically there's only 1 save button in the markup. The second one is created by the javascript in /wire/templates-admin/scripts/main.js. As a result, this is admin-theme specific, and getting rid of it would just mean deleting some JS out of your /site/templates-admin/scripts/main.js

  • Like 1
Link to comment
Share on other sites
Michael Murphy Sr. Member

Michael Murphy

Posted
  • Author
Posted

Thanks for the kind words and feedback.

I have just tested with the latest dev version and that solves the jQuery conflicts.

About changing the "add new page workflow", for now I would be more interested in just customising the text. Something like

"You are about to add a new “template name”. [Thumbnail Screenshot of template or icon]

More details (about this template)

Cancel or change template (if possible)".

Maybe this could also be expanded to include cases like what @apesia describes above so you could add specific rules. Need to think about that some more.

Regarding the login module, I would like to hide a few things like the home link, and also be able to add some extra text like "need access or forgotten your password - please contact ……"

Now I need to work out how to distribute the documentation / quick links part as an extra module. The module will be quite simple - it will insert a new page / template called "documentation" which will have a text area for quick links and the documentation. I've never created a module before, so any advice here is welcome.

Here are the changes I made to some core files

/wire/modules/Process/ProcessPageList/ProcessPageList.js

added this to line 442 so I can change the icons in the tree to indicate pages with children

if(child.numChildren > 0) {
$numChildren.addClass('hasChildren');
$li.addClass('hasChildren');
}

/wire/modules/Jquery/JqueryWireTabs/JqueryWireTabs.js

changed line 26 so I could use the tab classes used in bootstrap

var $tabList = $("<ul></ul>").addClass("WireTabs nav nav-tabs");

changed line 76 and 77

var $oldTab = $($tabList.find("a.on").removeClass("on").attr('href')).hide(); $($tabList.find("li.active").removeClass("active"));
var $newTab = $($(this).addClass('on').attr('href')).show(); $(this).closest('li').addClass('active');
Link to comment
Share on other sites
ryan Hero Member

ryan

Posted
Posted
added this to line 442 so I can change the icons in the tree to indicate pages with children

You might be able to avoid a core modification here, because the markup already has identification for children (which is how the PageList js knows it has children). The presence of a span.PageListNumChildren as a child of any .PageListItem indicates that a page has children. Lets say you wanted to add that "hasChildren" class to all items that had children: 

$(".PageListNumChildren").each(function() {
 $(this).parent(".PageListItem").addClass("hasChildren"); 
});

You can also target the .PageListNumChildren span directly with CSS, as this is what contains the numbered quantity of children in its text.

Let me know if this doesn't solve it, I don't mind adding another class here if it helps.

  • Like 1
Link to comment
Share on other sites
ryan Hero Member

ryan

Posted
Posted

As for JqueryWireTabs, I'm willing to, though reluctant to put CSS framework-specific classes in the code for these modules. I'm thinking what might be better here is for the theme's JS to populate those framework-specific classes, like this:

$("ul.WireTabs").addClass("nav-tabs").find(".on").addClass("active");

An even better option may be to update the CSS framework class names to include alternate versions. This is the approach I've taken on some other projects. I thought this was better than modifying other kind of code because stylesheets are supposed to be kind of the last stop and we use them to style output rather than the other way around. For instance:

.nav-tabs .on <!-- add this line -->
.nav-tabs .active {
  ...
}
Link to comment
Share on other sites
  • 3 weeks later...
  • 1 month later...
  • 2 weeks later...
  • 2 months later...
  • 1 month later...
onjegolders Hero Member

onjegolders

Posted
Posted

Think I may end up giving this a go but probably will use Foundation instead as I find it just a little more flexible, pretty much the same end result though.

Just need to find a few days free time ;)

Any news on Michael? Seemed onto a good thing here... 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...