💄 [#1067] Mobile menu-structure with submenu toggle #506

jiromaykin · 2023-02-28T16:36:57Z

This PR can only be reviewed properly when checked-out and run in the browser.
See issue https://taiga.maykinmedia.nl/project/open-inwoner/task/1067

… caret

…les for subpage-nav

…emplate

…re-with-submenu-toggle' into feature/1067-mobile-menu-structure-with-submenu-toggle

jiromaykin · 2023-03-06T16:15:44Z

@vaszig and @bart-maykin : don't be afraid to review this - the best way to do this, is to checkout the branch and actually view it in the browser in moblie views; (just looking at all the code might be a bit too much for humans :-)

vaszig

When testing it on the browser looks good. Generally I think it would be easier and better to have smaller PR's (here we combine 14 tasks) when we have to do with changes that may affect a lot of css and html files (It has to do with one task, indeed, but I think we should split this up in the future).

vaszig · 2023-03-07T10:24:18Z

src/open_inwoner/templates/master.html

@@ -33,7 +33,8 @@
    </head>

    <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
-        {% header categories=menu_categories request=request breadcrumbs=breadcrumbs search_form=search_form has_general_faq_questions=has_general_faq_questions %}
+        {% get_solo 'configurations.SiteConfiguration' as config %}


This is not necessary, we already load the utils so we have access to the context_processors (like we do above with the colors and below with the has_general_faq_questions). So, you can add show_plans=show_plans to the header template tag.

Heh, @vaszig is correct. Note this get_solo was both my suggestion (because we looked at the other code that did something like that), and I even added the line to the context processor earlier:

open-inwoner/src/open_inwoner/utils/context_processors.py

Line 79 in 95cbe9d

"show_plans": config.show_plans,

😕

I think I did it correctly now, but keeping this comment for future reference.

src/open_inwoner/templates/master.html

src/open_inwoner/components/templates/components/Header/Header.html

Bartvaderkin

Very cool. One note, when I'm logged in my long username the layout pushes sideways:

src/open_inwoner/components/templates/components/Header/Header.html

Bartvaderkin · 2023-03-07T11:05:44Z

src/open_inwoner/components/templates/components/Header/Header.html

+                                {% if request.user.get_new_messages_total %}
+                                    {% with "("|addstr:request.user.get_new_messages_total|addstr:")" as message_total %}


Pretty impressive filter use 😄

The request.user.get_new_messages_total is doing queries though, so it is better to put its result into a variable and re-use it, instead of querying the same thing twice.

@Bartvaderkin I copied all of the already existing code from the PrimaryNavigation template to the Header template, so I did not come up with these myself; this will be a learning experience for me!

With the help of Vasileios I added {% with request.user.get_new_messages_total as total_messages %} in both header and Primary navigation.

jiromaykin · 2023-03-07T16:02:43Z

...One note, when I'm logged in my long username the layout pushes sideways

Oh dear... @Bartvaderkin, I will think of a way to solve this for someone named Wolfeschlegelsteinhausenbergerdorff-Senior and will probably use "get_short_name" for mobile view + I'll probably talk to the designer.

…s calls

codecov-commenter · 2023-03-07T16:49:13Z

Codecov Report

Merging #506 (0bf2ffa) into develop (9517ada) will decrease coverage by 0.02%.
The diff coverage is n/a.

@@             Coverage Diff             @@
##           develop     #506      +/-   ##
===========================================
- Coverage    96.53%   96.52%   -0.02%     
===========================================
  Files          521      527       +6     
  Lines        18781    19023     +242     
===========================================
+ Hits         18131    18361     +230     
- Misses         650      662      +12

Impacted Files	Coverage Δ
src/open_inwoner/utils/context_processors.py	`90.90% <ø> (ø)`

... and 27 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

alextreme · 2023-03-10T07:48:30Z

...One note, when I'm logged in my long username the layout pushes sideways

Oh dear... @Bartvaderkin, I will think of a way to solve this for someone named Wolfeschlegelsteinhausenbergerdorff-Senior and will probably use "get_short_name" for mobile view + I'll probably talk to the designer.

Lets not let perfect be the enemy of good, cutting off very long names on mobile would be acceptable in my eyes

jiromaykin · 2023-03-10T09:08:36Z

[...]cutting off very long names on mobile would be acceptable in my eyes

OK, I will add a cut off - I only just found out something like text-overflow: ellipsis exists in CSS so I will use that.

& Today the mobile design was updated, which shows the text border needs to be removed above the search bar: https://projects.invisionapp.com/share/3E135L29X8BP#/screens/471881064

src/open_inwoner/utils/context_processors.py

…ubmenu-toggle

💄 [#1067] removed borders from hamburgermenu, improved spacing, added…

415657a

… caret

jiromaykin force-pushed the feature/1067-mobile-menu-structure-with-submenu-toggle branch from 794788c to 415657a Compare March 2, 2023 14:04

jiromaykin added 5 commits March 2, 2023 17:36

💩 [#1067] Toggle caret and toggle subpages menu

ed0c5d3

💩 [#1067] Revert to main branch styles

280838c

📱 [#1132] Removed 100vh from body--open, reformatted SCSS nesting sty…

a972ede

…les for subpage-nav

📱 [#1132] Corrected class for subpage-lists

344539e

🎨 [#1132] Removed console-log

b2e903b

jiromaykin marked this pull request as ready for review March 6, 2023 09:10

jiromaykin added 4 commits March 6, 2023 15:28

🎨 [#1132] Added show_plans from siteconfiguration context to master t…

b98f24c

…emplate

🎨 [#1132] Added show_plans from siteconfiguration context to master t…

7f84b26

…emplate

Merge remote-tracking branch 'origin/feature/1067-mobile-menu-structu…

fe7b1cf

…re-with-submenu-toggle' into feature/1067-mobile-menu-structure-with-submenu-toggle

📱 [#1067] Added smaller gap for search-form

e7792a0

jiromaykin requested review from Bartvaderkin and vaszig March 6, 2023 16:13

vaszig requested changes Mar 7, 2023

View reviewed changes

vaszig reviewed Mar 7, 2023

View reviewed changes

src/open_inwoner/components/templates/components/Header/Header.html Outdated Show resolved Hide resolved

Bartvaderkin suggested changes Mar 7, 2023

View reviewed changes

src/open_inwoner/components/templates/components/Header/Header.html Outdated Show resolved Hide resolved

Bartvaderkin reviewed Mar 7, 2023

View reviewed changes

🎨 [#1132] Added show_cases to siteconfiguration and cleaned show_plan…

81fe442

…s calls

jiromaykin added 2 commits March 9, 2023 12:28

🎨 [#1067] Added variable for get_new_messages_total request

c559660

🎨 [#1067] Added variable for get_new_messages_total request for header

80e108a

jiromaykin added 3 commits March 10, 2023 11:57

🎨 [#1067] Added ellipsis/dots for very long usernames

328d937

🎨 [#1067] Fixed typo

4dbd55e

💄 [#1067] Set borders and added log-in button according to new design

0bf2ffa

jiromaykin requested a review from Bartvaderkin March 13, 2023 11:24

jiromaykin requested a review from vaszig March 13, 2023 11:24

Bartvaderkin suggested changes Mar 13, 2023

View reviewed changes

src/open_inwoner/utils/context_processors.py Outdated Show resolved Hide resolved

🎨 [#1067] Fixed show_cases for siteconfiguration

885f893

jiromaykin requested a review from Bartvaderkin March 13, 2023 16:00

Bartvaderkin approved these changes Mar 13, 2023

View reviewed changes

Merge branch 'develop' into feature/1067-mobile-menu-structure-with-s…

6773465

…ubmenu-toggle

alextreme merged commit 54bd97d into develop Mar 15, 2023

alextreme deleted the feature/1067-mobile-menu-structure-with-submenu-toggle branch March 15, 2023 10:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

💄 [#1067] Mobile menu-structure with submenu toggle #506

💄 [#1067] Mobile menu-structure with submenu toggle #506

jiromaykin commented Feb 28, 2023 •

edited

Loading

jiromaykin commented Mar 6, 2023

vaszig left a comment

vaszig Mar 7, 2023

Bartvaderkin Mar 7, 2023

jiromaykin Mar 10, 2023

Bartvaderkin left a comment

Bartvaderkin Mar 7, 2023

jiromaykin Mar 7, 2023

jiromaykin Mar 9, 2023

jiromaykin commented Mar 7, 2023

codecov-commenter commented Mar 7, 2023 •

edited

Loading

alextreme commented Mar 10, 2023

jiromaykin commented Mar 10, 2023 •

edited

Loading

		{% if request.user.get_new_messages_total %}
		{% with "("\|addstr:request.user.get_new_messages_total\|addstr:")" as message_total %}

💄 [#1067] Mobile menu-structure with submenu toggle #506

💄 [#1067] Mobile menu-structure with submenu toggle #506

Conversation

jiromaykin commented Feb 28, 2023 • edited Loading

jiromaykin commented Mar 6, 2023

vaszig left a comment

Choose a reason for hiding this comment

vaszig Mar 7, 2023

Choose a reason for hiding this comment

Bartvaderkin Mar 7, 2023

Choose a reason for hiding this comment

jiromaykin Mar 10, 2023

Choose a reason for hiding this comment

Bartvaderkin left a comment

Choose a reason for hiding this comment

Bartvaderkin Mar 7, 2023

Choose a reason for hiding this comment

jiromaykin Mar 7, 2023

Choose a reason for hiding this comment

jiromaykin Mar 9, 2023

Choose a reason for hiding this comment

jiromaykin commented Mar 7, 2023

codecov-commenter commented Mar 7, 2023 • edited Loading

Codecov Report

alextreme commented Mar 10, 2023

jiromaykin commented Mar 10, 2023 • edited Loading

jiromaykin commented Feb 28, 2023 •

edited

Loading

codecov-commenter commented Mar 7, 2023 •

edited

Loading

jiromaykin commented Mar 10, 2023 •

edited

Loading