Dashboard Responsive Design

Dashboard Responsive Design

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

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

Comments
Comments are disabled in preview mode.
Topics
 
 
Latest Stories in
Your Inbox
Subscribe
More From Progress
New_Mobile_Dev_Ebook_Progress_Website_Thumbail
The New Mobile Development Landscape
Download Whitepaper
 
IDC Spotlight Sitefinity Thumbnail
Choosing the Right Digital Experience Platform to Improve Business Outcomes
Download Whitepaper
 
TheFastestWayToBuildMobileAppsArtboard-2
The Fastest Way to Build Mobile Apps With Cloud Data
Watch Webinar