Dashboard Responsive Design

Dashboard Responsive Design

Posted on October 17, 2013 0 Comments

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

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!
Zheyna Peleva headshot

Zheyna Peleva

Jen Peleva was a Principal frontend developer for the Sitefinity CMS.

Comments

Comments are disabled in preview mode.
Topics

Sitefinity Training and Certification Now Available.

Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

Learn More
Latest Stories
in Your Inbox

Subscribe to get all the news, info and tutorials you need to build better business apps and sites

Loading animation