Commit graph

205 commits

Author SHA1 Message Date
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
cd70bf87db Animate position-object when link is focused 2023-02-20 17:51:41 +08:00
Lim Chee Aun
e35f4e2644 Vite complain this is too complex 2023-02-17 20:48:52 +08:00
Lim Chee Aun
3915b3818c One more 40em 2023-02-17 20:48:38 +08:00
Lim Chee Aun
dc1a045de9 Fix play icon too faded out 2023-02-17 13:07:43 +08:00
Lim Chee Aun
c37df11a25 Show pinned posts 2023-02-17 10:12:59 +08:00
Lim Chee Aun
7aba448f42 Handle multi-paragraph code blocks
This ain't going to be fun if the HTML gets messier in the future
2023-02-16 21:51:22 +08:00
Lim Chee Aun
e4d9e7f7db Disable position-object animation when media modal appears
Got to say :has() is so darn useful
2023-02-11 23:46:33 +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
1638bb4e37 Fix clamp bug 2023-02-10 14:20:41 +08:00
Lim Chee Aun
8871334af8 Allow 2-line clamp for alt tag on small screens too 2023-02-10 13:35:43 +08:00
Lim Chee Aun
0a4c3069dd Fix this translateY making carousel jumpy
- It moves outside of the box
- Causes the container to have a vertical scrollbar
- When scrolling, it's moves up and down, causing the carousel to jump
- Don't quite understand why, maybe a super rare browser (Chrome) bug
2023-01-30 19:35:28 +08:00
Lim Chee Aun
305bb92906 Fix optimizeSpeed rendering can affect text kerning and layout
Seems like Mobile Safari make less font rendering calculation to speed up rendering. When toggling between text-rendering modes, the text can be shifted or relayout-ed.
2023-01-30 10:01:34 +08:00
Lim Chee Aun
20b0a80c45 Delicate adjustments to the gradient hints 2023-01-25 01:01:04 +08:00
Lim Chee Aun
7f9742b50a Animate skeleton 2023-01-25 00:26:47 +08:00
Lim Chee Aun
0ea65b2cfd Remove old spoiler effect
This was fun but sadly perf is really bad
2023-01-24 22:21:04 +08:00
Lim Chee Aun
f16c29097c Experiment: more radius for media 2023-01-24 21:10:44 +08:00
Lim Chee Aun
cdb5435796 Nicer radius for multi-media container 2023-01-23 20:35:15 +08:00
Lim Chee Aun
3213e8503e Fix alt tag text got chopped off at the bottom 2023-01-22 23:57:43 +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
8c0078ddd8 It's time for hairline width 2023-01-14 22:27:02 +08:00
Lim Chee Aun
45c107d403 Make leading poll votes more prominent 2023-01-13 15:44:42 +08:00
Lim Chee Aun
9338c6905d Try another spoiler effect 2023-01-10 22:10:29 +08:00
Lim Chee Aun
c4236e6de7 New feature: thread numbering 2023-01-10 19:59:02 +08:00
Lim Chee Aun
c4bba6e507 Slight change in poll styles 2023-01-09 23:44:24 +08:00
Lim Chee Aun
a1401e0b69 Active style when click on media 2023-01-09 23:44:02 +08:00
Lim Chee Aun
8a8dad12c8 Better handling of audio 2023-01-09 01:17:16 +08:00
Lim Chee Aun
5b90ab46a8 Make it more hearty 2023-01-07 21:37:16 +08:00
Lim Chee Aun
862107f2e6 Few styling changes to card etc 2023-01-07 20:25:13 +08:00
Lim Chee Aun
ee9bfe6331 Lots of tiny adjustments 2023-01-07 14:45:04 +08:00
Lim Chee Aun
aab9a475e8 Fix text alignment in small card
It's confusing when status can be small/large and card can small/large too
2023-01-07 11:52:23 +08:00
Lim Chee Aun
5c162d211f Rewrite the <video autoplay> hack for Mobile Safari
- Auto animate when in Status page
- Object-fit contain for GIFs in Status page
- Add GIF label on timeline
2023-01-06 18:25:47 +08:00
Lim Chee Aun
a4b452e177 Switch back to blur effect for spoilers
The SVG filter is too heavy for mobile browsers
2023-01-05 13:30:19 +08:00
Lim Chee Aun
88297fa17e Remove opacity from spoiler content 2023-01-03 15:52:28 +08:00
Lim Chee Aun
5478e407aa For large cards, align the meta left 2023-01-03 15:51:33 +08:00
Lim Chee Aun
910120ecd7 When status is small, need more breathing space 2023-01-03 13:52:13 +08:00
Lim Chee Aun
dbfdd6ec68 Add border for card 2023-01-03 13:03:22 +08:00
Lim Chee Aun
f8821d530d Maybe these might help a little 2023-01-02 22:02:21 +08:00
Lim Chee Aun
07dff34e20 Show formatted duration for video media 2023-01-02 14:21:38 +08:00
Lim Chee Aun
4d7aeca10f Make skeleton unpointerable 2023-01-01 16:09:10 +08:00
Lim Chee Aun
c116de8456 Don't show card when status is truncated 2023-01-01 16:01:57 +08:00
Lim Chee Aun
f9e1704727 Disable this hover effect for large status
Will still animate in timeline but at least not as distracting
2022-12-31 20:18:56 +08:00
Lim Chee Aun
a409ff6712 Some images are just… too high 2022-12-30 13:37:59 +08:00
Lim Chee Aun
5804ddbdb9 Add all the focuses 2022-12-29 16:11:58 +08:00
Lim Chee Aun
a6196f923f Better styles for card
Show large card for large status, but only when there's no poll and media
2022-12-29 08:57:01 +08:00
Lim Chee Aun
5869ec3b9f Move "Read more" slightly to the left 2022-12-28 10:52:08 +08:00
Lim Chee Aun
fa0ccece32 Handle > 4 medias
- Mastodon now doesn't allow >4, so this is for the future or maybe the forks.
- Using grid for better control on how images lay out
2022-12-28 10:51:57 +08:00
Lim Chee Aun
af437ae4c8 Image vertical alignment is always a pain 2022-12-26 20:39:49 +08:00
Lim Chee Aun
e320a5be4a pre-wrap for code blocks 2022-12-26 18:05:00 +08:00
Lim Chee Aun
be656d585a Make boosts shorter 2022-12-26 14:33:46 +08:00
Lim Chee Aun
9278645069 Another attempt at fixing GIF not autoplaying on Mobile Safari 2022-12-26 01:09:19 +08:00
Lim Chee Aun
c8ea2e8703 Restyle cards
Got to max-height it, and then make sure the images crop smaller
2022-12-26 00:43:17 +08:00
Lim Chee Aun
01963c9d7a Try different heart animation 2022-12-25 23:51:17 +08:00
Lim Chee Aun
cf4fbc8553 Make sheet have header and body section 2022-12-25 18:01:01 +08:00
Lim Chee Aun
0276820185 Fix className typo 2022-12-25 15:49:39 +08:00
Lim Chee Aun
05fd9bdd2c Make spoiler effect work in dark mode 2022-12-24 22:52:19 +08:00
Lim Chee Aun
c6b9e3fc78 New spoiler filter 2022-12-24 16:51:19 +08:00
Lim Chee Aun
d6421972df Reduce spacing at the top of the thread badge 2022-12-24 14:15:47 +08:00
Lim Chee Aun
fcd29d4bdc Aesthetic changes
- Icon change for "Unlisted"
- Dynamic text size for compose field depending on char count
2022-12-23 21:25:01 +08:00
Lim Chee Aun
7b6d30f37d Limit iterations for image hover position animation 2022-12-22 15:08:37 +08:00
Lim Chee Aun
c3bbd04e77 Different way of shifting the pixels 2022-12-22 12:59:44 +08:00
Lim Chee Aun
3c4c59106a Handle media > 2 taking a lot of vertical space
Also handle media > 4, which I think some instances probably allow
2022-12-22 10:47:45 +08:00
Lim Chee Aun
ade3ebb5ae Experiment: new reply/thread "badges"
Also totally forced one-lined the name text + date at the top of a status
2022-12-22 10:35:39 +08:00
Lim Chee Aun
71083b46e2 Add "Refresh" button for polls 2022-12-21 19:46:38 +08:00
Lim Chee Aun
4acb6aa3c2 Subtle badges 2022-12-20 20:17:38 +08:00
Lim Chee Aun
091960bdff Fix border not visible for media-video 2022-12-20 17:50:43 +08:00
Lim Chee Aun
bf907abc17 Disable this small font sizing 2022-12-20 09:37:29 +08:00
Lim Chee Aun
8c97dcc5bc 💅 Aesthetic changes 2022-12-19 13:38:16 +08:00
Lim Chee Aun
96a38e5df1 Bigger check for poll option 2022-12-18 23:06:05 +08:00
Lim Chee Aun
c6e71e2432 Smaller gaps between media attachments 2022-12-18 23:05:49 +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
1ffcffa1f4 Try different style for "Read more" 2022-12-18 10:08:44 +08:00
Lim Chee Aun
d3f7659331 Tabular nums for the numbers 2022-12-18 00:09:22 +08:00
Lim Chee Aun
3a21b58f55 Prevent this from wrapping 2022-12-17 23:17:13 +08:00
Lim Chee Aun
58fe7a46f4 Change from line-clamp to max-height
-webkit-line-clamp doesn't work on multiple <p>s on Mobile Safari
2022-12-17 23:01:34 +08:00
Lim Chee Aun
400bc6f696 Truncate long posts on timeline, show "Read more"
10-line clamping for now
2022-12-17 21:06:51 +08:00
Lim Chee Aun
5f0d1e8656 Refactor action buttons + optimistic UI 2022-12-17 17:26:41 +08:00
Lim Chee Aun
c026635221 Try this 50% width for card image
It's tough trying to balance the space required by the image vs the card title/desc/etc
2022-12-16 13:26:38 +08:00
Lim Chee Aun
5148462670 Have a little fun with action icons' animations
Also fix the jumpy border
2022-12-16 01:28:22 +08:00
Lim Chee Aun
12c11c65c1 The title inside the card has weird line height 2022-12-15 20:18:48 +08:00
Lim Chee Aun
b490974638 Responsive font-size for the poll and actions too 2022-12-15 10:01:18 +08:00
Lim Chee Aun
27c0ba7f4b Make sure the media has min height
Some images have *very* small height
2022-12-15 01:46:04 +08:00
Lim Chee Aun
da0309ab0f Light tint of background for poll options 2022-12-15 01:18:23 +08:00
Lim Chee Aun
58860c334c Responsive font size based on content length
The shorter, the larger font-size
2022-12-15 00:41:48 +08:00
Lim Chee Aun
121e9176f3 Add style for leading choices
Also make sure the votes percentage doesn't shrink
2022-12-14 19:00:04 +08:00
Lim Chee Aun
f2dc15c8ef Slightly smaller font size for meta text in poll 2022-12-14 18:45:34 +08:00
Lim Chee Aun
8b5ac5154c Fix pre meta text taking up space, due to some *very* long names/usernames 2022-12-14 16:16:08 +08:00
Lim Chee Aun
6195f45800 Remove unused code 2022-12-13 20:42:19 +08:00
Lim Chee Aun
9d78e67381 New feature: pop-out compose window
- More consistent design for both reply-to status and source status preview
- Fixed bugs too
- Make sure index.css is always above
2022-12-13 20:42:09 +08:00
Lim Chee Aun
3e80ee03f3 Simpler code for content enhancement
Also fixed some shortcodes not converted
2022-12-13 20:15:02 +08:00
Lim Chee Aun
f649f60b5b Move the time to the right 2022-12-12 22:56:38 +08:00
Lim Chee Aun
4d09d24e00 Better card preview styling
Test in case all the texts are too long and overflowing
2022-12-12 22:43:47 +08:00
Lim Chee Aun
79f1b255d2 Slight layout adjustments 2022-12-12 22:15:13 +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
111bc27f96 Fix spacing inside the card preview 2022-12-12 21:53:06 +08:00
Lim Chee Aun
d32d9c62eb Style backtick inline codes
The tree walker code is generated via Copilot, hope it works
2022-12-12 21:51:59 +08:00
Lim Chee Aun
b988b10c3d Fixes and refactor for compose UI with media uploads
Somehow prettier (for CSS) start running properly
2022-12-12 16:27:44 +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
d848304c80 Make play icon look nicer on videos 2022-12-11 15:26:49 +08:00
Lim Chee Aun
977176067e Fix too many borders on card (image) 2022-12-11 12:05:07 +08:00
Lim Chee Aun
bc4551583b Special styling for "direct" posts 2022-12-11 10:56:31 +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
d884cddf16 Fix bugs on status page 2022-12-10 21:19:38 +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