Merge lp:~franku/widelands-website/css_changes into lp:widelands-website

Proposed by kaputtnik on 2015-09-16
Status: Merged
Merged at revision: 398
Proposed branch: lp:~franku/widelands-website/css_changes
Merge into: lp:widelands-website
Diff against target: 350 lines (+46/-93)
9 files modified
README.txt (+12/-0)
media/css/base.css (+17/-10)
media/css/forum.css (+6/-6)
media/css/help.css (+1/-1)
media/css/navigation.css (+5/-6)
media/css/poll.css (+0/-58)
media/css/wiki.css (+5/-9)
templates/wiki/view.html (+0/-2)
templates/wlpoll/base.html (+0/-1)
To merge this branch: bzr merge lp:~franku/widelands-website/css_changes
Reviewer Review Type Date Requested Status
SirVer 2015-09-16 Approve on 2015-09-21
Review via email: mp+271388@code.launchpad.net

Description of the change

This branch contains changes to font-size and line height and changes them from fixed to relative. This will pay attention to font related settings of a browser. See https://wl.widelands.org/forum/topic/1797/ for the main reason. Some other css changes are also included. In detail:

* changed fixed font-size to relative font sizes.
* changed fixed line-height to relative line-height
* add more space between two paragraphs
* Border of tables in forum gets better visibility (dark gray instead of black)
* top and bottom margins of headers are now the same in forum and wiki
* removed small code in template "/wiki/view.html" because a link to "Create this article?" is already shown
* removed poll.css because it's unused (the css-styles for displaying polls are all done in the javascript code)
* removed general shadowing of fonts, instead adding a new class "shaded" which could be used where it is needed
* small corrections of colors, where i feel it would look better (f.e.text shadow)

I tried to get as close to the current state while changing the values.

The stylesheets for the developers documentation is untouched, because i couldn't verify the results yet.

Some disadvantages of the font-size changes:

1.Text in codeblocks are mostly displayed smaller than with fixed font-size, depending on the browser a user uses. Thats because each browser has his own font-settings for codeblocks. In firefox they are much smaller than in chrome. If needed we could set a fixed font-size for codeblocks.

2.Bold formatted texts looks a little bit blurry. I noticed it f.e. on the "Latest Post" block on the right. That's because the translation of relative values into pixels results mostly in something like "14.234 pixel" which most displays couldn't display. See http://www.w3.org/Style/Examples/007/units.de.html#font-size for an explanation.

Please ask for screenshots if you are unsure about some things.

To post a comment you must log in.
GunChleoc (gunchleoc) wrote :

I haven't found the time to try to resolve my local website deployment problems. Code LGTM though.

Maybe you could create a screenshot to post on the forums for people to give feedback?

kaputtnik (franku) wrote :

Please wait with merging, there are some changes and i will update the branch soon.

399. By kaputtnik on 2015-09-20

shodow_reverted

kaputtnik (franku) wrote :

Uodated... damn, there is unused code. I have to update again :-S

400. By kaputtnik on 2015-09-20

removed unused code

kaputtnik (franku) wrote :

Updated.

Changes to text-shadow are reverted, so text-shadow is like the current state.

Additional changes: The menu entries are font-size dependent in width. So if someone changes the font size in his browser, the width of the entries gets adjusted too.

I provide screenshots in the forum topic https://wl.widelands.org/forum/topic/1797/

401. By kaputtnik on 2015-09-20

adjusted font-size for codeblocks

SirVer (sirver) wrote :

Merged and deployed! Thanks.

review: Approve
kaputtnik (franku) wrote :

Thanks, all works as suspected :-)

I think no one would notice the changes... but if there are any unwanted changes, please report in the forum topic: https://wl.widelands.org/forum/topic/1797/

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'README.txt'
2--- README.txt 2012-12-19 20:31:27 +0000
3+++ README.txt 2015-09-20 16:32:14 +0000
4@@ -62,6 +62,18 @@
5
6 $ ln -s local_urls.py.sample local_urls.py
7 $ ln -s local_settings.py.sample local_settings.py
8+
9+There has to be some corrections to get into the admin pages:
10+
11+Either copy the folders "media" and "templates"
12+
13+ from: ~/wlwebsite/django/contrib/admin
14+ to: ~/wlwebsite/lib/python2.7/site-packages/django/contrib/admin/
15+
16+or create symlinks:
17+
18+ $ ln -s ~/wlwebsite/django/contrib/admin/templates/ ~/wlwebsite/lib/python2.7/site-packages/django/contrib/admin/templates
19+ $ ln -s ~/wlwebsite/django/contrib/admin/media/ ~/wlwebsite/lib/python2.7/site-packages/django/contrib/admin/media
20
21 Setting up the database
22 ^^^^^^^^^^^^^^^^^^^^^^^
23
24=== modified file 'media/css/base.css'
25--- media/css/base.css 2015-01-08 21:40:25 +0000
26+++ media/css/base.css 2015-09-20 16:32:14 +0000
27@@ -9,10 +9,10 @@
28 background-color: #e9c78a;
29 background-image: url("../img/parchment.png");
30 font-family: sans-serif;
31- font-size: 14px;
32- line-height: 20px;
33+ font-size: 0.88em;
34+ line-height: 1.4em;
35 color: #ffffee;
36- text-shadow: #000000 1px 1px 0px;
37+ text-shadow: 1px 1px 0px #000000;
38 }
39
40 /*+++++++++++++++++++++++++*/
41@@ -84,6 +84,7 @@
42
43 code {
44 background-image: url("../img/black50.png");
45+ font-size: 14px;
46 }
47 /*No double background*/
48 pre > code {
49@@ -100,17 +101,16 @@
50 background-image: url("../img/black50.png");
51 outline: none;
52 color: #ffffff;
53- text-shadow: #000000 1px 1px 0px;
54 vertical-align: middle;
55 cursor: pointer;
56 font-family: inherit;
57- font-size: 12px;
58+ font-size: 0.85em;
59 font-weight: bold;
60 }
61
62 textarea {
63 font-weight: normal;
64- font-size: 14px;
65+ font-size: 0.9em;
66 }
67
68 input:hover, button:hover, textarea:hover {
69@@ -129,13 +129,18 @@
70 font-weight: normal;
71 }
72
73+/* different margin for headers where text could be written */
74+div.blogEntry h1, h2, h3, h4, h5, h6 {
75+ margin: 0.8em 0em 0.5em 0em;
76+}
77+
78 svg {
79 text-shadow: none;
80 }
81
82 td {
83 vertical-align: top;
84- line-height: 20px;
85+ line-height: 1.4em;
86 }
87
88 .posLeft {
89@@ -174,7 +179,7 @@
90 color: #ffffee;
91 }
92 .small {
93- font-size: 12px;
94+ font-size: 0.83em;
95 }
96
97 a.small {
98@@ -271,11 +276,12 @@
99 margin: 0px;
100 padding: 0px;
101 list-style-type: none;
102- line-height: 18px;
103+ line-height: 1.5em;
104 }
105
106 div.loginBox h4 {
107 margin-bottom: 5px;
108+ margin-top: 0px;
109 }
110
111 div.loginBox input {
112@@ -325,6 +331,7 @@
113 border-radius: 4px;
114 }
115
116+
117 div.columnModuleBox h4 {
118 color: #ffffee;
119 padding: 8px;
120@@ -370,7 +377,7 @@
121 display: block;
122 padding: 8px;
123 border-top: 1px solid black;
124- font-size: 12px;
125+ font-size: 0.8em;
126 }
127
128 div.columnModuleBox ul li:first-child {
129
130=== modified file 'media/css/forum.css'
131--- media/css/forum.css 2015-04-01 20:01:41 +0000
132+++ media/css/forum.css 2015-09-20 16:32:14 +0000
133@@ -54,7 +54,7 @@
134 /******************/
135
136 tr.spacer {
137- height: 10px;
138+ height: 1em;
139 border: none;
140 }
141
142@@ -71,8 +71,8 @@
143
144 .authorStats {
145 text-align: left;
146- font-size: 10px;
147- line-height: 12px;
148+ font-size: 0.7em;
149+ line-height: 1.1em;
150 }
151
152 /*****************/
153@@ -94,7 +94,7 @@
154 }
155
156 div.blogEntry .post p {
157- margin-bottom: 4px;
158+ margin-bottom: 0.5em;
159 }
160
161 .post blockquote {
162@@ -114,12 +114,12 @@
163
164 .post th {
165 padding: 0 1em 0 1em;
166- border: 1px solid black;
167+ border: 1px solid #474444;
168 }
169
170 .post td {
171 padding: 0 1em 0 1em;
172- border: 1px solid black;
173+ border: 1px solid #474444;
174 }
175
176 /*****************/
177
178=== modified file 'media/css/help.css'
179--- media/css/help.css 2012-05-19 19:55:15 +0000
180+++ media/css/help.css 2015-09-20 16:32:14 +0000
181@@ -11,7 +11,7 @@
182 table.help th {
183 padding: 4px;
184 font-weight: normal;
185- font-size: 12px;
186+ font-size: 0.8em;
187 text-align: left;
188 }
189
190
191=== modified file 'media/css/navigation.css'
192--- media/css/navigation.css 2013-10-27 11:49:24 +0000
193+++ media/css/navigation.css 2015-09-20 16:32:14 +0000
194@@ -58,13 +58,12 @@
195
196 ul.menu li a {
197 display: block;
198- width: 120px;
199+ width: 8.5em;
200 height: 50px;
201- line-height: 50px;
202+ line-height: 3.5em;
203 float: left;
204 border-right: 1px solid black;
205 text-align: center;
206- vertical-align: middle;
207 color: #ffffff;
208 text-transform: uppercase;
209 font-weight: normal;
210@@ -106,12 +105,12 @@
211
212 ul.menu li ul li a {
213 display: block;
214- width: 255px;
215+ width: 21.5em;
216 height: 20px;
217- line-height: 20px;
218+ line-height: 1.7em;
219 padding: 4px;
220 text-align: left;
221- font-size: 12px;
222+ font-size: 0.8em;
223 border: none;
224 }
225
226
227=== removed file 'media/css/poll.css'
228--- media/css/poll.css 2009-03-28 13:38:44 +0000
229+++ media/css/poll.css 1970-01-01 00:00:00 +0000
230@@ -1,58 +0,0 @@
231-
232-.poll_plot {
233- text-align: center;
234- width: 100%;
235-}
236-
237-.post_date { font-size: 90%;}
238-
239-.poll {
240- border: 1px solid rgb(9, 9, 9);
241- width: 100%;
242-}
243-
244-.poll h3.title {
245- font-weight: bold;
246- font-size: 12px;
247- padding-left: 12px;
248- background-image: url('../img/Navbar.png');
249- background-repeat: repeat-x;
250- border-left: 0px solid #999999;
251- border-right: 0px solid #999999;
252- border-bottom: 0px solid #999999;
253- padding-top: 2px;
254- padding-bottom: 0px;
255- margin: 0px;
256-}
257-.poll .content {
258- line-height: 120%;
259- border: 0px;
260- padding: 2px;
261- padding-top: 5px;
262- padding-left: 15px;
263- background-color: #3F3F3F;
264- background: url(../img/background-3F3F3F.png);
265-}
266-
267-.poll .info_line {
268- text-align: right;
269- padding: 3px;
270- margin: 0px;
271- background-color: #222222;
272- background: url(../img/background-222.png);
273-}
274-
275-.poll .bottom_line {
276- background-color: #222222;
277- background: url(../img/background-222.png);
278- table-layout: fixed;
279-}
280-.poll .comments {
281- text-align: left;
282-}
283-.poll .admin {
284- text-align: center;
285-}
286-
287-
288-
289
290=== modified file 'media/css/wiki.css'
291--- media/css/wiki.css 2015-04-01 20:01:41 +0000
292+++ media/css/wiki.css 2015-09-20 16:32:14 +0000
293@@ -3,15 +3,15 @@
294 display: inline-block;
295 padding: 0px 8px;
296 background-image: url("../img/black20.png");
297- font-size: 12px;
298+ font-size: 0.8em;
299 margin: 0em 0em 1em 1em;
300- line-height: 18px;
301+ line-height: 1.5em;
302 float: right;
303 max-width: 20em;
304 }
305-
306+
307 .toc ul {
308- padding-left: 20px;
309+ padding-left: 1.8em;
310 }
311
312 /***********/
313@@ -93,12 +93,8 @@
314 margin-top: 4px; /*Correction for donatebox*/
315 }
316
317-h1, h2, h3, h4, h5, h6 {
318- margin: 1em 0em 0.5em 0em;
319-}
320-
321 h1:first-child, h2:first-child {
322- margin-top: 0.5em;
323+ margin-top: 0.2em !important;
324 }
325
326
327
328=== modified file 'templates/wiki/view.html'
329--- templates/wiki/view.html 2012-09-10 10:13:04 +0000
330+++ templates/wiki/view.html 2015-09-20 16:32:14 +0000
331@@ -26,8 +26,6 @@
332 <a class="invertedColor" href="{% url wiki_observe article.title %}">{% trans "Observe" %}</a>
333 {% endif %}
334 {% endif %}
335- {% else %}
336- <a class="invertedColor" href="{% url wiki_edit article.title %}">{% trans "Create this article" %}</a>
337 {% endif %}
338 </div>
339 <h1>{{ article.title }}</h1>
340
341=== modified file 'templates/wlpoll/base.html'
342--- templates/wlpoll/base.html 2015-02-18 22:30:08 +0000
343+++ templates/wlpoll/base.html 2015-09-20 16:32:14 +0000
344@@ -6,7 +6,6 @@
345 {% block extra_head %}
346 {{block.super}}
347 <link rel="stylesheet" type="text/css" media="all" href="{{ MEDIA_URL }}css/comments.css" />
348-<link rel="stylesheet" type="text/css" media="all" href="{{ MEDIA_URL }}css/poll.css" />
349 <script src="{{ MEDIA_URL }}js/highcharts_219/highcharts.js" type="text/javascript"></script>
350 {% endblock %}
351

Subscribers

People subscribed via source and target branches