Exhibitions pages

[axis-net]

Figma pages "Näitused" (list of current and upcoming exhibitions) and "Näitus lahtiselt" (exhibition page). Also see the page "Kunst" where artworks have statuses like "Müüdud" or "Broneeritud", this may occur on any page where artworks are listed.

Test site page "Näitused > Käesolev & tulemas". Clicking a list item opens exhibition page.

HTML code is in the template files exhibitions..tpl. The list page uses exhibitions.tpl and exhibitions.list.tpl. Exhibition page uses exhibitions.article..tpl Both pages share single CSS file exhibitions.plugin.css. Add image files to the gfx/ folder unless there is already another folder suggested in the prepared code. If files are related to a specific page, name them the same way prefixed with the module name like "exhibitions.". If the files are used many places across the site, use some other meaningful prefix/system for filenames.

If extracting images from figma, try to preserve original filetype (don't convert svg to raster or don't put raster images in a svg container).

Very likely HTML doesn't need any changes but it may be done if needed, This time there are some icons as <img> tags because their alt text serves the purpose of meaningful labels. Please keep them this way.

[danielaburnaz]

Update 27.02:

1. Edited exhibitions.list.tpl to match the design in figma:
   • Added a flex-container class to contain elements in the <a>
   • Moved the <h3> element between the divs
2. Edited exhibitions.article.tpl:
   • I added exhibition-txt class to move the text and match the design in figma
   • make sure to add the images
   • added a date-location div to display the date and location in one line
   • added sisukord-container div to contain the buttons in exhibitions.article.contents.tpl
   • added 2 divs: artist-details, price-status in exhibitions.article.artworks.pic.tpl
   • added div line to create lines in the page
3. Issues:
   • I do not know how to make the gradient with css over the button without changing the JS code. Please help.
   • Is it possible to add a class named image-container to contain all of the <figure> in one div?
   • On chrome, the file_wide img breaks the site when I change the Responsive size
   • I added 3 new social media pngs but in exhibitions.article.tpl I can't directly add the social media, here is a snippet of how it should look like:

     <div class="social">
     <div class="exhibition-txt">Näitus</div>
     <!-- make sure to add the icons in the server too in gfx folder-->
     <div class="socialmedia"><span>Jälgi meid:</span> <a href="#" target="_blank"><img src="part%202%20galerii_files/article.socialmedia.fb.png" alt="Facebook"></a><a href="#" target="_blank"><img src="part%202%20galerii_files/article.socialmedia.linkedin.png" alt="LinkedIn"></a><a href="#" target="_blank"><img src="part%202%20galerii_files/article.socialmedia.x.png" alt="X"></a><a href="#" target="_blank"><img src="part%202%20galerii_files/article.socialmedia.mail.png" alt="mail"></a><a href="#" target="_blank"><img src="part%202%20galerii_files/article.socialmedia.link.png" alt="copy link"></a></div>
     </div>

• In exhibitions.tpl there is {$articles} I don't know where to edit {$articles} html template. I uploaded the 2 edited html pages on github, and the css file too.

[axis-net]

I do not know how to make the gradient with css over the button without changing the JS code. Figma doesn't seem to have gradient there. If there was gradient, it should be applied to the button outer element .axs.ui.contentlimit.pixels span.switch.open { As this appears multiple places around the site, I included this in index.css

Is it possible to add a class named image-container to contain all of the

in one div? It's not necessary. Just make the text block wide: article.article.exhibition .artworks .text-limited { flex-basis:100%; flex-grow:3; /*or more*/ }

On chrome, the file_wide img breaks the site when I change the Responsive size Let's change the solution, no max-width on the image: article.article.exhibition .file_wide { min-height:3rem; max-width:calc(var(--siteMaxWidthOuter) + var(--siteMaxWidth) + var(--siteMaxWidthOuter)); background:rgb(64,64,64); text-align:center; } article.article.exhibition .file_wide img { vertical-align:middle; width:100%; /*max-width:2000px;*/ }

I added 3 new social media pngs but in exhibitions.article.tpl I can't directly add the social media, Figma seems to contain those icons in SVG format. Replace PNGs with SVG and they will work.

[axis-net]

The page "Näitused > Toimunud " is ready for you. It shares almoust all the templates with the other page and probably most of the CSS could be included. I don't know if a <select> element can be made to look like the desing using only CSS, but give it a try and let me know.

[danielaburnaz]

Update 04.03:

1. Updated the footer of the website to fit the figma design.
2. Added icons in SVG format, but the mail and link icon aren't displayed because they are not in the html.
3. Fixed site header file-wide image. It was a very tricky problem.

Issues:

• This is what I meant by the button gradient (image below)

Update 07.03:

1. I linked the css file with the other css page.

2. I made the <select> element and search <input> look like in the design. There is a weird blue "x" symbol while typing in the <input> field.

3. There is a <div class="sisukord-container"> missing from containing the <a> elements on the Toimunud näitused site. If you could please tell me which file contains the template for it.

[axis-net]

3.Fixed site header file-wide image. It was a very tricky problem. Don't set height on the image, let it grow as much as it needs.

2.There is a weird blue "x" symbol while typing in the field. It looks like a clear input button. All mobile browsers add it and some desktop browsers too.

3.There is a

missing from containing the elements on the Toimunud näitused site. If you could please tell me which file contains the template for it. I usually follow some logic while naming files. If exhibitions.article.tpl is the main file then the next part in the name matches a variable name in that file. In this case it's exhibitions.article.contents.item.tpl

This is what I meant by the button gradient (image below) For me Figma doesn't show any gradient there but it would be logical to have it. I will add it in index.css.

In the page "Näitused toimunud" all years have the same layout in figma. Your version has later year different.

New:

Every template file has the initial version in the folder http://haus.ee.klient.veebimajutus.ee/axiscms/plugins/ A file with the same name in haus-ee theme folder overrides that. For example http://haus.ee.klient.veebimajutus.ee/axiscms/plugins/haus-ee/exhibitions.article.tpl my version can be found http://haus.ee.klient.veebimajutus.ee/axiscms/plugins/exhibitions.article.tpl

The exhibition's page changed a little. exhibitions.article.tpl added a new variable <article class="article exhibition {$_class}">

There was also an image slider added. It includes a functional JS, You just have to style it.
<section id="views" Some exhibitions don't have photos, then the section should be set to display:none; The article has a class indicating the number of images value-views-[count]. article.article.exhibition.value-views-0 #views { display:none; } If there is only one slide (value-views-1 or value-views-2), then arrows shoud be invisible (probably visibility:hidden;). There is only one arrow image, flip it with css as needed. The section heading is already moved away from screen so it's there only for screen readers. Slider pager may be set to display:none;

[danielaburnaz]

21.03 Update:

1. Don't set height on the image, let it grow as much as it needs. Okay, now in web view the image height grows 👍

2. In the page "Näitused toimunud" all years have the same layout in figma. Your version has later year different. I don't understand, could you please elaborate and add a picture of what you're referring to?

3. I think we should remove the word "Hind"(price in english), it messes up the design

4. I added the max-width to some elements in exhibitions page to match the figma layout and design

5. Please help me display only 1 image in carousel in mobile view. Suggested solution:

   
               <script>
                  var groupCount = 2; // Default group count for larger screens
                   if (window.innerWidth <= 1000) { 
                       groupCount = 1; // Set group count for smaller screens
                   }
   
                   axs.sliderLegacy.init("#views",{
                       type:'carousel',
                       play:false,
                       group_count: groupCount,
                       prev_lbl:'<img src="{$theme.dir}gfx/slider.arrow.png" alt="&lt;" />',
                       next_lbl:'<img src="{$theme.dir}gfx/slider.arrow.png" alt="&gt;" />'
                       });
               </script>

![image](https://github.com/HausGalerii/Frontend/assets/117300935/0568c2c2-a568-4597-95b6-2765b1559cec)

[axis-net]

2.In the page "Näitused toimunud" all years have the same layout in figma. Your version has later year different. I was talking about that all years have 4 articles in a row in figma, no differences. Currently that page is broken. because you added a very generic classname .list to the index.form.css. Firstly, this file was meant for form related styles only. And such a generic class like .list can appear anywhere on the site. For other than form styles you want to share in multiple places you can create your own css file and import it where needed. And selectors should be more specific, like #content .list or .main-articles-list etc.

3.I think we should remove the word "Hind"(price in english), it messes up the design Yes, you can remove {$price.lbl}. I was probably looking at some other page where it was present in the design but this page doesn't have it.

5.Please help me display only 1 image in carousel in mobile view. Suggested solution: Your solution is fine but just in case i'll mention that there is a media type class on the element that can be used too.

<script>axs.sliderLegacy.init("#views",{
type:'carousel',
play:false,
group_count:(document.querySelector('html').classList.contains('media-type-screen')) ? 2:1,
prev_lbl:'<img src="{$theme.dir}gfx/slider.arrow.png" alt="&lt;" />',
next_lbl:'<img src="{$theme.dir}gfx/slider.arrow.png" alt="&gt;" />'
});
</script>

[danielaburnaz]

3.I removed the word "Hind"

5.I tried your solution, it works when the initial viewport is mobile. Could you please help me fix the slider so there is a space between the images and it looks like in the design?

[axis-net]

5. Something like this: `#content #views .list a { display: inline-block; width: 49%; }

   content #views .list a:last-child {

   float:right; }

   content #views .list a img {

   width:100%; }`

[danielaburnaz]

1. content #views .list a { display: inline-block; width: 49%; } #content #views .list a:last-child { float:right; } #content #views .list a img { width:100%; }

   can you please help so that the image is in the middle and it looks like in the design? For now in desktop view I added temporary code to make it look similar

2. I noticed an issue that the last <p> element isn't being displayed correctly in desktop view. I think "Loe Veel" is creating this issue

[axis-net]

1. Add some padding to a: #content #views .list a { display: inline-block; box-sizing:border-box; padding:0 5rem; width: 49%; } For desktop set different padding for first and last a.

2.Added gradient to Loe veel.

[danielaburnaz]

Add some padding

It worked thank you I like the gradient on Loe veel, thanks :).

[danielaburnaz]

Hi please give me access to edit the Toimunud template. I only have access to exhibitions-arh.tpl but I need to put a div called articles-container inside of the section to which I do not have access because its in {$articles}

 <div class="list max-width">
    {$articles}
</div>

[axis-net]

Added exhibitions.section.tpl

[danielaburnaz]

Thanks I finished toimunud

[axis-net]

Testing

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

Page http://haus.ee.klient.veebimajutus.ee/?c=naitused&l=et No problems found.

Page http://haus.ee.klient.veebimajutus.ee/?c=naitused-toimunud&l=et Difference from Figma: sections 2023 and 2022 have different layouts, 2022 has two articles in a row but all years should have four.

P1. HTML validator found one error: Duplicate ID no-border

P3. Using the webpage with a keyboard only. The year select focus is not visible.

http://haus.ee.klient.veebimajutus.ee/?c=naitused&l=et&id=1

The slider images size and arrows size / position looks a bit wrong, especially in mobile view. When a slide has only 1 image (which is possible in the last slide), it aligns right

content #views .list a:last-child {

float: right;

} a solution might be :nth-child(2) then the only child wouldn't be affected. The contents (Näituse sisukord) looks like there is no design at all. The artwork's status (broneeritud etc) should be on top of image according to Figma.

P7.2 Does the page work if text is chenged or added? If there would be much more socialmedia icons, in mobile view the images get smaller. Maybe a fixed size flex-basis would help.

P9. In Firefox and Android Samsung Internet: There is space before the wide image. (visible in the previous image) Artworks text (price) right edge is off. The price should be white-space:nowrap; but this is probably not the only problem.

[axis-net]

Page http://haus.ee.klient.veebimajutus.ee/?c=naitused&l=et&id=1 Horizontal lines between sections should expand to full page width.

[danielaburnaz]

1. Difference from Figma: sections 2023 and 2022 have different layouts, 2022 has two articles in a row but all years should have four.

This is because there are only 2 articles in 2022 from the backend. If you add more articles the layout changes to have 4 articles in a row. The reason why its "2 articles" is because it follows the same principle as in page näitused

2. Duplicate ID no-border

Fixed.

3. P3. Using the webpage with a keyboard only. The year select focus is not visible.

Fixed.

4. The slider images size and arrows size / position looks a bit wrong, especially in mobile view.

Fixed

5. When a slide has only 1 image (which is possible in the last slide), it aligns right

Fixed. Now it aligns left.

6. The contents (Näituse sisukord) looks like there is no design at all.

For some reason in the file exhibitions.article.tpl line {$contents} (file: exhibitions.article.contents.tpl) doesn't execute anymore. Please check. But otherwise I fixed the issue by adding what was in that file to exhibitions.article.tpl

7. The artwork's status (broneeritud etc) should be on top of image according to Figma.

I didn't realise this was needed since it wasn't on this page's design. Please create some appropriate html that I can put on top, or a js function if an artwork has a status -> overlay on image

8. P7.2 Does the page work if text is chenged or added? If there would be much more socialmedia icons, in mobile view the images get smaller. Maybe a fixed size flex-basis would help.

I added 👍

9. There is space before the wide image. (visible in the previous image)

Yes it's in figma too.

10. Artworks text (price) right edge is off. The price should be white-space:nowrap; but this is probably not the only problem.

Fixed.

Horizontal lines between sections should expand to full page width.

Solved

[axis-net]

Difference from Figma: sections 2023 and 2022 have different layouts, 2022 has two articles in a row but all years should have four.

If there are for example 5 articles, the last one is different from others. I think we should let the designer decide if this is desired.

6. Currently {$contents} seems to be working. The reason why there is a separate file exhibitions.article.contents.tpl is that not all exhibitions have contents. Having a separate file makes it possible to omit that section without leaving empty HTML blocks when there is no contents. I made changes to your files exhibitions.article.tpl and exhibitions.article.contents.tpl, please check them out.

7. The artwork's status (broneeritud etc) should be on top of image according to Figma.

See Figma page "Kunst". The status of an artwork is always the same where ever it appears on the site and look visually mostly consistent. A possible solution could be figure.artwork { position:relative; } figure.artwork figcaption .status { position: absolute; left: 0; top: 0; right: 0; }

9. There is space before the wide image.

In the current version in Figma "Näitus lahtiselt" there is no space before cover image, also not in any other page with cover image.