Commit graph

375 commits

Author SHA1 Message Date
Lim Chee Aun
6af689835d No glow when hover 2023-02-23 15:56:35 +08:00
Lim Chee Aun
63c6637c24 Need a little glow on glass menu 2023-02-23 10:45:28 +08:00
Lim Chee Aun
3232f14247 Fix border radius clipping bug on Safari 2023-02-22 23:39:52 +08:00
Lim Chee Aun
c13cab51a9 Show large card for content with text-weight=1
Also finally replace the hacky CSS with something more legit
2023-02-21 23:59:34 +08:00
Lim Chee Aun
33afb081dd Need a min height in case height is too small 2023-02-19 01:39:27 +08:00
Lim Chee Aun
a77b96b171 Pushing the limits of CSS coding 2023-02-19 01:23:31 +08:00
Lim Chee Aun
7e65d8be5d Make smaller statuses stand out in the carousel 2023-02-19 01:10:06 +08:00
Lim Chee Aun
522d55ebb8 New experiment: multi-column mode 2023-02-18 20:48:24 +08:00
Lim Chee Aun
3f73f7d174 Fix weird bug when closing media modal + status page
Somehow useMatch re-renders the media modal and mess up some event handlers on it
Possibly due to react-router-match vs preact issues.

So, remove it totally, replace with CSS :has() solution
2023-02-18 17:38:42 +08:00
Lim Chee Aun
523cb09912 Still need some gradient 2023-02-17 22:40:40 +08:00
Lim Chee Aun
5ef67fab91 Variable-ise the 40em 2023-02-17 20:47:09 +08:00
Lim Chee Aun
9fbfc993fd Smoother animation for menu 2023-02-17 19:39:33 +08:00
Lim Chee Aun
5af2a060a6 Update styles 2023-02-17 19:31:28 +08:00
Lim Chee Aun
e53352592b Fix scroll position got reseted by CSS 2023-02-17 11:29:39 +08:00
Lim Chee Aun
0430f4ae89 Reuse BoostCarousel for pinned posts
Now we can show *anything* into a carousel
2023-02-17 10:55:16 +08:00
Lim Chee Aun
bec531df05 Testing another thing 2023-02-16 17:52:41 +08:00
Lim Chee Aun
0bef245c83 New feature: Shortcuts 2023-02-16 17:52:16 +08:00
Lim Chee Aun
65efe5a9b9 More shadow fixes 2023-02-12 10:26:09 +08:00
Lim Chee Aun
e4c49ec7d7 Shadows should always be dark 2023-02-12 08:10:48 +08:00
Lim Chee Aun
6c43ced27c Desperate attempt to make the text and buttons flows nicely in the header
This code will probably haunt me in the future
2023-02-11 23:35:03 +08:00
Lim Chee Aun
61edcb2115 Replace ALT badge with info icon
ALT is just… too technical.
2023-02-11 22:36:19 +08:00
Lim Chee Aun
454562d763 Another header width fix 2023-02-11 20:52:54 +08:00
Lim Chee Aun
a1e13322d5 Try this out 2023-02-11 20:39:45 +08:00
Lim Chee Aun
62eb6d6b30 Reuse style for search page, time to surface it 2023-02-11 17:01:43 +08:00
Lim Chee Aun
068a49abce Add Followed Hashtags 2023-02-11 16:48:47 +08:00
Lim Chee Aun
4b28b6f366 Potential fix for Vite messing up the CSS import order 2023-02-11 09:03:18 +08:00
Lim Chee Aun
0040deaa0a Better menu styles 2023-02-11 00:15:20 +08:00
Lim Chee Aun
e0e236bd26 Experimental hidden search page
And refactored out some reusable components
2023-02-10 22:10:13 +08:00
Lim Chee Aun
81ebb61096 Sneak in this little menu
And… fix title leak bug
2023-02-10 13:39:46 +08:00
Lim Chee Aun
5ca9a7a91f Use different fade timing for updates button 2023-02-10 00:36:56 +08:00
Lim Chee Aun
58d4ca0ff2 Finally replace Home 2023-02-09 22:27:49 +08:00
Lim Chee Aun
6c5807810d Sometimes I play with hidden UIs 2023-02-08 21:19:07 +08:00
Lim Chee Aun
abed50a64e Less fancy transition for compose button icon 2023-02-08 19:34:58 +08:00
Lim Chee Aun
f511b0a5ab More code porting 2023-02-08 19:11:33 +08:00
Lim Chee Aun
9921e487e8 Minimum viable Home → Following port 2023-02-08 00:31:46 +08:00
Lim Chee Aun
942d0b0a30 Fix welcome page peakaboo 2023-02-05 20:14:23 +08:00
Lim Chee Aun
9a261470df Custom titleComponent for Timeline 2023-01-31 19:08:10 +08:00
Lim Chee Aun
b106d1d519 Adjust header margins 2023-01-31 19:07:09 +08:00
Lim Chee Aun
18b48c8d19 Smarter collapsing, show total comments count, show 3 avatars 2023-01-31 16:13:16 +08:00
Lim Chee Aun
a2e47d7a6a Hide arrow from summary 2023-01-31 00:37:55 +08:00
Lim Chee Aun
8787d44b56 Disable pinch-zoom on body 2023-01-30 21:54:30 +08:00
Lim Chee Aun
a990b883f3 Remove old unused code 2023-01-30 21:05:49 +08:00
Lim Chee Aun
d5447db035 Use % instead 2023-01-30 19:49:38 +08:00
Lim Chee Aun
09272e8407 Make header go up a little 2023-01-29 19:11:58 +08:00
Lim Chee Aun
b8c9059562 Quick fix for "See post" messing up the top controls div in small screens 2023-01-29 15:55:15 +08:00
Lim Chee Aun
292186e918 New UI experiment: media modal + status detail page
- Extracted out the media modal and media component from Status
- Use :has CSS selector to do most of the layout work
- Expecting edge case UI bugs
2023-01-29 15:23:53 +08:00
Lim Chee Aun
80cc387c1c Home header style change 2023-01-29 10:17:29 +08:00
Lim Chee Aun
66216e911e At this point, might as well support level 4
Also still need to show the comment icon IF THERE'S LEVEL 5++
2023-01-29 01:29:26 +08:00
Lim Chee Aun
a088b48eb7 Status thread page improvements
- Show level 3 comments
- Change header-tap to scroll top to a button instead (prevent accidental scroll top)
- Show avatars in <summary>
- Clean up CSS a bit
2023-01-29 01:02:25 +08:00
Lim Chee Aun
ae90b41aae New feature: "Show all sensitive content" menu 2023-01-28 22:34:36 +08:00
Lim Chee Aun
aaeca7dd03 Refactor out a Timeline component
Also replace login() with createClient() for faster log in
2023-01-28 18:52:18 +08:00
Lim Chee Aun
1a5816f886 Try disabling the fade-out when loading context
Too distracting.
2023-01-28 14:05:04 +08:00
Lim Chee Aun
816653e2e6 Add j/k keyboard navigation to status page
At the same time, fix shift+k not working in Home page
2023-01-27 20:54:18 +08:00
Lim Chee Aun
77c1b36a1f Fix wrong shadow color 2023-01-27 14:35:44 +08:00
Lim Chee Aun
7785e29f0d Fun stuff 2023-01-27 11:47:37 +08:00
Lim Chee Aun
3392f57462 Rewrite scrolling logic in carousel
Just normal scroll event is enough, don't need intersection observer
2023-01-25 20:37:59 +08:00
Lim Chee Aun
5b8657a2ab Subtle fade in for menus 2023-01-25 16:39:57 +08:00
Lim Chee Aun
a18659ee27 Test: Disable user-selection in carousel 2023-01-24 22:21:27 +08:00
Lim Chee Aun
5f89c0673a Fix wrong colors for menu on Mobile Safari 2023-01-24 22:00:50 +08:00
Lim Chee Aun
28281bb752 New component: Menu
It's time to do this menu thing the right way instead of hacky CSS
2023-01-24 20:56:43 +08:00
Lim Chee Aun
082745ee4f Experiment: disable :hover state on non-hover devices 2023-01-24 16:26:22 +08:00
Lim Chee Aun
8cbed0911e Style carousel dots to look the same too 2023-01-24 12:15:39 +08:00
Lim Chee Aun
a495e1fa68 Only do transition for large screens 2023-01-22 17:19:37 +08:00
Lim Chee Aun
1439b22963 New feature: ALT badge in image carousel
Adjusted the layout and fix some styles as well
2023-01-22 16:27:00 +08:00
Lim Chee Aun
9bff95bcec Replace preact-router with react-router
Need more routing powers, hopefully things don't break 🤞
2023-01-21 00:23:59 +08:00
Lim Chee Aun
a362a9367f Reduce width of boosts carousel
Make it show roughly 3 boosts at a time
2023-01-18 00:56:35 +08:00
Lim Chee Aun
cf0cf27283 Embrace the web's a:visited 2023-01-17 13:37:48 +08:00
Lim Chee Aun
76aeff47ae Test expand boosts carousel to almost full-width for large screens 2023-01-17 00:56:13 +08:00
Lim Chee Aun
dc25c52e07 Back to left side 2023-01-16 20:49:26 +08:00
Lim Chee Aun
a5e2c30400 Don't need to fade the numbers out 2023-01-15 01:20:35 +08:00
Lim Chee Aun
8c0078ddd8 It's time for hairline width 2023-01-14 22:27:02 +08:00
Lim Chee Aun
0f4f1505ad More purple please 2023-01-14 22:17:47 +08:00
Lim Chee Aun
b8b8cc57cd Try rotate3d instead
Got to squeeze out that GPU power yo
2023-01-14 20:22:41 +08:00
Lim Chee Aun
e2139399ee New experiment: Boosts Carousel™️ 2023-01-14 19:42:04 +08:00
Lim Chee Aun
d9096ce831 Make media modal sheet max 2023-01-13 17:23:18 +08:00
Lim Chee Aun
1d4c604899 Still too fast 2023-01-13 15:39:10 +08:00
Lim Chee Aun
7ac7965ea3 Also avoid :active bubbling for buttons 2023-01-12 19:28:37 +08:00
Lim Chee Aun
cda16b1da6 720deg is too fast 😂 2023-01-11 11:16:32 +08:00
Lim Chee Aun
affc977f42 Need this width 2023-01-11 01:11:13 +08:00
Lim Chee Aun
57d0e0cb77 Prevent horizontal scroll 2023-01-11 01:08:18 +08:00
Lim Chee Aun
021d2aa2ae Feather spins 2023-01-10 21:03:36 +08:00
Lim Chee Aun
a1401e0b69 Active style when click on media 2023-01-09 23:44:02 +08:00
Lim Chee Aun
c252667ce4 Make updates button drop faster 2023-01-07 21:03:01 +08:00
Lim Chee Aun
33176c5ea7 Have a little fun with CSS variables X JS 2023-01-07 20:38:05 +08:00
Lim Chee Aun
ba1674b846 Temporarily disable this
This is affecting the default scrollTop position of the status
2023-01-07 11:46:30 +08:00
Lim Chee Aun
fffc8cc983 Further grouping of notifications 2023-01-06 12:51:53 +08:00
Lim Chee Aun
3ca696dd3d Modals for media attachments in composer
Dedicated editor experience per media attachment
2023-01-06 01:51:39 +08:00
Lim Chee Aun
eef658b758 Slightly higher z-index for updates-button 2023-01-04 19:41:35 +08:00
Lim Chee Aun
a41655698f Disable text selection on some elements 2023-01-03 15:51:16 +08:00
Lim Chee Aun
8d609e14a6 This subtle press-down effect starts to annoy me 2023-01-03 00:30:40 +08:00
Lim Chee Aun
7408d7a5d4 No need opacity 2023-01-02 23:16:21 +08:00
Lim Chee Aun
597232067d Not down enough 2023-01-02 21:43:04 +08:00
Lim Chee Aun
39124ccc70 Add experimental scroll-based effects
- Scroll to top = refresh Home
- Scroll up/down = show/hide header and compose button
- Scroll near bottom = load next statuses
- Move Compose button to only at Home instead of 'App' level
2023-01-02 21:36:24 +08:00
Lim Chee Aun
c3aef80ad4 More styles 2023-01-02 15:00:13 +08:00
Lim Chee Aun
d2d8571b3f Fix updates button got cut off in larger viewport 2023-01-01 19:24:08 +08:00
Lim Chee Aun
0517690ed3 Spruce up the compose button 2023-01-01 17:19:20 +08:00
Lim Chee Aun
6306ed9602 Move updates button further down 2023-01-01 16:02:15 +08:00
Lim Chee Aun
951c93a070 Add link to media in carousel modal 2023-01-01 12:28:54 +08:00
Lim Chee Aun
842db90f9c Handle context API call fail error 2023-01-01 12:02:11 +08:00
Lim Chee Aun
b153d7526c Add even more spacing 2023-01-01 12:01:39 +08:00
Lim Chee Aun
ac91dc7983 Make this manual opt-in 2023-01-01 08:51:56 +08:00
Lim Chee Aun
d46a1e8b38 Set min height for timeline 2023-01-01 00:50:48 +08:00
Lim Chee Aun
b12b0c588d Experimental j,k,o,esc,backspace shortcuts 2022-12-31 09:52:31 +08:00
Lim Chee Aun
2c970f635a Make focus ring nicer 2022-12-30 23:09:25 +08:00
Lim Chee Aun
30c529fe02 No opacity for sheet animation
Move things around a bit
2022-12-30 13:55:46 +08:00
Lim Chee Aun
167399f889 Subtle press state 2022-12-30 11:03:03 +08:00
Lim Chee Aun
5804ddbdb9 Add all the focuses 2022-12-29 16:11:58 +08:00
Lim Chee Aun
c205a43125 Try this fancy touch-action 2022-12-28 20:38:16 +08:00
Lim Chee Aun
86df9fd9f8 Tap media to toggle carousel controls 2022-12-28 19:31:08 +08:00
Lim Chee Aun
44617cffca Make sure bottom toast respect safe area 2022-12-28 18:04:58 +08:00
Lim Chee Aun
23a6cdbe3b Fix video alignment 2022-12-28 14:43:58 +08:00
Lim Chee Aun
8b6cae5611 More gradients for headers 2022-12-28 10:49:43 +08:00
Lim Chee Aun
03ae42ab17 Possible fix for #35 2022-12-27 19:12:36 +08:00
Lim Chee Aun
43e0f51bcf Add bot indicator 2022-12-27 18:09:07 +08:00
Lim Chee Aun
7fca59782e Make donut meter work on Safari 2022-12-26 20:34:24 +08:00
Lim Chee Aun
6b41666efe It's time to toast 🥂 2022-12-26 14:02:05 +08:00
Lim Chee Aun
cf4fbc8553 Make sheet have header and body section 2022-12-25 18:01:01 +08:00
Lim Chee Aun
e4116cf9e6 Don't need left border in small screen 2022-12-24 23:17:13 +08:00
Lim Chee Aun
966e8b9cb7 Better backdrop 2022-12-24 17:54:58 +08:00
Lim Chee Aun
f8fac1294b Fixes & adjustments to statuses in Status page 2022-12-24 01:11:11 +08:00
Lim Chee Aun
87f197fc88 Possible fix for #24 2022-12-23 21:28:16 +08:00
Lim Chee Aun
ea0352e51a Maybe need this 2022-12-23 19:33:06 +08:00
Lim Chee Aun
13a347ce37 New: char count for Compose field
Uses pre-compiled regex for perf
2022-12-23 16:45:02 +08:00
Lim Chee Aun
206d40c0a4 Snap stop need to be the children, not parent 2022-12-23 09:17:41 +08:00
Lim Chee Aun
374b8d97d5 Fix some scrolling and snaps 2022-12-23 08:00:11 +08:00
Lim Chee Aun
7e84088d67 Handle case when too many sub-comments
For now, encourage clicking on status to see more replies instead of expanding the sub-comments
Feels "wasted" since the comments are already loaded but it's just too much scrolling

Also auto-open if the sub-comments are not a lot.
2022-12-23 00:30:55 +08:00
Lim Chee Aun
79d6fd02b8 The tap highlight color can get very distracting 2022-12-22 19:44:22 +08:00
Lim Chee Aun
eba78e3f07 Time to embrace sheets
.box class is just… weird…
2022-12-21 20:00:45 +08:00
Lim Chee Aun
3b6f0f277e Rewrite whole scroll logic for Status page
Handle 3 cases, all written down in comments.

Crossing my fingers 🤞🤞🤞
2022-12-21 18:02:13 +08:00
Lim Chee Aun
e9e664d871 Spread the timing function 2022-12-20 20:24:10 +08:00
Lim Chee Aun
8babc97877 Fix status jumping bug
This part is too complex.
The thread can get very fancy and it's impossible to handle all use-cases without a lot of code.
Solution is just fading all of them out while loading.
2022-12-20 15:32:31 +08:00
Lim Chee Aun
c16b7764f2 Fancier transition/animation timing function 2022-12-20 15:13:49 +08:00
Lim Chee Aun
bbec6f2de9 Fix small-height videos too small
When it's too short, the native video player UI is cramped
2022-12-20 13:21:53 +08:00
Lim Chee Aun
6561f14d8b Menu popover need a little soft shadows 2022-12-20 09:28:12 +08:00
Lim Chee Aun
7d7473da15 Possible quick fix for menu popovers not working on iOS 2022-12-20 09:27:59 +08:00
Lim Chee Aun
221ef84e4a Smaller font size for updates button 2022-12-19 19:24:51 +08:00
Lim Chee Aun
943c017928 Change from flex to grid, for the header
Flex is just too… flexible, I need something more rigid like grid
2022-12-19 19:24:39 +08:00
Lim Chee Aun
772c4c7ba9 Remove this, it does weird blends 2022-12-19 16:35:35 +08:00
Lim Chee Aun
4339c4485d Move the comment button down a bit 2022-12-19 16:35:22 +08:00
Lim Chee Aun
8e8ab69528 Make sure the summary button is on top 2022-12-19 16:35:09 +08:00
Lim Chee Aun
9beee6cb37 Revert back to 'X' instead of '<'
It can be confused with the browser back button. It doesn't function as back button as well
2022-12-19 16:25:57 +08:00
Lim Chee Aun
8c97dcc5bc 💅 Aesthetic changes 2022-12-19 13:38:16 +08:00
Lim Chee Aun
e0ed7daa87 Styling fixes 2022-12-19 10:05:50 +08:00
Lim Chee Aun
d8e94270ad A little outline for elegance 2022-12-19 00:19:44 +08:00
Lim Chee Aun
9022a3ee12 Fix faux bottom spacer not working 2022-12-19 00:19:34 +08:00
Lim Chee Aun
8ba0d15484 Preliminary steps to support safe areas 2022-12-18 21:07:40 +08:00
Lim Chee Aun
a029c7ccae Change from 'x' to '<' on Status page 2022-12-18 20:53:32 +08:00
Lim Chee Aun
2f24713d71 Real nested comments
- Collapsed/expandable replies
- Pagination for many many comments
2022-12-18 20:46:13 +08:00
Lim Chee Aun
6e09d5f836 Fix .insignificant class affecting other elements
Remove them because they were used in previous discarded design
2022-12-18 01:14:44 +08:00
Lim Chee Aun
4b49c6fb03 Aesthetic changes to Account sheet
- Larger avatar
- Less rounded sheet
- Add Joined date
2022-12-18 00:38:19 +08:00
Lim Chee Aun
ec0b76901a Disable this faded out hash character
It's annoying when folks post many many hashtags in a sentence but at the same time I need this to be the "identifier" that it's a link and clickable

As Phanpy doesn't handle hashtag links yet (in itself), this needs to be distinct.
2022-12-16 13:30:07 +08:00
Lim Chee Aun
7762c5b6a7 Yeah, this depends on the header height 2022-12-16 01:44:51 +08:00
Lim Chee Aun
9717b94468 Smaller header for small screen 2022-12-16 00:57:21 +08:00
Lim Chee Aun
b987b525ef Use dvh wherever possible 2022-12-15 12:38:30 +08:00
Lim Chee Aun
72751709df New feature: poll
- More fixes
2022-12-14 21:48:17 +08:00
Lim Chee Aun
94fb2b04f7 Remove unused code
There's no nav now
2022-12-12 22:43:15 +08:00
Lim Chee Aun
5353a4535a New feature: Edit status!
Get's a bit hacky now
2022-12-12 21:54:31 +08:00
Lim Chee Aun
85866b5190 White background by default (mobile-first) 2022-12-12 10:08:55 +08:00
Lim Chee Aun
87029b43d4 Fix clicking on active carousel dot closes the media modal
Also make the active dot larger
2022-12-12 08:46:50 +08:00
Lim Chee Aun
cb64f5ffda Add "Edited at" meta with Edit History modal
Much refactor, kinda ugly code still.

Edit History design is still very basic.
2022-12-11 21:22:22 +08:00
Lim Chee Aun
61d38e2996 Didn't know this can prevent accidental browser "Back" feature 2022-12-11 16:00:44 +08:00
Lim Chee Aun
cfce3c32cd Always difficult to keep track of z-indices 2022-12-11 15:30:49 +08:00
Lim Chee Aun
aeceb94219 Fix carousel actually not working properly
- Need intersection observer to tell JS that scroll snap happened
- Fix carousel dots not working
- Add fancy background overlay based on image average color
- Disable fade out if open in carousel
2022-12-11 14:35:57 +08:00
Lim Chee Aun
be5a5cbd7c Remove unneeded code 2022-12-11 13:27:17 +08:00
Lim Chee Aun
0367a6e08f Fix box too cramp on smaller screens 2022-12-11 13:09:16 +08:00
Lim Chee Aun
ee074bec7f Use dvh *everywhere*
Mobile Safari getting tricky
2022-12-11 08:14:14 +08:00
Lim Chee Aun
4c907c355f Fix viewport + scroll bugs on Mobile Safari 2022-12-11 08:01:53 +08:00
Lim Chee Aun
5aa9649935 Convert all outlines to borders
Because Safari ain't respecting border-radius with outlines
2022-12-11 00:52:04 +08:00
Lim Chee Aun
5c813b69be Fix fade transition feels too slow and laggy 2022-12-10 23:53:05 +08:00
Lim Chee Aun
b69d9f3fa8 Manage to make the top carousel controls hide-able too 2022-12-10 23:39:12 +08:00
Lim Chee Aun
80b3432ccb Carousel very buggy on mobile. Add close button. 2022-12-10 22:27:00 +08:00
Lim Chee Aun
b06fc385ad Experiment with this hide-controls UI on carousel 2022-12-10 20:56:38 +08:00
Lim Chee Aun
d0cdc48bb4 Active carousel dot shouldn't be clickable 2022-12-10 20:47:53 +08:00
Lim Chee Aun
ac87f557d6 This .mention style is going global 2022-12-10 19:16:43 +08:00
Lim Chee Aun
2b9390a0a1 Initial commit 2022-12-10 17:14:48 +08:00