liqd/a4-meinberlin

The central participation platform of the city of Berlin, Germany

a4-meinberlin's Issues

Validate phase dates when publishing projects

Fix filter bar overlap

The filter bar is supposed to overlap its box in some cases:

As you can see, the current implementation displaces the stats of the first list item.

A lot of work and thought was already put into this in #144, but with limited success. A workaround which disables the overlap was pushed in #165.

internal server error after filling in content for polls

I get an internal server error when trying to fill in content for polls after having created a poll process.

Styling issues in header area at 800px width

The header area shows some strange styling errors when the width is set to 800px (tested on Safari 10.0.3).

1. The menu is always shown in an open state
2. The label for the project type has almost no vertical margin to the top navigation

The seocond problem persists even for smaller widths. The first problem I can only produce at 800px viewport width.

Forgot Password? // Log In (Primary and secondary brand colour)

I accidentally click on the magenta button because my brain expects it to be the button that logs me in. I think this is because it is positioned on the very left while the log in comes in second place. Also its color is much stronger.

Suggestion:
Log In button comes first
Password Forgotten follows below, maybe styled as a link instead of a button

meinberlin header visually broken on alerts

The meinberlin header (#78) is supposed to party cover the hero image on the frontpage. this is broken if there are alerts:

Button "show all projects" missing on landing page

Button "show all projects" missing on landing page

Proposal forms are missing the currency symbol

the input field for the budget is missing a currency symbol when a new proposal is entered or updated

JS error in page with embedded project

Uncaught SyntaxError: Unexpected token o in JSON at position 1 <embed.js:108>

---

For some reason, when loading the page containing the iframe, it seems the message handler gets triggered and has an object {request: 'geturi'} in event.data.

Maybe its from a browser extension?

Project timeline looks broken on small screen

On very narrow screens (tested on 320px width), the project timline breaks into multiple lines and looks broken. More vertical spacing and some styling changes should help.

Decide on using title vs aria-label

When we have buttons that only contain an icon and maybe in some other cases, we need to provide an alternative text (WCAG 1.1.1). There are a lot of options for that, but currently we use of of these two:

• aria-label: <button><i class="fa" aria-label="alt text"></i></button>
  • Common user agents ignore this attribute
  • In the WAI ARIA Text Alternative Computation Algorithm this attribute has a very high priority.
• title: <button title="alt text"><i class="fa" aria-hidden="true"></i></button>
  • Many user agents show the label as a tooltip on (long) hover.
  • The HTML5 spec warns that "many user agents do not expose the [title] attribute in an accessible manner".
  • In the WAI ARIA Text Alternative Computation Algorithm the title attribute is used, but has a very low priority.

Both options have pros and cons, but we should have clear rules on when to use which one.

extend allauth templates

We need some proper styling for logout and email confirmation etc.
i.e. buttons

Call to action missing on landing page

Call to action missing on landing page

Animation for polls

It would be really cool to have a build-up animation for the graph in our polls.

A transition that builds up the bars from left to right would not just be pretty, it would also create a better sense for what's happening.

Move non-generated files from static to assets

Currently we are mixing generated and custom content in /static
I propose to move all custom content (images, js, scss) to assets and copy them with webpack to static.
This would enable us to completely ignore the /static/ folder ing git

embed: fixed button for navigating back

Navigating inside the embed should be easier. A fixed "Back"-button would help a lot. It would also bring out the application-based concept more.

Here's an old wireframe that features such a button.

Pagination in dashboard project list

While the list gets cut after x items already, there is no pagination to access the other pages.

Consistent URL design

Most of our URLs are not hierarchical. For example, the path to a project is /projects/{project_slug}/ rather than /organisations/{organisation_slug}/projects/{project_slug}. However, the paths in the dashboard are hierarchical.

The hierarchical style lead to some security issues (e.g. #162). The issue was that the URL contains redundant information (i.e. the organisation is given both explicitly and implicitly from the project). We failed to check that the two match up which allowed initiators from one organisation to edit another organisation's projects.

I personally prefer the hierarchical style, e.g. on github. But note that github issue ids are scoped to the project, so there is no redundant information.

I do not think that one style is more secure than the other. But I mixing them leads to confusion. We should pick one of these options, ideally before going live:

1. Use hierarchical paths and check for consistency.
2. Use hierarchical paths with scoped slugs.
3. Use non-hierarchical paths.

Given the current code base, I think it third option is the easiest to implement. I also think that hierarchical paths are mostly useful for people with a technical background, so not really that important for our target group.

Login: Login button should be first

Currently in the login form, the password reset button comes before the login button. This should be changed, so that the login button comes first. I also think, we should maybe de-emphasize the password reset somehow (maybe make it a link in a small text underneath?).

Have a concept for optional frontend libraries

Some frontend libraries are only used on specific pages (e.g. leaflet for maps). Sometimes we just include these libraries in the webpack bundle so that it gets quite big (~1.5MB at the moment). Sometimes we only load them on the pages where they are needed, which adds complexity.

We should find a consistent solution for this which balances performance and code complexity.

No project reference when creating new idea

When I try to create a new idea, the project the idea is created in, is not referenced. This might be confusing, especially if you leave the tab in my browser open and come back later. It would be great if we show at least the project’s title, short description and maybe organization.

Prevent removal of phase dates from published projects

This is a counterpart to #226
If a project is already published it should not be possible to remove dates from its phases.
Maybe users should also be prevented from modifying dates?

resource image for project detail on mobile too big

just so we don't forget about it: the min-height should be reduced for mobile, it's too high.

Explain what follow means

It would be great if we could explain what following means with a short notice (maybe after clicking on the button?), something like this: ”You will be notified via email when new proposals are posted or when the project’s phase changes“.

Adding new categories not working in dashboard

When creating a priotisation of topics process I can't add categories. Nothing happens after I click on the '+' button

rounded corners of feedback button

The feedback button is not supposed to have all corners rounded, just the two on the left hand side.

HTML editor in create-text process not fully working

The HTML editor in create-text-process not working. I currently can't add links to other website or upload pictures ;)

Delete Follows

We need to delete follows at some point, e.g. when the project is archived or deleted.

deleting a featured project causes a 500 error on home

^

Webpack generates broken variable name

With the setup since #278, webpack generates the following code:

var leaflet.draw = …

This breaks some mapping functionality.

Possible fix: rename bundle to leafletDraw.

webpack issues

I recently experienced difficulties with the javascript generated webpack. On first build, everything works fine. Subsequent build look considerably different (e.g. the parantheses around function are missing) and the the following error message is shown in the JavaScript console:

 Uncaught TypeError: Cannot read property 'call' of undefined

This means that a module that webpack is trying to initiate is undefined.

update boundingbox with berlin tileserver

With the introduction of #201 the settings for the BoundingBox are wrong.

Nevermind the previous image, but the zoom still should be adjusted.

Cost for proposals should be emphasized

When I read a proposal for a participatory budget is very central. It would be great, if we could emphasize the budget visually and give it a label „Estimated cost by user“ or similar. I would also use dividers for thousands of euros like so: 1.000.000 €

Could we show the cost in the list view, too?

The project is not referred on idea detail page

If you are on an idea detail page, the project the idea is linked to is not referenced. It would be important to show at least the project’s title to make the connection between project and idea clear to the user.

Button to confirm email address invisible

After adding a new email address in the account settings and clicking on the link in the verification email, user have to click another button in the confirm-email dialogue (is this necessary?) - in Firefox this button is not visible - only writing black on white

(see screenshot).

Leaflet assets not found

When I visit a page with a map, I get the following errors in the web console:

GET http://localhost:8000/static/leaflet.js 
GET http://localhost:8000/static/leaflet.css 

This is because core expects these files, but we include leaflet in our regular bundle. It is not clear which behavior is more correct yet (see discussion in #195). But we should handle the error messages anyway.

API validation of documents and polls should not set module

Currently the .validate() methods of the Documents and Poll Serializers are setting the related module. Consider using a HiddenField for the module which could be set from the kwargs. Compare the creator fields which is set with:

creator = serializers.HiddenField( default=serializers.CurrentUserDefault() )

External projects can't be archived

Checkbox is missing.

Error 413 after picuture upload in projects

After I uploaded a too big picture in the Bürgerhaushalt process on dev I got an Error 413 page instead of an error in the dashboard.

Static pages missing on landing page (imprint, faq, terms of use, feedback)

Static pages missing on landing page (imprint, faq, terms of use, feedback)

Project-Detail view is broken if the initial phase is in the future

If a projects initial phase starts in the future, the default a4projects/project_detail.html is rendered.
This template is by default empty and should be overridden. Currently this is tried by apps/projects/a4projects/project_detail.html which is not working. Django is still using the a4 template.
Furthermore the project_detauil template is missing logic and information if no phase has been started yet

embed: header & footer styling

The dimensions here need to be adjusted. See status quo (left) and design (right):

Design on Zeplin: https://zpl.io/26x4Mz

Bplan: Image size restrictions are not checked when imported with the api

The project form limits image to a minimum size. Those restrictions are not checked when importing images with the api.
If a smaller image is already imported, the project can not be edited in the dashboard.

Button style missing for password reset form

In the form to reset your password the button is not recognizable as a button.
https://meinberlin-dev.liqd.net/accounts/password/reset/

Manage duplication between projects

Our projects tend to have a large overlap in terms of features and UI. In the past we tried to limit duplication by sharing a lot of code. The downside of this was that the shared code became very abstract and hard to reason about.

With the switch from a3 to a4, we went the other way and did a lot of duplication. In order to find a good balance, we should think about ways to limit duplication while keeping it simple. At the very least, we should have an understanding of:

• what is our current approach to code duplication between projects?
• what are its advantages and limitations?

According to @2e2a, we already have a good balance in the python code. The same is true for CSS. So for now we can concentrate on the templates.

We already tried to work on this in some pull requests (#206, #237, #239). We found that the templates are in fact very similar, but also different in some key places:

• similar but different permissions (e.g. create_idea / create_proposal) (see #206)
• similar but different URL names (e.g. idea-create / proposal-create) (see #206)
• similar but different navigation (breadcrumbs)
• different terms that appear in natural language sentences (e.g. "Delete this idea" / "Delete this proposal")

Make filters more dynamic

Currently filters have two issues:

• Allow dynamic choices for OrderingFilter (currently fixed by the RequestOrderingMixin)
• Allow custom choices for more widget types, e.g. BooleanFilter, NumberFilter (currently fixed by overloading the widget init)

Static/Assets directories in apps

Django says to include app specific static files in a /static directory in the root of the particular app (https://docs.djangoproject.com/en/1.11/howto/static-files/). On runserver Django collects static files from the project wide static directory (mentioned in base.py) and the /static directories within all apps, grouping them into one global /static directory.
Now, we don't need .jsx files in that global /static directory since they are required and put together into one file by webpack. Still, those files need a directory to be put into on app level – therefore sometimes there might be an asset directory instead of a static directory or the other way around.
It'd be great to have one directory and in the best case that would include not having .jsx files in that django-generated, global /static directory.

Use Alert component in documents

The Alert component was introduced in #283 and extended in #333

Filter draft projects from public listing

Mark draft projects with a badge or something when a moderator is browsing the project list. Currently every project is listed and logged in moderators can only find out if they are drafted in the dashboard or with an incognito browser.

Share buttons overlap info text on landingpage

On dev: