svthalia / concrexit

Thalia Website built on Django.
https://thalia.nu
Other
23 stars 12 forks source link

Always show ribbon #3744

Closed ColonelPhantom closed 2 months ago

ColonelPhantom commented 3 months ago

Closes #3727.

Summary

Removes the display:none for the chair ribbon on the mobile layouts.

How to test

  1. Use the mobile layout (open on phone, zoom in, use devtools, whatever)
  2. Go to board/committee page
  3. See that the ribbon is visible

Issue

It does seem that if the screen is extra small, the ribbon is kind of oversized. I tried looking into fixing this, but it seems to be written using 6-year old CSS using absolute positioning and px units.

se-bastiaan commented 2 months ago

Saw this on my gh feed :)

The absolute positioning is probably because the ribbon is rotated using CSS and there is no other way to position it. And the display none just because of lazyness.

Fact is that the grid items used for member pictures are originally based on the theme that was bought back in 2013/2014 (even before I joined the then WWWcie) and when we redid the design to be based on bs4 in 2018 we also still kept that stuff. IIRC that the ribbon was even hacked in because the original function labels were not considered clear enough or something. So the real solution is probably to rewrite all that crap 😆

Anyways, for a smaller version you probably want this:

@mediaquery {
    .grid-item .ribbon-wrapper {
        width: 55px;

        .ribbon {
            top: 4px;
            width: 80px;
            font-size: 12px; // .75rem?
        }
    }
}