Some improvements for dashboard

andiamine commented 8 years ago

add back to normal screen button ( in right side of top menu)
make icons list in 2 columns
add a 3rd column that show stats (like total records .....)

pepperstreet commented 8 years ago

+1 for sections statistics (maybe even charts like in Emerald? extra tab?) +1 for Back-button (very crucial! if this fullscreen concept is kept)

Some more suggestions & ideas:

special module-positions (so one could add his own modules to the fullscreen display)
consistency between Cobalt & Emerald! Currently both are different. Not to mention the naming conventions: Control Panel OR Dashboard?
responsive menu (not necessarily Bootstrap collapse, but at least a proper style on smaller devices)
Icon/Webfont and classes instead of pixel images. (why not core Icomoon? Or even selectable font(s) in config)

andiamine commented 8 years ago

+1 for icomoon instead of pictures

i think it's better to use icomoon app : https://icomoon.io/app/#/select

this will let you to generate icons with unique prefix , also will u be able to select icons that u want use. (i use it in my extensions , also used in tws framework)

kiranetph commented 8 years ago

Sample of a responsive "Control Panel" (not Dashboard), which can be adjusted to gantry 4, gantry 5, bootstrap 2, bootstrap 3 (others to follow). This will allow us to set what the individual environment is. No need for "compatibility mode", "full screen mode" or additional files just to make it work. Icon and color select per panel, optional record number display ...

2016-01-18_14-11-31

"Records" should be under content ...

andiamine commented 8 years ago

Woow good design , i like it :+1:

Serhioromano commented 8 years ago

Should it really be multiple color? Different color for every button? This also require graphics preparation in Photoshop.

Serhioromano commented 8 years ago

@andiamine Did you install latest media pack?

Serhioromano commented 8 years ago

@pepperstreet @andiamine Back button. Where will it direct user? To what page?

kiranetph commented 8 years ago

<?php cp_item_el('XML_SUBMENU_SECTIONS', 'sections', 'fa fa-sitemap','blue',''); ?> css color .. not a graphic button ... icon in background is font awesome or any other icon selected through xml --> therefore i wanted the template parameter configurable by user. Will open extra topic on it

Serhioromano commented 8 years ago

icon in background is font awesome or any other icon selected through xm

That I know. But the way it is drawn with some edges hidden, not possible to insert as text. It should be a picture and then CSS background property.

kiranetph commented 8 years ago

This is pure css ... The icon is inserted with margin-left -35px and font size 110px , that will create the effect that is is only 2/3 visible.

.cobaltpanel .backicon > i {
    margin-left: -35px;
    font-size: 110px;
    line-height: 110px
}

$img = "fa fa-sitemap"

    <div class="span3">
        <div class="cobaltpanel <?php echo $color ?>">
            <a href="<?php echo Url::view($link) ?>">
                <div class="backicon">
                    <i class="<?php echo $img ?>"></i>
                </div>
                <div class="details">
                    <div class="title"><?php echo JText::_($title); ?></div>
                    <div class="number"><?php echo $numbers; ?></div>
                </div>
            </a>
        </div>
    </div>

The screenshot is not a mockup, it is a working Cpanel .... i just have to refine it a little ...

kiranetph commented 8 years ago

now if we replace the class="span3" (bootstrap 2) with class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> (bootstrap 3) or class ="uk-width-1-4" (UIkit) etc etc

and the surrounding div with class = "row-fluid" (bootstrap 2) class = "row" (bootstrap 3) class = "uk-grid" (UIkit) etc etc

then we have a control panel which can be set with 1 parameter to work for all already installed front-end frameworks in the joomla installation.. At least here for the responsive grid. I am thinking of a good way to implement it ... but maybe you know of something easier and better.

pepperstreet commented 8 years ago

@kiranetph +1 Congrats to your "design excursion"! Thumbs up!

Colors: First icon row could be Cobalt blue and variants/shades of it. (Same for Emerald with shades of grey... err green ;) :)

Icons: I really would like to see web fonts!
Either a comprehensive default font for everything (FontAwesome etc.) Or a smaller default like Joomla core Icomoon / Cobalt special font. Cherries on the cake: An optional custom font selector (based on icomoon service/tool) or custom icon selector. (This has been mentioned in the forum already!)

CSS grid & compatibility: At least for the main responsive grid classes it is not a big deal to make it flexible. If grid classes are not hardcoded! Parameters/input fields for mapping class-names could solve this. (maybe this could be done for all common form classes, too?! I have seen something similar in an online booking service.)

andiamine commented 8 years ago

@Serhioromano back button can get back user to homepage or we can change to "Disable Fullscreen"

pepperstreet commented 8 years ago

component.php If we really keep this option and feature, shouldn't it be a separate file for MintJoomla use only? Besides a global override, joomla allows to use any filename for your own purposes. For instance cobalt.php or fullscreen.php etc. This file could be customized without harming the original component.php. It might load any needed CSS/JS.

kiranetph commented 8 years ago

@pepperstreet but issn't this a joomla template feature? you change your template, you have to add it there again ...

Barabashk commented 8 years ago

@andiamine, @pepperstreet, Joomla, Helix and many others use Font Aversome Icons http://fortawesome.github.io/Font-Awesome/icons/. Is it not good? I think it is good to use modern and popular icons

Barabashk commented 8 years ago

+1 for Back-button +1 for left sitebar +1 for responsive "Control Panel" like that

But my position that it's not good idea - working with many frameworks and with front-end styles. In some cases developer need edit standard classes and it can brake cobalt dashboard view in some places. Using own styles (or one admin style, icons and others) is better

pepperstreet commented 8 years ago

@kiranetph component.php - you are right! The location is limited to the current J! template folder. :( Maybe Cobalt fullwidth-option should serve as a "toggle" inside the main cpanel file. As a sort of condition that loads CSS/JS etc.

@Barabashk FontAwesome is comprehensive and well-known... A good default basis, but not the ultimate answer. People might want to use other iconfonts/-sets.

Also we might have to re-think the general Cobalt structure and strategy: Do we need to "split" the admin part and appearance from the user's frontend part? For instance: Cobalt admin and configuration stays BSv2 plus default styles and customizable icons, and user's frontend can be powered by "any" CSS through Cobalt template system and the current J! template.

Serhioromano / cobalt-9

Some improvements for dashboard #34

Some more suggestions & ideas: