PieFed Meta

1587 readers

24 users here now

Discuss PieFed project direction, provide feedback, ask questions, suggest improvements, and engage in conversations related to the platform organization, policies, features, and community dynamics.

Wiki

founded 2 years ago

MODERATORS

rimu@piefed.social

Allow collapsing of side menus (media.piefed.social)

submitted 2 weeks ago* (last edited 2 weeks ago) by ozoned@piefed.social to c/piefed_meta@piefed.social

9 comments fedilink hide all child comments

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?

you are viewing a single comment's thread
view the rest of the comments

[–] melimosa@piefed.blahaj.zone 3 points 2 weeks ago* (last edited 2 weeks ago) (6 children)

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.zone 2 points 2 weeks ago (2 children)

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.social 2 points 2 weeks ago (1 children)

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.zone 1 points 1 week 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).

[–] Blaze@lemmy.zip 1 points 2 weeks ago (1 children)

That's nice, you could maybe post it to !piefed_css@piefed.social

[–] melimosa@piefed.blahaj.zone 2 points 2 weeks ago

Oh thanks, didn't know about this community, I might post it there :)

load more comments (3 replies)