PieFed Meta

1641 readers

15 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

Tiles on Mobile (piefed.social)

submitted 1 week ago by suff@piefed.social to c/piefed_meta@piefed.social

4 comments fedilink hide all child comments

I'd like to have full titles (e.g. multiline) in any of the two existing tile themes. Is that possible?

Also, when using my mobile in vertical mode,

there's no difference between both themes
and text hints become useless because my phone doesn't have a cursor.

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

[–] wjs018@piefed.social 4 points 1 week ago (2 children)

there's no difference between both themes

Do you mean Tile and Wide Tile? They are going to look the same on mobile, yeah. The actual difference between them is that Wide Tile will use a lot more horizontal screen real estate for users with very widescreen monitors (which would obviously not be the case on mobile). It might make sense to make the Wide Tile button just disappear on smaller screens.

text hints become useless because my phone doesn't have a cursor

This bugs me too! I don't really have a good solution though. Some things that have popups but aren't links will work if you tap them. Sometimes tapping and holding on a link will cause the popup to appear. It's not consistent, but I don't have a better idea of how to do this either.

As for your question at the top, about multiline titles in either of the tile views, try adding this snippet to your custom user css in your settings:

#masonry .item .masonry_info .row .col-8 p {  
    white-space: normal;  
}

[–] suff@piefed.social 2 points 1 week ago

cool you can customize the css

[–] suff@piefed.social 2 points 1 week ago (1 children)

I tweaked the tiling like this:

#masonry {
  margin-left: -5px;
  padding-top: 5px;
}
#masonry .column {
  padding-right: 3pt;
}
#masonry .item .masonry_info .row .col-8 p * {
  white-space: normal;
  line-height: 100%;
}
#masonry .item .masonry_info .voting_buttons_masonry {
  display: block;
}
#masonry .item .masonry_info .row .col .upvote_button {
  display: block;
  margin: 0 auto
}
#masonry .item .masonry_info {
  position: relative;
  bottom: inherit;
}

[–] wjs018@piefed.social 2 points 1 week ago

That's great! Feel free to share over at !piefed_css@piefed.social.