yellow team mailing list archive
-
yellow team
-
Mailing list archive
-
Message #01597
Charm search results upated styling (issue 6846053)
Reviewers: mp+134355_code.launchpad.net,
Message:
Please take a look.
Description:
Charm search results upated styling
After the last changes Matt made some styling suggestions. His
requirements are in the 'store_front_review.pdf' on the Google drive.
One requirement was that the charm sections be a fixed height of 70px
regardless of how long the charm summary is. This required we find a
solution for truncating the text cleanly. The YUI gallery has
'gallery-ellipsis', which I've chosen to use. In order for it to
work, the width of the element must be used, instead of using
padding-right to cause wrapping. Once that was done, and the width of
the float:right Deploy button was taken into account it all worked
well.
Matt asked for the filter drop down box but since it is not well
spec'ed yet and not Ready To Code I decided to defer adding it at this
time.
https://code.launchpad.net/~bac/juju-gui/charm-search-style-2/+merge/134355
(do not edit description out of merge proposal)
Please review this at https://codereview.appspot.com/6846053/
Affected files:
M Makefile
A [revision details]
M app/views/charm-panel.js
M bin/merge-files
M lib/views/stylesheet.less
M test/test_app.js
Index: Makefile
=== modified file 'Makefile'
--- Makefile 2012-11-09 15:37:08 +0000
+++ Makefile 2012-11-14 14:55:50 +0000
@@ -66,7 +66,7 @@
spritegen: $(SPRITE_GENERATED_FILES)
-$(COMPRESSED_FILES): node_modules/yui node_modules/d3/d3.v2.min.js
$(JSFILES)
+$(COMPRESSED_FILES): node_modules/yui node_modules/d3/d3.v2.min.js
$(JSFILES) ./bin/merge-files
@rm -Rf app/assets/javascripts/generated/
@mkdir app/assets/javascripts/generated/
@./bin/merge-files
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: matthew.scott@xxxxxxxxxxxxx-20121113215702-up4sva0th73rnwzb
+New revision: bac@xxxxxxxxxxxxx-20121114182255-as2bvof097ac329m
Index: bin/merge-files
=== modified file 'bin/merge-files'
--- bin/merge-files 2012-11-13 13:55:16 +0000
+++ bin/merge-files 2012-11-14 18:09:42 +0000
@@ -10,7 +10,7 @@
*
* The final product will provide three js files: one for the YUI
dependencies,
* one for our custom js code and one for third party js like d3.
- *
+ *
* Known issues:
* (1) If we set "bootstrap=false" in the GlobalConfig object, yui
disables the
* loader object. It means it wont even try to download modules. We
cannot
@@ -48,6 +48,7 @@
reqs.push('parallel');
reqs.push('app-transitions-native');
reqs.push('gallery-markdown');
+ reqs.push('gallery-ellipsis');
reqs.push('loader-base');
// Get all of the YUI files and their dependencies, and combine them.
Index: test/test_app.js
=== modified file 'test/test_app.js'
--- test/test_app.js 2012-10-23 19:54:44 +0000
+++ test/test_app.js 2012-11-14 14:34:31 +0000
@@ -42,7 +42,7 @@
beforeEach(function(done) {
// XXX Apparently removing a DOM node is asynchronous (on Chrome at
least)
- // and we occasionally loose the race if this code is in the afterEach
+ // and we occasionally lose the race if this code is in the afterEach
// function, so instead we do it here, but only if one has previously
been
// created.
if (container) {
Index: app/views/charm-panel.js
=== modified file 'app/views/charm-panel.js'
--- app/views/charm-panel.js 2012-11-13 15:27:51 +0000
+++ app/views/charm-panel.js 2012-11-14 18:09:42 +0000
@@ -107,6 +107,7 @@
Y.Object.values(data),
function(val) { return val['interface']; });
}
+ return undefined;
};
/**
@@ -180,6 +181,7 @@
raw_entries = searchText ? resultEntries : defaultEntries,
entries = raw_entries && makeRenderableResults(raw_entries);
container.setHTML(this.template({ charms: entries }));
+ container.all('.charm-summary').ellipsis({'lines': 2});
this._setScroll();
return this;
},
@@ -492,7 +494,7 @@
views.CharmDescriptionView = CharmDescriptionView;
/**
- * Display a unit.
+ * Display a charms configuration panel.
*
* @class CharmConfigurationView
* @namespace views
@@ -1053,6 +1055,7 @@
'overlay',
'dom-core',
'juju-models',
- 'event-resize'
+ 'event-resize',
+ 'gallery-ellipsis'
]
});
Index: lib/views/stylesheet.less
=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less 2012-11-13 21:51:29 +0000
+++ lib/views/stylesheet.less 2012-11-14 18:22:55 +0000
@@ -1032,6 +1032,7 @@
background-color: #EEEEEE;
width: @charm-panel-width - 1px;
float: right;
+ border-top: 1px solid #989898;
.series-charms {
h3 {
font-weight: normal;
@@ -1039,7 +1040,8 @@
text-transform: capitalize;
padding-left: @charm-panel-padding-left;
background-color: #CBCBCB;
- border-top: 1px solid #989898;
+ height: 20px;
+ line-height: 16px;
}
ul {
margin-bottom: 0;
@@ -1048,6 +1050,7 @@
padding: 11px @charm-panel-padding-left;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #BDBDBD;
+ height: 70px;
&:first-child {
padding-top: 11px;
}
@@ -1071,6 +1074,7 @@
}
.charm-summary {
margin-bottom: 4px;
+ width: 190px;
font-size: 12px;
line-height: 14px;
padding-top: 6px;
@@ -1078,6 +1082,7 @@
.btn {
float: right;
opacity: 0;
+ margin-top: 20px;
}
}
}
--
https://code.launchpad.net/~bac/juju-gui/charm-search-style-2/+merge/134355
Your team Juju GUI Hackers is requested to review the proposed merge of lp:~bac/juju-gui/charm-search-style-2 into lp:juju-gui.
References
