ucd-library / ucdlib-theme

University branding, additional theme support, theme elements
MIT License
0 stars 0 forks source link

Chrome Android Tablet horizontal view display issue #100

Closed spelkey-ucd closed 1 month ago

spelkey-ucd commented 1 month ago

When doing browser testing for datalab, came across the following issue when on an Android Chrome tablet in landscape view (galaxy tab s8)

image

The issue occurs when using the ucd-theme-search-popup element without the ucd-theme-quick-links element. The issue is with the margin-right property in the following css rule:

.search-popup__open::after {
  z-index: 1;
  width: 1rem;
  height: 3.25rem;
  margin-right: -1rem;
  margin-left: 0.5rem;
  background-color: rgb(20, 68, 122);
  clip-path: polygon(-2px -2px, 100% -2px, 7% 102%, -2px 100%);
  content: "";
}

margin-right should be set to zero if there is no ucd-theme-quick-links element in the header.

proposed solution

im thinking the best way to handle this would be to set a css variable:

.search-popup__open::after {
margin-right: var(--ucd-theme-search-popup--margin-right, -1rem)
}

and then have ucd-theme-header set the property depending on the value of the _hasQuickLinks property

spelkey-ucd commented 1 month ago

released v3.0.4