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
    3·
    3 months ago

    Hey,

    I’m new to piefed, and this is already an issue for me.

    Currently I am using a simple custom CSS, which is not completely tested. Instead of collapsing the bar, it put it at the bottom of the page, and attribute the whole width to the main column :

    div.row {  
  display: block;  
}  
div.row .col-lg-8,  
.side_pane {  
  width: 90%;  
  margin: 0 auto;  
}

    Hope it will help :3

    ~melimosa

    • melimosa@piefed.blahaj.zoneEnglish
      2·
      3 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.

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

      here is some screenshots, notice how the filters for the post feed are not properly aligned. This is not much of an issue for me, but can be improved

      Screenshot of a feed using the CSS, the middle column now takes the full width, without the right bar

      Screenshot of the community message feed, the filters are not properly aligned, but are usable

      Screenshot of comments, those are correctly aligned and takes the full width