You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@wookie.apache.org by rg...@apache.org on 2011/11/16 11:38:37 UTC
svn commit: r1202623 - in /incubator/wookie/trunk/widgets/templates/browse:
index.html style/media.css style/screen.css.add
Author: rgardler
Date: Wed Nov 16 10:38:37 2011
New Revision: 1202623
URL: http://svn.apache.org/viewvc?rev=1202623&view=rev
Log:
fix up some styling (although this is a work in progress as small screen styling is now poor)
Modified:
incubator/wookie/trunk/widgets/templates/browse/index.html
incubator/wookie/trunk/widgets/templates/browse/style/media.css
incubator/wookie/trunk/widgets/templates/browse/style/screen.css.add
Modified: incubator/wookie/trunk/widgets/templates/browse/index.html
URL: http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/templates/browse/index.html?rev=1202623&r1=1202622&r2=1202623&view=diff
==============================================================================
--- incubator/wookie/trunk/widgets/templates/browse/index.html (original)
+++ incubator/wookie/trunk/widgets/templates/browse/index.html Wed Nov 16 10:38:37 2011
@@ -1,135 +1,143 @@
-<!--
- Licensed to the Apache Software Foundation (ASF) under one or more
- contributor license agreements. See the NOTICE file distributed with
- this work for additional information regarding copyright ownership.
- The ASF licenses this file to You under the Apache License, Version 2.0
- (the "License"); you may not use this file except in compliance with
- the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
--->
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="pragma" content="no-cache" />
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1">
-
-<link rel="stylesheet" href="style/media.css" />
-<link rel="stylesheet" href="style/all.css" />
-
-<link rel="stylesheet"
- href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
-<script type="text/javascript"
- src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
-<script type="text/javascript"
- src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
-
-<script type="text/javascript" src="lib/XSLTransform.js"></script>
-<script type="text/javascript" src="scripts/controller.js"></script>
-
-<title>${widget.name}</title>
-</head>
-
-<body>
- <div data-role="page" class="type-home" id="home" data-theme="d">
- <div class="header" data-role="header" data-position="fixed">
- <img class="logo" src="images/myExperiment_logo_32h.png"
- alt="MyExperiment" title="MyExperiment Logo" />
- <div class="header_title" id="view_title">${widget.name}</div>
- </div>
- <!-- /header -->
-
- <div data-role="content">
-
- <div id="searchPanel" data-role="collapsible" class="content-secondary" data-theme="c"
- data-content-theme="c">
- <h2>Search</h2>
-
- <form
- action="javascript:${widget.shortname}_browse_controller.submitSearchForm()"
- method="get">
- <div data-role="fieldcontain">
- <label for="searchString">Search:</label> <input type="text"
- name="searchString" id="searchString" value=""
- placeholder="Search terms..." />
- </div>
-
- <div data-role="fieldcontain">
- <label for="sort">Sort:</label>
- <select name="sort" id="sort"> creation time (created), update time (updated), title (title) and name (name)
- <option value="updated">Updated</option>
- <option value="created">Created</option>
- <option value="title">Title</option>
- <option value="name">Name</option>
- </select>
- </div>
-
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Sort order</legend>
- <input type="radio" name="sortOrder" id="reverseOrder" value="reverse" checked="checked" />
- <label for="reverseOrder">Reverse</label>
-
- <input type="radio" name="sortOrder" id="forwardOrder" value="forward" />
- <label for="forwardOrder">Forward</label>
- </fieldset>
-
- <input type="submit" value="Search" />
- </form>
-
- </div>
- <!-- /content-secondary -->
-
- <div class="content-primary" id="content-primary">
- <div id="results" data-role="collapsible-set">
-
- <div class="result" data-role="collapsible" data-collapsed="true">
- <h3>Result 1</h3>
- <p>I'm the collapsible set content for section B.</p>
- </div>
-
- <div class="result" data-role="collapsible">
- <h3>Result 2</h3>
- <p>I'm the collapsible set content for section B.</p>
- </div>
-
- <div class="result" data-role="collapsible">
- <h3>Result 3</h3>
- <p>I'm the collapsible set content for section B.</p>
- </div>
- </div>
- </div>
- <!-- /content-primary -->
- </div>
- <!-- /content -->
-
- <div data-role="footer" class="footer" data-position="fixed">
- <div class="content">© University of Oxford</div>
- <a class="button" href="#help" data-role="button" data-rel="dialog"
- data-transition="pop" data-icon="info" data-iconpos="left">Help</a>
-
- </div>
- <!-- /footer -->
- </div>
- <!-- /page -->
-
- <div data-role="dialog" id="help">
- <div data-role="header">
- <h4>Help: ${widget.name}</h4>
- </div>
- <!-- /header -->
-
- <div data-role="content" class="ui-content" id="content-help">
- ${widget.help}</div>
- <!-- /content -->
- </div>
- <!-- /page -->
-
-</body>
-</html>
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="pragma" content="no-cache" />
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+<link rel="stylesheet"
+ href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
+<link rel="stylesheet" href="style/media.css" />
+<link rel="stylesheet" href="style/all.css" />
+
+<script type="text/javascript"
+ src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+<script type="text/javascript"
+ src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
+
+<script type="text/javascript" src="lib/XSLTransform.js"></script>
+<script type="text/javascript" src="scripts/controller.js"></script>
+
+<title>${widget.name}</title>
+</head>
+
+<body>
+ <div data-role="page" class="type-home" id="home" data-theme="d">
+ <div class="header" data-role="header" data-position="fixed">
+ <img class="logo" src="images/myExperiment_logo_32h.png"
+ alt="MyExperiment" title="MyExperiment Logo" />
+ <h1>${widget.name}</h1>
+ </div>
+ <!-- /header -->
+
+ <div data-role="content">
+
+ <div id="searchPanel" data-role="collapsible" class="content-secondary" data-theme="c"
+ data-content-theme="c">
+ <h2>Search</h2>
+
+ <form
+ action="javascript:${widget.shortname}_browse_controller.submitSearchForm()"
+ method="get">
+ <div class="ui-grid-a">
+ <div class="ui-block-a">
+ <div data-role="fieldcontain">
+ <label for="searchString">Search:</label> <input type="text"
+ name="searchString" id="searchString" value=""
+ placeholder="Search terms..." />
+ </div>
+ </div>
+
+ <div class="ui-block-b">
+ <div data-role="fieldcontain">
+ <label for="sort">Sort:</label>
+ <select name="sort" id="sort" data-native-menu="false"> creation time (created), update time (updated), title (title) and name (name)
+ <option value="updated">Updated</option>
+ <option value="created">Created</option>
+ <option value="title">Title</option>
+ <option value="name">Name</option>
+ </select>
+ </div>
+ </div>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Sort order</legend>
+ <input type="radio" name="sortOrder" id="reverseOrder" value="reverse" checked="checked" />
+ <label for="reverseOrder">Reverse</label>
+
+ <input type="radio" name="sortOrder" id="forwardOrder" value="forward" />
+ <label for="forwardOrder">Forward</label>
+ </fieldset>
+ </div>
+
+ <input type="submit" value="Search" />
+ </form>
+
+ </div>
+ <!-- /content-secondary -->
+
+ <div class="content-primary" id="content-primary">
+ <div id="results" data-role="collapsible-set">
+
+ <div class="result" data-role="collapsible" data-collapsed="true">
+ <h3>Result 1</h3>
+ <p>I'm the collapsible set content for section B.</p>
+ </div>
+
+ <div class="result" data-role="collapsible">
+ <h3>Result 2</h3>
+ <p>I'm the collapsible set content for section B.</p>
+ </div>
+
+ <div class="result" data-role="collapsible">
+ <h3>Result 3</h3>
+ <p>I'm the collapsible set content for section B.</p>
+ </div>
+ </div>
+ </div>
+ <!-- /content-primary -->
+ </div>
+ <!-- /content -->
+
+ <div data-role="footer" class="footer" data-position="fixed">
+ <div class="content">© University of Oxford</div>
+ <a class="button" href="#help" data-role="button" data-rel="dialog"
+ data-transition="pop" data-icon="info" data-iconpos="left">Help</a>
+
+ </div>
+ <!-- /footer -->
+ </div>
+ <!-- /page -->
+
+ <div data-role="dialog" id="help">
+ <div data-role="header">
+ <h4>Help: ${widget.name}</h4>
+ </div>
+ <!-- /header -->
+
+ <div data-role="content" class="ui-content" id="content-help">
+ ${widget.help}</div>
+ <!-- /content -->
+ </div>
+ <!-- /page -->
+
+</body>
+</html>
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=1202623&r1=1202622&r2=1202623&view=diff
==============================================================================
--- incubator/wookie/trunk/widgets/templates/browse/style/media.css (original)
+++ incubator/wookie/trunk/widgets/templates/browse/style/media.css Wed Nov 16 10:38:37 2011
@@ -1,69 +1,78 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
- @media ${widget.media.screen.veryNarrow}, ${widget.media.screen.narrow} {
- .content-secondary {
- text-align: left;
- margin-right: 1%;
- padding-right: 1%;
- }
- .content-primary {
- margin-right: 1%;
- padding-right: 1%;
- }
- }
-
- @media ${widget.media.screen.moderateWidth} {
- .content-secondary {
- text-align: left;
- float: left;
- width: 42%;
- margin-right: 1%;
- padding-right: 2%;
- }
- .content-primary {
- width: 55%;
- float: right;
- }
- }
-
- @media ${widget.media.screen.wide} {
- .content-secondary {
- text-align: left;
- float: left;
- width: 32%;
- margin-right: 1%;
- padding-right: 2%;
- }
- .content-primary {
- width: 65%;
- float: right;
- }
- }
-
-@media ${widget.media.screen.veryWide} {
- .content-secondary {
- text-align: left;
- float: left;
- width: 22%;
- margin-right: 1%;
- padding-right: 2%;
- }
- .content-primary {
- width: 75%;
- }
-}
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ @media ${widget.media.screen.veryNarrow}, ${widget.media.screen.narrow} {
+ .content-secondary {
+ text-align: left;
+ margin-right: 1%;
+ padding-right: 1%;
+ }
+ .content-primary {
+ margin-right: 1%;
+ padding-right: 1%;
+ }
+ }
+
+ @media ${widget.media.screen.moderateWidth} {
+ .content-secondary {
+ text-align: left;
+ float: left;
+ width: 42%;
+ margin-right: 1%;
+ padding-right: 2%;
+ }
+ .content-primary {
+ width: 55%;
+ float: right;
+ }
+ }
+
+ @media ${widget.media.screen.wide} {
+ .content-secondary {
+ text-align: left;
+ float: left;
+ width: 32%;
+ margin-right: 1%;
+ padding-right: 2%;
+ }
+ .content-primary {
+ width: 65%;
+ float: right;
+ }
+ }
+
+@media ${widget.media.screen.veryWide} {
+ .content-secondary {
+ text-align: left;
+ float: left;
+ width: 22%;
+ margin-right: 1%;
+ padding-right: 2%;
+ }
+ .content-primary {
+ width: 75%;
+ }
+}
+
+/* TODO use templates as above */
+@media only screen and (min-width : 321px) {
+ .ui-grid-a .ui-block-a,
+ .ui-grid-a .ui-block-b {
+ float: none;
+ width: 100%;
+ }
+}
Modified: incubator/wookie/trunk/widgets/templates/browse/style/screen.css.add
URL: http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/templates/browse/style/screen.css.add?rev=1202623&r1=1202622&r2=1202623&view=diff
==============================================================================
--- incubator/wookie/trunk/widgets/templates/browse/style/screen.css.add (original)
+++ incubator/wookie/trunk/widgets/templates/browse/style/screen.css.add Wed Nov 16 10:38:37 2011
@@ -1,65 +1,113 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
- /**
- * Summary information for a results browser
- */
-
-.detail {
- clear:both;
- width: 100%;
- margin-bottom: 0.6em;
-}
-
-.thumbnail {
- float:left;
-}
-
-.summary {
- clear: both;
-}
-
-.meta-data {
- clear: both;
-}
-
-.uploader {
- float: right;
-}
-
-.update {
- font-size: 70%;
- float: left;
-}
-
-.type {
- font-size: 80%;
- float: left;
-}
-
-.location {
- font-size: 80%;
- float: right;
-}
-
-.license {
- font-size: 80%;
- float: right;
-}
-
-.clear {
- clear:both;
-}
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ /**
+ * Summary information for a results browser
+ */
+
+.detail {
+ clear:both;
+ width: 100%;
+ margin-bottom: 0.6em;
+}
+
+.thumbnail {
+ float:left;
+ width: 100px;
+}
+
+.meta-data {
+ margin-left: 0.6em;
+ float: left;
+ width: 70%;
+}
+
+.uploader {
+ float: left;
+ text-align: left;
+ width: 75%;
+ font-size: 90%;
+}
+
+.rating {
+ float: right;
+ text-align: right;
+ font-size: 80%;
+ width: 25%;
+}
+
+.type {
+ clear: left;
+ float: left;
+ text-align: left;
+ width: 75%;
+}
+
+.license {
+ float: left;
+ text-align: right;
+ width: 25%;
+ font-size: 80%;
+}
+
+.description {
+ float:left;
+ width: 100%;
+ font-size: 95%;
+ margin-top: 0.6em;
+}
+
+.update {
+ font-size: 75%;
+ text-align: center;
+}
+
+/*.summary {
+ clear: both;
+}*/
+
+.location {
+ font-size: 80%;
+ float: right;
+}
+
+.clear {
+ clear:both;
+}
+
+.header {
+/* note removed div from markup to get JQM styling */
+ background: white;
+ color: black;
+ text-shadow: none;
+ border: none;
+}
+
+.ui-header .ui-title {
+ margin-right: 70px;
+}
+
+/* theme buttons */
+.ui-btn-active {
+ background: -moz-linear-gradient(center top , #85BA00, #539300) repeat scroll 0 0 #459600;
+ border: 1px solid #155600;
+ text-shadow: 0 -1px 1px #145000;
+}
+
+.ui-field-contain {
+ border-bottom-width: 0px;
+ margin: 0.5em 0;
+