feat #128: first step towards responsive layout #132

sadiqkhoja · 2024-06-12T19:35:17Z

sadiqkhoja · 2024-06-12T20:20:24Z

packages/web-forms/src/components/FormLanguageDialog.vue

+const selectedLanguage = ref<FormLanguage>();
+
+const initSelectedLanguage = () => {
+	if(!props.form.currentState.activeLanguage.isSyntheticDefault) {
+		selectedLanguage.value = props.form.currentState.activeLanguage;
+	}
+}
+
+initSelectedLanguage();


maybe do a check in parent component about isSyntheticDefault

One thing that I didn't anticipate when we were chatting about this yesterday, but also worth mentioning: when a form is not translated, the mobile presentation currently moves the print button into a menu that has no other items. That print button takes up the same space as the hamburger, so it's not really saving any space.

I don't think we necessarily need to change anything on this now, but it's one more thing to add to the discussion of what to do with the print button in mobile. And what we do if/when there are more header controls like view toggle.

sadiqkhoja · 2024-06-12T20:27:32Z

packages/web-forms/src/components/FormHeader.vue

+	min-width: 0;
+
+	> div {
+		box-shadow: 0px 1px 2px 0px #0000004D;


move color codes to a global variable

Add css variables for colors and box-shadow in theme.scss

eyelidlessness

It's exciting to see this coming along! I have a few comments. I don't feel super strongly about most of them, and some probably warrant broader team discussion and possible UI/UX design iteration.

eyelidlessness · 2024-06-13T18:13:08Z

packages/web-forms/src/components/FormLanguageDialog.vue

+const selectedLanguage = ref<FormLanguage>();
+
+const initSelectedLanguage = () => {
+	if(!props.form.currentState.activeLanguage.isSyntheticDefault) {
+		selectedLanguage.value = props.form.currentState.activeLanguage;
+	}
+}
+
+initSelectedLanguage();


One thing that I didn't anticipate when we were chatting about this yesterday, but also worth mentioning: when a form is not translated, the mobile presentation currently moves the print button into a menu that has no other items. That print button takes up the same space as the hamburger, so it's not really saving any space.

I don't think we necessarily need to change anything on this now, but it's one more thing to add to the discussion of what to do with the print button in mobile. And what we do if/when there are more header controls like view toggle.

eyelidlessness · 2024-06-13T18:19:49Z

packages/web-forms/src/components/FormHeader.vue

-	</Card>
+	</PrimeCard>
+
+	<!-- for mobile and tablet -->


Also not something we need to act on right now (unless you want to explore it!): if we are sure we want to preserve the single-row presentation and condense horizontal space, this feels like a potentially excellent use case for container queries. Using it well for this might have other design implications (i.e. we'd need to know how much space is needed upfront before we can query it).

The nice thing about container queries here would be the possibility of triggering space-saving as needed, which might allow more functionality to stay visible for e.g. forms with shorter titles.

Good suggestion. For now I have run with the existing media query, I will try to use it next time we have any changes in the UI of the Form header.

eyelidlessness · 2024-06-13T18:23:46Z

packages/web-forms/src/components/FormHeader.vue

+	h1 {
+		padding-left: 10px;
+		text-overflow: ellipsis;
+		white-space: nowrap;


We discussed this on the call yesterday, and I don't want to lose the context: if we're truncating text, we might want to think about how to support expanding it. There's potentially a component generalization to consider there.

Adding to that... do we actually want to truncate form title text? In terms of use of space, might it be a better user experience to let it flow, possibly with smaller font size.

I have removed the truncation, instead Form title now wraps around.

eyelidlessness · 2024-06-13T18:30:06Z

packages/web-forms/src/components/FormHeader.vue

+		color: #000;
+		font-size: 1.5rem;


This color seems to affect only the hamburger icon, and doesn't seem to be dependent on screen size. Can we apply the color directly to that element (with a class identifying it as such)?

The font size does not seem to affect anything, as far as I can tell. The same size is applied with higher precedence on .p-button.p-button-icon-only.p-button-rounded.

good catch, I have removed it.

eyelidlessness · 2024-06-13T18:33:32Z

packages/web-forms/src/components/FormHeader.vue

+		&:hover{
+			background: var(--primary-100);
+		}
+		&:active, &:focus {
+			background: var(--primary-50);
+		}


Unclear where to put this comment, but this is where it's most visible: the hamburger menu looks great in its default state, but when these background colors are applied it shows the background all the way to the right edge of the viewport. This is a minor nitpick, but it feels a little unpolished and maybe worth a little finesse.

I had a discussion with Aly and she suggested to add equal spacing on the right side as there is on the left side, which is 10px.

Now that you mention this, it caught my eye that quite a lot of measurements in the styles are in px. I don't think we should worry about this now, but I would like to give some thought into where relative units make sense for accessibility/scaling flexibility.

Let's talk about this in Slack

We talked about using rem instead of px in Slack and setting different font-size of root for different screen sizes. Tracking it in #143

eyelidlessness · 2024-06-13T18:36:24Z

packages/web-forms/e2e/vue.test.ts

@@ -76,7 +76,7 @@ test('All forms are rendered and there is no console error', async ({ page, brow
 		const langChanger = page.getByLabel('change language');

 		if ((await langChanger.count()) > 0) {
-			await langChanger.click();
+			await langChanger.first().click();


This feels like something that could churn quite a lot. I'm generally not fond of littering UI with classes just for testing purposes, but it seems reasonable to make an exception for:

things that are global singletons (like this is)

E2E testing specifically, where it's already challenging to relate the test code to the intended structure it's targeting

Added classes to make it easier to select language changer in e2e test.

* Dont show hamburger for mobile view if there is only print button. Show the print button directly. * Wrap the title instead of truncated it. * Add space to the right side of the print/menu icon for smaller screens. * Added css classes to language changer to make it easier to select in e2e test.

* Declared different colors as variables. * Removed show/back buttons from demo, added navigation via history API * Made FormLanguageDialog and FormLanguageMenu dumb components, state change is handled by parent

changeset-bot · 2024-06-21T14:21:26Z

🦋 Changeset detected

Latest commit: 432a027

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@getodk/web-forms	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

sadiqkhoja · 2024-06-21T14:58:51Z

While making changes related to color codes, I went on a tangent and removed the back button from the demo and used history API for navigation. I wanted to remove back to make it easy for me to compare the result with the Figma. I hope this change is acceptable.

eyelidlessness

Looking great! I'm glad to land the demo navigation functionality here. As mentioned when we talked about it on a call, I had made a similar change in the ui-solid demo at one point. I'd be cautious about expanding any kind of client navigation beyond the demo, especially using native APIs directly (they're notoriously error prone). Anyway, it feels especially nice to be able to reload (or make changes and see hot reload) without getting bumped back to the form list.

eyelidlessness · 2024-06-26T15:39:25Z

.changeset/128-responsive-layout-init

@@ -0,0 +1,5 @@
+---


When we discussed this, I said I don't think the file name matters. But I do wonder if it matters whether there's a .md suffix. The changesets CLI always creates files with that suffix, and I noticed the same for the suggested filename when I used the GitHub flow in #135.

renamed it.

eyelidlessness · 2024-06-26T15:52:27Z

packages/web-forms/src/components/FormHeader.vue

+	</PrimeCard>
+
+	<!-- for mobile and tablet -->
+	<div class="flex lg:hidden align-items-center smaller-screens">


I was curious to see how wrapping looks for forms with long titles. Pretty good! I think we may want to iterate later on...

More consistent alignment of controls (icons in larger views, hamburger menu in smaller). The vertical centering makes those a moving target. I think we'll probably want some design guidance on that.

Maybe slightly reducing text size/weight over a certain character length? (Honestly the weight feels pretty heavy regardless of length, wrapping.)

Good points, I am quoting these in #139

eyelidlessness · 2024-06-26T15:54:16Z

packages/web-forms/src/components/FormHeader.vue

+		&:hover{
+			background: var(--primary-100);
+		}
+		&:active, &:focus {
+			background: var(--primary-50);
+		}


Now that you mention this, it caught my eye that quite a lot of measurements in the styles are in px. I don't think we should worry about this now, but I would like to give some thought into where relative units make sense for accessibility/scaling flexibility.

feat #128: first step towards responsive layout

9e93c81

sadiqkhoja commented Jun 12, 2024

View reviewed changes

sadiqkhoja marked this pull request as ready for review June 12, 2024 20:48

eyelidlessness reviewed Jun 13, 2024

View reviewed changes

sadiqkhoja added 2 commits June 20, 2024 16:00

Refactoring:

73439d6

* Declared different colors as variables. * Removed show/back buttons from demo, added navigation via history API * Made FormLanguageDialog and FormLanguageMenu dumb components, state change is handled by parent

sadiqkhoja added 2 commits June 21, 2024 10:26

Added changeset

727072b

updated test

2bf64ff

sadiqkhoja requested a review from eyelidlessness June 21, 2024 16:05

eyelidlessness approved these changes Jun 26, 2024

View reviewed changes

sadiqkhoja mentioned this pull request Jun 26, 2024

Design tweaks #139

Open

12 tasks

add .md extension to changeset file

432a027

sadiqkhoja merged commit bab3924 into main Jun 26, 2024
86 checks passed

sadiqkhoja deleted the features/128_responsive_layout branch June 26, 2024 17:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat #128: first step towards responsive layout #132

feat #128: first step towards responsive layout #132

sadiqkhoja commented Jun 12, 2024 •

edited by eyelidlessness

Loading

sadiqkhoja Jun 12, 2024

eyelidlessness Jun 13, 2024

sadiqkhoja Jun 12, 2024

sadiqkhoja Jun 21, 2024

eyelidlessness left a comment

eyelidlessness Jun 13, 2024

eyelidlessness Jun 13, 2024

sadiqkhoja Jun 21, 2024

eyelidlessness Jun 13, 2024

sadiqkhoja Jun 21, 2024

eyelidlessness Jun 13, 2024

sadiqkhoja Jun 21, 2024

eyelidlessness Jun 13, 2024

sadiqkhoja Jun 21, 2024

eyelidlessness Jun 26, 2024

sadiqkhoja Jun 26, 2024

sadiqkhoja Jun 26, 2024

eyelidlessness Jun 13, 2024

sadiqkhoja Jun 21, 2024

changeset-bot bot commented Jun 21, 2024 •

edited

Loading

sadiqkhoja commented Jun 21, 2024

eyelidlessness left a comment

eyelidlessness Jun 26, 2024

sadiqkhoja Jun 26, 2024

eyelidlessness Jun 26, 2024

sadiqkhoja Jun 26, 2024

eyelidlessness Jun 26, 2024

feat #128: first step towards responsive layout #132

feat #128: first step towards responsive layout #132

Conversation

sadiqkhoja commented Jun 12, 2024 • edited by eyelidlessness Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eyelidlessness left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

changeset-bot bot commented Jun 21, 2024 • edited Loading

🦋 Changeset detected

sadiqkhoja commented Jun 21, 2024

eyelidlessness left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sadiqkhoja commented Jun 12, 2024 •

edited by eyelidlessness

Loading

changeset-bot bot commented Jun 21, 2024 •

edited

Loading