apeisa Posted May 6, 2011 Share Posted May 6, 2011 Still very much work in progress, but thought that this might be something you guys would like to see. Still many rough edges, but I hope you guys try it and give me some feedback. It scales to different resolutions (if your browser supports media queries) - there is basically three modes: Full width (fixed layout for 1300px or over Fluid width for 900-1300px screens Fluid width for under 900px screens Here is the screencast: http://screencast.com/t/lBCfpmhuJDD There are few rough edges, but I myself are pretty happy how this is shaping up. How do you guys think? We will probably start using this admin theme at our company, but as always, open source so if anyone is intrested using this: I would be honored. This could be cleaner package (now it has everything duplicated, no includes or anything like that). But installation is simple: just unzip to /site/templates-admin/ templates-admin2.zip Link to comment Share on other sites More sharing options...
ryan Posted May 7, 2011 Share Posted May 7, 2011 Thanks for posting this -- I can't wait to check this and the video out! I'm stuck on the cell phone till I can get back in the office tomorrow afternoon for a bit. This sounds really great. Link to comment Share on other sites More sharing options...
apeisa Posted May 7, 2011 Author Share Posted May 7, 2011 Forget to say that I have used/tested it only in chrome. It seems to work fine in Firefox 4 and only minor issue in IE9 (you have to change background color of active nav link, forgot there old value and css3 gradient doesn't work there). Also note: I build this for upcoming version P21 (github.com/ryancramerdelsign/p21). This probably work just fine in 2.0 also. If you are wondering why there is extra functionality (like reset password, profile link etc) then those come from the upcoming 2.1 release. That latest updates block is something I put together - not sure if that is useful to use in real life... Thinking about simple "dashboard" module or something like that, where you could add widgets like that... Link to comment Share on other sites More sharing options...
ryan Posted May 7, 2011 Share Posted May 7, 2011 I got to check out the video on my wife's laptop and this looks awesome, really great work! Im going to install later today. I've not had the opportunity to use and learn media queries yet, but this seems like a great use of them. So if I were to access the admin on a cell phone, it would use the narrowest interface? Very cool, I'm impressed. Link to comment Share on other sites More sharing options...
apeisa Posted May 7, 2011 Author Share Posted May 7, 2011 So if I were to access the admin on a cell phone, it would use the narrowest interface? Yep, that would be the case. Of course depending on your phones browser, if it supports media queries (support is pretty good). I updated the zip, there is little bit cleaner jQuery UI and some other minor polish. I made little design mistake on this: default state is fixed 1300px layout - it should probably be fluid which should fit on every desktop / laptop. But that is quick change to make. Link to comment Share on other sites More sharing options...
ryan Posted May 7, 2011 Share Posted May 7, 2011 Thanks I just got to check it out -- tested with my latest version of 2.1. I'm really impressed with what you've done! I love what is possible with media queries. Nice work. I'm looking forward to keeping up to date with this. I'm also thinking I should make it possible to install admin templates like modules, so that you can keep several installed at once and be able to switch them out more easily... what do you think? Link to comment Share on other sites More sharing options...
apeisa Posted May 7, 2011 Author Share Posted May 7, 2011 Thanks for your kind words! Yeah, media queries are very powerful (and easy!) concept. I'm also thinking I should make it possible to install admin templates like modules, so that you can keep several installed at once and be able to switch them out more easily... what do you think? It would be nice, but not very important feature in my opinion. It's not that hard to switch between different templates (renaming folder) and in real life we probably don't change admin templates that often. Link to comment Share on other sites More sharing options...
almonk Posted May 9, 2011 Share Posted May 9, 2011 Very nice work. Especially like the 'full width' layout. Link to comment Share on other sites More sharing options...
apeisa Posted June 30, 2011 Author Share Posted June 30, 2011 Thanks Almonk and sorry for late reply. I have never liked too much how pagelist looks. It just doesn't feel like something you can drag & drop. I understand the reasoning for the minimal design there, since most of the sites Ryan builds (tripsite, pw demo, villa rentals etc) have huge amount of pages and are more or less catalog-type of sites. I spend an hour with css to see what I could came up for this theme, and I think it looks pretty nice: http://screencast.com/t/wUx8x5ZfhhzV PS: It is much easier to drag and drop pages when the page element is bigger. Link to comment Share on other sites More sharing options...
Adam Kiss Posted July 1, 2011 Share Posted July 1, 2011 Nice work Antti I see I have to get around to do some administration design Also, note to Ryan: Around 0:18, Antti moves 404 page in the root, which has 5 children. After moving, the root has 6 children (although Antti only changed position, not parent) – Antti, this is faulty behavior I already repaired, Ryan just needs to recreate this bug to include my update Link to comment Share on other sites More sharing options...
Soma Posted September 17, 2011 Share Posted September 17, 2011 After installing i get this: require() [function.require]: Failed opening required '/Applications/XAMPP/xamppfiles/htdocs/pw2.ch/site/templates-admin/controller.php' (include_path='.:/Applications/xampp/xamppfiles/lib/php') (line 13 of /Applications/XAMPP/xamppfiles/htdocs/pw2.ch/site/templates/admin.php) EDIT: strange things happend with replacing I think, but after cleaning and copying again it works. Link to comment Share on other sites More sharing options...
apeisa Posted September 17, 2011 Author Share Posted September 17, 2011 Soma: glad you got it working. I'm in process to integrate this design by Almonk with my clean admin. I really liked how those wire tabs ("Content, Settings etc..") are out of the content container. Well.. that part seems to be hardest to implement in current markup. In admin template there is just <?php echo $content?> which outputs everything under breadcrumb and title. Is there any easy way to add container for InputfieldWrappers, without having ul#PageEditTabs inside that? Now there isn't any kind of container, so I ended up messing with .InputfieldWrapper and that caused problems on more complex pages where there are nested wrappers etc.. Of course I could add container myself by JS, but I think few extra divs wouldn't hurt in giving admin more design possibilities. Link to comment Share on other sites More sharing options...
Adam Kiss Posted September 17, 2011 Share Posted September 17, 2011 Hey Antti, I checked out the code quickly; You should be able to just position the switching UL against the top & against the title and then add the background & padding to li.InputfieldWrapper. I hope I understood you correctly. Link to comment Share on other sites More sharing options...
apeisa Posted September 17, 2011 Author Share Posted September 17, 2011 Thanks for your tip Adam. That is exactly what I did first. Works fine on page-edit view, but causes problems on template edit, where are some js folding and inner wrappers etc. Link to comment Share on other sites More sharing options...
ryan Posted September 18, 2011 Share Posted September 18, 2011 I don't mind adding some more markup or container(s) if it helps with theming. I'm not sure I follow exactly what's needed here, but it should be easy enough for me to add–just let me know where. Link to comment Share on other sites More sharing options...
Soma Posted September 20, 2011 Share Posted September 20, 2011 experience same issue as with bootstrap theme... Link to comment Share on other sites More sharing options...
apeisa Posted September 20, 2011 Author Share Posted September 20, 2011 Soma, I can't reproduce this issue, might be some other module causing problems? Try to disable AdminBar and other autoload modules. Link to comment Share on other sites More sharing options...
apeisa Posted September 20, 2011 Author Share Posted September 20, 2011 Now I actually can reproduce (I had slightly modified clean admin myself - there wasn't this issue) - I downloaded Almonks superb Bootstrap theme and it did have this (so probably current public rev. of clean admin have it also). Link to comment Share on other sites More sharing options...
apeisa Posted September 20, 2011 Author Share Posted September 20, 2011 Same issue when using adminbar - for some (probably very simple) reason these themes don't respect the &modal=1 get variable. Now heading to bed so will check into this later. Link to comment Share on other sites More sharing options...
Soma Posted September 20, 2011 Share Posted September 20, 2011 did you somehow change header html.. I think it may be hidden in the default theme when loaded in modal window... so renaming things will cause it to not get hidden. This problem doesn't occur on my theme and I did change nothing on the html. Link to comment Share on other sites More sharing options...
apeisa Posted September 20, 2011 Author Share Posted September 20, 2011 Had to check this before going to sleep. Issue seems to be pretty simple and in css. These are in default template, main.css: body.modal #masthead { display: none; } ... body.modal #footer { display: none; } ... body.modal #bgtitle { display: none; } At least bootstrap theme keeps .modal in body tag, so it should resolve with simply adding those lines into css. Link to comment Share on other sites More sharing options...
Soma Posted September 21, 2011 Share Posted September 21, 2011 hehe sorry for keeping you away from sleeping... ;D we all suffer on the same Link to comment Share on other sites More sharing options...
apeisa Posted September 26, 2011 Author Share Posted September 26, 2011 I don't mind adding some more markup or container(s) if it helps with theming. I'm not sure I follow exactly what's needed here, but it should be easy enough for me to add–just let me know where. Not need actually, Soma got the similar effect working in his Teflon theme by using that form element. Clever Not sure if I finish this work, since there are so many great themes around currently. Positive problem though Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now