Skip to content

Commit 8393bd3

Browse files
PaulKinlanPaulKinlan
committed
#152 makes the UI a little prettier
1 parent 210ec92 commit 8393bd3

File tree

3 files changed

+131
-63
lines changed

3 files changed

+131
-63
lines changed

‎server/registry/results/results.html

Lines changed: 63 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -58,54 +58,102 @@
5858
});
5959
</script>
6060
<style>
61-
body, h1, h2, ul, li {
61+
body, h1, h2, ul, li {
6262
margin: 0;
6363
padding: 0;
64+
font-size: 13px;
6465
}
6566

6667
html {
6768
box-sizing: content-box;
68-
background-color: #e9eef2;
69+
height: 100%;
6970
}
7071

7172
body {
7273
box-sizing: content-box;
7374
height: 100%;
7475
font-family: Arial;
75-
color: #6b5f6e;
76-
background-color: #e9eef2;
7776
}
7877

7978
ul {
80-
border: solid 1px #ccc;
8179
margin: 5px;
8280
}
8381

8482
li {
85-
background-color: white;
86-
padding: 5px;
87-
font-size: 12px;
83+
clear: both; list-style-type: none; list-style-position: initial; list-style-image: initial;
84+
margin: 2px 0 2px 0;
85+
font-size: 13px;
8886
position: relative;
89-
list-style: none;
87+
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
88+
cursor: pointer;
89+
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
90+
border-radius: 4px;
91+
border: 1px solid #ccc;
92+
padding: 5px 14px 6px;
93+
background-color: #E6E6E6;
94+
background-repeat: repeat-x
95+
color: #333;
96+
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
97+
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
98+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
99+
-webkit-transition: 0.1s linear all;
100+
background-repeat: no-repeat;
101+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), color-stop(25%, white), to(#E6E6E6));
102+
background-image: -webkit-linear-gradient(white, white 25%, #E6E6E6);
103+
background-image: -moz-linear-gradient(top, white, white 25%, #E6E6E6);
104+
background-image: -ms-linear-gradient(white, white 25%, #E6E6E6);
105+
background-image: -o-linear-gradient(white, white 25%, #E6E6E6);
106+
background-image: linear-gradient(white, white 25%, #E6E6E6);
107+
}
108+
109+
li span {
110+
-webkit-transition: none;
90111
}
91112

92-
li .icon {
113+
li:hover span {
114+
color: white;
115+
}
116+
117+
li:hover {
118+
background-color: #0064CD;
119+
background-repeat: repeat-x;
120+
background-image: -khtml-gradient(linear, left top, left bottom, from(#049CDB), to(#0064CD));
121+
background-image: -moz-linear-gradient(top, #049CDB, #0064CD);
122+
background-image: -ms-linear-gradient(top, #049CDB, #0064CD);
123+
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049CDB), color-stop(100%, #0064CD));
124+
background-image: -webkit-linear-gradient(top, #049CDB, #0064CD);
125+
background-image: -o-linear-gradient(top, #049CDB, #0064CD);
126+
background-image: linear-gradient(top, #049CDB, #0064CD);
127+
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
128+
border-color: #0064CD #0064CD #003F81;
129+
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
130+
}
131+
132+
li img {
133+
margin-right: 5px;
93134
max-width: 64px;
135+
float:left;
94136
max-height: 64px;
95-
float: left;
96-
margin: 2px;
97137
}
98138

99-
li h2 {
100-
font-size: 12px;
139+
li a {
140+
color: #333;
141+
}
142+
143+
li span {
144+
display:block;
145+
}
146+
147+
li:hover a {
148+
color: white;
101149
}
102150
</style>
103151
<body>
104152
<ul>
105153
{% for intent in intents %}
106154
<li>
107155
<img class="icon" src="{{intent.icon}}">
108-
<h2><a href="{{intent.href}}" data-disposition="{{intent.disposition}}">{{intent.title}}</a></h2>
156+
<a href="{{intent.href}}" data-disposition="{{intent.disposition}}">{{intent.title}}</a>
109157
<span class="domain">{{intent.domain}}</span>
110158
<br style="clear:both;" />
111159
</li>

‎server/webintents/static/controller.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ var IntentController = new (function() {
5050
}
5151
};
5252

53-
var launch = function(intent, disposition) {
53+
var launch = function(intent, disposition, href) {
5454
return function(e) {
5555
if(!!e.preventDefault)
5656
e.preventDefault();
@@ -59,7 +59,6 @@ var IntentController = new (function() {
5959

6060
var intentStr = window.btoa(unescape(encodeURIComponent(JSON.stringify(intent)))).replace(/=/g, "_");
6161

62-
var href = (e.srcElement || e.target).href;
6362
if(!!intent && !!intent._callback == false) {
6463
// There is no callback so remove any reference to the intent.
6564
localStorage.removeItem(intent._id);
@@ -94,7 +93,7 @@ var IntentController = new (function() {
9493
setText(actionLink, action.title);
9594

9695
if(!!intent)
97-
attachEventListener(actionLink, "click", launch(intent, action.disposition), false);
96+
attachEventListener(actionElement, "click", launch(intent, action.disposition, action.url), false);
9897

9998
setText(domain, action.domain || "Unknown domain");
10099

‎server/webintents/static/picker.html

Lines changed: 66 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -12,62 +12,93 @@
1212
body, h1, h2, ul, li {
1313
margin: 0;
1414
padding: 0;
15+
font-size: 13px;
1516
}
1617

1718
html {
1819
box-sizing: content-box;
1920
height: 100%;
20-
background-color: #e9eef2;
2121
}
2222

2323
body {
2424
box-sizing: content-box;
2525
height: 100%;
2626
font-family: Arial;
27-
color: #6b5f6e;
28-
background-color: #e9eef2;
2927
}
3028

3129
ul {
32-
border: solid 1px #ccc;
3330
margin: 5px;
3431
}
3532

3633
li {
37-
background-color: white;
38-
padding: 5px;
39-
font-size: 12px;
34+
font-size: 13px;
4035
position: relative;
36+
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
37+
cursor: pointer;
38+
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
39+
border-radius: 4px;
40+
border: 1px solid #ccc;
41+
padding: 5px 14px 6px;
42+
background-color: #E6E6E6;
43+
background-repeat: repeat-x
44+
color: #333;
45+
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
46+
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
47+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
48+
-webkit-transition: 0.1s linear all;
49+
background-repeat: no-repeat;
50+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), color-stop(25%, white), to(#E6E6E6));
51+
background-image: -webkit-linear-gradient(white, white 25%, #E6E6E6);
52+
background-image: -moz-linear-gradient(top, white, white 25%, #E6E6E6);
53+
background-image: -ms-linear-gradient(white, white 25%, #E6E6E6);
54+
background-image: -o-linear-gradient(white, white 25%, #E6E6E6);
55+
background-image: linear-gradient(white, white 25%, #E6E6E6);
4156
}
4257

43-
li img.star {
44-
position: absolute;
45-
top: 10px;
46-
right: 10px;
58+
li span {
59+
-webkit-transition: none;
60+
}
61+
62+
li:hover span {
63+
color: white;
64+
}
65+
66+
li:hover {
67+
background-color: #0064CD;
68+
background-repeat: repeat-x;
69+
background-image: -khtml-gradient(linear, left top, left bottom, from(#049CDB), to(#0064CD));
70+
background-image: -moz-linear-gradient(top, #049CDB, #0064CD);
71+
background-image: -ms-linear-gradient(top, #049CDB, #0064CD);
72+
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049CDB), color-stop(100%, #0064CD));
73+
background-image: -webkit-linear-gradient(top, #049CDB, #0064CD);
74+
background-image: -o-linear-gradient(top, #049CDB, #0064CD);
75+
background-image: linear-gradient(top, #049CDB, #0064CD);
76+
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
77+
border-color: #0064CD #0064CD #003F81;
78+
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
79+
}
80+
81+
li img {
82+
margin-right: 5px;
83+
max-width: 64px;
84+
max-width: 64px;
85+
}
86+
87+
li a {
88+
color: #333;
89+
}
90+
91+
li:hover a {
92+
color: white;
4793
}
4894

4995
#actions span {
5096
display: block;
5197
margin-left: 16px;
5298
}
5399

54-
#header {
100+
.header {
55101
padding: 5px;
56-
font-size: 12px;
57-
background-image: -webkit-gradient(
58-
linear,
59-
left bottom,
60-
left top,
61-
color-stop(0.09, #d5dde6),
62-
color-stop(0.69, #cad3dd)
63-
);
64-
65-
background-image: -moz-linear-gradient(
66-
center bottom,
67-
rgb(196,196,196) 9%,
68-
rgb(237,232,233) 69%
69-
);
70-
border-bottom: solid 1px #888888;
71102
}
72103

73104
#inline {
@@ -87,29 +118,19 @@
87118
width: 100%;
88119
border: none;
89120
}
90-
91-
h2 {
92-
font-size: 12px;
93-
padding: 5px;
94-
}
95-
96-
#header h2 {
97-
padding: 0px;
98-
}
99121
</style>
100122
</head>
101123
<body>
102-
<div id="header">
103-
<h2>Choose an activity</h2>
104-
<p>Please choose the activity you wish to launch for this action.</p>
124+
<div class="header">
125+
<p>Please choose the application you wish to launch for this action.</p>
105126
<div>View <a href="list.html" target="_blank">Registered Applications</a></div>
106127
</div>
107-
<ul id="actions">
108-
109-
</ul>
110-
<h2>Suggested applications</h2>
111-
<iframe id="suggestions"> </iframe>
112-
<iframe id="inline" allowTransparency="false" style="background-color: white;">
128+
<ul id="actions"></ul>
129+
<div class="header">
130+
<h2>Suggested applications</h2>
131+
<iframe id="suggestions"> </iframe>
132+
<iframe id="inline" allowTransparency="false" style="background-color: white;">
113133
</iframe>
134+
</div>
114135
</body>
115136
</html>

0 commit comments

Comments
 (0)