Dashboard Responsive Design

by
Zheyna Peleva
Oct 17, 2013

With the release of the new Dashboard module in Sitefinity CMS we introduced responsive design for the dashboard page. This functionality allows content editors to track changes on the site even on their mobile phones.

In this blog post I'm going to show you how to fully take advantage of the responsive layout transformations. We will modify the Dashboard page for resolution higher than 1680x1050. I must mention that all credit goes to Jochem, who gave us the idea for this blog post.

The first thing we do is replace the default layout controls on the Dashboard page (two 50% + 50% layouts) with one 4 x 25% layout control. Then we place the same Dashboard widgets in each of the columns of the layout - the Analytics widget and 3 recent items widgets. Now, how do we add the responsive css? We simply drag and drop a css widget on the page and create the following media query:

@media only screenand (min-width: 569px) and (max-width : 1680px){}

This media query targets only devices that have width, ranging from 569px to 1680px. You may ask why I picked 569 px as the lower value. The reason for this is that we already have an embedded media query for mobile phones, that covers the range to 568px device width. In short, after the modification the dashboard will have 3 different looks - for mobile devices (screenshot here), where each column will be on a separate row, for standard resolution (screenshot here) (<1680px), where we will have two rows with two 50% columns on each row, and higher resolution devices (screenshot here), where all four Dashboard widgets will stand next to each other on the same row.
Since we have a 4 column layout and we want two rows with two columns on each row for standard devices, we set 50% width for the wrapping divs of each layout column (sf_4cols_1_25, sf_4cols_2_25, sf_4cols_3_25, sf_4cols_4_25).

.sf_colsOut.sf_4cols_1_25,

.sf_colsOut.sf_4cols_2_25,

.sf_colsOut.sf_4cols_3_25,

.sf_colsOut.sf_4cols_4_25

{

width: 50%!important;

}

We then set clear:left for the third layout column, which means that nothing can stand on the left side of the .sf_4cols_3_25 div. This practically pushes the third and the fourth columns under the first and the second (exactly what we want).

The last thing we need to do is set a few margins, so that the third and fourth columns would look identical to the first and the second. We set margin left and right to the third layout and margin-bottom to the first and second, so that they won't stick to the top of the third and the fourth columns.

.sf_colsOut.sf_4cols_3_25.sf_colsIn

{

margin-left: 40px!important;

margin-right: 40px!important;

}

.sf_colsOut.sf_4cols_1_25,

.sf_colsOut.sf_4cols_2_25

{

margin-bottom:40px!important;

}

And here's the whole css:

@media only screenand (min-width: 568px) and (max-width : 1680px){

body

{

min-width: 0!important;

}

.sfPublicWrapper

{

width: auto!important;

}

.sf_colsOut.sf_4cols_1_25,

.sf_colsOut.sf_4cols_2_25,

.sf_colsOut.sf_4cols_3_25,

.sf_colsOut.sf_4cols_4_25

{

width: 50%!important;

}

.sf_colsOut.sf_4cols_3_25

{

clear: left;

}

.sf_colsOut.sf_4cols_3_25.sf_colsIn

{

margin-left: 40px!important;

margin-right: 40px!important;

margin-top: 40px!important;

}

.sf_colsOut.sf_4cols_4_25.sf_colsIn

{

margin-top: 40px!important;

}

}

With this we have a fully functional responsive design for the Dashboard. Hope you enjoyed the blog post!

About the author

ZheynaPeleva

Jen Peleva first joined Telerik in 2011 as a support officer. She's currently a junior front-end developer in Sitefinity.

Tools

Sitefinity Professional Services

Progress, Telerik, Sitefinity and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.