From 4f34fbd2c8e6efa8e20cb57e7c13e61dfccf8e66 Mon Sep 17 00:00:00 2001
From: antoine <antoine@lecoati.com>
Date: Wed, 14 May 2014 18:37:44 +0200
Subject: [PATCH] devices preview better look tested in chrome/firefox/IE

---
 src/Umbraco.Web.UI.Client/preview/index.html  |  62 ++---
 .../src/less/tuning.panelStyles.less          | 224 ++++++++++--------
 .../src/tuning/index.html                     |  62 ++---
 .../src/tuning/tuning.controller.js           |  12 +-
 .../src/tuning/tuning.front.js                |   4 +
 src/Umbraco.Web.UI/Umbraco/js/tuning.front.js |   6 +-
 src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js |  12 +-
 src/Umbraco.Web.UI/Umbraco/preview/index.html |  49 ++--
 8 files changed, 241 insertions(+), 190 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/preview/index.html b/src/Umbraco.Web.UI.Client/preview/index.html
index 4d9f8ea47c..c18be83888 100644
--- a/src/Umbraco.Web.UI.Client/preview/index.html
+++ b/src/Umbraco.Web.UI.Client/preview/index.html
@@ -23,6 +23,10 @@
                     <i ng-if="!isOpen" class="icon icon-right-double-arrow"></i>
                 </div>
 
+                <div ng-if="isOpen" ng-click="settingOpen('previewDevice')" ng-class="{selected:settingIsOpen=='previewDevice'}">
+                    <i class="icon icon-display"></i>
+                </div>
+
                 <div ng-if="isOpen" ng-click="settingOpen('setting')" ng-class="{selected:settingIsOpen=='setting'}">
                     <i class="icon icon-paint-roller"></i>
                 </div>
@@ -31,14 +35,36 @@
                     <i class="icon icon-palette"></i>
                 </div>
 
-                <div ng-if="isOpen" ng-click="settingOpen('previewDevice')" ng-class="{selected:settingIsOpen=='previewDevice'}">
-                    <i class="icon icon-iphone"></i>
-                </div>
-
             </div>
 
             <div class="tuning-wrapper">
 
+                <div ng-show="settingIsOpen == 'previewDevice'">
+
+                    <h2>DEVICES</h2>
+                    <ul class="preview-device">
+                        <li ng-class="{selected:previewDevice=='desktop'}" ng-click="updatePreviewDevice('desktop')">
+                            <div><i class="icon icon-display"></i><span>desktop</span></div>
+                        </li>
+                        <li ng-class="{selected:previewDevice=='laptop border'}" ng-click="updatePreviewDevice('laptop border')">
+                            <div><i class="icon icon-laptop"></i><span>laptop - 1024px</span></div> <!--height: 144px; width: 1024px-->
+                        </li>
+                        <li ng-class="{selected:previewDevice=='iPad-portrait border'}" ng-click="updatePreviewDevice('iPad-portrait border')">
+                            <div><i class="icon icon-ipad"></i><span>iPad portrait - 768px</span></div> <!--width: 768px; height: 929px;-->
+                        </li>
+                        <li ng-class="{selected:previewDevice=='iPad-landscape border'}" ng-click="updatePreviewDevice('iPad-landscape border')">
+                            <div><i class="icon icon-ipad flip"></i><span>iPad landscape - 1024px</span></div> <!--height: 675px; width: 1024px;-->
+                        </li>
+                        <li ng-class="{selected:previewDevice=='smartphone-portrait border'}" ng-click="updatePreviewDevice('smartphone-portrait border')">
+                            <div><i class="icon icon-iphone"></i><span>smartphone portrait - 480px</span></div> <!--width: 320px; height: 504px;-->
+                        </li>
+                        <li ng-class="{selected:previewDevice=='smartphone-landscape border'}" ng-click="updatePreviewDevice('smartphone-landscape border')">
+                            <div><i class="icon icon-iphone flip"></i><span>smartphone landscape  - 320px</span></div> <!--width: 480px; height: 256px;-->
+                        </li>
+                    </ul>
+
+                </div>
+
                 <div ng-show="settingIsOpen == 'setting'">
 
                     <tabset vertical="false">
@@ -126,6 +152,8 @@
 
                     </tabset>
 
+                    <button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>
+
                 </div>
 
                 <div ng-show="settingIsOpen == 'presetColors'">
@@ -147,34 +175,10 @@
 
                     </tabset>
 
-                </div>
-
-                <div ng-show="settingIsOpen == 'previewDevice'">
-
-                    <tabset vertical="false">
-
-                        <tab heading="Preview device">
-
-                            <ul class="preview-device">
-                                <li style=" color:white" ng-click="updatePreviewDevice('desktop')">
-                                    <i class="icon icon-display"></i><span>desktop</span>
-                                </li>
-                                <li style="color:white" ng-click="updatePreviewDevice('tablet')">
-                                    <i class="icon icon-ipad"></i><span>tablet</span>
-                                </li>
-                                <li style="color:white" ng-click="updatePreviewDevice('mobile')">
-                                    <i class="icon icon-iphone"></i><span>mobile</span>
-                                </li>
-                            </ul>
-
-                        </tab>
-
-                    </tabset>
+                    <button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>
 
                 </div>
 
-                <button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>
-
             </div>
 
             <script type="text/ng-template" id="myModalContent.html">
diff --git a/src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less b/src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less
index d2ccf4ace2..e46b7df951 100644
--- a/src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less
+++ b/src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less
@@ -3,56 +3,61 @@ html {
 }
 
 body {
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  text-align: center;
-  background-color: #fafbfd;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    background-color: #fafbfd;
+}
+
+h2 {
+    color: #d9d9d9;
+    text-align: center;
+    font-size: 14px;
 }
 
 .tuning #TuningBg {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 999;
-  width: 275px;
-  height: 100%;
-  padding: 10px 5px 10px 10px;
-  margin-left: -275px;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  line-height: 16px;
-  background: rgba(29, 29, 29, 0.91);
-  -webkit-box-shadow: 0 0 14px rgba(0, 0, 0, 0);
-     -moz-box-shadow: 0 0 14px rgba(0, 0, 0, 0);
-          box-shadow: 0 0 14px rgba(0, 0, 0, 0);
-  -webkit-transition: all 0.2s ease-in-out;
-     -moz-transition: all 0.2s ease-in-out;
-          transition: all 0.2s ease-in-out;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    width: 275px;
+    height: 100%;
+    padding: 10px 0 10px 0;
+    margin-left: -275px;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    line-height: 16px;
+    background: #1D1D1D;
+    -webkit-box-shadow: 0 0 14px rgba(0, 0, 0, 0);
+    -moz-box-shadow: 0 0 14px rgba(0, 0, 0, 0);
+    box-shadow: 0 0 14px rgba(0, 0, 0, 0);
+    -webkit-transition: all 0.2s ease-in-out;
+    -moz-transition: all 0.2s ease-in-out;
+    transition: all 0.2s ease-in-out;
 }
 
 .tuning .tuning-wrapper {
-  height: 100%;
-  padding: 0 5px 0 0;
-  overflow-y: auto;
-  text-align: left;
+    height: 100%;
+    overflow-y: auto;
+    text-align: left;
 }
 
 .tuning #TuningBg.open {
-  margin-left: 0;
-  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
-     -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
-          box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+    margin-left: 0;
+    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
 }
 
 .tuning .colpick {
-  z-index: 99999999;
+    z-index: 99999999;
 }
 
 .tuning .nav {
-  margin-bottom: 10px;
-  color: #ffffff;
-  border-bottom: 1px solid #f57020;
+    margin-bottom: 10px;
+    color: #ffffff;
+    border-bottom: 1px solid #f57020;
 }
 
 .tuning .nav-tabs > li.active > a,
@@ -307,24 +312,24 @@ body {
 }
 
 .tuning .tuning-tools div {
-  display: block;
-  padding: 8px 10px 8px 10px;
-  margin: 5px 0 0 0;
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.4);
-  cursor: pointer;
-  background: rgba(41, 41, 41, 0.84);
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
-     -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
-          box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+    display: block;
+    padding: 8px 8px 8px 9px;
+    margin: 5px 0 0 0;
+    font-size: 16px;
+    color: rgba(255, 255, 255, 0.8);
+    cursor: pointer;
+    background: #353535;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
 }
 
 .tuning .tuning-tools div:hover,
 .tuning .tuning-tools div.selected {
-  color: #ffffff;
-  background: rgba(29, 29, 29, 0.91);
+    color: rgba(255, 255, 255, 0.8);
+    background: #1D1D1D;
 }
 
 .tuningImagePicker {
@@ -473,78 +478,105 @@ body {
 /******* IFRAME *******/
 
 .desktop {
-  width: 100%;
-  height: 100%;
-  margin: 0 auto;
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    overflow: hidden;
 }
 
-.tablet {
-  width: 1040px;
-  height: 757px;
-  margin: 75px auto;
-  background-color: #ffffff;
-  border-radius: 10px;
-  opacity: 1.0;
-  box-shadow: 0 0 0 29px #fff, 0 0 0 30px #dee0e3;
-  transition: all 0.5s ease-in-out;
+.laptop {
+    width: 1024px;
+    height: 740px;
 }
 
-.mobile {
-  width: 350px;
-  height: 568px;
-  margin: 75px auto;
-  background-color: #ffffff;
-  border-radius: 10px;
-  opacity: 1.0;
-  box-shadow: 0 0 0 29px #fff, 0 0 0 30px #dee0e3;
-  transition: all 0.5s ease-in-out;
+.iPad-portrait {
+    width: 769px;
+    height: 929px;
+}
+
+.iPad-landscape {
+    width: 1024px;
+    height: 675px;
+}
+
+.smartphone-portrait {
+    width: 320px;
+    height: 504px;
+}
+
+.smartphone-landscape {
+    width: 480px;
+    height: 256px;
+}
+
+.border {
+    margin: 75px auto;
+    background-color: #ffffff;
+    border-radius: 10px;
+    opacity: 1.0;
+    box-shadow: 0 0 0 29px #fff, 0 0 0 30px #dee0e3;
+    transition: all 0.5s ease-in-out;
 }
 
 iframe {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  overflow-x: hidden;
-  overflow-y: hidden;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+
+.flip:before {
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
 }
 
 /******* preview-device *******/
 
 ul.preview-device {
-  padding: 0;
-  margin: 0;
-  list-style: none;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    border-top: 1px solid #343434;
 }
 
 ul.preview-device li {
-  display: block;
-  margin: 20px 0 0 20px;
-  clear: both;
-  color: rgba(255, 255, 255, 0.8);
-  color: white;
-  cursor: pointer;
+    display: block;
+    overflow: hidden;
+    clear: both;
+    text-align: center;
+    cursor: pointer;
+    border-left: 4px solid transparent;
+    -webkit-transition: all .3s linear;
+    -moz-transition: all .3s linear;
+    transition: all .3s linear;
+}
+
+ul.preview-device li div {
+    border-bottom: 1px solid #343434;
+    padding: 10px;
 }
 
 ul.preview-device li:hover,
 ul.preview-device li.selected {
-  margin: 20px 0 0 20px;
-  color: #ffffff;
+    background-color: rgba(255, 255, 255, 0.09);
+    border-left: 4px #f57020 solid;
 }
 
 ul.preview-device li i {
-  float: left;
-  margin: 20px 0 0 20px;
-  font-size: 40px;
+    color:#d9d9d9;
+    font-size: 80px;
+    line-height: 80px;
 }
 
 ul.preview-device li span {
-  display: inline-block;
-  float: left;
-  margin: 17px 0 0 10px;
+    color:#d9d9d9;
+    display: block;
 }
 
 /******* font-face *******/
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/index.html b/src/Umbraco.Web.UI.Client/src/tuning/index.html
index 4d9f8ea47c..c18be83888 100644
--- a/src/Umbraco.Web.UI.Client/src/tuning/index.html
+++ b/src/Umbraco.Web.UI.Client/src/tuning/index.html
@@ -23,6 +23,10 @@
                     <i ng-if="!isOpen" class="icon icon-right-double-arrow"></i>
                 </div>
 
+                <div ng-if="isOpen" ng-click="settingOpen('previewDevice')" ng-class="{selected:settingIsOpen=='previewDevice'}">
+                    <i class="icon icon-display"></i>
+                </div>
+
                 <div ng-if="isOpen" ng-click="settingOpen('setting')" ng-class="{selected:settingIsOpen=='setting'}">
                     <i class="icon icon-paint-roller"></i>
                 </div>
@@ -31,14 +35,36 @@
                     <i class="icon icon-palette"></i>
                 </div>
 
-                <div ng-if="isOpen" ng-click="settingOpen('previewDevice')" ng-class="{selected:settingIsOpen=='previewDevice'}">
-                    <i class="icon icon-iphone"></i>
-                </div>
-
             </div>
 
             <div class="tuning-wrapper">
 
+                <div ng-show="settingIsOpen == 'previewDevice'">
+
+                    <h2>DEVICES</h2>
+                    <ul class="preview-device">
+                        <li ng-class="{selected:previewDevice=='desktop'}" ng-click="updatePreviewDevice('desktop')">
+                            <div><i class="icon icon-display"></i><span>desktop</span></div>
+                        </li>
+                        <li ng-class="{selected:previewDevice=='laptop border'}" ng-click="updatePreviewDevice('laptop border')">
+                            <div><i class="icon icon-laptop"></i><span>laptop - 1024px</span></div> <!--height: 144px; width: 1024px-->
+                        </li>
+                        <li ng-class="{selected:previewDevice=='iPad-portrait border'}" ng-click="updatePreviewDevice('iPad-portrait border')">
+                            <div><i class="icon icon-ipad"></i><span>iPad portrait - 768px</span></div> <!--width: 768px; height: 929px;-->
+                        </li>
+                        <li ng-class="{selected:previewDevice=='iPad-landscape border'}" ng-click="updatePreviewDevice('iPad-landscape border')">
+                            <div><i class="icon icon-ipad flip"></i><span>iPad landscape - 1024px</span></div> <!--height: 675px; width: 1024px;-->
+                        </li>
+                        <li ng-class="{selected:previewDevice=='smartphone-portrait border'}" ng-click="updatePreviewDevice('smartphone-portrait border')">
+                            <div><i class="icon icon-iphone"></i><span>smartphone portrait - 480px</span></div> <!--width: 320px; height: 504px;-->
+                        </li>
+                        <li ng-class="{selected:previewDevice=='smartphone-landscape border'}" ng-click="updatePreviewDevice('smartphone-landscape border')">
+                            <div><i class="icon icon-iphone flip"></i><span>smartphone landscape  - 320px</span></div> <!--width: 480px; height: 256px;-->
+                        </li>
+                    </ul>
+
+                </div>
+
                 <div ng-show="settingIsOpen == 'setting'">
 
                     <tabset vertical="false">
@@ -126,6 +152,8 @@
 
                     </tabset>
 
+                    <button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>
+
                 </div>
 
                 <div ng-show="settingIsOpen == 'presetColors'">
@@ -147,34 +175,10 @@
 
                     </tabset>
 
-                </div>
-
-                <div ng-show="settingIsOpen == 'previewDevice'">
-
-                    <tabset vertical="false">
-
-                        <tab heading="Preview device">
-
-                            <ul class="preview-device">
-                                <li style=" color:white" ng-click="updatePreviewDevice('desktop')">
-                                    <i class="icon icon-display"></i><span>desktop</span>
-                                </li>
-                                <li style="color:white" ng-click="updatePreviewDevice('tablet')">
-                                    <i class="icon icon-ipad"></i><span>tablet</span>
-                                </li>
-                                <li style="color:white" ng-click="updatePreviewDevice('mobile')">
-                                    <i class="icon icon-iphone"></i><span>mobile</span>
-                                </li>
-                            </ul>
-
-                        </tab>
-
-                    </tabset>
+                    <button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>
 
                 </div>
 
-                <button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>
-
             </div>
 
             <script type="text/ng-template" id="myModalContent.html">
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js b/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js
index d0b4aa6976..3be4de50a7 100644
--- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js
@@ -12,8 +12,7 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
     $scope.isOpen = false;
     $scope.frameLoaded = false;
     $scope.schemaFocus = "body";
-    $scope.settingIsOpen = 'setting';
-    $scope.previewDevice = 'desktop';
+    $scope.settingIsOpen = 'previewDevice';
     $scope.BackgroundPositions = ['center', 'left', 'right', 'bottom center', 'bottom left', 'bottom right', 'top center', 'top left', 'top right'];
     $scope.BackgroundRepeats = ['no-repeat', 'repeat', 'repeat-x', 'repeat-y'];
     $scope.BackgroundAttachments = ['scroll', 'fixed'];
@@ -22,6 +21,15 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
     $scope.optionHomes = ['icon', 'text', 'none'];
     $scope.googleFontFamilies = {};
     $scope.pageId = "../dialogs/Preview.aspx?id=" + $location.search().id;
+    $scope.devices = [
+        { name: "desktop", css: "desktop", icon: "icon-display" },
+        { name: "laptop - 1024px", css: "laptop border", icon: "icon-laptop" },
+        { name: "iPad portrait - 768px", css: "iPad-portrait border", icon: "icon-ipad" },
+        { name: "iPad landscape - 1024px", css: "iPad-landscape border", icon: "icon-ipad flip" },
+        { name: "smartphone portrait - 480px", css: "smartphone-portrait border", icon: "icon-iphone" },
+        { name: "smartphone landscape  - 320px", css: "smartphone-landscape border", icon: "icon-iphone flip" }
+    ];
+    $scope.previewDevice = $scope.devices[0];
 
     // Load parameters from GetLessParameters and init data of the tuning config
     var initTuning = function () {
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js b/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js
index 09af55f0f7..ec0b2658aa 100644
--- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js
+++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js
@@ -73,6 +73,8 @@ var initIntelTuning = function (tuningModel) {
 }
 
 var initTuningPanel = function () {
+
+    // Disable tuning.style.css
     var styleSheets = document.styleSheets;
     var href = 'tuning.style.css';
     for (var i = 0; i < styleSheets.length; i++) {
@@ -81,6 +83,8 @@ var initTuningPanel = function () {
             break;
         }
     }
+
+    // Init panel 
     parent.setFrameIsLoaded();
 }
 
diff --git a/src/Umbraco.Web.UI/Umbraco/js/tuning.front.js b/src/Umbraco.Web.UI/Umbraco/js/tuning.front.js
index afadf79ee5..ec0b2658aa 100644
--- a/src/Umbraco.Web.UI/Umbraco/js/tuning.front.js
+++ b/src/Umbraco.Web.UI/Umbraco/js/tuning.front.js
@@ -73,16 +73,18 @@ var initIntelTuning = function (tuningModel) {
 }
 
 var initTuningPanel = function () {
+
+    // Disable tuning.style.css
     var styleSheets = document.styleSheets;
     var href = 'tuning.style.css';
-    console.info("disable css style");
     for (var i = 0; i < styleSheets.length; i++) {
         if (styleSheets[i].href.indexOf(href) > -1) {
             styleSheets[i].disabled = true;
-            console.info("disable css style");
             break;
         }
     }
+
+    // Init panel 
     parent.setFrameIsLoaded();
 }
 
diff --git a/src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js b/src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js
index e4e1277483..0bc968aca4 100644
--- a/src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js
+++ b/src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js
@@ -60,8 +60,7 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
     $scope.isOpen = false;
     $scope.frameLoaded = false;
     $scope.schemaFocus = "body";
-    $scope.settingIsOpen = 'setting';
-    $scope.previewDevice = 'desktop';
+    $scope.settingIsOpen = 'previewDevice';
     $scope.BackgroundPositions = ['center', 'left', 'right', 'bottom center', 'bottom left', 'bottom right', 'top center', 'top left', 'top right'];
     $scope.BackgroundRepeats = ['no-repeat', 'repeat', 'repeat-x', 'repeat-y'];
     $scope.BackgroundAttachments = ['scroll', 'fixed'];
@@ -70,6 +69,15 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
     $scope.optionHomes = ['icon', 'text', 'none'];
     $scope.googleFontFamilies = {};
     $scope.pageId = "../dialogs/Preview.aspx?id=" + $location.search().id;
+    $scope.devices = [
+        { name: "desktop", css: "desktop", icon: "icon-display" },
+        { name: "laptop - 1024px", css: "laptop border", icon: "icon-laptop" },
+        { name: "iPad portrait - 768px", css: "iPad-portrait border", icon: "icon-ipad" },
+        { name: "iPad landscape - 1024px", css: "iPad-landscape border", icon: "icon-ipad flip" },
+        { name: "smartphone portrait - 480px", css: "smartphone-portrait border", icon: "icon-iphone" },
+        { name: "smartphone landscape  - 320px", css: "smartphone-landscape border", icon: "icon-iphone flip" }
+    ];
+    $scope.previewDevice = $scope.devices[0];
 
     // Load parameters from GetLessParameters and init data of the tuning config
     var initTuning = function () {
diff --git a/src/Umbraco.Web.UI/Umbraco/preview/index.html b/src/Umbraco.Web.UI/Umbraco/preview/index.html
index 4652e05571..3743c40c28 100644
--- a/src/Umbraco.Web.UI/Umbraco/preview/index.html
+++ b/src/Umbraco.Web.UI/Umbraco/preview/index.html
@@ -23,6 +23,10 @@
                     <i ng-if="!isOpen" class="icon icon-right-double-arrow"></i>
                 </div>
 
+                <div ng-if="isOpen" ng-click="settingOpen('previewDevice')" ng-class="{selected:settingIsOpen=='previewDevice'}">
+                    <i class="icon icon-display"></i>
+                </div>
+
                 <div ng-if="isOpen" ng-click="settingOpen('setting')" ng-class="{selected:settingIsOpen=='setting'}">
                     <i class="icon icon-paint-roller"></i>
                 </div>
@@ -31,14 +35,21 @@
                     <i class="icon icon-palette"></i>
                 </div>
 
-                <div ng-if="isOpen" ng-click="settingOpen('previewDevice')" ng-class="{selected:settingIsOpen=='previewDevice'}">
-                    <i class="icon icon-iphone"></i>
-                </div>
-
             </div>
 
             <div class="tuning-wrapper">
 
+                <div ng-show="settingIsOpen == 'previewDevice'">
+
+                    <h2>DEVICES</h2>
+                    <ul class="preview-device">
+                        <li ng-repeat="device in devices" ng-class=" { selected:previewDevice==device }" ng-click="updatePreviewDevice(device)">
+                            <div><i class="icon {{device.icon}}"></i><span>{{device.name}}</span></div>
+                        </li>
+                    </ul>
+
+                </div>
+
                 <div ng-show="settingIsOpen == 'setting'">
 
                     <tabset vertical="false">
@@ -126,6 +137,8 @@
 
                     </tabset>
 
+                    <button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>
+
                 </div>
 
                 <div ng-show="settingIsOpen == 'presetColors'">
@@ -147,34 +160,10 @@
 
                     </tabset>
 
-                </div>
-
-                <div ng-show="settingIsOpen == 'previewDevice'">
-
-                    <tabset vertical="false">
-
-                        <tab heading="Preview device">
-
-                            <ul class="preview-device">
-                                <li style=" color:white" ng-click="updatePreviewDevice('desktop')">
-                                    <i class="icon icon-display"></i><span>desktop</span>
-                                </li>
-                                <li style="color:white" ng-click="updatePreviewDevice('tablet')">
-                                    <i class="icon icon-ipad"></i><span>tablet</span>
-                                </li>
-                                <li style="color:white" ng-click="updatePreviewDevice('mobile')">
-                                    <i class="icon icon-iphone"></i><span>mobile</span>
-                                </li>
-                            </ul>
-
-                        </tab>
-
-                    </tabset>
+                    <button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>
 
                 </div>
 
-                <button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>
-
             </div>
 
             <script type="text/ng-template" id="myModalContent.html">
@@ -219,7 +208,7 @@
 
     </div>
 
-    <div id="demo-iframe-wrapper" class="{{previewDevice}}">
+    <div id="demo-iframe-wrapper" class="{{previewDevice.css}}">
         <iframe id="resultFrame" ng-src="{{pageId}}" frameborder="0"></iframe>
     </div>