pleroma/pleroma-fe
Watch
2
2
Fork
You've already forked pleroma-fe
 10
Code Issues 351 Pull requests 26 Projects Releases 5 Packages 1 Wiki Activity

Fix "Posts get cut off when there is not enough space to display them at the bottom" #2130

Closed
tae wants to merge 0 commits from gitlab-mr-iid-863 into develop
pull from: gitlab-mr-iid-863
merge into: pleroma:develop
Conversation 43 Commits - Files changed -
tae commented 2019-07-01 18:39:44 +00:00
Member
Copy link

closes #599

closes #599
shpuld commented 2019-07-05 13:42:26 +00:00
Member
Copy link

This doesn't seem right, I don't think want to hard code normal text size anywhere

This doesn't seem right, I don't think want to hard code normal text size anywhere
shpuld commented 2019-07-05 13:43:00 +00:00
Member
Copy link

what do all these do?

what do all these do?
shpuld commented 2019-07-05 13:45:54 +00:00
Member
Copy link

I think defaulting the popper to above the post is better so it doesn't cover the post. I originally made it go below because it was just easier for various reasons.

I think defaulting the popper to above the post is better so it doesn't cover the post. I originally made it go below because it was just easier for various reasons.
shpuld commented 2019-07-05 13:46:53 +00:00
Member
Copy link

what are these for?

what are these for?
shpuld commented 2019-07-05 13:47:08 +00:00
Member
Copy link

what's this for?

what's this for?
tae commented 2019-07-05 15:36:55 +00:00
Author
Member
Copy link

for styling the popper arrow (in case of bottom placement)

Screenshot_at_Jul_05_11-34-36

for styling the popper arrow (in case of bottom placement) ![Screenshot_at_Jul_05_11-34-36](/attachments/f066ee92-6a91-4755-b115-7f20e29f7e18)
Screenshot_at_Jul_05_11-34-36.png
126 KiB
tae commented 2019-07-05 15:39:07 +00:00
Author
Member
Copy link

updated 👍

updated :thumbsup:
tae commented 2019-07-05 15:58:20 +00:00
Author
Member
Copy link

By default, Popper component also shows the popper when hovering itself. The original behavior was to show the popper only when hovering the popper trigger which is reply-to link. However, the component doesn't provide a way to do it. This is a hacky way to let popper not to capture hovering event by stopping event bubbling at the nested level.

By default, `Popper` component also shows the popper when hovering itself. The original behavior was to show the popper only when hovering the popper trigger which is `reply-to` link. However, the component doesn't provide a way to do it. This is a hacky way to let popper not to capture hovering event by stopping event bubbling at the nested level.
tae commented 2019-07-05 16:01:28 +00:00
Author
Member
Copy link

It's required to add slot="reference" to the popper trigger.

ref: https://github.com/RobinCK/vue-popper#vuejs-single-file-ecmascript-2015

It's required to add `slot="reference"` to the popper trigger. ref: https://github.com/RobinCK/vue-popper#vuejs-single-file-ecmascript-2015
tae commented 2019-07-05 16:06:30 +00:00
Author
Member
Copy link

This dom element overrides font-size and it affects the popper as well. It is required to reset font-size to the original value.

749812a937/src/components/status/status.vue (L72)

I think I can reset using the rem unit.

This dom element overrides `font-size` and it affects the popper as well. It is required to reset `font-size` to the original value. https://git.pleroma.social/pleroma/pleroma-fe/blob/749812a937a36bd2decd70042003a42049832172/src/components/status/status.vue#L72 I think I can reset using the `rem` unit.
tae commented 2019-07-05 16:08:40 +00:00
Author
Member
Copy link

updated.

updated.
shpuld commented 2019-07-07 10:34:30 +00:00
Member
Copy link

lgtm, @hj any thoughts before merge?

lgtm, @hj any thoughts before merge?
hj commented 2019-07-07 10:44:35 +00:00
Member
Copy link

not sure it even needs a border, might clash with some themes

not sure it even needs a border, might clash with some themes
hj commented 2019-07-07 10:46:06 +00:00
Member
Copy link

i want to test it, those arrows and borders raise some concerns for me

i want to test it, those arrows and borders raise some concerns for me
hj commented 2019-07-07 10:50:29 +00:00
Member
Copy link

ok, no actual problem with arrows, however post previews now get cut off at the top because they go behind the top bar sometimes

ok, no actual problem with arrows, however post previews now get cut off at the top because they go behind the top bar sometimes
tae commented 2019-07-08 02:48:49 +00:00
Author
Member
Copy link

@hj fixed

@hj fixed
hj commented 2019-07-08 05:45:55 +00:00
Member
Copy link

Is it possible to make popper avoid going over top bar like as if it's part of window boundary?

Is it possible to make popper avoid going over top bar like as if it's part of window boundary?
tae commented 2019-07-08 17:25:17 +00:00
Author
Member
Copy link

@hj yes, possible. I've updated.

@hj yes, possible. I've updated.
tae commented 2019-07-17 18:46:23 +00:00
Author
Member
Copy link

can we merge this, please?

can we merge this, please?
hj commented 2019-07-17 21:06:27 +00:00
Member
Copy link

can you give me a break, please?

can you give me a break, please?
hj commented 2019-07-17 21:16:10 +00:00
Member
Copy link

Images do not show up in popups

Production:
image

Branch:
image

Images do not show up in popups **Production:** ![image](/attachments/1485e9cf-1855-43eb-a842-aead2f42e1a5) **Branch:** ![image](/attachments/f72e88fb-94ef-4142-a049-16d72e3452a1)
image.png
58 KiB
image.png
38 KiB
tae commented 2019-07-18 20:54:26 +00:00
Author
Member
Copy link

@hj fixed

@hj fixed
tae commented 2019-07-24 16:36:43 +00:00
Author
Member
Copy link

bump @shpuld

bump @shpuld
hj commented 2019-07-24 17:44:25 +00:00
Member
Copy link

Something's wrong with attachments now:

This branch:
image

Develop:
image

Something's wrong with attachments now: This branch: ![image](/attachments/c6c7e6d6-cad9-4cbe-b333-0c9bb71711a1) Develop: ![image](/attachments/115b0b9b-8e24-4778-9ac0-a1af7ef3bcb7)
image.png
175 KiB
image.png
199 KiB
hj commented 2019-07-24 17:45:39 +00:00
Member
Copy link

doesn't hover work on mobile on click too? is it possible to trigger on both without relying on "detecting mobile"?

doesn't hover work on mobile on click too? is it possible to trigger on both without relying on "detecting mobile"?
hj commented 2019-07-24 17:53:05 +00:00
Member
Copy link

this looks weird, i get the feeling it probably needs to be changed to accomodate for percents instead of pixels and the fact that you're using padding-bottom and percent calculation trick

this looks weird, i get the feeling it probably needs to be changed to accomodate for percents instead of pixels and the fact that you're using padding-bottom and percent calculation trick
tae commented 2019-07-25 20:13:54 +00:00
Author
Member
Copy link

it doesn't work hover on mobile works at first click but doesn't work after that. probably a bug. this logic is required at the moment.

~~it doesn't work~~ `hover` on mobile works at first click but doesn't work after that. probably a bug. this logic is required at the moment.
tae commented 2019-07-25 20:14:32 +00:00
Author
Member
Copy link

I don't understand. what do you want to be changed?

I don't understand. what do you want to be changed?
tae commented 2019-07-25 20:42:50 +00:00
Author
Member
Copy link

Well, this is what I see. (using Chrome browser)

this branch

Screenshot_at_Jul_25_16-38-52

develop (https://shigusegubu.club/notice/9l341c0IDMy9zMXssS)

Screenshot_at_Jul_25_16-39-02

Can you kindly check if you can still observe the issue? and if yes, using what browser?

Well, this is what I see. (using Chrome browser) this branch ![Screenshot_at_Jul_25_16-38-52](/attachments/16317356-9fa1-405b-8635-56148b90b84b) develop (https://shigusegubu.club/notice/9l341c0IDMy9zMXssS) ![Screenshot_at_Jul_25_16-39-02](/attachments/2dac2d0a-7e85-4b08-9bf8-9f146233930f) Can you kindly check if you can still observe the issue? and if yes, using what browser?
Screenshot_at_Jul_25_16-38-52.png
226 KiB
Screenshot_at_Jul_25_16-39-02.png
270 KiB
hj commented 2019-07-25 21:00:28 +00:00
Member
Copy link

can you detect touch instead (spoiler: you can't)? can you assign both click and hover?

can you detect touch instead (spoiler: you can't)? can you assign both click and hover?
hj commented 2019-07-25 21:02:46 +00:00
Member
Copy link

firefox

firefox
hj commented 2019-07-25 21:03:56 +00:00
Member
Copy link

it looks like 0.6 was added to compensate for margin... Not sure, it can stay that way, ok.

it looks like 0.6 was added to compensate for margin... Not sure, it can stay that way, ok.
tae commented 2019-07-26 02:09:07 +00:00
Author
Member
Copy link

No, I can't.

Also, assigning both click and hover doesn't have any benefit except cleaner code. It makes the app heavier by unnecessarily listening to multiple events.

No, I can't. Also, assigning both click and hover doesn't have any benefit except cleaner code. It makes the app heavier by unnecessarily listening to multiple events.
tae commented 2019-07-26 02:57:45 +00:00
Author
Member
Copy link

Ok, now I'm able to see the difference in Firefox.

  • this branch

firefox__branch_

firefox__develop_

But even on develop (using your instance), I see the first image in most browsers/devices except Firefox.
Firefox seems to be buggy OR the others are, and this is likely not an issue what we want to fix here.

  • Chrome (develop)

chrome

  • Safari (develop)

safari

  • Opera (develop)

opera

  • Iphone XS (develop)

iphone

  • Pixel 2 (develop)

Pixel_2

Ok, now I'm able to see the difference in Firefox. - this branch ![firefox__branch_](/attachments/a2058ca1-e69d-44ad-bdfe-fd756250f0ed) - develop (https://shigusegubu.club/notice/9l341c0IDMy9zMXssS) ![firefox__develop_](/attachments/01268d43-ead9-4d5d-a81c-6faa6ee73433) But even on develop (using your instance), I see the first image in most browsers/devices except Firefox. Firefox seems to be buggy OR the others are, and this is likely not an issue what we want to fix here. - Chrome (develop) ![chrome](/attachments/53d8aa06-5940-49af-a15b-9976926d8f73) - Safari (develop) ![safari](/attachments/4882d5d0-662d-40fe-850d-4311f85f6744) - Opera (develop) ![opera](/attachments/aeed18b9-05e6-4aea-99dd-b8d68f353ad1) - Iphone XS (develop) ![iphone](/attachments/a054659e-5e00-4818-a3f5-40062b783dbc) - Pixel 2 (develop) ![Pixel_2](/attachments/3bb08363-ba66-44d4-8740-caaaaa07167b)
safari.png
880 KiB
opera.png
1 MiB
iphone.png
284 KiB
Pixel_2.png
265 KiB
firefox__branch_.png
331 KiB
chrome.png
1.4 MiB
firefox__develop_.png
881 KiB
hj commented 2019-07-26 07:20:23 +00:00
Member
Copy link

you've checked 2 browsers in total, since vast majority of them use WebKit/Blink and only have teeny-tiny differences, and Firefox is VERY supported browser, so it's not getting merged until it's fixed.

you've checked 2 browsers in total, since vast majority of them use WebKit/Blink and only have teeny-tiny differences, and Firefox is *VERY* supported browser, so it's not getting merged until it's fixed.
hj commented 2019-07-26 07:23:10 +00:00
Member
Copy link

it's not unnecesary, but detecting mobile browsers is a buggy mess and doesn't necessary detect laptops with touch screens etc, so binding to hover just some browsers but not the others feels more like a bug. Binding to two events meanwhile doesn't make app heavier, not that much to make it matter anyway

it's not unnecesary, but detecting mobile browsers is a buggy mess and doesn't necessary detect laptops with touch screens etc, so binding to hover just some browsers but not the others feels more like a bug. Binding to two events meanwhile doesn't make app heavier, not that much to make it matter anyway
shpuld commented 2019-07-26 13:19:33 +00:00
Member
Copy link

we should really be using some CSS normalizing for these sorts of things, I've found that usually these problems are not because of browsers doing things differently but browsers having different CSS defaults for properties we never set.

we should really be using some CSS normalizing for these sorts of things, I've found that usually these problems are not because of browsers doing things differently but browsers having different CSS defaults for properties we never set.
shpuld commented 2019-07-26 13:21:39 +00:00
Member
Copy link

I agree the "mobile detection" is a huge hack and should be avoided, if you think multiple event listeners is a problem then try to benchmark it

I agree the "mobile detection" is a huge hack and should be avoided, if you think multiple event listeners is a problem then try to benchmark it
shpuld commented 2019-07-26 13:22:57 +00:00
Member
Copy link

I also think we need to be more careful with new deps, our runtime is getting bloated

I also think we need to be more careful with new deps, our runtime is getting bloated
hj commented 2019-07-26 13:23:08 +00:00
Member
Copy link

we could've used css normalizer but i highly doubt it would help in this specific case (if it's what I'm thinking it is)

we could've used css normalizer but i highly doubt it would help in this specific case (if it's what I'm thinking it is)
shpuld commented 2019-09-05 10:52:13 +00:00
Member
Copy link

Mouse-over on the numbered replies in an expanded conversation doesn't work in this branch

Mouse-over on the numbered replies in an expanded conversation doesn't work in this branch
tae commented 2019-10-24 20:15:19 +00:00
Author
Member
Copy link

it listens to both events now.

it listens to both events now.
tae commented 2019-10-25 03:54:08 +00:00
Author
Member
Copy link

resolved

resolved

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
BE Request

   
Backlog

   
Better behavior

   
Blocked by deps

   
Bug

   
Code Review

   
Discussion

   
Doing

   
Feature Request / Enhancement

   
In the shining bright future maybe

   
It's complicated

   
MS Edge

   
Mememoon (or other niche browsers)

   
Missing API

   
Missing feature

   
Missing l10n/i18n

   
NL1
Instance Admin Dashboard

  
NL2
Improved Mobile Experience

  
NL4
Improved instance customization and QoL options

  
Need to verify on develop

   
RELEASE BLOCKER

   
Reassign or Close

   
Refactor

   
Regression

   
Safari

   
To Do

   
User story

   
Waiting on godot

   
accessibility
https://git.pleroma.social/pleroma/pleroma-fe/-/snippets/7746

  
better documentation

   
chore

   
confirmed

   
easy ticket

   
incident
Denotes a disruption to IT services and the associated issues require immediate attention

  
l10n update

   
mastoapi

   
mobile

   
needs design

   
needs-info

   
needs-review

   
stupid
No labels
BE Request
Backlog
Better behavior
Blocked by deps
Bug
Code Review
Discussion
Doing
Feature Request / Enhancement
In the shining bright future maybe
It's complicated
MS Edge
Mememoon (or other niche browsers)
Missing API
Missing feature
Missing l10n/i18n
NL1
NL2
NL4
Need to verify on develop
RELEASE BLOCKER
Reassign or Close
Refactor
Regression
Safari
To Do
User story
Waiting on godot
accessibility
better documentation
chore
confirmed
easy ticket
incident
l10n update
mastoapi
mobile
needs design
needs-info
needs-review
stupid
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
3 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
pleroma/pleroma-fe!2130
No description provided.