HausGalerii / Frontend

Haus Gallery frontend
0 stars 0 forks source link

User account page #8

Open axis-net opened 7 months ago

axis-net commented 7 months ago

The first part of user account page is up. Figma: konto seaded Files authform_register.plugin.css, authform_register.tpl, more tpl files will come for subpages. The registration and login forms seem to be part of the site header, I will add them there, don't do anything with the login form. Just log in with user a@b.com pass 123456 and continue from there. Currently there is the page frame and account settings page. There are more fields than in figma, it will be decided later which will stay. Will let you know when swubpages are added.

axis-net commented 7 months ago

Sub-page follow (Minu jälgimised) has been added. Figma: Minu jälgimised Files: authform_register.tabs.follow.tpl, authform_register.tabs.follow.aut.tpl, authform_register.tabs.follow.art.tpl

axis-net commented 7 months ago

Sub-page purchases (Ostuajalugu / pakkumised) has been added. Figma: Ostuajalugu/pakkumised Files: authform_register.tabs.buy.tpl, authform_register.tabs.buy.bid.tpl, authform_register.tabs.buy.buy.tpl

danielaburnaz commented 7 months ago

Hi, I made the design for the pages which you gave me, I am waiting for login + signup page and the next pages : ).

axis-net commented 7 months ago

As I understand from Figma login + signup don't have pages, they are included in the header and open as dropdown menus. Header is part of the site frame and I'll do everything myself there.

axis-net commented 7 months ago

Added sub-page auction registration (Oksjonile registreerimine). Click submit buttons to see status change. The file upload part lacks file input in figma but let it be visible for now.

axis-net commented 5 months ago

Testing

Checkpoints https://haus.ee/test/article.webstandards.testing.en.html

Page http://haus.ee.klient.veebimajutus.ee/?c=user

Some form fields have input required mark at the end of label. There is no example in Figma, but I'd reccommend it should have no underline / outline. Maybe some space before it and maybe a bit larger font?

P7.1 <h1> is completely removed with CSS, but WCAG and screenreaders it would be better to move it off the screen so it remains accessible:

#content section:has(h1) h1 {
position:absolute;
left:-999rem;
top:-999rem;
 }

P7.2 If a label would take up several rows, input should align top, not middle. Screenshot 2024-06-06 at 15-36-01 Kasutajakonto

P8.1 RWD. Mobile view seems to be unfinished?

Page http://haus.ee.klient.veebimajutus.ee/?c=user&l=et&s=buy Images should align to text top. Text part is different from Figma.

P7.2 Price numbers should always have white-space:nowrap; if space is tight, number formatting will cause line break. Screenshot 2024-06-06 at 19-13-21 Kasutajakonto

P8.1 RWD. Mobile view seems to be unfinished?

Page http://haus.ee.klient.veebimajutus.ee/?c=user&l=et&s=follow

P7.2 When text size is zoomed, some artist names break to multiple lines despite there is free space. I'd suggest using a flexible grid with max-width.

Page http://haus.ee.klient.veebimajutus.ee/?c=user&l=et&s=reg Seems to be unfinished.

axis-net commented 5 months ago
  • In Chrome the page looks like in the design, however in versions of Firefox before 2023 it doesn't look the same. This is because the selector ":has" or ":not" do not exist in older versions of firefox. Unfortunately I couldn't find any other way to do the css without those selectors because of the way the html is structured from the backend.

Please specify where is the problem? Currently I see the same in FF and Chrome and the same issues as mentioned before.

danielaburnaz commented 5 months ago

P7.2 If a label would take up several rows, input should align top, not middle.

It looks better in the middle.

P7.2 Price numbers should always have white-space:nowrap; if space is tight, number formatting will cause line break.

Fixed.

Please specify where is the problem? Currently I see the same in FF and Chrome and the same issues as mentioned before.

It looks like this in my browser, like in the design image image