juju-gui

Merge lp:~huwshimi/juju-gui/make-grid-responsive into lp:juju-gui/experimental

  1. make-grid-responsive
  2. Merge into trunk
Proposed by Huw Wilkins
Status: Merged
Merged at revision: 462
Proposed branch: lp:~huwshimi/juju-gui/make-grid-responsive
Merge into: lp:juju-gui/experimental
Diff against target: 257 lines (+49/-43)
9 files modified
app/assets/stylesheets/cssgrids-responsive-min.css (+3/-0)
app/templates/charm-collection.handlebars (+2/-2)
app/templates/charm.handlebars (+5/-5)
app/templates/service-header.partial (+17/-17)
app/templates/show_units_large.handlebars (+2/-2)
app/templates/show_units_medium.handlebars (+2/-2)
app/templates/unit.handlebars (+7/-7)
bin/merge-files (+1/-0)
lib/views/stylesheet.less (+10/-8)
To merge this branch: bzr merge lp:~huwshimi/juju-gui/make-grid-responsive
Reviewer Review Type Date Requested Status
Juju GUI Hackers Pending
Review via email: mp+155652@code.launchpad.net

Description of the change

Made some parts of the ui responsive.

Applied the YUI reponsive grids to make some content and menus responsive. Fixed breakages that occured as a result. There is a lot left to be made responsive, but that will be changed as the new design is applied.

To post a comment you must log in.
Revision history for this message
Huw Wilkins (huwshimi) wrote :
Download full text (21.5 KiB)

Reviewers: mp+155652_code.launchpad.net,

Message:
Please take a look.

Description:
Made some parts of the ui responsive.

Applied the YUI reponsive grids to make some content and menus
responsive. Fixed breakages that occured as a result. There is a lot
left to be made responsive, but that will be changed as the new design
is applied.

https://code.launchpad.net/~huwshimi/juju-gui/make-grid-responsive/+merge/155652

(do not edit description out of merge proposal)

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

Affected files:
   A [revision details]
   M app/assets/images/tab_div.png
   A app/assets/stylesheets/cssgrids-responsive-min.css
   M app/templates/charm-collection.handlebars
   M app/templates/charm.handlebars
   M app/templates/service-header.partial
   M app/templates/show_units_large.handlebars
   M app/templates/show_units_medium.handlebars
   M app/templates/unit.handlebars
   M bin/merge-files
   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/templates/charm-collection.handlebars
=== modified file 'app/templates/charm-collection.handlebars'
--- app/templates/charm-collection.handlebars 2012-09-28 12:30:07 +0000
+++ app/templates/charm-collection.handlebars 2013-03-18 05:40:10 +0000
@@ -2,7 +2,7 @@
          <h1>Charm Collection</h1>
            <form class="well form-inline" id="charm-search-form">
              <label>Charm Name
- <input id="charm-search" name="query" type="text"
class="search-query span2"
+ <input id="charm-search" name="query" type="text"
class="search-query yui3-u-1-6"
                       placeholder="Search"/>
              </label>
              <button type="submit" class="btn">Search</button>
@@ -11,7 +11,7 @@
              <div class="charm">
                <ul class="thumbnails">
                  {{#charms}}
- <li class="span3">
+ <li class="yui3-u-1-4">
                    <div class="thumbnail" data-charm-url="{{data_url}}">
                      <h5>~{{owner}}/{{series}}/{{name}} <i
class="icon-user"></i></h5>
                      <span>{{summary}}</span>

Index: app/templates/charm.handlebars
=== modified file 'app/templates/charm.handlebars'
--- app/templates/charm.handlebars 2012-09-28 13:08:35 +0000
+++ app/templates/charm.handlebars 2013-03-27 03:14:50 +0000
@@ -1,6 +1,6 @@
  <h1> Charm </h1>
-<div class="row">
- <div class="span8">
+<div class="yui3-g-r">
+ <div class="yui3-u-5-9">
      <form class="form-horizontal">
        <fieldset>
          <div class="control-group">
@@ -33,7 +33,7 @@
        </fieldset>
      </form>
    </div>
- <div class="span3">
+ <div class="yui3-u-1-6 yui3-offset-1-18">
      <b>Provides</b>
      <ul>
      {{#iflat charm.provides}}
@@ -49,8 +49,8 @@
      </u...

Revision history for this message
Huw Wilkins (huwshimi) wrote :
Download full text (21.5 KiB)

Reviewers: mp+155652_code.launchpad.net,

Message:
Please take a look.

Description:
Made some parts of the ui responsive.

Applied the YUI reponsive grids to make some content and menus
responsive. Fixed breakages that occured as a result. There is a lot
left to be made responsive, but that will be changed as the new design
is applied.

https://code.launchpad.net/~huwshimi/juju-gui/make-grid-responsive/+merge/155652

(do not edit description out of merge proposal)

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

Affected files:
   A [revision details]
   M app/assets/images/tab_div.png
   A app/assets/stylesheets/cssgrids-responsive-min.css
   M app/templates/charm-collection.handlebars
   M app/templates/charm.handlebars
   M app/templates/service-header.partial
   M app/templates/show_units_large.handlebars
   M app/templates/show_units_medium.handlebars
   M app/templates/unit.handlebars
   M bin/merge-files
   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/templates/charm-collection.handlebars
=== modified file 'app/templates/charm-collection.handlebars'
--- app/templates/charm-collection.handlebars 2012-09-28 12:30:07 +0000
+++ app/templates/charm-collection.handlebars 2013-03-18 05:40:10 +0000
@@ -2,7 +2,7 @@
          <h1>Charm Collection</h1>
            <form class="well form-inline" id="charm-search-form">
              <label>Charm Name
- <input id="charm-search" name="query" type="text"
class="search-query span2"
+ <input id="charm-search" name="query" type="text"
class="search-query yui3-u-1-6"
                       placeholder="Search"/>
              </label>
              <button type="submit" class="btn">Search</button>
@@ -11,7 +11,7 @@
              <div class="charm">
                <ul class="thumbnails">
                  {{#charms}}
- <li class="span3">
+ <li class="yui3-u-1-4">
                    <div class="thumbnail" data-charm-url="{{data_url}}">
                      <h5>~{{owner}}/{{series}}/{{name}} <i
class="icon-user"></i></h5>
                      <span>{{summary}}</span>

Index: app/templates/charm.handlebars
=== modified file 'app/templates/charm.handlebars'
--- app/templates/charm.handlebars 2012-09-28 13:08:35 +0000
+++ app/templates/charm.handlebars 2013-03-27 03:14:50 +0000
@@ -1,6 +1,6 @@
  <h1> Charm </h1>
-<div class="row">
- <div class="span8">
+<div class="yui3-g-r">
+ <div class="yui3-u-5-9">
      <form class="form-horizontal">
        <fieldset>
          <div class="control-group">
@@ -33,7 +33,7 @@
        </fieldset>
      </form>
    </div>
- <div class="span3">
+ <div class="yui3-u-1-6 yui3-offset-1-18">
      <b>Provides</b>
      <ul>
      {{#iflat charm.provides}}
@@ -49,8 +49,8 @@
      </u...

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'app/assets/images/tab_div.png'
2Binary files app/assets/images/tab_div.png 2013-02-28 18:08:43 +0000 and app/assets/images/tab_div.png 2013-03-27 03:41:22 +0000 differ
3=== added file 'app/assets/stylesheets/cssgrids-responsive-min.css'
4--- app/assets/stylesheets/cssgrids-responsive-min.css 1970-01-01 00:00:00 +0000
5+++ app/assets/stylesheets/cssgrids-responsive-min.css 2013-03-27 03:41:22 +0000
6@@ -0,0 +1,3 @@
7+/* YUI 3.9.0pr3 (build 245) Copyright 2013 Yahoo! Inc. http://yuilibrary.com/license/ */
8+/* 18-col */
9+.yui3-g { letter-spacing: -0.31em; *letter-spacing: normal; *word-spacing: -0.43em; text-rendering: optimizespeed; } .opera-only :-o-prefocus, .yui3-g { word-spacing: -0.43em; } .yui3-u { display: inline-block; zoom: 1; *display: inline; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } .yui3-u-1,.yui3-u-1-2,.yui3-u-1-3,.yui3-u-2-3,.yui3-u-1-4,.yui3-u-3-4,.yui3-u-1-5,.yui3-u-2-5,.yui3-u-3-5,.yui3-u-4-5,.yui3-u-1-6,.yui3-u-5-6,.yui3-u-1-7,.yui3-u-2-7,.yui3-u-3-7,.yui3-u-4-7,.yui3-u-5-7,.yui3-u-6-7,.yui3-u-1-8,.yui3-u-3-8,.yui3-u-5-8,.yui3-u-7-8,.yui3-u-1-9,.yui3-u-2-9,.yui3-u-4-9,.yui3-u-5-9,.yui3-u-6-9,.yui3-u-7-9,.yui3-u-8-9,.yui3-u-1-10,.yui3-u-3-10,.yui3-u-7-10,.yui3-u-9-10,.yui3-u-1-11,.yui3-u-2-11,.yui3-u-3-11,.yui3-u-4-11,.yui3-u-5-11,.yui3-u-6-11,.yui3-u-7-11,.yui3-u-8-11,.yui3-u-9-11,.yui3-u-10-11,.yui3-u-1-12,.yui3-u-5-12,.yui3-u-7-12,.yui3-u-9-12,.yui3-u-11-12,.yui3-u-1-13,.yui3-u-2-13,.yui3-u-3-13,.yui3-u-4-13,.yui3-u-5-13,.yui3-u-6-13,.yui3-u-7-13,.yui3-u-8-13,.yui3-u-9-13,.yui3-u-10-13,.yui3-u-11-13,.yui3-u-12-13,.yui3-u-1-14,.yui3-u-3-14,.yui3-u-5-14,.yui3-u-9-14,.yui3-u-11-14,.yui3-u-13-14,.yui3-u-1-15,.yui3-u-2-15,.yui3-u-4-15,.yui3-u-6-15,.yui3-u-7-15,.yui3-u-8-15,.yui3-u-9-15,.yui3-u-10-15,.yui3-u-11-15,.yui3-u-12-15,.yui3-u-13-15,.yui3-u-14-15,.yui3-u-1-16,.yui3-u-3-16,.yui3-u-5-16,.yui3-u-7-16,.yui3-u-9-16,.yui3-u-11-16,.yui3-u-13-16,.yui3-u-15-16,.yui3-u-1-17,.yui3-u-2-17,.yui3-u-3-17,.yui3-u-4-17,.yui3-u-5-17,.yui3-u-6-17,.yui3-u-7-17,.yui3-u-8-17,.yui3-u-9-17,.yui3-u-10-17,.yui3-u-11-17,.yui3-u-12-17,.yui3-u-13-17,.yui3-u-14-17,.yui3-u-15-17,.yui3-u-16-17,.yui3-u-1-18,.yui3-u-5-18,.yui3-u-7-18,.yui3-u-11-18,.yui3-u-13-18,.yui3-u-15-18,.yui3-u-17-18 { display: inline-block; zoom: 1; *display: inline; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } .yui3-u-1 { display:block; } .yui3-u-1-2 { width: 50%; } .yui3-offset-1-2 { margin-left: 50%; } .yui3-u-1-3 { width: 33.33333%; } .yui3-offset-1-3 { margin-left: 33.33333%; } .yui3-u-2-3 { width: 66.66667%; } .yui3-offset-2-3 { margin-left: 66.66667%; } .yui3-u-1-4 { width: 25%; } .yui3-offset-1-4 { margin-left: 25%; } .yui3-u-3-4 { width: 75%; } .yui3-offset-3-4 { margin-left: 75%; } .yui3-u-1-5 { width: 20%; } .yui3-offset-1-5 { margin-left: 20%; } .yui3-u-2-5 { width: 40%; } .yui3-offset-2-5 { margin-left: 40%; } .yui3-u-3-5 { width: 60%; } .yui3-offset-3-5 { margin-left: 60%; } .yui3-u-4-5 { width: 80%; } .yui3-offset-4-5 { margin-left: 80%; } .yui3-u-1-6 { width: 16.66667%; } .yui3-offset-1-6 { margin-left: 16.66667%; } .yui3-u-5-6 { width: 83.33333%; } .yui3-offset-5-6 { margin-left: 83.33333%; } .yui3-u-1-7 { width: 14.28571%; } .yui3-offset-1-7 { margin-left: 14.28571%; } .yui3-u-2-7 { width: 28.57143%; } .yui3-offset-2-7 { margin-left: 28.57143%; } .yui3-u-3-7 { width: 42.85714%; } .yui3-offset-3-7 { margin-left: 42.85714%; } .yui3-u-4-7 { width: 57.14286%; } .yui3-offset-4-7 { margin-left: 57.14286%; } .yui3-u-5-7 { width: 71.42857%; } .yui3-offset-5-7 { margin-left: 71.42857%; } .yui3-u-6-7 { width: 85.71429%; } .yui3-offset-6-7 { margin-left: 85.71429%; } .yui3-u-1-8 { width: 12.5%; } .yui3-offset-1-8 { margin-left: 12.5%; } .yui3-u-3-8 { width: 37.5%; } .yui3-offset-3-8 { margin-left: 37.5%; } .yui3-u-5-8 { width: 62.5%; } .yui3-offset-5-8 { margin-left: 62.5%; } .yui3-u-7-8 { width: 87.5%; } .yui3-offset-7-8 { margin-left: 87.5%; } .yui3-u-1-9 { width: 11.11111%; } .yui3-offset-1-9 { margin-left: 11.11111%; } .yui3-u-2-9 { width: 22.22222%; } .yui3-offset-2-9 { margin-left: 22.22222%; } .yui3-u-4-9 { width: 44.44444%; } .yui3-offset-4-9 { margin-left: 44.44444%; } .yui3-u-5-9 { width: 55.55556%; } .yui3-offset-5-9 { margin-left: 55.55556%; } .yui3-u-6-9 { width: 66.66667%; } .yui3-offset-6-9 { margin-left: 66.66667%; } .yui3-u-7-9 { width: 77.77778%; } .yui3-offset-7-9 { margin-left: 77.77778%; } .yui3-u-8-9 { width: 88.88889%; } .yui3-offset-8-9 { margin-left: 88.88889%; } .yui3-u-1-10 { width: 10%; } .yui3-offset-1-10 { margin-left: 10%; } .yui3-u-3-10 { width: 30%; } .yui3-offset-3-10 { margin-left: 30%; } .yui3-u-7-10 { width: 70%; } .yui3-offset-7-10 { margin-left: 70%; } .yui3-u-9-10 { width: 90%; } .yui3-offset-9-10 { margin-left: 90%; } .yui3-u-1-11 { width: 9.09091%; } .yui3-offset-1-11 { margin-left: 9.09091%; } .yui3-u-2-11 { width: 18.18182%; } .yui3-offset-2-11 { margin-left: 18.18182%; } .yui3-u-3-11 { width: 27.27273%; } .yui3-offset-3-11 { margin-left: 27.27273%; } .yui3-u-4-11 { width: 36.36364%; } .yui3-offset-4-11 { margin-left: 36.36364%; } .yui3-u-5-11 { width: 45.45455%; } .yui3-offset-5-11 { margin-left: 45.45455%; } .yui3-u-6-11 { width: 54.54545%; } .yui3-offset-6-11 { margin-left: 54.54545%; } .yui3-u-7-11 { width: 63.63636%; } .yui3-offset-7-11 { margin-left: 63.63636%; } .yui3-u-8-11 { width: 72.72727%; } .yui3-offset-8-11 { margin-left: 72.72727%; } .yui3-u-9-11 { width: 81.81818%; } .yui3-offset-9-11 { margin-left: 81.81818%; } .yui3-u-10-11 { width: 90.90909%; } .yui3-offset-10-11 { margin-left: 90.90909%; } .yui3-u-1-12 { width: 8.33333%; } .yui3-offset-1-12 { margin-left: 8.33333%; } .yui3-u-5-12 { width: 41.66667%; } .yui3-offset-5-12 { margin-left: 41.66667%; } .yui3-u-7-12 { width: 58.33333%; } .yui3-offset-7-12 { margin-left: 58.33333%; } .yui3-u-9-12 { width: 75%; } .yui3-offset-9-12 { margin-left: 75%; } .yui3-u-11-12 { width: 91.66667%; } .yui3-offset-11-12 { margin-left: 91.66667%; } .yui3-u-1-13 { width: 7.69231%; } .yui3-offset-1-13 { margin-left: 7.69231%; } .yui3-u-2-13 { width: 15.38462%; } .yui3-offset-2-13 { margin-left: 15.38462%; } .yui3-u-3-13 { width: 23.07692%; } .yui3-offset-3-13 { margin-left: 23.07692%; } .yui3-u-4-13 { width: 30.76923%; } .yui3-offset-4-13 { margin-left: 30.76923%; } .yui3-u-5-13 { width: 38.46154%; } .yui3-offset-5-13 { margin-left: 38.46154%; } .yui3-u-6-13 { width: 46.15385%; } .yui3-offset-6-13 { margin-left: 46.15385%; } .yui3-u-7-13 { width: 53.84615%; } .yui3-offset-7-13 { margin-left: 53.84615%; } .yui3-u-8-13 { width: 61.53846%; } .yui3-offset-8-13 { margin-left: 61.53846%; } .yui3-u-9-13 { width: 69.23077%; } .yui3-offset-9-13 { margin-left: 69.23077%; } .yui3-u-10-13 { width: 76.92308%; } .yui3-offset-10-13 { margin-left: 76.92308%; } .yui3-u-11-13 { width: 84.61538%; } .yui3-offset-11-13 { margin-left: 84.61538%; } .yui3-u-12-13 { width: 92.30769%; } .yui3-offset-12-13 { margin-left: 92.30769%; } .yui3-u-1-14 { width: 7.14286%; } .yui3-offset-1-14 { margin-left: 7.14286%; } .yui3-u-3-14 { width: 21.42857%; } .yui3-offset-3-14 { margin-left: 21.42857%; } .yui3-u-5-14 { width: 35.71429%; } .yui3-offset-5-14 { margin-left: 35.71429%; } .yui3-u-9-14 { width: 64.28571%; } .yui3-offset-9-14 { margin-left: 64.28571%; } .yui3-u-11-14 { width: 78.57143%; } .yui3-offset-11-14 { margin-left: 78.57143%; } .yui3-u-13-14 { width: 92.85714%; } .yui3-offset-13-14 { margin-left: 92.85714%; } .yui3-u-1-15 { width: 6.66667%; } .yui3-offset-1-15 { margin-left: 6.66667%; } .yui3-u-2-15 { width: 13.33333%; } .yui3-offset-2-15 { margin-left: 13.33333%; } .yui3-u-4-15 { width: 26.66667%; } .yui3-offset-4-15 { margin-left: 26.66667%; } .yui3-u-6-15 { width: 40%; } .yui3-offset-6-15 { margin-left: 40%; } .yui3-u-7-15 { width: 46.66667%; } .yui3-offset-7-15 { margin-left: 46.66667%; } .yui3-u-8-15 { width: 53.33333%; } .yui3-offset-8-15 { margin-left: 53.33333%; } .yui3-u-9-15 { width: 60%; } .yui3-offset-9-15 { margin-left: 60%; } .yui3-u-10-15 { width: 66.66667%; } .yui3-offset-10-15 { margin-left: 66.66667%; } .yui3-u-11-15 { width: 73.33333%; } .yui3-offset-11-15 { margin-left: 73.33333%; } .yui3-u-12-15 { width: 80%; } .yui3-offset-12-15 { margin-left: 80%; } .yui3-u-13-15 { width: 86.66667%; } .yui3-offset-13-15 { margin-left: 86.66667%; } .yui3-u-14-15 { width: 93.33333%; } .yui3-offset-14-15 { margin-left: 93.33333%; } .yui3-u-1-16 { width: 6.25%; } .yui3-offset-1-16 { margin-left: 6.25%; } .yui3-u-3-16 { width: 18.75%; } .yui3-offset-3-16 { margin-left: 18.75%; } .yui3-u-5-16 { width: 31.25%; } .yui3-offset-5-16 { margin-left: 31.25%; } .yui3-u-7-16 { width: 43.75%; } .yui3-offset-7-16 { margin-left: 43.75%; } .yui3-u-9-16 { width: 56.25%; } .yui3-offset-9-16 { margin-left: 56.25%; } .yui3-u-11-16 { width: 68.75%; } .yui3-offset-11-16 { margin-left: 68.75%; } .yui3-u-13-16 { width: 81.25%; } .yui3-offset-13-16 { margin-left: 81.25%; } .yui3-u-15-16 { width: 93.75%; } .yui3-offset-15-16 { margin-left: 93.75%; } .yui3-u-1-17 { width: 5.88235%; } .yui3-offset-1-17 { margin-left: 5.88235%; } .yui3-u-2-17 { width: 11.76471%; } .yui3-offset-2-17 { margin-left: 11.76471%; } .yui3-u-3-17 { width: 17.64706%; } .yui3-offset-3-17 { margin-left: 17.64706%; } .yui3-u-4-17 { width: 23.52941%; } .yui3-offset-4-17 { margin-left: 23.52941%; } .yui3-u-5-17 { width: 29.41176%; } .yui3-offset-5-17 { margin-left: 29.41176%; } .yui3-u-6-17 { width: 35.29412%; } .yui3-offset-6-17 { margin-left: 35.29412%; } .yui3-u-7-17 { width: 41.17647%; } .yui3-offset-7-17 { margin-left: 41.17647%; } .yui3-u-8-17 { width: 47.05882%; } .yui3-offset-8-17 { margin-left: 47.05882%; } .yui3-u-9-17 { width: 52.94118%; } .yui3-offset-9-17 { margin-left: 52.94118%; } .yui3-u-10-17 { width: 58.82353%; } .yui3-offset-10-17 { margin-left: 58.82353%; } .yui3-u-11-17 { width: 64.70588%; } .yui3-offset-11-17 { margin-left: 64.70588%; } .yui3-u-12-17 { width: 70.58824%; } .yui3-offset-12-17 { margin-left: 70.58824%; } .yui3-u-13-17 { width: 76.47059%; } .yui3-offset-13-17 { margin-left: 76.47059%; } .yui3-u-14-17 { width: 82.35294%; } .yui3-offset-14-17 { margin-left: 82.35294%; } .yui3-u-15-17 { width: 88.23529%; } .yui3-offset-15-17 { margin-left: 88.23529%; } .yui3-u-16-17 { width: 94.11765%; } .yui3-offset-16-17 { margin-left: 94.11765%; } .yui3-u-1-18 { width: 5.55556%; } .yui3-offset-1-18 { margin-left: 5.55556%; } .yui3-u-5-18 { width: 27.77778%; } .yui3-offset-5-18 { margin-left: 27.77778%; } .yui3-u-7-18 { width: 38.88889%; } .yui3-offset-7-18 { margin-left: 38.88889%; } .yui3-u-11-18 { width: 61.11111%; } .yui3-offset-11-18 { margin-left: 61.11111%; } .yui3-u-13-18 { width: 72.22222%; } .yui3-offset-13-18 { margin-left: 72.22222%; } .yui3-u-15-18 { width: 83.33333%; } .yui3-offset-15-18 { margin-left: 83.33333%; } .yui3-u-17-18 { width: 94.44444%; } .yui3-offset-17-18 { margin-left: 94.44444%; } .yui3-g-r { letter-spacing: -0.31em; *letter-spacing: normal; word-spacing: -0.43em; } .opera-only :-o-prefocus, .yui3-g-r { word-spacing: -0.43em; } .yui3-g-r img { max-width: 100%; } @media (min-width:980px) { .yui3-visible-phone { display: none; } .yui3-visible-tablet { display: none; } .yui3-visible-desktop { } .yui3-hidden-phone { } .yui3-hidden-tablet { } .yui3-hidden-desktop { display: none; } } @media (max-width:480px) { .yui3-g-r > [class ^= "yui3-u"] { width:100%; } } @media (max-width:767px) { .yui3-g-r > [class ^= "yui3-u"] { width:100%; } .yui3-visible-phone { } .yui3-hidden-phone { display: none; } .yui3-hidden-desktop { } .yui3-visible-desktop { display: none; } } @media (min-width:768px) and (max-width:979px) { .yui3-visible-tablet {} .yui3-hidden-tablet { display: none; } .yui3-hidden-desktop {} .yui3-visible-desktop { display: none; } }
10
11=== modified file 'app/templates/charm-collection.handlebars'
12--- app/templates/charm-collection.handlebars 2012-09-28 12:30:07 +0000
13+++ app/templates/charm-collection.handlebars 2013-03-27 03:41:22 +0000
14@@ -2,7 +2,7 @@
15 <h1>Charm Collection</h1>
16 <form class="well form-inline" id="charm-search-form">
17 <label>Charm Name
18- <input id="charm-search" name="query" type="text" class="search-query span2"
19+ <input id="charm-search" name="query" type="text" class="search-query yui3-u-1-6"
20 placeholder="Search"/>
21 </label>
22 <button type="submit" class="btn">Search</button>
23@@ -11,7 +11,7 @@
24 <div class="charm">
25 <ul class="thumbnails">
26 {{#charms}}
27- <li class="span3">
28+ <li class="yui3-u-1-4">
29 <div class="thumbnail" data-charm-url="{{data_url}}">
30 <h5>~{{owner}}/{{series}}/{{name}} <i class="icon-user"></i></h5>
31 <span>{{summary}}</span>
32
33=== modified file 'app/templates/charm.handlebars'
34--- app/templates/charm.handlebars 2012-09-28 13:08:35 +0000
35+++ app/templates/charm.handlebars 2013-03-27 03:41:22 +0000
36@@ -1,6 +1,6 @@
37 <h1> Charm </h1>
38-<div class="row">
39- <div class="span8">
40+<div class="yui3-g-r">
41+ <div class="yui3-u-5-9">
42 <form class="form-horizontal">
43 <fieldset>
44 <div class="control-group">
45@@ -33,7 +33,7 @@
46 </fieldset>
47 </form>
48 </div>
49- <div class="span3">
50+ <div class="yui3-u-1-6 yui3-offset-1-18">
51 <b>Provides</b>
52 <ul>
53 {{#iflat charm.provides}}
54@@ -49,8 +49,8 @@
55 </ul>
56 </div>
57 </div>
58-<div class="row">
59- <div class="span11">
60+<div class="yui3-g">
61+ <div class="yui3-u-7-9">
62 <form id="deploy-service" class="form-horizontal">
63 <legend>Deploy this charm:</legend>
64
65
66=== modified file 'app/templates/service-header.partial'
67--- app/templates/service-header.partial 2013-03-08 19:59:33 +0000
68+++ app/templates/service-header.partial 2013-03-27 03:41:22 +0000
69@@ -10,25 +10,24 @@
70 <span>{{charm_id}}</span>
71 </div>
72 </div>
73- <div class="menu-items">
74- {{#tabs}}
75- <div class="inline item">
76- <div>
77+ <div class="menu-items yui3-g">
78+ <ul class="menu yui3-u-1-2">
79+ {{#tabs}}
80+ <li class="item">
81 <a {{#if active}}class="link-active"{{/if}} href="{{href}}">{{title}}
82- </a>
83- </div>
84- <div {{#if active}}class="active"{{/if}}>
85- </div>
86- </div>
87- {{/tabs}}
88- <div class="controls">
89- {{> service-header-destroy-service }}
90+ </a>
91+ <div {{#if active}}class="active"{{/if}}>
92+ </div>
93+ </li>
94+ {{/tabs}}
95+ </ul>
96+ <div class="controls yui3-u-1-2">
97 {{#unless serviceIsJujuGUI}}
98 <div class="control-expose control">
99 <div class="inline">
100- <img src="/juju-ui/assets/images/bottom_bar_big_div.png" class="divider" />
101- <span>Expose</span>
102- </div>
103+ <img src="/juju-ui/assets/images/bottom_bar_big_div.png" class="divider" />
104+ <span>Expose</span>
105+ </div>
106 <div class="inline">
107 {{#if service.exposed}}
108 <img class="unexposeService"
109@@ -44,10 +43,11 @@
110 </div>
111 </div>
112 {{/unless}}
113+ {{> service-header-destroy-service }}
114 </div>
115 </div>
116- <div class="row">
117- <div id="message-area" class="span10"></div>
118+ <div class="yui3-g">
119+ <div id="message-area" class="yui3-u-10-12"></div>
120 </div>
121 </div>
122 </div>
123
124=== modified file 'app/templates/show_units_large.handlebars'
125--- app/templates/show_units_large.handlebars 2013-03-05 18:24:24 +0000
126+++ app/templates/show_units_large.handlebars 2013-03-27 03:41:22 +0000
127@@ -1,6 +1,6 @@
128-<ul id="unit-large" class="thumbnails">
129+<ul id="unit-large" class="thumbnails yui3-g-r">
130 {{#units}}
131- <li class="span2">
132+ <li class="yui3-u-1-8">
133 <div class="well unit {{state_to_style agent_state}}" id="{{id}}">
134 <span class="agent-state">{{agent_state}}</span>
135 <h5>{{number}}: {{unitState relation_errors agent_state}}</h5>
136
137=== modified file 'app/templates/show_units_medium.handlebars'
138--- app/templates/show_units_medium.handlebars 2013-03-05 18:24:24 +0000
139+++ app/templates/show_units_medium.handlebars 2013-03-27 03:41:22 +0000
140@@ -1,6 +1,6 @@
141-<ul id="unit-medium" class="thumbnails">
142+<ul id="unit-medium" class="thumbnails yui3-g">
143 {{#units}}
144- <li class="span2">
145+ <li class="yui3-u-1-8">
146 <div class="well unit {{state_to_style agent_state}}"
147 id="{{id}}"{{#if public_address}} title="{{public_address}}"{{/if}}>
148 <span class="agent-state">{{unitState relation_errors agent_state}}</span>
149
150=== modified file 'app/templates/unit.handlebars'
151--- app/templates/unit.handlebars 2013-03-20 20:58:41 +0000
152+++ app/templates/unit.handlebars 2013-03-27 03:41:22 +0000
153@@ -1,5 +1,5 @@
154-<div class="row-fluid">
155- <div class="well">
156+<div class="yui3-g">
157+ <div class="well yui3-u-1">
158 <div class="unit-button-palette">
159 <form>
160 {{#if unit_error}}
161@@ -32,8 +32,8 @@
162 </div>
163 <div>
164
165-<div class="row-fluid">
166- <div class="span12">
167+<div class="yui3-g">
168+ <div class="yui3-u-1">
169 <h2 id="machine-name">&#x2637; Machine {{unit.machine}}</h2>
170 <table class="table table-striped table-bordered">
171 <tbody>
172@@ -61,8 +61,8 @@
173 {{#unless relations}}
174 This unit has no relations.
175 {{else}}
176-<div id="relations" class="row-fluid">
177- <div class="span12">
178+<div id="relations" class="yui3-g">
179+ <div class="yui3-u-1">
180 <h2>&#x26B9; Relations</h2>
181 <table class="table table-striped table-bordered">
182 <thead>
183@@ -109,7 +109,7 @@
184 </div>
185 </div>
186 {{/unless}}
187-<div class="row-fluid">
188+<div class="yui3-g">
189 <div class="bottom-navbar">
190 {{> landscape-controls }}
191 </div>
192
193=== modified file 'bin/merge-files'
194--- bin/merge-files 2013-03-20 16:35:36 +0000
195+++ bin/merge-files 2013-03-27 03:41:22 +0000
196@@ -92,6 +92,7 @@
197 cssFiles.push('app/assets/stylesheets/bootstrap-2.0.4.css');
198 cssFiles.push('app/assets/stylesheets/bootstrap-responsive-2.0.4.css');
199 cssFiles.push('app/assets/stylesheets/prettify.css');
200+ cssFiles.push('app/assets/stylesheets/cssgrids-responsive-min.css');
201 merge.combineCSS(cssFiles,
202 'build-shared/juju-ui/assets/combined-css/all-static.css');
203 });
204
205=== modified file 'lib/views/stylesheet.less'
206--- lib/views/stylesheet.less 2013-03-25 15:39:48 +0000
207+++ lib/views/stylesheet.less 2013-03-27 03:41:22 +0000
208@@ -76,7 +76,6 @@
209
210 #viewport-wrapper {
211 position: relative;
212- width: 100%;
213 }
214
215 #vp-left-border {
216@@ -1353,10 +1352,9 @@
217 }
218
219 .menu-items {
220- height: 26px;
221- padding-top: 6px;
222- padding-left: 38px;
223- background: url(/juju-ui/assets/images/tab_div.png) repeat;
224+ padding: 6px 0 6px 38px;
225+ background: #dedede url(/juju-ui/assets/images/tab_div.png) repeat-x left bottom;
226+ border-top: 1px solid #b6b6b6;
227
228 .item {
229 a {
230@@ -1382,10 +1380,8 @@
231 }
232
233 .controls {
234- float: right;
235-
236 .control {
237- float: left;
238+ float: right;
239
240 .divider {
241 margin-right: 3px;
242@@ -1462,9 +1458,15 @@
243 }
244 }
245
246+ul.menu li,
247 div.inline {
248 float: left;
249 }
250+ul.menu {
251+ margin: 0;
252+ padding: 0;
253+ list-style: none;
254+}
255
256 #tooltip {
257 text-align: left;

Subscribers

People subscribed via source and target branches