HausGalerii / Frontend

Haus Gallery frontend
0 stars 0 forks source link

Search results page #7

Open axis-net opened 5 months ago

axis-net commented 5 months ago

Search results page is uploaded. Figma: otsingu tulemused Tempates: search.* (results page), aut.search.tpl (artist), art.search.tpl (artwork). Figma contains examples for artists and artworks but no regular text page result and no keyword mark. For those improvise something simple. For example search for Paul Allik.

Also the designer replaced the yellow color. In the site frame CSS there is a variable --underlineColor with that color code. Please use that variable in your code.

danielaburnaz commented 5 months ago

Hi I am almost finished with the search page, please make me the next page

Also the designer replaced the yellow color. In the site frame CSS there is a variable --underlineColor with that color code. Please use that variable in your code.

Ok I updated my variables

axis-net commented 5 months ago
  1. Just curious, why do you use this strange selector? #content > .max-width .aut:is(section) { There's nothing wrong with it but it's basically the same simple selector #content > .max-width section.aut {

  2. Some selecors should be more specific: #content > .max-width .art { A classname .art might appear in some other search result in a different context. It's probably meant to select #content > .max-width section.art {?

Same problem here: figure figcaption {

figure.artwork { If this site had a sidebar, this could affect artworks there, also might appear in some other search result in a different context. Recommend something like #content section.art figure.artwork {

Two problems with this: .plugin-deflt_box { 1)In this example that is the default (text) search result not specific to any plugin. Don't use plugin-* class there. Search for "lorem ipsum" to see the problem. 2)Not specific enaugh, currently breaks the main menu item "Teenused" but could happen elsewhere in the future.

  1. <button name="follow" value="aut10"><img src="/axiscms/plugins/haus-ee/gfx/aut.follow.plus.svg" alt="follow plus">Jälgi</button> You can't add content to the front end. All content must be editable and translatable, which means it must come through the back end. The text "follow plus" is content that is presented to the user when image file is not loaded for some reason or when using a screenreader. On a non-english page these are not valid words, on an english page the button would read: "follow plus follow" which is strange at best. Compare these two examples to understand when using img tag is the best solution and when not: <img src="calendar.svg" alt="date:" /> 21.12.2023 would read "date 21.12.2023". <img src="next.svg" alt="next"> next would read "next next" In the first example img tag carries useful information that 21.12.2023 is the date. In the second example img tag adds nothing useful and should be set as a backgroud image or ::before or ::after instead.
danielaburnaz commented 5 months ago
  1. Some selecors should be more specific:

Thanks for mentioning when I first tried to do something similar it didn't work now its section.art

.plugin-deflt_box {

Oh thanks I had no idea it was going to break the site. I fixed the layout of the site now with another selector

<button name="follow" value="aut10"><img src="/axiscms/plugins/haus-ee/gfx/aut.follow.plus.svg" alt="follow plus">Jälgi</button>

I removed the <img> element and added a background image to the button

I fixed the autofill white background issue image

I have a question, when will the sharing element be available? image

axis-net commented 3 months ago

Testing

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

Page http://haus.ee.klient.veebimajutus.ee/?c=search&l=et&axs%5Bcontent-search%5D=paul+allik Don't reorder search results, let it be the back end's choice. The path element has been removed from template search.list.tpl. Check the default file.

P8.1 RWD. Layout problems in Android / Samsung browser, the same in desktop browsers responsive view. Screenshot 2024-06-06 at 12-12-03 Otsing

danielaburnaz commented 3 months ago
  1. Don't reorder search results, let it be the back end's choice.

The reason why I reorder the results is to match the design in figma. (see page "otsingu tulemused") image

  1. The path element has been removed from template search.list.tpl. Check the default file.

I don't know what you're referring to, could you please explain

  1. P8.1 RWD. Layout problems in Android / Samsung browser, the same in desktop browsers responsive view.

Solved image

axis-net commented 3 months ago

The reason why I reorder the results is to match the design in figma. (see page "otsingu tulemused") I understand this but this may change depending on search keywords or gallery's decisions.

The path element has been removed from template search.list.tpl. Check the default file. The default file is http://haus.ee.klient.veebimajutus.ee/axiscms/plugins/search.list.tpl There is <div class="path"><a href="{$url}" target="_blank"><span>{$path}</span></a></div> that shows result's location in the site content tree. It's not present in Figma's authors and artworks but search includes more pages and the default result template is used for them, which includes this element. Currently your version of artwork results has it, but figmas doesn't.