[7762] re-design phase info component #5358

hom3mad3 · 2023-12-06T10:19:57Z

Redesign of Phase Info Panel Component

Test Page

projekte/module/module-title (e.g., Participatory Budgeting Phase 3)

Changes

Implemented redesign for the Phase Info Panel component. Uses Servicepanel and Modul Bühne
Enhanced for both desktop and mobile views with Swiper integration.

Observations

currently importing Swiper from CDN as provisory solution (webpack chunk errors), as don't want to further delay review of component. Not sure it should be solved in a different PR?

Previews

Desktop:
Mobile:

Tasks

PR name contains story or task reference
Documentation (docs and inline)
Tests (including n+1 and django_assert_num_queries where applicable)
Changelog

…nd image files

…date linting

…adme about local styling files

…es setting, rm old styling

… template with BO one

… file

…d module type detail and create templates

…es for our a4 components

…n use make lint-fix

…templates

…older on make install to ensure site can be loaded on make watch

…e the cass loaded in base templates is not overwritten

…t extending from anything.

meinberlin/templates/a4modules/includes/module_detail_phase.html

meinberlin/assets/js/swiper_phases.js

…y assets/tab: add tab styling and edit mimicking styling like styleguide

meinberlin/assets/scss/styles_user_facing/_utility.scss

meinberlin/apps/projects/templates/meinberlin_projects/project_detail.html

philli-m

sorry not huge help with the js issue but the non swiper stuff is great, jsut need to add it to the other template, maybe the sample PR gives you another idea on how to deal with swiper?!

philli-m · 2023-12-20T16:13:44Z

meinberlin/templates/a4modules/module_detail.html

+
+    <section id="layout-grid__area--maincontent">
+        <div class="modul-servicepanel fullwidth panel--heavy phase-info">
+            <div class="servicepanel__main">


module_detail_phase.html is also included in project_detail.html so the modul-* class names should also be added there, also the buttons need wrapping (see other comment)

meinberlin/apps/mapideas/templates/meinberlin_mapideas/mapidea_list.html

philli-m · 2023-12-20T16:42:12Z

meinberlin/apps/ideas/templates/meinberlin_ideas/idea_list.html

@@ -9,9 +9,9 @@
 {% block project_action %}
    {% has_or_would_have_perm 'meinberlin_ideas.add_idea' request.user module as propose_allowed %}
    {% if propose_allowed %}
-        <a href="{% url 'meinberlin_ideas:idea-create' module_slug=module.slug %}" class="btn btn--primary btn--full u-spacer-bottom btn--huge">
+        <a href="{% url 'meinberlin_ideas:idea-create' module_slug=module.slug %}" class="button">


see comment on mapidea_list, will also need to be added to
budgeting/proposal_list
kiezkasse/proposal_list
also maptopic_list but I just checked that template and it doesn't have the {% action %} block which is where the button should be?! you can copy it over from another template or just leave it for now, I think i may have fucked up there when doing teh react list and clean up

meinberlin/assets/scss/styles_dashboard/_variables.scss

philli-m · 2023-12-20T17:22:27Z

meinberlin/templates/a4modules/includes/module_detail_phase_swiper.html

 </div>
 <!-- End Swiper Template -->

 {% block extra_js %}
-    <script src="{% static 'swiper_phases.js' %}"></script>
+<!-- Swiper JS -->


We do need to figure this out, I tried removing our version of swiper in package.json and commenting out both these script tags and the swiper is initialized but only if we add their js via the URL they provide, I have added an example here, maybe you and Julian can look into why that works and why webpack fucks it?! or maybe we start using their js script tag as that is what we are meant to do anyway, perhaps we can cache it so we always have a copy?! not sure link here #5377

philli-m and others added 30 commits November 29, 2023 14:18

base.html: add imports for berlin css and js and add local versions a…

406fdd0

…nd image files

assets/js: adding js files locally to avoid development issues and up…

5992a51

…date linting

assets/berlin_css: add font awesome locally and include mention in re…

22c83e9

…adme about local styling files

.github/workflows: add dev branch

a0f1de7

cms/header: add BO header template and logos, a11y info to header pag…

e5d2d34

…es setting, rm old styling

footer: create new footer snippet to enable titles and replace footer…

68d0f55

… template with BO one

logo.png: change static path to change case so can be found in static…

51727bb

… file

documents/views: add extra context in paragraph detail view

22697c2

base.html: update favicon paths to use statis tag

0732162

breadcrumb: add breadcrumb templates code to all user side project an…

d04ff55

…d module type detail and create templates

templates/*: add breadcrumbs to user settings pages and moderate pages

5c075e6

contrib/bo_components: add component lib for bo components

2843227

assets/berlin_css: update berlin css

5c9f373

assets/style: load BO css with other styles so can extend their class…

edfac72

…es for our a4 components

apps/projects/project_detail: add project header template

ce9001a

eslintrc//stylelintrc: add BO style files to lint ignor paterns so ca…

2e60a5d

…n use make lint-fix

templates/*: add BO landmark classes to project, user and moderation …

19df9a1

…templates

assets/follow: update classes with a4 prefix

a43e888

footer: add lower footer with contrib_tag and link and create media f…

872c8b8

…older on make install to ensure site can be loaded on make watch

contrib: add task, update command, add tests

3e5248e

settigns/production: add celerybeat periodic footer update

c5e0fe9

templates/*: add block.super to templates with extra_css tag to ensur…

fad7ff8

…e the cass loaded in base templates is not overwritten

meinberlin/react: move all react components to own folder structure

ae6a41e

fix celery task name keyerror

f2b6d11

templates/500.html: fix logo.png caps

a122766

apps/cms: add missing static tag

272a6d5

apps/cms: move extra_js block into homepage as map_teaser_block is no…

718f57f

…t extending from anything.

react/budgeting: ModeratorStatus component

c5430bc

apps/budgeting/serializers: add moderator_status to serializer

e750136

react/budgeting: update data to moderator_status

86ff792

hom3mad3 commented Dec 14, 2023

View reviewed changes

meinberlin/templates/a4modules/includes/module_detail_phase.html Show resolved Hide resolved

hom3mad3 commented Dec 14, 2023

View reviewed changes

meinberlin/assets/js/swiper_phases.js Show resolved Hide resolved

hom3mad3 force-pushed the mr-2023-11-phase-info-update branch 2 times, most recently from 05873e3 to b962d17 Compare December 18, 2023 14:59

philli-m and others added 2 commits December 18, 2023 16:00

templates/project_detail: change tab html, use BO js for functionalit…

1c4c45f

…y assets/tab: add tab styling and edit mimicking styling like styleguide

budgeting/templates: decouple token form from project_action block

e391499

hom3mad3 force-pushed the mr-2023-11-phase-info-update branch from b962d17 to a5c1132 Compare December 18, 2023 15:00

hom3mad3 requested review from philli-m and removed request for philli-m December 18, 2023 15:04

hom3mad3 changed the title ~~[7762] re-design phase title and description to participation panel~~ WIP [7762] re-design phase title and description to participation panel Dec 18, 2023

hom3mad3 force-pushed the mr-2023-11-phase-info-update branch 3 times, most recently from 375b013 to 03c15d2 Compare December 18, 2023 19:04

hom3mad3 commented Dec 18, 2023

View reviewed changes

meinberlin/assets/scss/styles_user_facing/_utility.scss Outdated Show resolved Hide resolved

hom3mad3 changed the title ~~WIP [7762] re-design phase title and description to participation panel~~ [7762] re-design phase title and description to participation panel Dec 18, 2023

hom3mad3 requested review from philli-m and goapunk December 18, 2023 19:20

hom3mad3 commented Dec 18, 2023

View reviewed changes

meinberlin/apps/projects/templates/meinberlin_projects/project_detail.html Outdated Show resolved Hide resolved

hom3mad3 added 3 commits December 19, 2023 12:01

templates/a4modules: module_detail add service panel

b3a5c3f

budgeting/templates: style project action button

3a7e5e9

changelog: phase info

09584aa

hom3mad3 force-pushed the mr-2023-11-phase-info-update branch from d71efa5 to 09584aa Compare December 19, 2023 11:01

hom3mad3 requested a review from m4ra December 20, 2023 08:38

philli-m self-assigned this Dec 20, 2023

philli-m reviewed Dec 20, 2023

View reviewed changes

hom3mad3 changed the title ~~[7762] re-design phase title and description to participation panel~~ [7762] re-design phase info component Dec 21, 2023

hom3mad3 mentioned this pull request Dec 21, 2023

update pr template #5340

Merged

2 tasks

philli-m removed their assignment Dec 28, 2023

goapunk force-pushed the dev branch from 228ebe5 to 2136e4e Compare January 2, 2024 11:19

hom3mad3 closed this Jan 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[7762] re-design phase info component #5358

[7762] re-design phase info component #5358

hom3mad3 commented Dec 6, 2023 •

edited

Loading

philli-m left a comment

philli-m Dec 20, 2023

philli-m Dec 20, 2023

philli-m Dec 20, 2023

[7762] re-design phase info component #5358

[7762] re-design phase info component #5358

Conversation

hom3mad3 commented Dec 6, 2023 • edited Loading

Redesign of Phase Info Panel Component

Test Page

Changes

Observations

Previews

philli-m left a comment

Choose a reason for hiding this comment

philli-m Dec 20, 2023

Choose a reason for hiding this comment

philli-m Dec 20, 2023

Choose a reason for hiding this comment

philli-m Dec 20, 2023

Choose a reason for hiding this comment

hom3mad3 commented Dec 6, 2023 •

edited

Loading