# HG changeset patch # User bsw # Date 1330792135 -3600 # Node ID 76d7eafb3893c13e238e472bf1650a11a2a43eff # Parent 74f768a162e1d941158bde5a3e42bb8a71af5090 Make things work with small screens like mobile devices in portrait mode diff -r 74f768a162e1 -r 76d7eafb3893 app/main/_filter_view/30_navigation.lua --- a/app/main/_filter_view/30_navigation.lua Thu Mar 01 22:56:35 2012 +0100 +++ b/app/main/_filter_view/30_navigation.lua Sat Mar 03 17:28:55 2012 +0100 @@ -96,6 +96,22 @@ view = 'about' } + if app.session.member_id then + ui.link{ + -- image = { static = "icons/16/stop.png" }, + text = _"Logout", + module = 'index', + action = 'logout', + routing = { + default = { + mode = "redirect", + module = "index", + view = "index" + } + } + } + end + if app.session.member.admin then slot.put(" ") diff -r 74f768a162e1 -r 76d7eafb3893 app/main/_filter_view/31_logout_button.lua --- a/app/main/_filter_view/31_logout_button.lua Thu Mar 01 22:56:35 2012 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,22 +0,0 @@ -if app.session.member == nil then - execute.inner() - return -end - -slot.select('logout_button', function() - ui.link{ --- image = { static = "icons/16/stop.png" }, - text = _"Logout", - module = 'index', - action = 'logout', - routing = { - default = { - mode = "redirect", - module = "index", - view = "index" - } - } - } -end) - -execute.inner() diff -r 74f768a162e1 -r 76d7eafb3893 app/main/_layout/default.html --- a/app/main/_layout/default.html Thu Mar 01 22:56:35 2012 +0100 +++ b/app/main/_layout/default.html Sat Mar 03 17:28:55 2012 +0100 @@ -1,6 +1,7 @@ + <!-- WEBMCP SLOTNODIV html_title --> diff -r 74f768a162e1 -r 76d7eafb3893 app/main/area/_list.lua --- a/app/main/area/_list.lua Thu Mar 01 22:56:35 2012 +0100 +++ b/app/main/area/_list.lua Sat Mar 03 17:28:55 2012 +0100 @@ -28,271 +28,147 @@ areas_selector:add_field("0", "issues_to_vote_count") end -local label_attr = { style = "text-align: right; width: 4em;" } -local field_attr = { style = "text-align: right; width: 4em;" } + +ui.container{ attr = { class = "area_list" }, content = function() + + for i, area in ipairs(areas_selector:exec()) do + + ui.container{ attr = { class = "area" }, content = function() + + ui.container{ attr = { class = "info" }, content = function() -ui.list{ - attr = { class = "area_list", style = "width: 100%; table-layout: fixed;" }, - records = areas_selector:exec(), - columns = { - { - label_attr = { style = "width: 2em;" }, - content = function(record) - if record.is_member then - local text = _"Member of area" - ui.image{ - attr = { title = text, alt = text, style = "vertical-align: middle;" }, - static = "icons/16/user_gray.png", - } - end - end - }, - { - label_attr = { style = "width: 2em;" }, - content = function(record) - if record.trustee_member_id then - local trustee_member = Member:by_id(record.trustee_member_id) - local text = _("Area delegated to '#{name}'", { name = record.trustee_member_name }) - execute.view{ - module = "member_image", - view = "_show", - params = { - member = trustee_member, - image_type = "avatar", - show_dummy = true, - class = "micro_avatar", - popup_text = text - } - } - end - end - }, - { - label_attr = { style = "width: 110px" }, - content = function(record) - if record.member_weight and record.direct_member_count then - local max_value = MemberCount:get() - ui.bargraph{ - max_value = max_value, - width = 100, - bars = { - { color = "#444", value = record.direct_member_count }, - { color = "#777", value = record.member_weight - record.direct_member_count }, - { color = "#ddd", value = max_value - record.member_weight }, + ui.container{ attr = { class = "bar" }, content = function() + if area.member_weight and area.direct_member_count then + local max_value = MemberCount:get() + ui.bargraph{ + max_value = max_value, + width = 100, + bars = { + { color = "#444", value = area.direct_member_count }, + { color = "#777", value = area.member_weight - area.direct_member_count }, + { color = "#ddd", value = max_value - area.member_weight }, + } } - } - end - end - }, - { - label_attr = { style = "width: 100%" }, - content = function(record) - ui.link{ - text = record.name, - module = "area", - view = "show", - id = record.id - } - end - }, - { - label = function() - local title = _"New" - ui.image{ - attr = { title = title, alt = title }, - static = "icons/16/new.png" - } - end, - field_attr = field_attr, - label_attr = label_attr, - content = function(record) - ui.link{ - text = tostring(record.issues_new_count), - module = "area", - view = "show", - id = record.id, - params = { filter = "new", tab = "issues" } - } - end - }, - { - label = function() - local title = _"Discussion" - ui.image{ - attr = { title = title, alt = title }, - static = "icons/16/comments.png" - } - end, - field_attr = field_attr, - label_attr = label_attr, - content = function(record) - ui.link{ - text = tostring(record.issues_discussion_count), - module = "area", - view = "show", - id = record.id, - params = { filter = "accepted", tab = "issues" } - } - end - }, - { - label = function() - local title = _"Frozen" - ui.image{ - attr = { title = title, alt = title }, - static = "icons/16/lock.png" - } - end, - field_attr = field_attr, - label_attr = label_attr, - content = function(record) - ui.link{ - text = tostring(record.issues_frozen_count), - module = "area", - view = "show", - id = record.id, - params = { filter = "half_frozen", tab = "issues" } - } - end - }, - { - label = function() - local title = _"Voting" - ui.image{ - attr = { title = title, alt = title }, - static = "icons/16/email_open.png" + end + end } + + ui.container{ attr = { class = "name" }, content = function() + ui.link{ + text = area.name, + module = "area", + view = "show", + id = area.id + } + slot.put(" ") + ui.tag{ content = "" } + end } - end, - field_attr = field_attr, - label_attr = label_attr, - content = function(record) - ui.link{ - text = tostring(record.issues_voting_count), - module = "area", - view = "show", - id = record.id, - params = { filter = "frozen", tab = "issues" } - } - end - }, - { - label = function() - local title = _"Finished" - ui.image{ - attr = { title = title, alt = title }, - static = "icons/16/tick.png" - } - end, - field_attr = field_attr, - label_attr = label_attr, - content = function(record) - ui.link{ - text = tostring(record.issues_finished_count), - module = "area", - view = "show", - id = record.id, - params = { filter = "finished", issue_list = "newest", tab = "issues" } - } - end - }, - { - label = function() - local title = _"Cancelled" - ui.image{ - attr = { title = title, alt = title }, - static = "icons/16/cross.png" - } - end, - field_attr = field_attr, - label_attr = label_attr, - content = function(record) - ui.link{ - text = tostring(record.issues_cancelled_count), - module = "area", - view = "show", - id = record.id, - params = { filter = "cancelled", issue_list = "newest", tab = "issues" } - } - end - } - } -} ---[[ -ui.bargraph_legend{ - width = 25, - bars = { - { color = "#444", label = _"Direct membership" }, - { color = "#777", label = _"Membership by delegation" }, - { color = "#ddd", label = _"No membership at all" }, - } -} + + ui.container{ attr = { class = "membership" }, content = function() + if area.is_member then + local text = _"Member of area" + ui.image{ + attr = { title = text, alt = text }, + static = "icons/16/user_gray.png", + } + else + slot.put('') + end + end } + + ui.container{ attr = { class = "delegatee" }, content = function() + if area.trustee_member_id then + local trustee_member = Member:by_id(area.trustee_member_id) + local text = _("Area delegated to '#{name}'", { name = area.trustee_member_name }) + local text = _"delegated to" + ui.image{ + attr = { class = "delegation_arrow", alt = text, title = text }, + static = "delegation_arrow_24_horizontal.png" + } + execute.view{ + module = "member_image", + view = "_show", + params = { + member = trustee_member, + image_type = "avatar", + show_dummy = true, + class = "micro_avatar", + popup_text = text + } + } + else + slot.put('') + end + end } + end } -slot.put("
  ") + ui.container{ attr = { class = "phases" }, content = function() + + ui.container{ attr = { class = "admission" }, content = function() + ui.link{ + text = tostring(area.issues_new_count), + module = "area", + view = "show", + id = area.id, + params = { filter = "new", tab = "issues" } + } + end } - -if app.session.member_id then - ui.image{ - attr = { title = title, alt = title }, - static = "icons/16/user_gray.png" - } - slot.put(" ") - slot.put(_"Member of area") - slot.put("   ") + ui.container{ attr = { class = "discussion" }, content = function() + ui.link{ + text = tostring(area.issues_discussion_count), + module = "area", + view = "show", + id = area.id, + params = { filter = "accepted", tab = "issues" } + } + end } - ui.image{ - attr = { title = title, alt = title }, - static = "icons/16/link.png" - } - slot.put(" ") - slot.put(_"Area delegated") - slot.put("   ") -end - -ui.image{ - attr = { title = title, alt = title }, - static = "icons/16/new.png" -} -slot.put(" ") -slot.put(_"New") -slot.put("   ") + ui.container{ attr = { class = "verification" }, content = function() + ui.link{ + text = tostring(area.issues_frozen_count), + module = "area", + view = "show", + id = area.id, + params = { filter = "half_frozen", tab = "issues" } + } + end } -ui.image{ - attr = { title = title, alt = title }, - static = "icons/16/comments.png" -} -slot.put(" ") -slot.put(_"Discussion") -slot.put("   ") - -ui.image{ - attr = { title = title, alt = title }, - static = "icons/16/lock.png" -} -slot.put(" ") -slot.put(_"Frozen") -slot.put("   ") + ui.container{ attr = { class = "voting" }, content = function() + ui.link{ + text = tostring(area.issues_voting_count), + module = "area", + view = "show", + id = area.id, + params = { filter = "frozen", tab = "issues" } + } + end } -ui.image{ - attr = { title = title, alt = title }, - static = "icons/16/email_open.png" -} -slot.put(" ") -slot.put(_"Voting") -slot.put("   ") + ui.container{ attr = { class = "finished" }, content = function() + ui.link{ + text = tostring(area.issues_finished_count), + module = "area", + view = "show", + id = area.id, + params = { filter = "finished", issue_list = "newest", tab = "issues" } + } + end } -ui.image{ - attr = { title = title, alt = title }, - static = "icons/16/tick.png" -} -slot.put(" ") -slot.put(_"Finished") -slot.put("   ") + ui.container{ attr = { class = "cancelled" }, content = function() + ui.link{ + text = tostring(area.issues_cancelled_count), + module = "area", + view = "show", + id = area.id, + params = { filter = "cancelled", issue_list = "newest", tab = "issues" } + } + end } -ui.image{ - attr = { title = title, alt = title }, - static = "icons/16/cross.png" -} -slot.put(" ") -slot.put(_"Cancelled") - ---]] \ No newline at end of file + end } + + slot.put("
') + end + end } + + ui.container{ attr = { class = "bar" }, content = function() + if initiative.issue.fully_frozen and initiative.issue.closed then + if initiative.issue.ranks_available then + if initiative.negative_votes and initiative.positive_votes then + local max_value = initiative.issue.voter_count ui.bargraph{ max_value = max_value, width = 100, - quorum = max_value * (initiative.issue.policy.initiative_quorum_num / initiative.issue.policy.initiative_quorum_den), - quorum_color = "#00F", bars = { - { color = "#0a0", value = (initiative.satisfied_supporter_count or 0) }, - { color = "#bbb", value = (initiative.supporter_count or 0) - (initiative.satisfied_supporter_count or 0) }, - { color = "#f7f7f7", value = max_value - (initiative.supporter_count or 0) }, + { color = "#0a0", value = initiative.positive_votes }, + { color = "#aaa", value = max_value - initiative.negative_votes - initiative.positive_votes }, + { color = "#a00", value = initiative.negative_votes }, } } - end - end - }, - { - field_attr = { style = "width: 24px;" }, - content = function() - if initiative.is_initiator then - slot.put(" ") - local label = _"You are initiator of this initiative" - ui.image{ - attr = { alt = label, title = label }, - static = "icons/16/user_edit.png" - } - elseif initiative.is_supporter then + else slot.put(" ") - local label = _"You are supporter of this initiative" - ui.image{ - attr = { alt = label, title = label }, - static = "icons/16/thumb_up_green.png" - } - elseif initiative.is_potential_supporter then - slot.put(" ") - local label = _"You are potentially supporter of this initiative" - ui.image{ - attr = { alt = label, title = label }, - static = "icons/16/thumb_up.png" - } - elseif initiative.is_supporter_via_delegation then - slot.put(" ") - local label = _"You are supporter of this initiative via delegation" - ui.image{ - attr = { alt = label, title = label }, - static = "icons/16/thumb_up_green.png" - } end - + else + slot.put(_"Counting of votes") end - }, - { + else + local max_value = initiative.issue.population or 0 + ui.bargraph{ + max_value = max_value, + width = 100, + quorum = max_value * (initiative.issue.policy.initiative_quorum_num / initiative.issue.policy.initiative_quorum_den), + quorum_color = "#00F", + bars = { + { color = "#0a0", value = (initiative.satisfied_supporter_count or 0) }, + { color = "#bbb", value = (initiative.supporter_count or 0) - (initiative.satisfied_supporter_count or 0) }, + { color = "#f7f7f7", value = max_value - (initiative.supporter_count or 0) }, + } + } + end + end } + + ui.container{ attr = { class = "interest" }, content = function() + if initiative.is_initiator then + local label = _"You are initiator of this initiative" + ui.image{ + attr = { alt = label, title = label }, + static = "icons/16/user_edit.png" + } + elseif initiative.is_supporter then + local label = _"You are supporter of this initiative" + ui.image{ + attr = { alt = label, title = label }, + static = "icons/16/thumb_up_green.png" + } + elseif initiative.is_potential_supporter then + local label = _"You are potentially supporter of this initiative" + ui.image{ + attr = { alt = label, title = label }, + static = "icons/16/thumb_up.png" + } + elseif initiative.is_supporter_via_delegation then + local label = _"You are supporter of this initiative via delegation" + ui.image{ + attr = { alt = label, title = label }, + static = "icons/16/thumb_up_green.png" + } + end + end } + + ui.container{ attr = { class = "name" }, content = function() + local link_class = "initiative_link" + if initiative.revoked then + link_class = "revoked" + end + if selected then + link_class = link_class .. " selected" + end + if initiative.is_supporter then + link_class = link_class .. " supported" + end + if initiative.is_potential_supporter then + link_class = link_class .. " potentially_supported" + end + if initiative.is_supporter_via_delegation then + link_class = link_class .. " supported" + end + ui.link{ + attr = { class = link_class }, content = function() - local link_class = "initiative_link" - if initiative.revoked then - link_class = "revoked" - end - if selected then - link_class = link_class .. " selected" - end - if initiative.is_supporter then - link_class = link_class .. " supported" - end - if initiative.is_potential_supporter then - link_class = link_class .. " potentially_supported" - end - if initiative.is_supporter_via_delegation then - link_class = link_class .. " supported" + local name + if initiative.name_highlighted then + name = encode.highlight(initiative.name_highlighted) + else + name = encode.html(initiative.shortened_name) end - ui.link{ - attr = { class = link_class }, - content = function() - local name - if initiative.name_highlighted then - name = encode.highlight(initiative.name_highlighted) - else - name = encode.html(initiative.shortened_name) - end - ui.tag{ content = "i" .. initiative.id .. ": " } - slot.put(name) - end, - module = "initiative", - view = "show", - id = initiative.id - } - - end + ui.tag{ content = "i" .. initiative.id .. ": " } + slot.put(name) + end, + module = "initiative", + view = "show", + id = initiative.id } - } -} + + end } + +end } \ No newline at end of file diff -r 74f768a162e1 -r 76d7eafb3893 env/ui/filters.lua --- a/env/ui/filters.lua Thu Mar 01 22:56:35 2012 +0100 +++ b/env/ui/filters.lua Sat Mar 03 17:28:55 2012 +0100 @@ -112,6 +112,9 @@ attr.class = "active" option.selector_modifier(args.selector) end + if idx > 1 then + slot.put(" ") + end ui.link{ attr = attr, module = request.get_module(), diff -r 74f768a162e1 -r 76d7eafb3893 static/style.css --- a/static/style.css Thu Mar 01 22:56:35 2012 +0100 +++ b/static/style.css Sat Mar 03 17:28:55 2012 +0100 @@ -1,3 +1,4 @@ + /* Style reset */ html, body, @@ -63,10 +64,6 @@ margin-top: 1ex; } -.area_list { - line-height: 140%; -} - body, a { color: #000; } @@ -164,9 +161,9 @@ color: #fff; font-size: 90%; line-height: 100%; - padding-left: 10px; + padding-left: 1%; + box-shadow: #aaa 0 0 5px; overflow: hidden; - box-shadow: #aaa 0 0 5px; -mox-box-shadow: #aaa 0 0 5px; -webkit-box-shadow: #aaa 0 0 5px; } @@ -184,35 +181,29 @@ color: #000; } -.navigation, -.logout_button { +.navigation { line-height: 200%; } -.navigation img, -.logout_button img { +.navigation img { margin-right: 0.5em; vertical-align: middle; } -.navigation a, -.logout_button a { - padding: 1ex; +.navigation a { + padding: 0 0.5em; + float: left; + display: block; } form.unit_selector { display: inline; } -.logout_button { - float: right; -} - .searchbox { margin: 0; padding: 0.1ex 1em 0ex 1em; float: right; - line-height: 250%; } .searchbox form { @@ -250,8 +241,8 @@ .title2, .actions { background-color: #f2f2f2; - margin-left: 10px; - margin-right: 10px; + margin-left: 1%; + margin-right: 1%; } .initiative_head .actions { @@ -260,19 +251,11 @@ -webkit-box-shadow: none; } -.actions { - border-radius: 0 0 8px 8px; -} - -.initiative_head .actions { - background-color: #fff; - margin: 0px; -} .slot_initiatives_list { margin-top: 1ex; - margin-left: 10px; - margin-right: 10px; + margin-left: 1%; + margin-right: 1%; background-color: #fcfcfc; border-radius: 8px; clear: left; @@ -289,7 +272,7 @@ .title { color: #000; - padding: 1.5ex 1em 0 1em; + padding: 1.5ex 1ex 0 1ex; } .title div { @@ -308,7 +291,7 @@ } .slot_title2 { - padding: 1ex 1em 0 1em; + padding: 1ex 1ex 0 1ex; } .member_list .member_image_avatar { @@ -330,24 +313,38 @@ padding-bottom: 1ex; } -.interest { - margin-left: 1.33em; - margin-bottom: 1.33ex; +.actions { + border-radius: 0 0 8px 8px; } -.slot_actions .interest { - margin-left: 0em; +.actions .interest, +.actions .delegation, +.actions a { + margin-left: 1ex; } .actions a { - margin-right: 1em; - border-radius: 5px; + margin-top: 1px; + margin-bottom: 1px; +} + +.actions .interest a, +.actions .delegation a { + margin: 0; +} + +.initiative_head .actions { + background-color: #fff; + margin: 0px; +} + +.actions a { padding-right: 0.3em; } .slot_initiative_head { - padding-left: 10px; - padding-top: 2ex; + padding-left: 1%; + padding-top: 4ex; } .initiative_name { @@ -400,7 +397,6 @@ .actions .potential_supporter, .vote_info .head { float: left; - margin-right: 1em; } .actions .supporter, @@ -531,8 +527,8 @@ */ .main { - margin-left: 10px; - margin-right: 10px; + margin-left: 1%; + margin-right: 1%; } /************************************************************************* @@ -566,11 +562,6 @@ padding: 1ex; } -.ui_tabs_content { - xborder: 1px solid #444; - xpadding: 1ex 1ex 1ex 1ex; -} - .ui_tabs_links a.yellow { background-color: #fcc; color: #000; @@ -611,25 +602,22 @@ .ui_filter { overflow: hidden; margin-bottom: 1ex; -} - -.ui_filter_closed_head, -.ui_filter_head { - color: #777; - margin-top: 1ex; - margin-bottom: 1.5ex; - font-size: 75%; - float: left; + margin-right: 1em; } .ui_filter_head { + color: #777; + margin-top: 0.5ex; + margin-bottom: 0.5ex; + font-size: 75%; + float: left; + line-height: 200%; margin-right: 2em; } .ui_filter_head a { color: #777; padding: 0.5ex; - margin-right: 0.2em; } .ui_filter_head a.active { @@ -850,6 +838,63 @@ +/************************************************************************* + * Area list + */ + +.area_list { +} + +.area_list .area { + line-height: 28px; +} + +.area_list .area img { + vertical-align: middle; +} + +.area_list .area .info { + float: left; + clear: both; +} + +.area_list .area .bar { + float: left; + padding-top: 6px +} + +.area_list .area .membership, +.area_list .area .delegatee { + display: inline; + width: 24px +} + +.area_list .area .name { + display: inline; + font-weight: bold; +} + +@media screen and (max-width: 480px) { + .area_list .area .name { + clear: left; + display: block; + float: left; + margin-left: 0px; + } + .area_list .area .phases { + margin-bottom: 2ex; + } +} + +.area_list .area .phases { + float: right; +} + +.area_list .area .phases div { + float: left; + width: 3em; + text-align: right; +} /************************************************************************* * Issues @@ -873,7 +918,7 @@ } .issues .issue .issue_info { - padding: 1ex 1em 0.3ex 1em; + padding: 1ex 1ex 0.3ex 1ex; line-height: 140%; margin-bottom: 1ex; } @@ -904,6 +949,42 @@ font-weight: bold; } +.initiative { + margin-left: 1ex; + margin-bottom: 1ex; + line-height: 50%; +} + +.initiative .bar { + margin-right: 0.3em; +} + +.initiative .rank, +.initiative .bar, +.initiative .interest { + float: left; + margin-right: 0.3em; +} + +.initiative .interest { + width: 16px; + height: 16px; + line-height: 100%; +} + +.initiative .name { + line-height: 130%; + margin-left: 160px; +} + +@media screen and (max-width: 480px) { + .initiative .name { + clear: left; + margin-left: 0px; + } +} + + .issue_initiative_list a { font-weight: bold; } @@ -1225,10 +1306,6 @@ font-weight: bold; } -.heading.member_area_list { - position: absolute; -} - .heading.first { margin-top: 0; }