Mobile preview (initial styling)

bzr revid: ddm@openerp.com-20130822104736-5gt43278o83fvt9s

3 files changed, 50 insertions, 17 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 1ea42e3e445..e8e69a3a9ca 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -152,17 +152,24 @@
 }
 
 #mobile-preview.modal {
-  height: 617px;
+  height: 660px;
+  background-color: black;
+  border: 2px solid;
+  border-radius: 10px;
   margin: auto;
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
-  max-width: 325px;
-  width: 325px;
+  max-width: 330px;
 }
 
+#mobile-preview .modal-header {
+  border-bottom: 0;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
 #mobile-preview .modal-body {
   max-height: 600px;
   padding: 0;
@@ -172,4 +179,14 @@
 .oe_mobile_viewport {
   width: 320px;
   height: 568px;
+  padding: 5px;
+  border: none;
+}
+
+.oe_mobile_preview_header .close {
+  color: lightgrey;
+  opacity: 1;
+}
+.oe_mobile_preview_header .close:hover {
+  color: darkgrey;
 }
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 4b3a8e98a91..f324cabc348 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -71,7 +71,7 @@
     border-radius: 3px
     margin: 10px
     margin-right: 0px
-    cursor: move 
+    cursor: move
     position: relative
     box-shadow: 0px 3px 10px rgba(0,0,0,0.2)
     overflow: hidden
@@ -97,7 +97,7 @@
         -webkit-transform-origin-x: 5px
         -webkit-transform-origin-y: 10px
         -webkit-transform: scale(0.095)
-               
+
 
 .oe_drop_zone
     display: block
@@ -133,21 +133,37 @@
     overflow: hidden
 
 #mobile-preview.modal
-    height: 617px
+    height: 660px
+    background-color: black
+    border: 2px solid
+    border-radius: 10px
     margin: auto
     position: absolute
     top: 0
     left: 0
     bottom: 0
     right: 0
-    max-width: 325px
-    width: 325px
-
-#mobile-preview .modal-body
-    max-height: 600px
-    padding: 0
-    margin: 0
+    max-width: 330px
+
+#mobile-preview
+    .modal-header
+        border-bottom: 0
+        border-top-left-radius: 10px
+        border-top-right-radius: 10px
+    .modal-body
+        max-height: 600px
+        padding: 0
+        margin: 0
 
 .oe_mobile_viewport
     width: 320px
-    height: 568px
\ No newline at end of file
+    height: 568px
+    padding: 5px
+    border: none
+
+.oe_mobile_preview_header
+    .close
+        color: lightgrey
+        opacity: 1
+    .close:hover
+        color: darkgrey
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index 953f0153e3f..7356cfc85f6 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -38,10 +38,10 @@
         </div>
     </div>
 
-    <div id="mobile-preview" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="mobilePreview" aria-hidden="true">
-        <div class="modal-header">
+    <div id="mobile-preview" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="mobile-preview-title" aria-hidden="true">
+        <div class="modal-header oe_mobile_preview_header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-            <h3 id="mobilePreview">Mobile preview</h3>
+            <h3 id="mobile-preview-title">Preview</h3>
         </div>
         <div class="modal-body">
             <div class="oe_mobile_preview">