When you’re subscribed to a lot of communities it creates a massive list down the side of the page. This leaves a TON of white space. Is there a way to collapse those menus by default to allow for a shorter cleaner looking page?

  • melimosa@piefed.blahaj.zoneEnglish
    2·
    2 months ago

    So I come up with a way better solution, remember that I’m not a JS/CSS dev at all. This is done through some flex container manipulation, height manipulation and :hover magic.

    It hides the sidebar below the main panel, and by hovering the grey rectangle it allows you to show it. I find it to work really well.

    .main_pane, #side_pane {
  order: 1;
  width: 90%;
  max-width: unset !important;
  margin: 0 auto !important;
  overflow-y: hidden;
}

#side_pane {
  order: 0;
  
  display: flex;
  
  flex-direction: row;
  flex-wrap: wrap;
  
  margin-top: 1rem !important;
  gap: 1em 0.5em;
  
  height: 3rem;
}

#side_pane:before {
    display: block;
    content: close-quote;
    height: 3em;
    width: 95%;
    margin: 0 auto;
    background-color: #eee;
}
  
#side_pane .card {
    order: 1;
    margin-top: unset !important;
    height: fit-content;
    max-width: calc(100% - 1em);
    width: 100%;
}
  
#side_pane .card#about_community {
    order: 0;
    width: 100%;
}

#side_pane:hover {
    height: unset;
    margin-bottom: 1rem !important;
}
    
#side_pane:hover:before {
  display: none;
}

    PieFed custom CSS system doesn’t allow & and ' symbols, which is pretty inconvenient for recursives selectors and for content clauses.

    • wjs018@piefed.socialEnglish
      2·
      2 months ago

      I don’t know enough css to know exactly what is going on here just from a glance. However, if it would make your life easier if there was a new css class on something that you could target, that is easy enough to add, just let us know.

      • melimosa@piefed.blahaj.zoneEnglish
        1·
        2 months ago

        Hello !

        I don’t know a lot about CSS. But I what I was trying to do was : putting the side bar before the mainbar, with the same width as the main ; and hiding / showing it with an interaction (here hover a rectangle shown above the main bar).

        A proper way to do it would certainly be having a page template that has a sidebar hide/show checkbox (or in HTML <details>, <summary> etc…), but this would mean a slightly different page layout (and as non-front-end dev I think I’m not the right person to ask ahah).