New Dashboard en

Installations 21 Likes 7

Idea is to have the Dashboard look like even tiles then change shape when the screen is wider or on smaller devices

Latest version 1.0 View content

Released 3 years ago

First Draft

Plugin CSS for 1.0


:root {
    --sky-dashboard--height: 300px;
    --sky-dashboard--photo: calc(var(--sky-dashboard--height) * .45);
    --sky-dashboard--text: calc(var(--sky-dashboard--height) * .55);
}

.panel .panel-heading-entity {
    transition: background 3s ease;
}

.panel-body {
    padding: 10px;
    padding-bottom: 0px;
}
.panel .panel-heading-entity h3 {
    height: 100%;
}

.map-dashboard {
    min-height: calc(var(--sky-dashboard--height) + 31px);
}

.panel {
    min-height:  calc(var(--sky-dashboard--height) + 32px);
}

.panel-heading-entity {
    height: var(--sky-dashboard--photo);
}

.widget-preview div[data-toggle="preview"],
.panel .panel-body .preview {
	max-height: var(--sky-dashboard--text); 
}

.panel .panel-body .preview-switch {
    position: relative;
}

@media (max-width: 992px) {
    .panel .panel-heading-entity {
        width: 35%;
        max-width: 150px;
        float: left;
        height: calc(var(--sky-dashboard--height) * 0.65);
        margin-right: 16px;
    }

    .panel {
	    min-height:  calc(var(--sky-dashboard--height) * 0.45);
    }
    
    .map-dashboard {
	    min-height: calc(var(--sky-dashboard--height) * 0.65);
    }

    .panel .panel-heading-entity h3 {
	    word-wrap: break-word;
    }
}

@media (min-width: 1501px) {
    .panel .panel-heading-entity {
        width: 35%;
        max-width: 150px;
        float: left;
        height: calc(var(--sky-dashboard--height) * 0.65);
        margin-right: 16px;
    }

    .panel {
	    min-height:  calc(var(--sky-dashboard--height) * 0.65);
    }
    
    .map-dashboard {
	    min-height: calc(var(--sky-dashboard--height) * 0.65);
    }

    .panel .panel-heading-entity h3 {
	    word-wrap: break-word;
    }
}