Artists pages (Kunstnikud)

[axis-net]

Artists list page is uploaded, This page is connected to real database and is functional, all the navigation and search can be used. Template files aut.* For the main title and alphabet navigation I'd recommend using floats rather than flexbox. The search form on this page is generated by the framework and there are no html templates for it because it would be very difficult to customize and it has plenty of tags to accomplish this design. As there is no standard form element for a dual range slider, it is built combining four standard elements and JS. Currently it lacks some functionality and it may change a bit.

[danielaburnaz]

Please give me access to the aut.* template files. As of right now it would be really hard to achieve the mobile design with the current html layout, I would only be able to accomplish the desktop view.

[axis-net]

The templates are uploaded again and the slider seems to be working now. For some reason there is artists name search in mobile version but none in desktop view. I'll ask about it.

[axis-net]

New file index.form.css There are common styles in the (search) forms across the site. Please move that code to the file index.form.css which is included globally.

[danielaburnaz]

09.04: Artists page:

1. In mobile view I don't know how to add the letter of the alphabet for sorting Please group the <a href=...> artists in a div with the letter of their name like `<div class="A"></div> <div class="B"></div>`

2. Search field is set to hidden + no dropdown in mobile view

3. Is it possible to add this <div class="line"></div> after the current button in mobile view? I wanted to somehow edit this line and add it <nav class="cat max-width">{$_nav.cat="field":"cat","function":"nav_cat","select-first":1}</nav>

Here is how the page looks like right now:

[axis-net]

Artists page: In mobile view I don't know how to add the letter of the alphabet for sorting Please group the Indeed I missed the need for sections and open/close search form in the mobile view. Changes: 1) Changed code In the aut.tpl file:

<section class="search">
<h2 class="section-title max-width">{$search.filter.txt}</h2>
<div class="max-width">
{$_search}
<script src="{$/}axiscms/lib/axs.form.element.range-between.js"></script>
<script>hausAut.list('#content .search form','#content .list','#content .list>*');</script>
<script src="{$/}axiscms/lib.js/axs.ui.accordion.js"></script>
<script>axs.ui.accordion.attach('section.search');</script>
</div>
</section>

{$_articles="section":"a"}

Be shure to update your local versions too. 
2) added section template aut.section.tpl

>2.Search field is set to hidden + no dropdown in mobile view
That hidden field if for back end to know which form was submitted, no problem with that. Please specify what is the question about? 

>3.Is it possible to add this <div class="line"></div> after the current button in mobile view?
I think we should make a design change here. The main title "Meie kunstnikud" has too little space. Keep the whole line for the title and move buttons below the line. 

[danielaburnaz]

1. There is still no open/search form like in the design Design: Current:

2. Once clicked on a letter it doesnt underline the current letter that I am at in neither mobile or desktop view

3. I update the site with the new button order

[axis-net]

1. You didn't replace the search div code with the section I posted here. I updated your file myself, now it's there. You can override the CSS styles to disable it in desktop view. Also the search form grey background needs to expand to the full width!

2.Once clicked on a letter it doesnt underline the current letter that I am at in neither mobile or desktop view There are class and aria attributes in HTML if a letter is selected. You can use them to style underline.

3 I will ask Piia for the final decision.

[HausGalerii]

3. Piia prefers Karolas design, but it's ok to make the change If its functionally /technically needed

[danielaburnaz]

1. Still no search box in mobile view under the buttons I added js code in order to display the class "open" on the section while in desktop view

           document.addEventListener('DOMContentLoaded', function() {
               var section = document.querySelector('section.search');
               if (window.innerWidth >= 800) {
                   section.classList.add('open');
               }   
           });

2. There are class and aria attributes in HTML if a letter is selected. You can use them to style underline.

Done. Overall I think this page is complete. However the search box in mobile view doesn't exist.

[axis-net]

1>Still no search box in mobile view under the buttons It will come when I upload artist profile page.

Some code change again. The open/close button arrow solution could be done with CSS but it would not pass accesibility tests. The attach() function has additional parameters: initially open and button labels. <script> axs.ui.accordion.attach('section.search',{ open:(document.querySelector('html').classList.contains('media-type-screen')) ? true:false, buttonOpen:'<img src="{$theme.dir}gfx/arrow.expand.png" alt="+" />', buttonClose:'<img src="{$theme.dir}gfx/arrow.expand.png" alt="-" />' }); </script> Button labe can be flipped with CSS.

There are some problems:

1. grey lines and search section background must expand to the full window width. Set #content>.max-width { max-width: none; border-left: none; border-right: none; } and use class .max-width on inner elements that don't need to expand.
2. The slider thumbs are incorrect. Figma: Screenshot:

Some code for index.form.css: `html form.axs .element.type-range-between .slider input[type=range]::-webkit-slider-thumb { width:0.6rem; height:0.6rem; border-color:rgb(211,172,44); background:rgb(37,37,37); }

html form.axs .element.type-range-between .slider input[type=range]::-moz-range-thumb { width:0.6rem; height:0.6rem; border-color:rgb(211,172,44); background:rgb(37,37,37); }` Find out why label is missing and why ::before and ::after grey bullets don't display.

[danielaburnaz]

1. Your js code works, thanks. The button switches are not displaying the arrow.expand.png, instead they are only displaying - or +.

2. grey lines and search section background must expand to the full window width.

Done

3. Find out why label is missing

The "Hinnavahemik" label is now visible.

why ::before and ::after grey bullets don't display.

Z-Index Conflict: both ::before and ::after had the property z-index: -5;. I made it so now ::before and ::after have z-index: 1;. If the button ::after has a z-index higher than -1 it will overlay on top of the slider button and the user cannot press on it.

please change this line to always have z-index: 2; so the user can press on the right button of the slider

4. Please stop removing my code from index.css. All of the pages that I've worked on use these variables and its more accessible if its in index,css, rather than me copy pasting the same variables in every single file.

[axis-net]

1. Forgot to update some files, now <img> works in the button.

why ::before and ::after grey bullets don't display. Something in index.form.css causes the problem. Remove index.form.css for a moment and you will see the slider work. I moved the slider code to index.css, please remove it from index.form.css

4.You are not allowed to change index.css, the site frame is my responsibility. In some previous comment I already suggested you create some other css file for that and use @import to include it. That's also the reason why index.form.css exists, to separate your global code from mine. You can put global variables there too.

About index.form.css It is meant for sharing form styles that are used on almoust all the pages. If you put code for .page-kunstnikud there it will be loaded on all the pages of the site but it is needed only in the artists page. Artist page specific code belongs to aut.plugin.css. And class .page-kunstnikud is set by the content editor and it's not persistent, editor may change it any time. And In other languages it's different anyway. If you use aut.plugin.css there is no need to use that class because the code is not loaded in other pages than artists page.

[danielaburnaz]

I updated index.form.css and aut.plugin.css

why ::before and ::after grey bullets don't display.

It's because of the form background color. If I set the background to z-index lower, yes the buttons show up, but the slider stops working. I still stand with the solution of modifying the z-index of the buttons to 1 so they are visible.

[axis-net]

You have a good point that negative z-index brings them behind non-positioned elements. At first z-index:1 made max slider not work, so I had to move all the slider's z-index higher and now it works.

Changes to aut.tpl: Added another search form for name search. code {$_search.name} In the filter search set name element to display:none

Changed JS to only one row <script>hausAut.list('{$theme.dir}','#content .list','#content .list>*');</script>

Added artist profile page with all the sub-pages. Use Paul Allik for an example with sufficient data.

[danielaburnaz]

Done. aut.plugin.css has the display none on the inner search field to not be displayed on this page but it can be displayed on others

In the kunstifilmid github issue you mentioned this:

Socialmedia icons are currently native widgets provided by the portals. I'll look for a solution to customize them later.

The widgets are also on the artists profile page Could you please customize them?

[axis-net]

The name search box visual doesn't seem to match perfectly yet (width, top padding).

Yes, I'll make some global solution for that.

[danielaburnaz]

Hey, some of the artworks on the profile page are missing images, how should they be displayed?

[danielaburnaz]

I have another issue that the next section template inside of the article is being executed outside of the <article> element

Also there is a white box inside of the search element on autocomplete

[axis-net]

Hey, some of the artworks on the profile page are missing images, how should they be displayed? The test site is missing a lot of data but in production site there will be no artworks without images, you can juust ignore this problem.

I have another issue that the next section template inside of the article is being executed outside of the

element The aut.article.exhibitions.list.tpl has an error: the last line is </section> but should be </article>. My initial version had this error but you can fix it in your version.

Also there is a white box inside of the search element on autocomplete Chrome has this default style for selected autofill. Try input:-internal-autofill-selected { appearance:none; } If this doesn't work, inspect other properties.

[danielaburnaz]

Hi Artists profile page is finished I am just waiting for the "share on social media" element to be done. Also on "works available" the search fields are empty

[axis-net]

The content of the elements will change. I changed the colors of <select>, please add color to the bottom border. The follow button would probably be better with icon image as a background rather than <img> as I wrote about search page.

[axis-net]

Socialmedia share buttons added. For this to work a HTML code change is needed: {$_socialmedia.share="facebook":true,"linkedin":true,"x":true,"mail":true}

[axis-net]

Testing

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

Page http://haus.ee.klient.veebimajutus.ee/?c=kunstnikud&l=et Main heading "Meie kunstnikud", too much space before. Probably #content top padding has changed later, set it 0 in your css file. Second navigation, no need to move selected item first. Mobile: "Meie kunstnikud" navigation should have 2 items in a row (flexible width 50%). Artists list letters not positioned correctly.

P1 HTML is not valid. Duplicating elements causes duplicate IDs which is not permitted. It also causes bad content structure like duplicate main page title (<h1>) etc. A possible solution to relocate elements could be CSS grid for mobile view. If that doesn't work duplicating only letters navigation would be acceptable. P2 CSS validator reports 1 error in aut.plugin.css. P7.1 Large blocks of duplicate content as mentioned above.

Page http://haus.ee.klient.veebimajutus.ee/?c=kunstnikud&l=et&cat=&t=Paul-Allik&id=10 Search form elements should have have labels according to Figma. In firefox select dropdowns look ugly on this page, but look good http://haus.ee.klient.veebimajutus.ee/?c=naitused-toimunud&l=et Artworks price euro sign should be moved before number. There was a possible solution in my default file how it could be done with CSS.

Page http://haus.ee.klient.veebimajutus.ee/?c=kunstnikud&l=et&id=10&view=cv No problems found.

Page http://haus.ee.klient.veebimajutus.ee/?c=kunstnikud&l=et&id=10&view=auctions Artworks price euro sign should be moved before number.

Page http://haus.ee.klient.veebimajutus.ee/?c=kunstnikud&l=et&id=10&view=videos No problems found.