+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Dashboard Responsive Design

by Zheyna Peleva
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 screen  and (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 screen  and (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!

3 comments

Leave a comment
  1. Mark Oct 17, 2013
    The screenshots above do not work.
  2. Jen Peleva Oct 18, 2013
    Problem fixed! Thanks, Mark.
  3. Jochem Oct 28, 2013
    Thanks for the mention Jen!

    Leave a comment