Ubuntu Software Center

Merge lp:~mpt/software-center/css into lp:software-center

  1. css
  2. Merge into trunk
Proposed by Matthew Paul Thomas
Status: Merged
Merged at revision: not available
Proposed branch: lp:~mpt/software-center/css
Merge into: lp:software-center
Diff against target: None lines
To merge this branch: bzr merge lp:~mpt/software-center/css
Reviewer Review Type Date Requested Status
software-store-developers Pending
Review via email: mp+11478@code.launchpad.net
To post a comment you must log in.
Revision history for this message
Matthew Paul Thomas (mpt) wrote :

Improves the appearance of the lobby screen, including larger icons laid out in a grid.

Improves the layout of the application screen, and makes it match the color scheme of the lobby when in the "Get Free Software" section.

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'data/templates/AppDetailsView.html'
2--- data/templates/AppDetailsView.html 2009-09-09 20:36:44 +0000
3+++ data/templates/AppDetailsView.html 2009-09-09 21:11:23 +0000
4@@ -35,13 +35,30 @@
5 }
6 </script>
7
8- <style type="text/css">
9- #appname {font-size:120%;}
10- #description {font-size:80%}
11- #icon {width:64px; height:64px; padding:10px; z-index:-1; background: url('file:$iconpath') no-repeat; position:absolute; -webkit-background-size: ${icon_width}px ${icon_height}px;}
12- #screenshot_thumbnail_loading {float:right; padding:10px; width:160px; height:120px; background:#fff url('file:$iconpath_loading') 50% 50% no-repeat;}
13+ <style type="text/css">
14+ body {margin: 0; padding: 1em 12px;}
15+ body.section-get {background-color:#b6bdc4; color: #000;}
16+ h1 {font-size:100%; font-weight: normal; margin: 0 0 1em;}
17+ #description {font-size: 80%;}
18+ #icon {
19+ width:64px;
20+ height:64px;
21+ z-index:-1;
22+ background: url('file:$iconpath') top center no-repeat;
23+ position:absolute;
24+ -webkit-background-clip: border-box;
25+ -webkit-background-origin: border-box;
26+ -webkit-background-size: ${icon_width}px ${icon_height}px;
27+ }
28+ #screenshot_thumbnail_loading {
29+ background: url('file:$iconpath_loading') 50% 50% no-repeat;
30+ float:right;
31+ height:120px;
32+ margin: 0 0 1em 1em;
33+ width:160px;
34+ }
35 #screenshot_thumbnail {visibility:hidden}
36- #text {float:left; padding-left:64px; width:90%; }
37+ #text {float:left; padding-left:86px;}
38 #installed_overlay { z-index:999; width:24px; height:24px; background: url('file:${software_installed_icon}'); position:absolute; left:40px; top:40px; visibility:${installed} }
39 #package_information { font-size:70%; }
40 #maintainance_time { font-size:70%; }
41@@ -54,10 +71,13 @@
42 </head>
43
44 <body class="${body_class}">
45- <div id="icon"></div>
46- <div id="installed_overlay"></div>
47+
48+ <div id="icon">
49+ <div id="installed_overlay"></div>
50+ </div>
51+
52 <div id="text">
53- <p id="appname">$appname</p>
54+ <h1>$appname</h1>
55 <div id='screenshot_thumbnail_loading'>
56 <img id="screenshot_thumbnail" src="http://screenshots.debian.net/thumbnail/$pkgname" alt="Application Screenshot"/>
57 </div>
58
59=== modified file 'data/templates/CategoriesView.html'
60--- data/templates/CategoriesView.html 2009-09-09 20:51:29 +0000
61+++ data/templates/CategoriesView.html 2009-09-09 21:19:50 +0000
62@@ -34,21 +34,41 @@
63 oT.appendChild(newTr);
64 }
65 </script>
66- <style type="text/css">
67- body { background-color:#b6bdc4; font-size:100%; padding:2px 10px; color:#000 }
68- #header {font-size:100%; padding:10px; background-color:#7D91AA; border:2px solid #3F4B5A}
69+ <style type="text/css">
70+ body {background-color:#b6bdc4; margin: 0; padding: 1em; color:#000;}
71+ h2 {
72+ background-color: #7D91aa;
73+ border-style: solid;
74+ border-width: 0 0 1px 0;
75+ border-color: #E2E7EC #404a57 #404a57 #E2E7EC;
76+ color: #fff;
77+ font-size: 100%;
78+ font-weight: normal;
79+ padding: 0.25em 0.5em;
80+ margin: 0;
81+ text-shadow: #404a57 0 -1px 1px;
82+ }
83 /* debug border */
84 /* .category_td {border-width:1px;border-style:solid;} */
85 /* fixed width does not work, it does not ellipsis but overflows the box */
86 /* .category_td {padding:8px; margin:8px; width:6em; display:inline-block; text-overflow: ellipsis;} */
87- .category_td {padding:8px; margin:8px; display:inline-block; text-overflow: ellipsis;}
88- .category_td:hover { cursor: pointer; opacity:0.65; }
89+
90+ .category_td {
91+ padding: 0 8px;
92+ display:inline-block;
93+ text-overflow: ellipsis;
94+ vertical-align: top;
95+ width: 8em !important;
96+ }
97+ .category_td:hover {cursor: pointer;}
98+ .category_td:active {background-color: #7D91aa;}
99+
100 .category_td p { font-size:90%; text-align:center; }
101 </style>
102 </head>
103
104 <body>
105- <p id="header">Departments</p>
106+ <h2>Departments</h2>
107 <table>
108 <tr></tr>
109 </table>