This task is to rework the HTML output, so that it blends perfectly well into Joomla Admin bootstrap templates, and doesn't need an extra CSS file at all, or very very little semantic ones (like JED-specific colors for C/M/P/L and stars).
From a functionality pov it is fine. But the desgin needs a second pass:
Here are some technical directions, mainly from one of our main JUX contributors, @nonumber :+1: :
General remarks:
No specific classes, just bootstrap ones (except where needed for Javascript or JED-colors)
Try to have no css file at all, all is pretty much there in the template css
No inline css
Don't use font-family at all
Use the bootstrap classes and elements for stuff (do not reinventing the wheel)
Use the same HTML elements as Joomla core has. See the control panel. That already has the wells and headers and such, with styling ready: that was the whole idea of using bootstrap. We don't see anything that can't be done via core css: Need to remove a lot of styling and classnames
I think if you set your mind/goal to not use any images and css, then you come a long way. Just copy/paste (html structure) from any views available in core
Logically most of the html markup changes should be in the layouts/joomla/apps folder. And for those which would not be in there, it's an excellent opportunity to move that layout output part into there, so it's overridable in a later phase.
Specific JUX feedbacks:
Loose the outer greay box. Make it white.
Have the title be the same as the other titles in the 3 tabs (Upload Package File, Install from Directory, Install from URL): The JoomlaApps title should really go: it's fine having the 'apps' as a working-group title, but they are extensions, not apps, and that's not going to change for 3.2: It should simply be titled "Install from the web":, like the tab is titled. It should NOT be a separate thing. It should be part of Joomla. So don't market it as something different. We are not putting a JUX label on everything we touched either.
Make the menu the same styling as your new contol panel quick icons thing
Use the same html/styling for the list as you find anywhere else in the admin (like articles list)
Also use the same elements for things like search. Then it actually looks like it belongs in there, instead of a stand-alone app
Specific HTML bootstrap markup hints:
For the grid/list icons in the top-right, use icon-grid-view and icon-list-view
The M/P/C uses a ul/li struckture, just use use simple bootstrap labels with specific colors
For the rating use the bootstrap star icons (for full/half/empty): use icon-star, icon-star-2 and icon-star-empty classes in <span> for stars (see HTML example provided.
Small thing from accessability pov:
Use <span class="icon-star"></span> instead of <i class="icon-star"></i>
In list view: Switch position of C/M/P and description: So 1: title, 2: description, 3: type, 4: rating
The item view, please make it look more like the JED.
E.g. a simple
around it gives it a grey background for the list of categories.
And all with just 2 lines of css (just to give the stars the orange color)
This is a very quick mockup done by @nonumber (using dummy HTML, file existing), without the graphics-touch of how a more integrated list-view could look using only booststrap-css from admin templates: Beat: Not saying it should look exactly like this: You still have freedom to improve using bootstrap only, but just showing example of how it could blend completely into the Joomla Admin template (Isis or any other Admin template):
Yes, that sample mockup is a bit "Boring classic backend", but i'm sure Gev will give to his own version the small extra-touches to make it look awesome. ;)
But I bet you that above is done, them with admin template improvements in LESS (CSS), you should be able to make same kind of awesomeness back into apps*, but then the same awesomeness would suddenly be there throughout the admin interface. Or at least (with a page-specific CSS selector giving the "namespace" to the extensions management page, to apply a specific style to that. But that would now not be served by the server but by client-side admin template, as it should. :)
To be honest, I'd rather have the more exciting original design :) Why are we wanting to conforming to a boring design? Shouldn't it be the other way around?
Above mockup is only the list view. The grid view of course looks more interesting because it has the images.
Everything in core should be of the same design. If you call that boring, so be it.
Then you probably enjoy the botched up Joomla 1.5 setups where every extension has there own "exciting original design".
I'm all for a mix between "old and busted" and "new hotness" myself. Granted, a pure list view would be so much lighter in terms of request time than showing the extension icons and all the other cool stuff, but I like the opportunity to still use JUX standard markup and create something that has a nice visual effect. Not everything absolutely has to use the exact same uniform layout (Template Manager, Control Panel, Media Manager all come to mind), but they're not adding any component unique CSS to get their layouts right.
"but they're not adding any component unique CSS to get their layouts right."
Yes, they are. The current version of the App Store is full of custom css and served from the apps server.
My request is to get rid of all the custom css and non-bootstrap / non-jui elements and stick to what is available in core.
I have no issue with adding some css to add correct colors to stuff. But don't go designing new search boxes, menus, icon images and buttons.
I was referring to those core components I mentioned just before that statement. They're all using straight core JUX elements (OK, I'll concede Media Manager has its own JavaScript, but that's nothing special).
I agree fully in keeping the custom CSS to a minimum. Shouldn't need much if any here to make it fall in line with core standards.
On Friday, September 13, 2013, Michael Babker wrote:
I was referring to those core components I mentioned just before that
statement. They're all using straight core JUX elements (OK, I'll concede
Media Manager has its own JavaScript, but that's nothing special).
I agree fully in keeping the custom CSS to a minimum. Shouldn't need much
if any here to make it fall in line with core standards.
—
Reply to this email directly or view it on GitHubhttps://github.com/beat/tracker-apps/issues/18#issuecomment-24414733
.
Hi all,
Thank you all for your inputs and support :+1:
I see very valid reasons to use standard bootstrap markup:
Works and blends with any 3.x admin template
Independance of developer and designer who can work in parallel
Much lighter and cleaner HTML and CSS
Then there is nothing that blocks to:
Update/refresh/make awesome bootstraped-Apps* in the joomla Isis template. And then enjoy the fresh air throughout the admin template and not only in the new "Install from Web".
Thanks to JUX work, the Administrator area of Joomla 3.2 will already have improved usability, reduced clutter, and a better general aspect.
In this work on Apps* layout, I have proposed Gev and their team to proceed in 2 steps, and they have agreed to that:
(That's Priority 1): Clean-up the custom markup and CSS from Apps* to use Bootstrap markup of Joomla admin
Make us (JUX, PLT, Apsp, Community) proposals for a refreshed admin bootstrap-styling without changes to HTML bootstrap-markup.
So expressed in other ways, we first make Apps* "standard boring and dull" in first step, and in second step we put back a touch of awesomness and artistic touch to it and to the whole admin template. Let's see what they come up with in the next days before turning thumbs up and down :-)
That said, the remark that the Admin backend looks very same in all areas and that this can be disorienting is a very valid remark. I would like to address it in the JUX context (here we are in Apps*). I would love to add a sense of "UI geographical location" within the admin GUI. Something that you can tell if you are in articles, categories, modules, menus and so on from far, without reading page title nor column headers, while keeping full consistency in the UX and UI. It could e.g. be a color code. As I understand, Gev's designer has also ideas for that.
"3. Colors of stars and of C/M/P labels (P is violet) should better match JED ones and we can use half-stars for ratings displays"
No, I would stick with the colors that are available in the Isis administrator/templates/isis/less/variables.less
Snippet:
"3. Colors of stars and of C/M/P labels (P is violet) should better match JED ones and we can use half-stars for ratings displays"
Agree with Peter, although we'll still need to copy those colours into the apps css file, since not everyone would be using isis.
"6. Single view: labels/values: Values should be vertically aligned"
Not seeing this on chrome/firefox. Can someone check other browsers ?
"7. Single view: no need to use different fonts for values"
Assuming this is about the bold/non-bold for labels vs. values, I'd suggest sticking to the current implementation, since its much better in terms of readability.
"5. In single extension view, Buttons should be bigger"
I also don't agree with this. stick with standard buttons.
But do please align them to the far left and put the primary button on the far left.
Also CMP labels look better when on same line, I think
"6. Single view: labels/values: Values should be vertically aligned"
"7. Single view: no need to use different fonts for values"
Maybe good idea to use 'control' classes so you can align the values. That is probably what is meant by point 6.
OSM president Paul Orwig gave feedback yesterday that usability is more important than bringing traffic to JED. So I'm ok with putting Download button first.
Yes for @nonumber screenshot, and then bigger buttons are not needed (I see green button with bold text, which is ok).
However buttons need more spacing between them for better perception.
Thanks for your input. We really appreciate your taking the time to write and give us feedback as it's helping us bring the application's integration with Joomla! to this point.
Here's the latest look...
Dashboard Grid
Dashboard List
Category view
Searching for "google" by popularity
Searching for "google" by rating
Please, keep those comments coming. As you can see, we're taking them seriously under consideration.
Not sure the list view is useful now at all. There are less listings visible on the page with less details (no image).
So why would you even use the list view?
Probably best to keep it 1/2 line high per row.
Also, the listing names are blue in the tile view (which is good, as it looks like a link), but black in the list view.
Also,. list view should simply use the same layout and styling as other list views in the admin. So same as the articles, modules, plugins, menu items, etc views.
Please see my example screenshot earlier in this thread.
@coolbung List view is already implemented that way by @emavro a few PRs back, except that we benefit from compression to send both views at same time without any impact on payload :)
This task is to rework the HTML output, so that it blends perfectly well into Joomla Admin bootstrap templates, and doesn't need an extra CSS file at all, or very very little semantic ones (like JED-specific colors for C/M/P/L and stars).
From a functionality pov it is fine. But the desgin needs a second pass:
Here are some technical directions, mainly from one of our main JUX contributors, @nonumber :+1: :
General remarks:
Specific JUX feedbacks:
Specific HTML bootstrap markup hints:
<span>for stars (see HTML example provided.<span class="icon-star"></span>instead of<i class="icon-star"></i>This is a very quick mockup done by @nonumber (using dummy HTML, file existing), without the graphics-touch of how a more integrated list-view could look using only booststrap-css from admin templates: Beat: Not saying it should look exactly like this: You still have freedom to improve using bootstrap only, but just showing example of how it could blend completely into the Joomla Admin template (Isis or any other Admin template):
The corresponding mockup source file is here: https://gist.github.com/beat/6545414 (Just as a help to do the bootsrapification quicker ;-) ).
Added "9." above as additional "General remark":
Yes, that sample mockup is a bit "Boring classic backend", but i'm sure Gev will give to his own version the small extra-touches to make it look awesome. ;)
But I bet you that above is done, them with admin template improvements in LESS (CSS), you should be able to make same kind of awesomeness back into apps*, but then the same awesomeness would suddenly be there throughout the admin interface. Or at least (with a page-specific CSS selector giving the "namespace" to the extensions management page, to apply a specific style to that. But that would now not be served by the server but by client-side admin template, as it should. :)
To be honest, I'd rather have the more exciting original design :) Why are we wanting to conforming to a boring design? Shouldn't it be the other way around?
Above mockup is only the list view. The grid view of course looks more interesting because it has the images.
Everything in core should be of the same design. If you call that boring, so be it. Then you probably enjoy the botched up Joomla 1.5 setups where every extension has there own "exciting original design".
I'm all for a mix between "old and busted" and "new hotness" myself. Granted, a pure list view would be so much lighter in terms of request time than showing the extension icons and all the other cool stuff, but I like the opportunity to still use JUX standard markup and create something that has a nice visual effect. Not everything absolutely has to use the exact same uniform layout (Template Manager, Control Panel, Media Manager all come to mind), but they're not adding any component unique CSS to get their layouts right.
+1 for a Grid view.. maybe that could be part of JUX as well ?
"but they're not adding any component unique CSS to get their layouts right." Yes, they are. The current version of the App Store is full of custom css and served from the apps server.
My request is to get rid of all the custom css and non-bootstrap / non-jui elements and stick to what is available in core. I have no issue with adding some css to add correct colors to stuff. But don't go designing new search boxes, menus, icon images and buttons.
I was referring to those core components I mentioned just before that statement. They're all using straight core JUX elements (OK, I'll concede Media Manager has its own JavaScript, but that's nothing special).
I agree fully in keeping the custom CSS to a minimum. Shouldn't need much if any here to make it fall in line with core standards.
Ah, yes, sorry. Misread your comment :)
On Friday, September 13, 2013, Michael Babker wrote:
Hi all, Thank you all for your inputs and support :+1:
I see very valid reasons to use standard bootstrap markup:
Then there is nothing that blocks to:
Thanks to JUX work, the Administrator area of Joomla 3.2 will already have improved usability, reduced clutter, and a better general aspect.
In this work on Apps* layout, I have proposed Gev and their team to proceed in 2 steps, and they have agreed to that:
So expressed in other ways, we first make Apps* "standard boring and dull" in first step, and in second step we put back a touch of awesomness and artistic touch to it and to the whole admin template. Let's see what they come up with in the next days before turning thumbs up and down :-)
That said, the remark that the Admin backend looks very same in all areas and that this can be disorienting is a very valid remark. I would like to address it in the JUX context (here we are in Apps*). I would love to add a sense of "UI geographical location" within the admin GUI. Something that you can tell if you are in articles, categories, modules, menus and so on from far, without reading page title nor column headers, while keeping full consistency in the UX and UI. It could e.g. be a color code. As I understand, Gev's designer has also ideas for that.
PR https://github.com/joomla-projects/joomla-cms/pull/213 and PR https://github.com/joomla-projects/joomla-cms/pull/215 implement this!
Did quick review:
Awesome work guys!
Doing detailed review now, and will add comments here.
Ok, here some more feedbacks:
Regarding rendered output:
Regarding HTML markup:
This one progressed really awesomely over the week-end !
I'm still leaving it open, as we need to review the list of things to do and the result before closing.
But I would say by the resulting look it seems 95% done. Many Thanks to all the team that worked really hard this week-end!
"3. Colors of stars and of C/M/P labels (P is violet) should better match JED ones and we can use half-stars for ratings displays" No, I would stick with the colors that are available in the Isis administrator/templates/isis/less/variables.less Snippet:
And if nothing useful is in that file, then search in media/jui/less/variables.less
If need be, we'll adjust the images for those on the JED too (they probably will, for the new JED anyway).
"3. Colors of stars and of C/M/P labels (P is violet) should better match JED ones and we can use half-stars for ratings displays" Agree with Peter, although we'll still need to copy those colours into the apps css file, since not everyone would be using isis.
"5. In single extension view, Buttons should be bigger" Tried this.. looks a little ugly to me, especially since we have the gray box around that should give it enough attention. Check screens - https://dl.dropboxusercontent.com/u/33319542/btn-large.png https://dl.dropboxusercontent.com/u/33319542/btn-regular.png
"6. Single view: labels/values: Values should be vertically aligned" Not seeing this on chrome/firefox. Can someone check other browsers ?
"7. Single view: no need to use different fonts for values" Assuming this is about the bold/non-bold for labels vs. values, I'd suggest sticking to the current implementation, since its much better in terms of readability.
"5. In single extension view, Buttons should be bigger" I also don't agree with this. stick with standard buttons. But do please align them to the far left and put the primary button on the far left. Also CMP labels look better when on same line, I think
"6. Single view: labels/values: Values should be vertically aligned" "7. Single view: no need to use different fonts for values" Maybe good idea to use 'control' classes so you can align the values. That is probably what is meant by point 6.
Above points into screenshot:
OSM president Paul Orwig gave feedback yesterday that usability is more important than bringing traffic to JED. So I'm ok with putting Download button first.
Yes for @nonumber screenshot, and then bigger buttons are not needed (I see green button with bold text, which is ok).
However buttons need more spacing between them for better perception.
Hey, guys!
Thanks for your input. We really appreciate your taking the time to write and give us feedback as it's helping us bring the application's integration with Joomla! to this point.
Here's the latest look...
Dashboard Grid
Dashboard List
Category view
Searching for "google" by popularity
Searching for "google" by rating
Please, keep those comments coming. As you can see, we're taking them seriously under consideration.
As it's usually the case, I forgot the extension screenshot. Well, here it goes:
Thanks @emavro ! I still see feedbacks from above apply to latest screendumps ;-)
Not sure the list view is useful now at all. There are less listings visible on the page with less details (no image). So why would you even use the list view? Probably best to keep it 1/2 line high per row.
Also, the listing names are blue in the tile view (which is good, as it looks like a link), but black in the list view.
Also,. list view should simply use the same layout and styling as other list views in the admin. So same as the articles, modules, plugins, menu items, etc views.
Please see my example screenshot earlier in this thread.
On the list view, I'd suggest that we get the list view from AJAX, i.e. not re-arranging using JS. That way it's easy to control the layout.
Updated extension details page - https://dl.dropboxusercontent.com/u/33319542/extension-full.png
Included in PR https://github.com/joomla-projects/joomla-cms/pull/223
@coolbung List view is already implemented that way by @emavro a few PRs back, except that we benefit from compression to send both views at same time without any impact on payload :)
I went through the list above.
In latest PR everything above seems to be taken care of.
Many thanks to @nonumber , to @emavro, @coolbung and Gev !
I'll now go through tracker and open new tracker items if even needed.
So last point is this Joomla Plugin for extensions-developers with register-to-download and/or paid extensions.
Closing this tracker item.