WIP: This addresses formatting issues when favorites on a post exceed 1k #233

Closed

drudge wants to merge 4 commits from (deleted):develop into develop

drudge commented

2022-11-24 02:14:09 +00:00

Contributor

I've added specific selectors for the favorites and retweets to increase the em value to 5 from 4 for those two, and additionally centered the quote button inside its flex container so that it looks a bit better with the change in sizing

Let me know if there is a more correct way I should do this

Issue being referenced: AkkomaGang/pleroma-fe#198

I've added specific selectors for the favorites and retweets to increase the `em` value to 5 from 4 for those two, and additionally centered the quote button inside its flex container so that it looks a bit better with the change in sizing Let me know if there is a more correct way I should do this Issue being referenced: https://akkoma.dev/AkkomaGang/pleroma-fe/issues/198

updated-fe.png

190 KiB

drudge added 3 commits 2022-11-24 02:14:10 +00:00

63e12f2c69 increase component sizing to facilitate 1k+ favorites

eebfb2018b remove testing cruft

ci/woodpecker/pr/woodpecker Pipeline was successful Details

6d7a6ddb0e center the quote button inside its flex container

drudge referenced this pull request

2022-11-24 02:16:22 +00:00

4-digit interaction numbers glitch out after full load. (seen on pleroma instance) #198

drudge added 1 commit 2022-11-24 04:11:09 +00:00

ci/woodpecker/pr/woodpecker Pipeline was successful Details

9829f86f03 cleaned up scss

floatingghost commented

2022-11-25 12:18:33 +00:00

Owner

thanks - but this makes the empty spacing look pretty... off

i reckon we could probably fix this with the following:

.status-actions {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    margin-top: var(--status-margin, $status-margin);

    > * {
      min-width: fit-content;
      flex: 1;
    }
  }

which seems to work on both large and very very small displays

thanks - but this makes the empty spacing look pretty... off ![image](/attachments/60e2bc9e-b807-4d60-8197-3064d6c713b4) i reckon we could probably fix this with the following: ```scss .status-actions { position: relative; width: 100%; display: flex; flex-wrap: wrap; justify-content: left; margin-top: var(--status-margin, $status-margin); > * { min-width: fit-content; flex: 1; } } ``` which seems to work on both large and very very small displays ![image](/attachments/704f3480-4a2f-477e-81d6-fc04bda3e81a) ![image](/attachments/058480ed-89d1-4b21-961b-46edeb0e372a) ![image](/attachments/65b716f1-4fd2-494e-86be-4d01c98aebef)

image.png

41 KiB

image.png

80 KiB

image.png

6.1 KiB

image.png

57 KiB

drudge closed this pull request

2022-11-26 07:54:33 +00:00

drudge referenced this pull request

2022-11-26 08:16:53 +00:00