liquid_feedback_frontend
diff static/style.css @ 373:76d7eafb3893
Make things work with small screens like mobile devices in portrait mode
author | bsw |
---|---|
date | Sat Mar 03 17:28:55 2012 +0100 (2012-03-03) |
parents | 74f768a162e1 |
children | 89d32158bfd5 |
line diff
1.1 --- a/static/style.css Thu Mar 01 22:56:35 2012 +0100 1.2 +++ b/static/style.css Sat Mar 03 17:28:55 2012 +0100 1.3 @@ -1,3 +1,4 @@ 1.4 + 1.5 /* Style reset */ 1.6 html, 1.7 body, 1.8 @@ -63,10 +64,6 @@ 1.9 margin-top: 1ex; 1.10 } 1.11 1.12 -.area_list { 1.13 - line-height: 140%; 1.14 -} 1.15 - 1.16 body, a { 1.17 color: #000; 1.18 } 1.19 @@ -164,9 +161,9 @@ 1.20 color: #fff; 1.21 font-size: 90%; 1.22 line-height: 100%; 1.23 - padding-left: 10px; 1.24 + padding-left: 1%; 1.25 + box-shadow: #aaa 0 0 5px; 1.26 overflow: hidden; 1.27 - box-shadow: #aaa 0 0 5px; 1.28 -mox-box-shadow: #aaa 0 0 5px; 1.29 -webkit-box-shadow: #aaa 0 0 5px; 1.30 } 1.31 @@ -184,35 +181,29 @@ 1.32 color: #000; 1.33 } 1.34 1.35 -.navigation, 1.36 -.logout_button { 1.37 +.navigation { 1.38 line-height: 200%; 1.39 } 1.40 1.41 -.navigation img, 1.42 -.logout_button img { 1.43 +.navigation img { 1.44 margin-right: 0.5em; 1.45 vertical-align: middle; 1.46 } 1.47 1.48 -.navigation a, 1.49 -.logout_button a { 1.50 - padding: 1ex; 1.51 +.navigation a { 1.52 + padding: 0 0.5em; 1.53 + float: left; 1.54 + display: block; 1.55 } 1.56 1.57 form.unit_selector { 1.58 display: inline; 1.59 } 1.60 1.61 -.logout_button { 1.62 - float: right; 1.63 -} 1.64 - 1.65 .searchbox { 1.66 margin: 0; 1.67 padding: 0.1ex 1em 0ex 1em; 1.68 float: right; 1.69 - line-height: 250%; 1.70 } 1.71 1.72 .searchbox form { 1.73 @@ -250,8 +241,8 @@ 1.74 .title2, 1.75 .actions { 1.76 background-color: #f2f2f2; 1.77 - margin-left: 10px; 1.78 - margin-right: 10px; 1.79 + margin-left: 1%; 1.80 + margin-right: 1%; 1.81 } 1.82 1.83 .initiative_head .actions { 1.84 @@ -260,19 +251,11 @@ 1.85 -webkit-box-shadow: none; 1.86 } 1.87 1.88 -.actions { 1.89 - border-radius: 0 0 8px 8px; 1.90 -} 1.91 - 1.92 -.initiative_head .actions { 1.93 - background-color: #fff; 1.94 - margin: 0px; 1.95 -} 1.96 1.97 .slot_initiatives_list { 1.98 margin-top: 1ex; 1.99 - margin-left: 10px; 1.100 - margin-right: 10px; 1.101 + margin-left: 1%; 1.102 + margin-right: 1%; 1.103 background-color: #fcfcfc; 1.104 border-radius: 8px; 1.105 clear: left; 1.106 @@ -289,7 +272,7 @@ 1.107 1.108 .title { 1.109 color: #000; 1.110 - padding: 1.5ex 1em 0 1em; 1.111 + padding: 1.5ex 1ex 0 1ex; 1.112 } 1.113 1.114 .title div { 1.115 @@ -308,7 +291,7 @@ 1.116 } 1.117 1.118 .slot_title2 { 1.119 - padding: 1ex 1em 0 1em; 1.120 + padding: 1ex 1ex 0 1ex; 1.121 } 1.122 1.123 .member_list .member_image_avatar { 1.124 @@ -330,24 +313,38 @@ 1.125 padding-bottom: 1ex; 1.126 } 1.127 1.128 -.interest { 1.129 - margin-left: 1.33em; 1.130 - margin-bottom: 1.33ex; 1.131 +.actions { 1.132 + border-radius: 0 0 8px 8px; 1.133 } 1.134 1.135 -.slot_actions .interest { 1.136 - margin-left: 0em; 1.137 +.actions .interest, 1.138 +.actions .delegation, 1.139 +.actions a { 1.140 + margin-left: 1ex; 1.141 } 1.142 1.143 .actions a { 1.144 - margin-right: 1em; 1.145 - border-radius: 5px; 1.146 + margin-top: 1px; 1.147 + margin-bottom: 1px; 1.148 +} 1.149 + 1.150 +.actions .interest a, 1.151 +.actions .delegation a { 1.152 + margin: 0; 1.153 +} 1.154 + 1.155 +.initiative_head .actions { 1.156 + background-color: #fff; 1.157 + margin: 0px; 1.158 +} 1.159 + 1.160 +.actions a { 1.161 padding-right: 0.3em; 1.162 } 1.163 1.164 .slot_initiative_head { 1.165 - padding-left: 10px; 1.166 - padding-top: 2ex; 1.167 + padding-left: 1%; 1.168 + padding-top: 4ex; 1.169 } 1.170 1.171 .initiative_name { 1.172 @@ -400,7 +397,6 @@ 1.173 .actions .potential_supporter, 1.174 .vote_info .head { 1.175 float: left; 1.176 - margin-right: 1em; 1.177 } 1.178 1.179 .actions .supporter, 1.180 @@ -531,8 +527,8 @@ 1.181 */ 1.182 1.183 .main { 1.184 - margin-left: 10px; 1.185 - margin-right: 10px; 1.186 + margin-left: 1%; 1.187 + margin-right: 1%; 1.188 } 1.189 1.190 /************************************************************************* 1.191 @@ -566,11 +562,6 @@ 1.192 padding: 1ex; 1.193 } 1.194 1.195 -.ui_tabs_content { 1.196 - xborder: 1px solid #444; 1.197 - xpadding: 1ex 1ex 1ex 1ex; 1.198 -} 1.199 - 1.200 .ui_tabs_links a.yellow { 1.201 background-color: #fcc; 1.202 color: #000; 1.203 @@ -611,25 +602,22 @@ 1.204 .ui_filter { 1.205 overflow: hidden; 1.206 margin-bottom: 1ex; 1.207 -} 1.208 - 1.209 -.ui_filter_closed_head, 1.210 -.ui_filter_head { 1.211 - color: #777; 1.212 - margin-top: 1ex; 1.213 - margin-bottom: 1.5ex; 1.214 - font-size: 75%; 1.215 - float: left; 1.216 + margin-right: 1em; 1.217 } 1.218 1.219 .ui_filter_head { 1.220 + color: #777; 1.221 + margin-top: 0.5ex; 1.222 + margin-bottom: 0.5ex; 1.223 + font-size: 75%; 1.224 + float: left; 1.225 + line-height: 200%; 1.226 margin-right: 2em; 1.227 } 1.228 1.229 .ui_filter_head a { 1.230 color: #777; 1.231 padding: 0.5ex; 1.232 - margin-right: 0.2em; 1.233 } 1.234 1.235 .ui_filter_head a.active { 1.236 @@ -850,6 +838,63 @@ 1.237 1.238 1.239 1.240 +/************************************************************************* 1.241 + * Area list 1.242 + */ 1.243 + 1.244 +.area_list { 1.245 +} 1.246 + 1.247 +.area_list .area { 1.248 + line-height: 28px; 1.249 +} 1.250 + 1.251 +.area_list .area img { 1.252 + vertical-align: middle; 1.253 +} 1.254 + 1.255 +.area_list .area .info { 1.256 + float: left; 1.257 + clear: both; 1.258 +} 1.259 + 1.260 +.area_list .area .bar { 1.261 + float: left; 1.262 + padding-top: 6px 1.263 +} 1.264 + 1.265 +.area_list .area .membership, 1.266 +.area_list .area .delegatee { 1.267 + display: inline; 1.268 + width: 24px 1.269 +} 1.270 + 1.271 +.area_list .area .name { 1.272 + display: inline; 1.273 + font-weight: bold; 1.274 +} 1.275 + 1.276 +@media screen and (max-width: 480px) { 1.277 + .area_list .area .name { 1.278 + clear: left; 1.279 + display: block; 1.280 + float: left; 1.281 + margin-left: 0px; 1.282 + } 1.283 + .area_list .area .phases { 1.284 + margin-bottom: 2ex; 1.285 + } 1.286 +} 1.287 + 1.288 +.area_list .area .phases { 1.289 + float: right; 1.290 +} 1.291 + 1.292 +.area_list .area .phases div { 1.293 + float: left; 1.294 + width: 3em; 1.295 + text-align: right; 1.296 +} 1.297 1.298 /************************************************************************* 1.299 * Issues 1.300 @@ -873,7 +918,7 @@ 1.301 } 1.302 1.303 .issues .issue .issue_info { 1.304 - padding: 1ex 1em 0.3ex 1em; 1.305 + padding: 1ex 1ex 0.3ex 1ex; 1.306 line-height: 140%; 1.307 margin-bottom: 1ex; 1.308 } 1.309 @@ -904,6 +949,42 @@ 1.310 font-weight: bold; 1.311 } 1.312 1.313 +.initiative { 1.314 + margin-left: 1ex; 1.315 + margin-bottom: 1ex; 1.316 + line-height: 50%; 1.317 +} 1.318 + 1.319 +.initiative .bar { 1.320 + margin-right: 0.3em; 1.321 +} 1.322 + 1.323 +.initiative .rank, 1.324 +.initiative .bar, 1.325 +.initiative .interest { 1.326 + float: left; 1.327 + margin-right: 0.3em; 1.328 +} 1.329 + 1.330 +.initiative .interest { 1.331 + width: 16px; 1.332 + height: 16px; 1.333 + line-height: 100%; 1.334 +} 1.335 + 1.336 +.initiative .name { 1.337 + line-height: 130%; 1.338 + margin-left: 160px; 1.339 +} 1.340 + 1.341 +@media screen and (max-width: 480px) { 1.342 + .initiative .name { 1.343 + clear: left; 1.344 + margin-left: 0px; 1.345 + } 1.346 +} 1.347 + 1.348 + 1.349 .issue_initiative_list a { 1.350 font-weight: bold; 1.351 } 1.352 @@ -1225,10 +1306,6 @@ 1.353 font-weight: bold; 1.354 } 1.355 1.356 -.heading.member_area_list { 1.357 - position: absolute; 1.358 -} 1.359 - 1.360 .heading.first { 1.361 margin-top: 0; 1.362 }