Brad Crittenden has proposed merging lp:~bac/juju-gui/charm-spill into
lp:juju-gui.
Requested reviews:
Juju GUI Hackers (juju-gui)
For more details, see:
https://code.launchpad.net/~bac/juju-gui/charm-spill/+merge/134961
Fix overflow on charm name.
The sections in the charm search results pane are fixed at 70px high.
Due to the way we construct the name, and the fact the charm authors
can set the name to be anything they want, some names exceed the
allotted one-line and wreak havoc on the layout.
Obvious lesson learned: any element with a fixed height and
user-supplied data must account for overflow.
The deploy button placement was also fixed.
Matt C. has seen screenshots of the truncation and offered tweaks on
the vertical spacing which are incorporated here.
https://codereview.appspot.com/6843082/
--
https://code.launchpad.net/~bac/juju-gui/charm-spill/+merge/134961
Your team Juju GUI Hackers is requested to review the proposed merge of
lp:~bac/juju-gui/charm-spill into lp:juju-gui.
=== modified file 'app/templates/charm-search-result.handlebars'
--- app/templates/charm-search-result.handlebars 2012-11-15 14:33:54 +0000
+++ app/templates/charm-search-result.handlebars 2012-11-19 16:36:25 +0000
@@ -9,8 +9,11 @@
<div class="charm-div">
<button class="btn btn-primary deploy"
data-url="{{id}}">Deploy</button>
- <a class="charm-detail" href="{{id}}">
- {{#if owner}}{{owner}}/{{/if}}{{package_name}}</a>
+ {{! It is is important that the following 'href' line not be
+ broken, or the string processed by the ellipsis module will
+ include a lot of whitespace. }}
+ <a class="charm-detail"
+ href="{{id}}">{{#if owner}}{{owner}}/{{/if}}{{package_name}}</a>
<div class="charm-summary">{{summary}}</div>
</div>
</li>
=== modified file 'app/views/charm-panel.js'
--- app/views/charm-panel.js 2012-11-16 17:06:36 +0000
+++ app/views/charm-panel.js 2012-11-19 16:36:25 +0000
@@ -181,6 +181,7 @@
raw_entries = searchText ? resultEntries : defaultEntries,
entries = raw_entries && makeRenderableResults(raw_entries);
container.setHTML(this.template({ charms: entries }));
+ container.all('.charm-detail').ellipsis();
container.all('.charm-summary').ellipsis({'lines': 2});
this._setScroll();
return this;
=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less 2012-11-16 17:06:36 +0000
+++ lib/views/stylesheet.less 2012-11-19 16:36:25 +0000
@@ -1109,7 +1109,7 @@
border-bottom: 1px solid #BDBDBD;
height: 70px;
.charm-div {
- padding-top: 6px;
+ padding-top: 11px;
}
&:last-child {
border-bottom: none;
@@ -1123,24 +1123,27 @@
&:hover {
background-color: white;
}
+ @charm-panel-text-width: 190px;
a.charm-detail {
- padding-top: 5px;
+ display: block;
+ width: @charm-panel-text-width;
font-weight: normal;
font-size: 16px;
color: @charm-panel-orange;
line-height: 18px;
}
.charm-summary {
+ padding-top: 4px;
margin-bottom: 4px;
- width: 190px;
+ width: @charm-panel-text-width;
font-size: 12px;
line-height: 14px;
- padding-top: 4px;
}
.btn {
float: right;
opacity: 0;
- margin-top: 20px;
+ margin-top: 11px;
+ margin-right: 8px;
}
}
}
--
Mailing list: https://launchpad.net/~yellow
Post to : [email protected]
Unsubscribe : https://launchpad.net/~yellow
More help : https://help.launchpad.net/ListHelp
