Merge lp:~jcsackett/juju-gui/browser-home-page into lp:juju-gui/experimental

[j.c.sackett]

Fixes fullscreen

Styles fullscreen charm browser and fixes full screen expansion.
(landing for Huw)

https://codereview.appspot.com/8911043/

[j.c.sackett (jcsackett)]

Reviewers: mp+160131_code.launchpad.net,

Message:
Please take a look.

Description:
Fixes fullscreen

Styles fullscreen charm browser and fixes full screen expansion.

https://code.launchpad.net/~jcsackett/juju-gui/browser-home-page/+merge/160131

(do not edit description out of merge proposal)

Please review this at https://codereview.appspot.com/8911043/

Affected files:
   A [revision details]
   M app/subapps/browser/browser.js
   M app/subapps/browser/templates/browser_charm.handlebars
   M app/subapps/browser/templates/editorial.handlebars
   M app/subapps/browser/templates/sidebar.handlebars
   M app/templates/charm-container.handlebars
   M app/templates/charm-token.handlebars
   M app/widgets/charm-token.js
   M lib/views/browser/charm-container.less
   M lib/views/browser/charm-full.less
   M lib/views/browser/charm-token.less
   A lib/views/browser/content-sidebar.less
   A lib/views/browser/editorial.less
   M lib/views/browser/main.less
   M lib/views/stylesheet.less

[Curtis Hovey (sinzui)]

LGTM, thanks!

https://codereview.appspot.com/8911043/

[j.c.sackett (jcsackett)]

Ushering this through for Huw.

LGTM, qa's locally.

https://codereview.appspot.com/8911043/

[j.c.sackett (jcsackett)]

*** Submitted:

Fixes fullscreen

Styles fullscreen charm browser and fixes full screen expansion.
(landing for Huw)

R=curtis
CC=
https://codereview.appspot.com/8911043

https://codereview.appspot.com/8911043/

=== modified file 'app/subapps/browser/browser.js'
--- app/subapps/browser/browser.js	2013-04-19 17:58:14 +0000
+++ app/subapps/browser/browser.js	2013-04-22 14:51:35 +0000
@@ -28,17 +28,13 @@
 
      */
     _detailsVisible: function(visible) {
-      var detailsNode = Y.one('.bws-view-data'),
-          browserNode = Y.one('#subapp-browser'),
-          detailsClass = 'details-panel';
+      var detailsNode = Y.one('.bws-view-data');
       if (detailsNode) {
         if (visible) {
           detailsNode.show();
-          browserNode.addClass(detailsClass);
         }
         else {
           detailsNode.hide();
-          browserNode.removeClass(detailsClass);
         }
       }
     },

=== modified file 'app/subapps/browser/templates/browser_charm.handlebars'
--- app/subapps/browser/templates/browser_charm.handlebars	2013-04-19 12:46:02 +0000
+++ app/subapps/browser/templates/browser_charm.handlebars	2013-04-22 14:51:35 +0000
@@ -228,7 +228,7 @@
         </div>
     </div>
     {{#if isFullscreen}}
-        <div class="sidebar yui3-u-1-6">
+        <div class="content-sidebar yui3-u-1-6">
             <h2>Useful links</h2>
             <ul class="vertical-links">
                 <li><a href="">Juju community</a></li>

=== modified file 'app/subapps/browser/templates/editorial.handlebars'
--- app/subapps/browser/templates/editorial.handlebars	2013-04-15 17:48:25 +0000
+++ app/subapps/browser/templates/editorial.handlebars	2013-04-22 14:51:35 +0000
@@ -1,9 +1,21 @@
-<div id="bws_editorial">
+<div id="bws-editorial" {{#if isFullscreen}}class="yui3-g"{{/if}}>
     {{#if isFullscreen}}
-        <p>Some static content</p>
+        <div class="content yui3-u-5-6">
     {{/if}}
 
     <div class="featured"></div>
     <div class="popular"></div>
     <div class="new"></div>
+
+    {{#if isFullscreen}}
+        </div>
+        <div class="content-sidebar yui3-u-1-6">
+            <h2>Useful links</h2>
+            <ul class="vertical-links">
+                <li><a href="">Juju community</a></li>
+                <li><a href="">Online resources</a></li>
+                <li><a href="">Write your own Charm</a></li>
+            </ul>
+        </div>
+    {{/if}}
 </div>

=== modified file 'app/subapps/browser/templates/sidebar.handlebars'
--- app/subapps/browser/templates/sidebar.handlebars	2013-04-19 05:36:32 +0000
+++ app/subapps/browser/templates/sidebar.handlebars	2013-04-22 14:51:35 +0000
@@ -1,11 +1,11 @@
-<div class="charmbrowser sidebar yui3-g">
-    <div id="bws-sidebar" class="yui3-u">
+<div class="charmbrowser">
+    <div id="bws-sidebar">
         <div class="bws-header">
         </div>
         <div class="bws-content">
         </div>
     </div>
-    <div class="bws-view-data yui3-u">
+    <div class="bws-view-data">
         <div></div>
     </div>
 </div>

=== modified file 'app/templates/charm-container.handlebars'
--- app/templates/charm-container.handlebars	2013-04-10 18:10:06 +0000
+++ app/templates/charm-container.handlebars	2013-04-22 14:51:35 +0000
@@ -17,6 +17,6 @@
       </a>
     {{/if}}
   </h3>
-  <div class="charms">
+  <div class="charms yui3-g">
   </div>
 </div>

=== modified file 'app/templates/charm-token.handlebars'
--- app/templates/charm-token.handlebars	2013-04-19 17:09:07 +0000
+++ app/templates/charm-token.handlebars	2013-04-22 14:51:35 +0000
@@ -8,7 +8,7 @@
             <div class="charm-icon"></div>
         {{/if}}
     </span>
-    <span class="yui3-u-3-4">
+    <span class="yui3-u-5-7">
         <span class="title">
             {{ name }}
         </span>

=== modified file 'app/widgets/charm-token.js'
--- app/widgets/charm-token.js	2013-04-17 13:15:59 +0000
+++ app/widgets/charm-token.js	2013-04-22 14:51:35 +0000
@@ -26,7 +26,9 @@
      */
     renderUI: function() {
       var content = this.TEMPLATE(this.getAttrs());
-      this.get('contentBox').setHTML(content);
+      var container = this.get('contentBox');
+      container.setHTML(content);
+      container.ancestor('.yui3-charmtoken').addClass('yui3-u');
     }
 
   }, {

=== modified file 'lib/views/browser/charm-container.less'
--- lib/views/browser/charm-container.less	2013-04-10 03:40:35 +0000
+++ lib/views/browser/charm-container.less	2013-04-22 14:51:35 +0000
@@ -1,15 +1,9 @@
 .yui3-charmcontainer {
-    clear: left;
-
     .section-title {
         padding-left: 20px;
         padding-right: 20px;
     }
     .charms {
         padding: 10px 0;
-
-        .yui3-charmtoken { 
-            float: left;
-        }
     }
 }

=== modified file 'lib/views/browser/charm-full.less'
--- lib/views/browser/charm-full.less	2013-04-19 06:29:32 +0000
+++ lib/views/browser/charm-full.less	2013-04-22 14:51:35 +0000
@@ -11,12 +11,12 @@
     h4 {
         .heading-font;
     }
-    .content,
-    .sidebar {
+    p {
+        width: 66.666%;
+    }
+    .content {
         .border-box;
         display: table-cell;
-    }
-    .content {
         padding: 0 20px 25px 20px;
     }
     .nav {
@@ -262,26 +262,9 @@
             }
         }
     }
-    .sidebar {
-        padding-left: 20px;
-        background-color: #eeeeee;
-
-        h2 {
-            .heading-font;
-            margin-bottom: 16px;
-            padding: 14px 0 4px 0;
-            border-bottom: 1px solid @bws-border;
-            color: @bws-heading;
-            font-family: @font-family;
-            font-size: 14pt;
-        }
-        .vertical-links li {
-            padding-bottom: 5px;
-        }
-    }
 }
-.sidebar .charm {
+#bws-fullscreen .charm {
     p {
-        width: 66.666%;
+        width: 100%;
     }
 }

=== modified file 'lib/views/browser/charm-token.less'
--- lib/views/browser/charm-token.less	2013-04-19 06:29:32 +0000
+++ lib/views/browser/charm-token.less	2013-04-22 14:51:35 +0000
@@ -1,4 +1,5 @@
 .yui3-charmtoken {
+    .border-box;
     padding: 10px 20px;
 
     .charm-token {

=== added file 'lib/views/browser/content-sidebar.less'
--- lib/views/browser/content-sidebar.less	1970-01-01 00:00:00 +0000
+++ lib/views/browser/content-sidebar.less	2013-04-22 14:51:35 +0000
@@ -0,0 +1,19 @@
+#subapp-browser .content-sidebar {
+    .border-box;
+    display: table-cell;
+    padding-left: 20px;
+    background-color: #eeeeee;
+
+    h2 {
+        .heading-font;
+        margin-bottom: 16px;
+        padding: 14px 0 4px 0;
+        border-bottom: 1px solid @bws-border;
+        color: @bws-heading;
+        font-family: @font-family;
+        font-size: 14pt;
+    }
+    .vertical-links li {
+        padding-bottom: 5px;
+    }
+}

=== added file 'lib/views/browser/editorial.less'
--- lib/views/browser/editorial.less	1970-01-01 00:00:00 +0000
+++ lib/views/browser/editorial.less	2013-04-22 14:51:35 +0000
@@ -0,0 +1,14 @@
+#bws-editorial {
+    display: table;
+    width: 100%;
+
+    .content {
+        .border-box;
+        display: table-cell;
+
+        .yui3-charmtoken {
+            width: 33.33333%;
+            min-width: 320px;
+        }
+    }
+}

=== modified file 'lib/views/browser/main.less'
--- lib/views/browser/main.less	2013-04-19 05:36:32 +0000
+++ lib/views/browser/main.less	2013-04-22 14:51:35 +0000
@@ -4,6 +4,7 @@
 @bws-text: #808080;
 @bws-border: #dddddd;
 @bws-sidebar-width: 350px;
+@bws-header-height: 60px;
 
 /* Mixins */
 .three-image-button-background(@left-image, @right-image, @centre-image) {
@@ -35,24 +36,8 @@
 
 #subapp-browser {
   display: none;
-  bottom: 50px;
   color: @bws-text;
   font-size: 9pt;
-  left: 0;
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  width: @bws-sidebar-width;
-  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
-
-  &.details-panel {
-    width: 100%;
-    box-shadow: none;
-
-    .charmbrowser.sidebar #bws-sidebar {
-        width: @bws-sidebar-width;
-    }
-  }
 
   a {
     color: @charm-panel-orange;
@@ -86,14 +71,11 @@
     text-align: left;
     width: 90%;
   }
-  .bws-view-data {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
+  .section-title a {
+    color: @bws-heading;
+  }
+  .charm-token {
+    color: @bws-text;
   }
   .bws-header {
     position: relative;
@@ -141,49 +123,58 @@
       }
     }
   }
-  #bws-fullscreen {
-    .bws-view-data {
-      top: 60px;
-      right: 0;
-      background-color: #f5f5f5;
-    }
-  }
-  .charmbrowser.sidebar {
-    #bws-sidebar,
-    .bws-view-data {
-      background-color: #f5f5f5;
-    }
-    .bws-view-data {
-      left: @bws-sidebar-width;
-    }
-    #bws-sidebar {
-      z-index: 1;
-      position: absolute;
-      top: 0;
+  #bws-sidebar .bws-content,
+  .bws-view-data,
+  #bws-sidebar,
+  #bws-fullscreen {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  .bws-view-data,
+  #bws-sidebar,
+  #bws-fullscreen {
+    bottom: 50px;
+    background-color: #f5f5f5;
+  }
+  .bws-view-data,
+  #bws-sidebar .bws-content {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  #bws-fullscreen {
+    .bws-view-data {
+      top: @bws-header-height;
       bottom: 0;
       left: 0;
-      overflow: auto;
-      width: 100%;
-      box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
-
-      .bws-searchbox {
-        float: none;
-        margin: 10px 0 0 0;
-
-        input {
-          width: 100%;
-        }
-      }
-      .section-title a {
-        color: @bws-heading;
-      }
+    }
+  }
+  #bws-sidebar {
+    z-index: 1;
+    right: auto;
+    width: @bws-sidebar-width;
+    overflow: hidden;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+
+    .bws-searchbox {
+      float: none;
+      margin: 10px 0 0 0;
+
+      input {
+        width: 100%;
+      }
+    }
+    .bws-content {
+      top: 110px;
+
       .yui3-charmtoken {
-        float: none;
-
-        .charm-token {
-          color: @bws-text;
-        }
+        width: 100%;
       }
     }
   }
+  .bws-view-data {
+    left: @bws-sidebar-width;
+  }
 }

=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less	2013-04-19 20:11:17 +0000
+++ lib/views/stylesheet.less	2013-04-22 14:51:35 +0000
@@ -1653,6 +1653,8 @@
 @import "browser/charm-container.less";
 @import "browser/charm-full.less";
 @import "browser/charm-token.less";
+@import "browser/content-sidebar.less";
+@import "browser/editorial.less";
 @import "browser/overlay-indicator.less";
 @import "browser/section-title.less";
 @import "browser/tabview.less";