Author: rgardler
Date: Fri Nov 4 12:30:41 2011
New Revision: 1197533
URL: http://svn.apache.org/viewvc?rev=1197533&view=rev
Log:
Provide some standard media query properties for use across all widgets.
Demonstrate their use in the browse template (search panel will be left aligned
and expanded on wide screens)
Modified:
incubator/wookie/trunk/widgets/templates/browse/index.html
incubator/wookie/trunk/widgets/templates/browse/scripts/browse_controller.js
incubator/wookie/trunk/widgets/templates/browse/style/media.css
incubator/wookie/trunk/widgets/templates/default.widget.properties
incubator/wookie/trunk/widgets/templates/readme.txt
Modified: incubator/wookie/trunk/widgets/templates/browse/index.html
URL:
http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/templates/browse/index.html?rev=1197533&r1=1197532&r2=1197533&view=diff
==============================================================================
--- incubator/wookie/trunk/widgets/templates/browse/index.html (original)
+++ incubator/wookie/trunk/widgets/templates/browse/index.html Fri Nov 4
12:30:41 2011
@@ -48,7 +48,7 @@
<div data-role="content">
- <div data-role="collapsible" class="content-secondary"
data-theme="c"
+ <div id="searchPanel" data-role="collapsible"
class="content-secondary" data-theme="c"
data-content-theme="c">
<h2>Search</h2>
Modified:
incubator/wookie/trunk/widgets/templates/browse/scripts/browse_controller.js
URL:
http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/templates/browse/scripts/browse_controller.js?rev=1197533&r1=1197532&r2=1197533&view=diff
==============================================================================
---
incubator/wookie/trunk/widgets/templates/browse/scripts/browse_controller.js
(original)
+++
incubator/wookie/trunk/widgets/templates/browse/scripts/browse_controller.js
Fri Nov 4 12:30:41 2011
@@ -55,7 +55,13 @@ var ${widget.shortname}_browse_controlle
* Update the display
*/
update:function() {
-
$('#view_title').html(${widget.shortname}_browse_controller.getTitle());
+ if ($.mobile.media("${widget.media.screen.wide}")) {
+ $('#searchPanel').trigger('expand');
+ } else if ($.mobile.media("$(widget.media.screen.veryWide}")) {
+ $('#searchPanel').trigger('expand');
+ } else {
+ $('#searchPanel').trigger('collapse');
+ }
},
/**
Modified: incubator/wookie/trunk/widgets/templates/browse/style/media.css
URL:
http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/templates/browse/style/media.css?rev=1197533&r1=1197532&r2=1197533&view=diff
==============================================================================
--- incubator/wookie/trunk/widgets/templates/browse/style/media.css (original)
+++ incubator/wookie/trunk/widgets/templates/browse/style/media.css Fri Nov 4
12:30:41 2011
@@ -14,7 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
- @media all and (min-width: 650px){
+ @media ${widget.media.screen.wide} {
.content-secondary {
text-align: left;
float: left;
@@ -26,9 +26,8 @@
margin-right: 1%;
padding-right: 1%;
}
-}
-@media all and (min-width: 750px){
+@media ${widget.media.screen.veryWide} {
.content-secondary {
width: 34%;
}
@@ -37,16 +36,4 @@
padding-right: 1%;
}
}
-
-@media all and (min-width: 1200px){
- .content-secondary {
- width: 30%;
- padding-right:6%;
- margin-right: 5%;
- }
- .content-primary {
- width: 50%;
- margin-right: 5%;
- padding-right: 3%;
- }
-}
\ No newline at end of file
+}
Modified: incubator/wookie/trunk/widgets/templates/default.widget.properties
URL:
http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/templates/default.widget.properties?rev=1197533&r1=1197532&r2=1197533&view=diff
==============================================================================
--- incubator/wookie/trunk/widgets/templates/default.widget.properties
(original)
+++ incubator/wookie/trunk/widgets/templates/default.widget.properties Fri Nov
4 12:30:41 2011
@@ -3,3 +3,10 @@ widget.shortname=BaseTemplateWidget
widget.name=Base Widget
widget.description=A simple widget that is derived from the base template and
nothing more.
widget.help=<p>There is nothing much to do here, so little need of help.</p>
+
+# CSS3 media queries used to identify screen size
+widget.media.screen.veryNarrow = only screen and (max-width : 320px)
+widget.media.screen.narrow = only screen and (min-width : 321px) and
(max-width : 640px)
+widget.media.screen.moderateWidth = only screen and (min-width : 641px) and
(max-width : 1024px)
+widget.media.screen.wide = only screen and (min-width : 1025px) and (max-width
: 1800px)
+widget.media.screen.veryWide = only screen and (min-width : 1800px)
Modified: incubator/wookie/trunk/widgets/templates/readme.txt
URL:
http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/templates/readme.txt?rev=1197533&r1=1197532&r2=1197533&view=diff
==============================================================================
--- incubator/wookie/trunk/widgets/templates/readme.txt (original)
+++ incubator/wookie/trunk/widgets/templates/readme.txt Fri Nov 4 12:30:41 2011
@@ -102,6 +102,37 @@ used as a token.
*** CSS
+**** Default CSS
+
+Each template provides a minimum of CSS styles to allow widgets to be
+consistent in their styling. Your own templates and widgets based on
+these can override these styles as necessary, see below.
+
+**** Media Queries
+
+The root "default.widget.properties" file provides a number of useful
+properties for performing media queries in your CSS and
+Javascript. These properties define many common form factors in
+various orientations. Please check the file for the full list.
+
+To use these in your CSS simply include them as properties. for example:
+
+#+BEGIN_SRC CSS
+@media ${widget.media.screen.wide} {
+/* Styles */
+}
+#+END_SRC
+
+To use them in your javascript you can use the JQuery Mobile media function,
for example:
+
+#+BEGINE_SRC Javascript
+if ($.mobile.media("${widget.media.screen.wide}")) {
+ $('#searchPanel').trigger('expand');
+}
+#+END_SRC
+
+**** Custom CSS
+
Each template can provide complete CSS files which will be copied into
widgets just like any other resources. In addition templates can add
to or modify CSS rules defined in parent templates.
