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  }

Impressum / About Us