Collections page

[axis-net]

Collections page is up and running (Kunst > Kollektsioonid) Figma: Kollektsioonid, Kollektsioonid avatud Templates: collections.*

[danielaburnaz]

Can you please give me access to the template of this page

[axis-net]

The first page seems to be ok with the standard template, do you need to change saomething there? The article page (collections.article.*) has all the templates available for you. In css you have uset the class .page-kollektsioonid which is not a persistent class. collections.plugin.css is not loaded anywhere else, you can just remove the class and it should work fine. If you shuold sometimes need a persistent class then there is always .plugin-[plugin.name], in this case .plugin-collections

[danielaburnaz]

The first page seems to be ok with the standard template, do you need to change something there?

I would like to add another class besides max-width because the same file is used for both pages and the code for Kureeritud kollektsioonid is changing the layout in the other page. I tried using specific selectors like :not(article) to separate them but it didn't work. Separate css files would be nice too

[axis-net]

Added collections.tpl

[danielaburnaz]

Please remove the file_wide class from the img element as this img takes the already existing css for the parent element and applies it to the image.

Overall the "Collections page" is finished

[axis-net]

.file_wide is the database field and form element name for this file and is automatcally added to the by the back end framework. If you have the same classname somewhere else, write a more specific selector.

[danielaburnaz]

okay I just changed the name of the div class to file_wide_image instead and everything works well.

[axis-net]

Yes, that solution is ok. By more specific selectors I meant something like #content article.article>.file_wide { or #content diiv.file_wide { Those would not affect the image but in this case changing the class is just fine too.

[axis-net]

Testing

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

Page http://haus.ee.klient.veebimajutus.ee/?c=kollektsioonid&l=et collections.plugin.css contains a rule that breaks all the <section> elements in header and other parts of the page section { padding-bottom: var(--padding); } Use more specific selectors like #content section.

Page http://haus.ee.klient.veebimajutus.ee/?c=kollektsioonid&l=et&t=Lorem-ipsum&id=2 The contents (Kollektsiooni kunstnikud) lines on top and bottom should extend to full page width. In mobile view the contents (Kollektsiooni kunstnikud) should have two items in a row. To achieve this, set items flexible width (50% - gap/2) and set the fixed width in desktop view. Price and year elements should always have white-space:nowrap just in case.

P7.2 Socialmedia icons get smaller when there are more of them. Set a fixed flex-basis and allow flex-wrap.

[danielaburnaz]

1. The contents (Kollektsiooni kunstnikud) lines on top and bottom should extend to full page width.

This is due to some firefox browsers lacking support for the :has() pseudo class. A solution would be for you to add 2 different classes for these pages, as I do not have access to their templates. This is the only solution I could find.

2. In mobile view the contents (Kollektsiooni kunstnikud) should have two items in a row. To achieve this, set items flexible width (50% - gap/2) and set the fixed width in desktop view.

Solved

3. Price and year elements should always have white-space:nowrap just in case.

Solved

4. P7.2 Socialmedia icons get smaller when there are more of them. Set a fixed flex-basis and allow flex-wrap.

Solved

[axis-net]

Article page left and right edge should align the same width as header and footer.

The contents (Kollektsiooni kunstnikud) lines seem to be ok now but if there are not many items, they stretch apart. It would look better aligned left.

[axis-net]

• Same issue in older versions of Firefox, I had to use ":has" and ":not" because Ivar didn't give me 2 separate class names, although I asked and specified the reason. https://github.com/HausGalerii/Frontend/issues/5#issuecomment-2158481704

If you have a wrapper <div class="max-width"> you don't need the .max-width class on it's children (<header>, <div class="text">) or you don't neet the wrapper div if you have .max-width on <header class="max-width">, <div class="text max-width">. In other words, try not to nest .max-width. The same problems with extending lines have been solved on other pages like Näitused or Kunstnikud.