Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

#152 makes the UI a little prettier

  • Loading branch information...
commit 8393bd34118ae8be347531cadb2ab0c9d2f9a6d1 1 parent 210ec92
Paul Kinlan authored
78 server/registry/results/results.html
View
@@ -58,46 +58,94 @@
});
</script>
<style>
- body, h1, h2, ul, li {
+ body, h1, h2, ul, li {
margin: 0;
padding: 0;
+ font-size: 13px;
}
html {
box-sizing: content-box;
- background-color: #e9eef2;
+ height: 100%;
}
body {
box-sizing: content-box;
height: 100%;
font-family: Arial;
- color: #6b5f6e;
- background-color: #e9eef2;
}
ul {
- border: solid 1px #ccc;
margin: 5px;
}
li {
- background-color: white;
- padding: 5px;
- font-size: 12px;
+ clear: both; list-style-type: none; list-style-position: initial; list-style-image: initial;
+ margin: 2px 0 2px 0;
+ font-size: 13px;
position: relative;
- list-style: none;
+ text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+ cursor: pointer;
+ border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
+ border-radius: 4px;
+ border: 1px solid #ccc;
+ padding: 5px 14px 6px;
+ background-color: #E6E6E6;
+ background-repeat: repeat-x
+ color: #333;
+ -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+ -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+ -webkit-transition: 0.1s linear all;
+ background-repeat: no-repeat;
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), color-stop(25%, white), to(#E6E6E6));
+ background-image: -webkit-linear-gradient(white, white 25%, #E6E6E6);
+ background-image: -moz-linear-gradient(top, white, white 25%, #E6E6E6);
+ background-image: -ms-linear-gradient(white, white 25%, #E6E6E6);
+ background-image: -o-linear-gradient(white, white 25%, #E6E6E6);
+ background-image: linear-gradient(white, white 25%, #E6E6E6);
+ }
+
+ li span {
+ -webkit-transition: none;
}
- li .icon {
+ li:hover span {
+ color: white;
+ }
+
+ li:hover {
+ background-color: #0064CD;
+ background-repeat: repeat-x;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#049CDB), to(#0064CD));
+ background-image: -moz-linear-gradient(top, #049CDB, #0064CD);
+ background-image: -ms-linear-gradient(top, #049CDB, #0064CD);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049CDB), color-stop(100%, #0064CD));
+ background-image: -webkit-linear-gradient(top, #049CDB, #0064CD);
+ background-image: -o-linear-gradient(top, #049CDB, #0064CD);
+ background-image: linear-gradient(top, #049CDB, #0064CD);
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ border-color: #0064CD #0064CD #003F81;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+ }
+
+ li img {
+ margin-right: 5px;
max-width: 64px;
+ float:left;
max-height: 64px;
- float: left;
- margin: 2px;
}
- li h2 {
- font-size: 12px;
+ li a {
+ color: #333;
+ }
+
+ li span {
+ display:block;
+ }
+
+ li:hover a {
+ color: white;
}
</style>
<body>
@@ -105,7 +153,7 @@
{% for intent in intents %}
<li>
<img class="icon" src="{{intent.icon}}">
- <h2><a href="{{intent.href}}" data-disposition="{{intent.disposition}}">{{intent.title}}</a></h2>
+ <a href="{{intent.href}}" data-disposition="{{intent.disposition}}">{{intent.title}}</a>
<span class="domain">{{intent.domain}}</span>
<br style="clear:both;" />
</li>
5 server/webintents/static/controller.js
View
@@ -50,7 +50,7 @@ var IntentController = new (function() {
}
};
- var launch = function(intent, disposition) {
+ var launch = function(intent, disposition, href) {
return function(e) {
if(!!e.preventDefault)
e.preventDefault();
@@ -59,7 +59,6 @@ var IntentController = new (function() {
var intentStr = window.btoa(unescape(encodeURIComponent(JSON.stringify(intent)))).replace(/=/g, "_");
- var href = (e.srcElement || e.target).href;
if(!!intent && !!intent._callback == false) {
// There is no callback so remove any reference to the intent.
localStorage.removeItem(intent._id);
@@ -94,7 +93,7 @@ var IntentController = new (function() {
setText(actionLink, action.title);
if(!!intent)
- attachEventListener(actionLink, "click", launch(intent, action.disposition), false);
+ attachEventListener(actionElement, "click", launch(intent, action.disposition, action.url), false);
setText(domain, action.domain || "Unknown domain");
111 server/webintents/static/picker.html
View
@@ -12,38 +12,84 @@
body, h1, h2, ul, li {
margin: 0;
padding: 0;
+ font-size: 13px;
}
html {
box-sizing: content-box;
height: 100%;
- background-color: #e9eef2;
}
body {
box-sizing: content-box;
height: 100%;
font-family: Arial;
- color: #6b5f6e;
- background-color: #e9eef2;
}
ul {
- border: solid 1px #ccc;
margin: 5px;
}
li {
- background-color: white;
- padding: 5px;
- font-size: 12px;
+ font-size: 13px;
position: relative;
+ text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+ cursor: pointer;
+ border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
+ border-radius: 4px;
+ border: 1px solid #ccc;
+ padding: 5px 14px 6px;
+ background-color: #E6E6E6;
+ background-repeat: repeat-x
+ color: #333;
+ -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+ -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+ -webkit-transition: 0.1s linear all;
+ background-repeat: no-repeat;
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), color-stop(25%, white), to(#E6E6E6));
+ background-image: -webkit-linear-gradient(white, white 25%, #E6E6E6);
+ background-image: -moz-linear-gradient(top, white, white 25%, #E6E6E6);
+ background-image: -ms-linear-gradient(white, white 25%, #E6E6E6);
+ background-image: -o-linear-gradient(white, white 25%, #E6E6E6);
+ background-image: linear-gradient(white, white 25%, #E6E6E6);
}
- li img.star {
- position: absolute;
- top: 10px;
- right: 10px;
+ li span {
+ -webkit-transition: none;
+ }
+
+ li:hover span {
+ color: white;
+ }
+
+ li:hover {
+ background-color: #0064CD;
+ background-repeat: repeat-x;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#049CDB), to(#0064CD));
+ background-image: -moz-linear-gradient(top, #049CDB, #0064CD);
+ background-image: -ms-linear-gradient(top, #049CDB, #0064CD);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049CDB), color-stop(100%, #0064CD));
+ background-image: -webkit-linear-gradient(top, #049CDB, #0064CD);
+ background-image: -o-linear-gradient(top, #049CDB, #0064CD);
+ background-image: linear-gradient(top, #049CDB, #0064CD);
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ border-color: #0064CD #0064CD #003F81;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+ }
+
+ li img {
+ margin-right: 5px;
+ max-width: 64px;
+ max-width: 64px;
+ }
+
+ li a {
+ color: #333;
+ }
+
+ li:hover a {
+ color: white;
}
#actions span {
@@ -51,23 +97,8 @@
margin-left: 16px;
}
- #header {
+ .header {
padding: 5px;
- font-size: 12px;
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.09, #d5dde6),
- color-stop(0.69, #cad3dd)
- );
-
- background-image: -moz-linear-gradient(
- center bottom,
- rgb(196,196,196) 9%,
- rgb(237,232,233) 69%
- );
- border-bottom: solid 1px #888888;
}
#inline {
@@ -87,29 +118,19 @@
width: 100%;
border: none;
}
-
- h2 {
- font-size: 12px;
- padding: 5px;
- }
-
- #header h2 {
- padding: 0px;
- }
</style>
</head>
<body>
- <div id="header">
- <h2>Choose an activity</h2>
- <p>Please choose the activity you wish to launch for this action.</p>
+ <div class="header">
+ <p>Please choose the application you wish to launch for this action.</p>
<div>View <a href="list.html" target="_blank">Registered Applications</a></div>
</div>
- <ul id="actions">
-
- </ul>
- <h2>Suggested applications</h2>
- <iframe id="suggestions"> </iframe>
- <iframe id="inline" allowTransparency="false" style="background-color: white;">
+ <ul id="actions"></ul>
+ <div class="header">
+ <h2>Suggested applications</h2>
+ <iframe id="suggestions"> </iframe>
+ <iframe id="inline" allowTransparency="false" style="background-color: white;">
</iframe>
+ </div>
</body>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.