liquid_feedback_frontend

diff static/style.css @ 19:00d1004545f1

Dynamic interface using XMLHttpRequests, and many other changes

Bugfixes:
- Only allow voting on admitted initiatives
- Repaired issue search
- Don't display delegations for closed issues on member page
- Don't show revoke link in initiative, when issue is already half_frozen
- Localization for voting JavaScript
- Display author of suggestions

Disclosure of voting data after voting is finished:
- Possibility to inspect every ballot including preferences
- Show number of voters preferring one initiative to another initiative

Interface behaviour changes:
- Reversed default order of drafts
- Default order of suggestions changed
- Show new drafts of initiatives only once per day in timeline

Accessibility:
- Barrier-free voting implemented
- POST links are now accessible without JavaScript
- Changed gray for unsatisfied supporters in bar graph to a lighter gray

Other interface improvements:
- Optical enhancements
- Dynamic interface using XMLHttpRequests
- Show usage terms in about section
- Show own membership in area listing
- Show uninformed supporters greyed out and marked with yellow question mark
- Warning box in non-admitted initiatives
- When voted, don't display voting notice and change label of voting link
- Show object counts in more tabulator heads
- Enlarged member statement input field

Miscellaneous:
- Code cleanup
- Added README file containing installation instructions
- Use new WebMCP function ui.filters{...} instead of own ui.filter and ui.order functions
author bsw/jbe
date Sat Feb 20 22:10:31 2010 +0100 (2010-02-20)
parents 559c6be0e1e9
children b195682957dc
line diff
     1.1 --- a/static/style.css	Tue Feb 02 00:31:06 2010 +0100
     1.2 +++ b/static/style.css	Sat Feb 20 22:10:31 2010 +0100
     1.3 @@ -4,11 +4,16 @@
     1.4  
     1.5  body, th, td {
     1.6    font-family: sans-serif;
     1.7 +  font-size: 15px;
     1.8    font-size: 14px;
     1.9    padding: 0;
    1.10    margin: 0;
    1.11  }
    1.12  
    1.13 +.area_list {
    1.14 +  line-height: 170%;
    1.15 +}
    1.16 +
    1.17  body, a {
    1.18    color: #000;
    1.19  }
    1.20 @@ -54,7 +59,7 @@
    1.21  }
    1.22  
    1.23  a {
    1.24 -  vertical-align: middle;
    1.25 +  xvertical-align: middle;
    1.26  }
    1.27  
    1.28  h1 {
    1.29 @@ -104,6 +109,8 @@
    1.30    background-color: #444;
    1.31    color: #fff;
    1.32    font-size: 75%;
    1.33 +  line-height: 140%;
    1.34 +  margin-bottom: 1.8ex;
    1.35  }
    1.36  
    1.37  .topbar a {
    1.38 @@ -137,11 +144,16 @@
    1.39  }
    1.40  
    1.41  .searchbox {
    1.42 -  padding: 0.5ex 1em 0ex 1em;
    1.43 +  margin: 0;
    1.44 +  padding: 0.1ex 1em 0ex 1em;
    1.45    float: right;
    1.46    line-height: 250%;
    1.47  }
    1.48  
    1.49 +.searchbox form {
    1.50 +  float: left;
    1.51 +}
    1.52 +
    1.53  .searchbox div {
    1.54    display: inline;
    1.55  }
    1.56 @@ -162,7 +174,6 @@
    1.57  
    1.58  .searchbox input[type=submit] {
    1.59    font-size: 100%;
    1.60 -  width: 2.5em;
    1.61  }
    1.62  
    1.63  /*************************************************************************
    1.64 @@ -264,6 +275,7 @@
    1.65  .voting_requested {
    1.66    float: left;
    1.67    position: relative;
    1.68 +  z-index: 1;
    1.69  }
    1.70  
    1.71  .interest img,
    1.72 @@ -284,6 +296,11 @@
    1.73    border: 1px solid #b96;
    1.74  }
    1.75  
    1.76 +.interest .head_autoreject {
    1.77 +  background-color: #fdd;
    1.78 +  border: 1px solid #b77;
    1.79 +}
    1.80 +
    1.81  .slot_support .head_supporter {
    1.82    background-color: #dfc;
    1.83    border: 1px solid #8b8;
    1.84 @@ -299,6 +316,23 @@
    1.85    border: 1px solid #88b;
    1.86  }
    1.87  
    1.88 +.delegation .change_delegation {
    1.89 +  margin-bottom: 2ex;
    1.90 +}
    1.91 +
    1.92 +.delegation .change_delegation a {
    1.93 +  display: inline;
    1.94 +  float: none;
    1.95 +  padding: 1ex;
    1.96 +}
    1.97 +
    1.98 +.delegation .delegation_participation {
    1.99 +  margin-left: 20.5em;
   1.100 +  margin-top: 3ex;
   1.101 +  font-style: italic;
   1.102 +  font-size: 80%;
   1.103 +}
   1.104 +
   1.105  .voting_requested .head_active {
   1.106    background-color: #fdd;
   1.107    border: 1px solid #b77;
   1.108 @@ -322,7 +356,7 @@
   1.109    background-color: #fff;
   1.110    border: 1px solid #999;
   1.111    padding: 1em;
   1.112 -  width: 25em;
   1.113 +  width: 35em;
   1.114  }
   1.115  
   1.116  .vote_info .delegation_arrow {
   1.117 @@ -365,7 +399,6 @@
   1.118  
   1.119  
   1.120  .sub_title div {
   1.121 -  border-top: 1px solid #444;
   1.122    padding-top: 1ex;
   1.123    margin-top: 1ex;
   1.124    font-weight: bold;
   1.125 @@ -415,27 +448,81 @@
   1.126    padding: 1ex 1ex 1ex 1ex;
   1.127  }
   1.128  
   1.129 +.web10 .ui_tabs_accordeon_head {
   1.130 +  margin-bottom: 1ex;
   1.131 +}
   1.132 +
   1.133 +.web20 .ui_tabs_accordeon_head {
   1.134 +  font-size: 80%;
   1.135 +  font-weight: bold;
   1.136 +  display: block;
   1.137 +  background: #eee;
   1.138 +  border: 1px solid #bbb;
   1.139 +  color: #000;
   1.140 +  padding: 0.75ex;
   1.141 +  margin-top: 2ex;
   1.142 +  cursor: pointer;
   1.143 +}
   1.144 +
   1.145 +.web20 .ui_tabs_accordeon_head img {
   1.146 +  vertical-align: middle;
   1.147 +  margin-right: 0.5em;
   1.148 +}
   1.149 +
   1.150 +.web20 .ui_tabs_accordeon_head .bargraph {
   1.151 +  margin-right: 0.5em;
   1.152 +}
   1.153 +
   1.154 +.web20 .ui_tabs_accordeon_content {
   1.155 +  border: 1px solid #aaa;
   1.156 +  border-top: none;
   1.157 +  padding: 2ex 1em 2ex 1em;
   1.158 +  margin-bottom: 3ex;
   1.159 +}
   1.160 +
   1.161 +.web20 .issue_initiative_list .ui_tabs_accordeon_head {
   1.162 +  background-color: #e5e5ff;
   1.163 +}
   1.164 +
   1.165 +.web20 .issue_initiative_list .ui_tabs_accordeon_head,
   1.166 +.web20 .issue_initiative_list .ui_tabs_accordeon_content {
   1.167 +  border-color: #aad;
   1.168 +}
   1.169 +
   1.170 +.web20 .issue_initiative_list .ui_tabs_accordeon_content .ui_tabs_accordeon_content {
   1.171 +  border-color: #bbb;
   1.172 +  border-width: 1px;
   1.173 +}
   1.174 +
   1.175 +.web20 .issue_initiative_list .ui_tabs_accordeon_content .ui_tabs_accordeon_head {
   1.176 +  background-color: #eee;
   1.177 +  border: 1px solid #bbb;
   1.178 +}
   1.179 +
   1.180 +.web20 .issue_initiative_list .ui_tabs_accordeon_head a {
   1.181 +  font-size: 125%;
   1.182 +}
   1.183 +
   1.184 +
   1.185 +
   1.186  /*************************************************************************
   1.187 - * ui.filter
   1.188 - * ui.order
   1.189 + * ui.filters
   1.190   */
   1.191  
   1.192 -.ui_filter_head,
   1.193 -.ui_order_head {
   1.194 +.ui_filter_closed_head,
   1.195 +.ui_filter_head {
   1.196    color: #777;
   1.197    margin-top: 1ex;
   1.198    margin-bottom: 1.5ex;
   1.199    font-size: 75%;
   1.200  }
   1.201  
   1.202 -.ui_filter_head a,
   1.203 -.ui_order_head a {
   1.204 +.ui_filter_head a {
   1.205    color: #777;
   1.206    padding: 0.5ex;
   1.207  }
   1.208  
   1.209 -.ui_filter_head a.active,
   1.210 -.ui_order_head a.active {
   1.211 +.ui_filter_head a.active {
   1.212    color: #fff;
   1.213    background-color: #777;
   1.214    padding: 0.5ex;
   1.215 @@ -462,7 +549,11 @@
   1.216   */
   1.217  
   1.218  .bargraph {
   1.219 -  width: 101px;
   1.220 +  width: 103px;
   1.221 +}
   1.222 +
   1.223 +.bargraph50 {
   1.224 +  width: 52px;
   1.225  }
   1.226  
   1.227  .bargraph div {
   1.228 @@ -627,6 +718,7 @@
   1.229    background-color: #fff;
   1.230    left: 5em;
   1.231    top: 5ex;
   1.232 +z-index: 2;
   1.233  }
   1.234  
   1.235  .hidden_inline_form a {
   1.236 @@ -673,7 +765,8 @@
   1.237    padding: 0.3ex 0.5em 0.3ex 0.5em;
   1.238  }
   1.239  
   1.240 -.suggestion_my_opinion a {
   1.241 +.suggestion_my_opinion a,
   1.242 +.suggestion_my_opinion span {
   1.243    white-space: nowrap;
   1.244    padding-left: 0.2ex !important;
   1.245    padding-right: 0.2ex !important;
   1.246 @@ -737,7 +830,7 @@
   1.247  
   1.248  .member_thumb {
   1.249    text-decoration: none;
   1.250 -  width: 18em;
   1.251 +  width: 15.5em;
   1.252    height: 48px;
   1.253    display: block;
   1.254    float: left;
   1.255 @@ -781,13 +874,15 @@
   1.256  }
   1.257  
   1.258  .member_thumb .flags {
   1.259 -  float: right;
   1.260 +  text-align: right;
   1.261    font-size: 75%;
   1.262  }
   1.263  
   1.264 -.member_thumb .flags a{
   1.265 +.member_thumb .flags a,
   1.266 +.member_thumb .flags img {
   1.267    position: static;
   1.268    float: right;
   1.269 +  margin-left: 0.5em;
   1.270  }
   1.271  
   1.272  
   1.273 @@ -795,12 +890,14 @@
   1.274    float: right;
   1.275  }
   1.276  
   1.277 -.member_thumb.not_accepted {
   1.278 +.member_thumb.not_accepted,
   1.279 +.member_thumb.not_informed {
   1.280    opacity: 0.5;
   1.281  }
   1.282  
   1.283 +.member_statement,
   1.284  .draft_content,
   1.285 -.member_statement {
   1.286 +.suggestion_content {
   1.287    background-color: #eee;
   1.288    border: 1px solid #ccc;
   1.289    padding-left: 1ex;
   1.290 @@ -842,14 +939,27 @@
   1.291    margin-right: 0.7em;
   1.292  }
   1.293  
   1.294 +.admitted_info {
   1.295 +  background-color: #dfd;
   1.296 +  padding: 1ex;
   1.297 +  margin-bottom: 2ex;
   1.298 +}
   1.299 +
   1.300 +.not_admitted_info,
   1.301 +.revoked_info {
   1.302 +  background-color: #fdd;
   1.303 +  padding: 1ex;
   1.304 +  margin-bottom: 2ex;
   1.305 +}
   1.306 +
   1.307  .draft_updated_info,
   1.308  .voting_active_info,
   1.309 -.revoked_info,
   1.310  .initiator_invite_info,
   1.311  .motd {
   1.312    background-color: #fec;
   1.313 -  border: 2px solid #b96;
   1.314 +  border: 1px solid #b96;
   1.315    padding: 1ex;
   1.316 +  margin-bottom: 2ex;
   1.317  }
   1.318  
   1.319  .suggestion_fulfilled {
   1.320 @@ -934,6 +1044,17 @@
   1.321    background-color: #fec;
   1.322  }
   1.323  
   1.324 +.heading {
   1.325 +  font-size: 120%;
   1.326 +  font-weight: bold;
   1.327 +  margin-top: 2ex;
   1.328 +  margin-bottom: 1ex;
   1.329 +}
   1.330 +
   1.331 +.heading.first {
   1.332 +  margin-top: 0;
   1.333 +}
   1.334 +
   1.335  /*************************************************************************
   1.336   * Voting
   1.337   */
   1.338 @@ -974,16 +1095,20 @@
   1.339    border: 1px black solid;
   1.340    margin: 1ex;
   1.341    padding: 0.5ex;
   1.342 +}
   1.343 +#voting .voting_form_active .movable {
   1.344    cursor: pointer;
   1.345  }
   1.346 -#voting .clickable {
   1.347 +#voting .voting_form_active .clickable {
   1.348    cursor: auto;
   1.349  }
   1.350 -#voting a.clickable {
   1.351 +#voting .voting_form_active a.clickable {
   1.352    cursor: pointer;
   1.353  }
   1.354  
   1.355  #voting .grabber {
   1.356    vertical-align: middle;
   1.357    cursor: move;
   1.358 -}
   1.359 \ No newline at end of file
   1.360 +}
   1.361 +
   1.362 +

Impressum / About Us