search

civicrm / org.civicrm.shoreditch

Other
45 stars 59 forks source link

MAE-369: Fix expand/collapse icons overlap #472

Closed i-grou closed 2 years ago

i-grou commented 4 years ago

Overview

There was an issue with expand/collapse icons - 2 icons overlapped each other, this issue appeared in any expandable tables. Now it's fixed.

Before

image

After

image

Technical details

Here we had an interesting collision: icon from shoreditch theme set to ::after element was overlaped by icon coming from native civicrm styles set to ::before element. First I was thinking to refactor shoreditch - move icon to ::before element, but maybe ::after element is used for a reason, as I don't have background here, I decided to keep the icon in ::after. Then I've tried couple of options of hiding ::before element (civicrm icon): first I've set display: none, but got this: image This element has width: 1em which acts like a margin between icon and text. Setting font-size: 0 causing similar issue.

So if we decided to keep this element, but hide it - let's use opacity: 0 to fix this issue. Luckily there is expandable-table mixin which we can update to fix issue on all pages.

Backstop tests

I've ran backstop tests and found no issues - all failed tests are false alarms. At the same time there was something else:

  1. All tests of search-actions group failed due to the ENGINE ERROR: No node found for selector: #mark_x_151.
  2. Some tests failed due to the Error: No node found for selector: ...
  3. Some tests failed due to the TimeoutError: waiting for function failed: timeout 30000ms exceeded.

I think it can be ignored for now as this fix can not really break anything and multiple tests confirmed that everything is fine.