This post is about styling and defining the CSS for the metro look and feel of the Dashboards by adding CSS to the elements that was defined before and adding other functionality to it. This is a continuation of Create Metro Layout in SAP Design Studio Dashboards: Step by step guide – Part 1
Note |
---|
For those who are new to CSS, you can check out this document Crazy CSS Fun with SAP Design Studio to know about how to use CSS. |
All the fonts in the dashboard are defined as “Open Sans” by using font-awesome of bootstrap. Place the following code inside the style.css. This font rendering requires internet.
@import url(http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
The container has the background green we need and set the font color as white. It is also used to add elements. Place the following styles.
.container{
-webkit-transform:scale(0.9);
background:#0f6d39;
color:#fff;
}
The wrapper is used to hold the sliding elements and is identified by the wrap class. The pagebook is added inside the Wrapper. Use the following CSS for the wrap
.wrap{
-webkit-columns: 300px;
-moz-columns: 300px;
columns: 300px;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
Box gives the box looks for all the tiles and also snaps the tile sizes for each of the box with relevant fonts and font size. Apply the following CSS to the box
.box{
overflow:hidden;
font-size:13px;
padding:10px;
display:block;
float:left;
margin:5px;
}
Title defines the fonts, size for the Dashboard title. It resembles the Windows Metro tile title. Apply the following settings to the start class.
.start{
font-family: "Open Sans", arial;
font-weight:300;
float: left;
width: 55%;
font-size: 40px;
}
.tile{
padding: 30px;
}
Metro UI looks colorful. So define the colors in separate class which can then be assigned to different tiles. The basic metro colors are defined.
.lightgreen{background:#99b433;}
.green{background:#00a300;}
.darkgreen{background:#1e7145;}
.magenta{background:#ff0097;}
.lightpurple{background:#9f00a7;}
.purple{background:#7e3878}
.darkpurple{background:#603cba}
.darken{background:#1d1d1d}
.teal{background:#00aba9}
.lightblue{background:#eff4ff;}
.blue{background:#2d89ef}
.darkblue{background:#2b5797}
.yellow{background:#ffc40d}
.orange{background:#e3a21a}
.darkorange{background:#da532c}
.red{background:#ee1111}
.darkred{background:#b91d47}
Metro Arrows help in switching the pages. Please the following CSS for arrows.
.arrowright {
background: #2C2C2C;
font-size: 12px;
position: relative;
width: 1em;
height: 1em;
margin-left: -0.7em;
}
.arrowright::before {
bottom: -0.666em;
left: 0.8em;
position: absolute;
border-left: 1.2em solid #2C2C2C;
border-top: 1.2em solid rgba(44, 44, 44, 0);
border-bottom: 1.2em solid rgba(44, 44, 44, 0);
content: "";
}
.arrowleft {
background: #2C2C2C;
font-size: 12px;
position: relative;
width: 1em;
height: 1em;
margin-right: -0.7em;
}
.arrowleft::before {
bottom: -0.66666666em;
right: 0.8em;
position: absolute;
border-right: 1.2em solid #2C2C2C;
border-top: 1.2em solid rgba(44, 44, 44, 0);
border-bottom: 1.2em solid rgba(44, 44, 44, 0);
content: "";
}
The paginator does not look suitable for the dashboard style. So remove the paginator by applying the following style to it to remove the paginator.
#zen_PAGEBOOK_1_tf1-paginator {
display:none;
}
The default design studio button style hinders our arrow style. This can be removed by overriding the default button CSS with our own CSS.
.sapUiBtnS.sapUiBtnNorm.sapUiBtnStd {
border-color: none !important;
background: none !important;
box-shadow: none !important;
border:none !important;
}
.sapUiBtnS.sapUiBtnNorm.sapUiBtnStd {
background-color: none !important;
}
.sapUiBtnS.sapUiBtnNorm {
border: none !important;
}
.sapUiBtnS {
outline:none !important;
}
.sapUiBtnFixedWidth {
overflow: visible !important;
}
After adding all the styles, modifying the layout a little and mapping the Data the dashboard now looks something like this.
The arrow button helps to navigate to the pages in the pagebook, select the button in PAGE_1 and PAGE_2 and enter the following line in the On Click of Event property.
PAGE_1 | PAGEBOOK_1.setSelectedPageIndex(1); |
PAGE_2 | PAGEBOOK_1.setSelectedPageIndex(0); |
The metro transaction effect can be achieved by setting the Display property for the Pagebook. Select the pagebook and set the Transition effect as Slide In and Transition Direction as Horizontal. In order to swipe in Touch device, set Enable Swiping to true.
Now you would get a complete Dashboard with Metro layout. You can download the complete Design Studio Application from https://github.com/sgsshankar/SAP-Design-Studio-Metro-Layout
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
6 | |
5 | |
5 | |
5 | |
5 | |
4 | |
4 | |
4 | |
3 | |
3 |