Merge lp:~hatch/juju-gui/1125424-loading-visuals into lp:juju-gui/experimental

[Jeff Pihach]

Fixed layout issues as per design

https://codereview.appspot.com/7452043/

[Jeff Pihach (hatch)]

Reviewers: mp+151081_code.launchpad.net,

Message:
Please take a look.

Description:
Fixed layout issues as per design

https://code.launchpad.net/~hatch/juju-gui/1125424-loading-visuals/+merge/151081

(do not edit description out of merge proposal)

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

Affected files:
   A [revision details]
   M app/index.html
   M app/templates/login.handlebars
   M lib/views/stylesheet.less

Index: [revision details]
=== added file '[revision details]'
--- [revision details] 2012-01-01 00:00:00 +0000
+++ [revision details] 2012-01-01 00:00:00 +0000
@@ -0,0 +1,2 @@
+Old revision: <email address hidden>
+New revision: <email address hidden>

Index: app/index.html
=== modified file 'app/index.html'
--- app/index.html 2013-02-21 19:02:43 +0000
+++ app/index.html 2013-02-28 19:27:47 +0000
@@ -43,7 +43,7 @@
              <div class="header">
                <div class="error">
                  <span><i class="sprite alert_icon2"></i>
- Your browser is not fully supported</span>
+ <h4>Your browser is not fully supported</h4></span>
                </div>
              </div>
              <p>

Index: app/templates/login.handlebars
=== modified file 'app/templates/login.handlebars'
--- app/templates/login.handlebars 2013-02-18 17:02:09 +0000
+++ app/templates/login.handlebars 2013-02-28 19:27:47 +0000
@@ -1,4 +1,4 @@
-<div class="centered-column">
+<div class="centered-column in-main">
    <i class="sprite juju_logo" title="Juju GUI"></i>
    <div id="login-form" class="panel">
      <div class="header">

Index: lib/views/stylesheet.less
=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less 2013-02-27 14:49:14 +0000
+++ lib/views/stylesheet.less 2013-02-28 19:27:47 +0000
@@ -224,7 +224,7 @@
              &.control {
                  display: none;
              }
-
+
              .landscape-icon {
                  margin: 10px 0 0 16px;
              }
@@ -1514,6 +1514,12 @@
      width: 420px;
      margin-left: -210px;

+ /* This enables us to use the .centered-column
+ class inside of the main application */
+ &.in-main {
+ top: 0;
+ }
+
      div {
          width: 280px;
          text-align: left;
@@ -1596,4 +1602,33 @@
      #loading-spinner {
          height: 100px;
      }
+
+ #loading-message-text {
+ font-family: Ubuntu Medium, Helvetica, Arial;
+ font-size: 10pt;
+ }
+
+ #login-form {
+ .header {
+ font-size: 10pt;
+ font-family: Ubuntu Medium, Helvetica, Arial;
+ }
+ }
+
+ .header .error span {
+ color: #DD4814;
+ i {
+ margin-right: 5px;
+ float: left;
+ }
+ h4 {
+ font-family: Ubuntu Medium, Helvetica, Arial;
+ font-size: 10pt;
+ line-height: 10pt;
+ }
+ }
+
+ p {
+ font-size: 8pt;
+ }
  }

[Nicholas Boettcher (notrebene)]

LGTM. Sign off from Design

https://codereview.appspot.com/7452043/

[Gary Poster (gary)]

LGTM. Thank you!

Gary

https://codereview.appspot.com/7452043/

[Madison Scott-Clary (makyo)]

LGTM - a super-minor and a note.

https://codereview.appspot.com/7452043/diff/1/lib/views/stylesheet.less
File lib/views/stylesheet.less (right):

https://codereview.appspot.com/7452043/diff/1/lib/views/stylesheet.less#newcode1607
lib/views/stylesheet.less:1607: font-family: Ubuntu Medium, Helvetica,
Arial;
Perhaps a task for later, but we might want an @ubuntu-font at some
point.

https://codereview.appspot.com/7452043/diff/1/lib/views/stylesheet.less#newcode1631
lib/views/stylesheet.less:1631: p {
Something wonky with indenting here.

https://codereview.appspot.com/7452043/

[Jeff Pihach (hatch)]

Thanks for the reviews! Reply's below.

https://codereview.appspot.com/7452043/diff/1/lib/views/stylesheet.less
File lib/views/stylesheet.less (right):

https://codereview.appspot.com/7452043/diff/1/lib/views/stylesheet.less#newcode1607
lib/views/stylesheet.less:1607: font-family: Ubuntu Medium, Helvetica,
Arial;
On 2013/02/28 23:12:43, matthew.scott wrote:
> Perhaps a task for later, but we might want an @ubuntu-font at some
point.
Yeah would be nice if it was a local asset

https://codereview.appspot.com/7452043/diff/1/lib/views/stylesheet.less#newcode1631
lib/views/stylesheet.less:1631: p {
On 2013/02/28 23:12:43, matthew.scott wrote:
> Something wonky with indenting here.
Hmm that there is - I'll fix up

https://codereview.appspot.com/7452043/

[Jeff Pihach (hatch)]

*** Submitted:

Fixed layout issues as per design

R=goodspud, gary.poster, matthew.scott
CC=
https://codereview.appspot.com/7452043

https://codereview.appspot.com/7452043/

=== modified file 'app/index.html'
--- app/index.html	2013-02-21 19:02:43 +0000
+++ app/index.html	2013-02-28 19:30:28 +0000
@@ -43,7 +43,7 @@
             <div class="header">
               <div class="error">
                 <span><i class="sprite alert_icon2"></i>
-                Your browser is not fully supported</span>
+                <h4>Your browser is not fully supported</h4></span>
               </div>
             </div>
             <p>

=== modified file 'app/templates/login.handlebars'
--- app/templates/login.handlebars	2013-02-18 17:02:09 +0000
+++ app/templates/login.handlebars	2013-02-28 19:30:28 +0000
@@ -1,4 +1,4 @@
-<div class="centered-column">
+<div class="centered-column in-main">
   <i class="sprite juju_logo" title="Juju GUI"></i>
   <div id="login-form" class="panel">
     <div class="header">

=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less	2013-02-27 14:49:14 +0000
+++ lib/views/stylesheet.less	2013-02-28 19:30:28 +0000
@@ -224,7 +224,7 @@
             &.control {
                 display: none;
             }
-            
+
             .landscape-icon {
                 margin: 10px 0 0 16px;
             }
@@ -1514,6 +1514,12 @@
     width: 420px;
     margin-left: -210px;
 
+    /* This enables us to use the .centered-column
+    class inside of the main application */
+    &.in-main {
+        top: 0;
+    }
+
     div {
         width: 280px;
         text-align: left;
@@ -1596,4 +1602,33 @@
     #loading-spinner {
         height: 100px;
     }
+
+    #loading-message-text {
+        font-family: Ubuntu Medium, Helvetica, Arial;
+        font-size: 10pt;
+    }
+
+    #login-form {
+        .header {
+            font-size: 10pt;
+            font-family: Ubuntu Medium, Helvetica, Arial;
+        }
+    }
+
+    .header .error span {
+        color: #DD4814;
+        i {
+            margin-right: 5px;
+            float: left;
+        }
+        h4 {
+            font-family: Ubuntu Medium, Helvetica, Arial;
+            font-size: 10pt;
+            line-height: 10pt;
+        }
+    }
+
+   p {
+            font-size: 8pt;
+    }
 }