Front page

[axis-net]

Test site is http://haus.ee.klient.veebimajutus.ee/ Testing instructions: https://haus.ee/test/article.webstandards.testing.en.html

1. Visual doesn't match from the edges (both mobile and desktop). As the site frame is still under development and changed a bit,, the <h3> needs removing text-decoration.
2. "View all" link arrow not a good solution. The problem can be seen while viewing with images disabled (see attached screenshot). The link with text "arrow" doesn't make any sense and is unnecessary. The cause of the problem is that <img> element is for content images but the arrow is a design element not related to the content. Instead set some padding to the link and arrow as a background image. CSS would look something like that: .see-all a { display:inline-block; padding:0.3rem 3rem 0.3rem 1rem; background:url(gfx/arrow.png) right no-repeat; background-size:auto 1.5em; } Use only one <a> and no <img> tags.
3. In the article HTML code article header should come before article content (<header> before "image-container"). When reading content without design it makes more sense to read article introduction first. See testing criteria 7.1.
4. The collection link button doesn't scale (testing criteria 7.2.. When link text changes it looks bad. No need to set fixed width or height. Instead set padding and let the button grow taller if too much text. To restrict width, set max-width or right padding. No need for display:flex as vertical padding will do vertical center. display:inline-block is sufficient.

[danielaburnaz]

Hey! Thank you for your feedback. It was really good. Here is what I worked on:

1. I removed the class section-title and edit index.css to match the example from http://haus.ee.klient.veebimajutus.ee/
2. Fixed the arrow issue, I added the css that you suggested.
3. Fixed. Now <header> is the first element before <div>
4. Button is now responsive, removed display: flex;. I added display: inline-block; max-width: 300px; and padding.

I have updated the site to correspond to the example one, with index.css and index.html

[danielaburnaz]

Hey! After our call I removed the underline from the <h3> elements.

[axis-net]

I need to create templates before it can be uploaded to the test site,

[axis-net]

Collections section templates changed. collections_banner.tpl now contains the whole section.

[axis-net]

All sections of the front page have been uploaded, except the first banner which I'll add shortly. menu-page.section.tpl is the default section template.

1)Not present yet

2)Templates: art_banner.* Uses default section template.

3)Templates: ok_banner.* Uses default section template.

4)Templates: exhibitions_banner.* Uses it's own section template exhibitions_banner.section.tpl

5)Templates: collections_banner.* Uses it's own section template collections_banner.section.tpl

6)Currently just a default text block.

[axis-net]

The first block (news slider) added. Files: news_banner.* There is a logic problem in the design. There's actually no point for prev and next buttons, we need a pause/play button instead.

[danielaburnaz]

1. There is an error with the slideshow when it changes to a new image in mobile view it still shows the old image underneath.

2. There is a logic problem in the design. There's actually no point for prev and next buttons, we need a pause/play button instead.

Considering this, I don't need to show but pause and play instead right?

3. In the design I see this prev and next buttons for one of the sections but I don't see it on the website. Will this be on the homepage?

4. In the ok_banner some words in cell1 have to be bolded but I don't have access to the cell1

[axis-net]

There is an error with the slideshow when it changes to a new image in mobile view it still shows the old image underneath. Slides need a background, just set it solid black.

Considering this, I don't need to show ... but pause and play instead right? Pager must stay as designed but replace prev button with play/pause button and try do design it the same style. A round border, triangle / two bars inside. Next button can be removed or display:none.

In the design I see this prev and next buttons for one of the sections but I don't see it on the website. Will this be on the homepage? I noticed that auctions section is incomplete, I have to add this part. Also there was a comment from the designer that I have to make exhibitions section a slider, so HTML will change there.

In the ok_banner some words in cell1 have to be bolded but I don't have access to the cell1 That is provided by the content editor, it's now updated.

[axis-net]

Exhibitions section has been changed to a slider. I updated your files too, please check them out. According to designer's notes arrows shouldn't be visible if there is only one slide. There is a class slides-[count] which can be used to hide arrows in case of slides-0 or slides-1.

[danielaburnaz]

Exhibitions section has been changed to a slider. I updated your files too, please check them out. According to designer's notes arrows shouldn't be visible if there is only one slide. There is a class slides-[count] which can be used to hide arrows in case of slides-0 or slides-1.

Hi Ivar, Please note that the slider is on the wrong section. It should be above Käesolevad näitused on Eelmise oksjoni TOP 10 not näitused.

[axis-net]

Please note that the slider is on the wrong section. It should be above Käesolevad näitused on Eelmise oksjoni TOP 10 not näitused.

They both must have sliders. Designer has added a note that if there are more than 4 exhibitions, then it must be a slider. Eelmise oksjoni TOP 10 is missing at the moment.

[axis-net]

Note that front page is modular. This means that all sections are independent, design must work if their order changes, sections are removed or new sections added. You can work on the sections that have back end and HTML ready while I the missing auction top10.

[danielaburnaz]

They both must have sliders. Designer has added a note that if there are more than 4 exhibitions, then it must be a slider.

I am guessing that in mobile view there is no need for a slider in "Käesolevad näitused" because there is a "Lae veel" button

In desktop view I think it would look good if we limited the number of articles visible to 2 to match the initial design in figma

[axis-net]

In desktop view designer has explicitly written: "If there are more than 4 then scrolling arrows appear" which means a slider. In mobile view just a list is better. As there are usually only 1-3 current exhibitions at a time, "Lae veel" is unnecessary.

[axis-net]

• I can finish the elements below the news banner ("Hausi fookuses"...), although there is a bug that the news banner overlays on top of the elements which I can't fix.

Fixed.

• Käesolevad näitused has a backend bug that there are 2 rows instead of 1. I will try to put the arrows on the sides so it will look like a carousel but the bug needs to be fixed by Ivar.

There is no bug. Back end will give as many items as there are current exhibitions in the gallery and front end has to hanlde as many as needed. That carousel-type slider works at the JS/CSS level like this: 1) Items are grouped into 1 slide as configured (currently 4 in desktop view and 1 in mobile). 2) The first slide is copied to the end of the list to make carousel loop (if there are more than 1 slide). 3) JS sets the .list element's width equal to all slides width sum, so that slides can be floated side by side. 4) Container element has overflow:hidden and scrolling effect works with negative left margin on .list element. Due to Nr 3. you can't set any side margins on slides because then they won't fit into .list in a single row. Use padding instead (borders may work too). To get arrows to the sides you need to wrap .list in a div with overflow:hidden, otherwise arrows might become invisible too.

[danielaburnaz]

There is no bug. Back end will give as many items as there are current exhibitions in the gallery and front end has to hanlde as many as needed. That carousel-type slider works at the JS/CSS level like this:

Bug: id="page-avaleht-naitused-slider-1-1" has duplicate ids for articles (same as id="page-avaleht-naitused-slider-1"), therefore it breaks the slider and doesn't go on the last slide, and stays on the first slide for now I set display:none to slider-1-1

[axis-net]

Bug: id="page-avaleht-naitused-slider-1-1" has duplicate ids for articles (same as id="page-avaleht-naitused-slider-1") This is indeed invalid HTML but this slider script doesn't use IDs on scrtolling mechanism, so this doesn't cause this problem. As I described, horizontal margins don't count on width calculation but take up space, threfore they MUST be 0 for this script to work. I made a couple of corrections to your exhibitions_banner.plugin.css to show that it works fine as described (find comments with "!!!").

[axis-net]

How site width works: class .max-width sets max-width for very large screens, left and right margin auto for centering and for small screens left and right transparent border instead of margins (because margins must be auto).

<div class="xyz">
    <h2 class="max-width">Lorem ipsum</h2>
    <div class="max-width">Dolor sit amet</div>
</div>
<div class="something-else">
    <div class="max-width">
        <h2>Lorem ipsum</h2>
        <div>Dolor sit amet</div>
    </div>
</div>

In this example outer containers (.xyz, .something-else) expand to full screen width and can have full width borders and backgrounds. Class .max-width is used on inner elements that need to align with header and footer width. Inside .max-width we do not use another .max-width. The only exception is the div.max-width in the site frame that we reset if content page needs to expand full screen width. In a content page there is no need to nest .max-width.