Commit Graph

18 Commits

Author SHA1 Message Date
Karl Stolley
2458f57547 lightbox: Use icons for control elements.
Fixes #33068.

Co-Authored-By: sammamama <samridhsame@gmail.com>
2025-05-30 14:50:45 -07:00
Sourabh Patel
aa5f2d3346 lightbox: Add query to hide media-description below 100px width.
Using container query ensures that the media-description element gets
hidden only when the container size is less tha 100px not screen size.
The change is visible for image preview in small screen as action
button takes much of space. Meanwhile in video-preview the description
is still visible as we have much space even in small screen.
2025-01-16 09:01:51 -08:00
Sourabh Patel
194a9f762c lightbox: Remove unused media query styles for cleaner CSS. 2025-01-16 09:01:51 -08:00
Sourabh Patel
bff652a565 lightbox: Update iframe styles to use aspect-ratio.
Using width 100% with a max-width improves the view for tall screen.
Dynamic max-height is just to ensure that it adjust itself for
much wider screen with very less height.
2025-01-16 09:01:51 -08:00
Sourabh Patel
0739de6fdc lightbox: Adjust line-height to avoid vertical overflow.
This nullifies the vertical overflow due to transform scaleY.
2025-01-16 09:01:51 -08:00
Sourabh Patel
ca1a25c994 lightbox: Simplify media description styles for better responsiveness.
Give media-description all the available space using flex-grow.
Setting min-width to zero helps to truncate overflowing text.
2025-01-16 09:01:51 -08:00
Sourabh Patel
51956c6806 lightbox: Refactor styles for improved layout and spacing.
Proper use of flex properties for consistent layout and spacing
while avoiding use of margin that can result in extra spacing
around first and last child.
2025-01-16 09:01:51 -08:00
Sourabh Patel
fcaa77ffba lightbox: Update styles with flexbox to avoid height calculation.
Using flex-grow ensures that component fills up the available
space without the need of calculation of height.
2025-01-16 09:01:51 -08:00
Anders Kaseorg
f023fa6fc0 styles: Be specific about which properties are transitioned.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2024-10-23 14:56:39 -07:00
Karl Stolley
112d7b60fe lightbox: Correctly center lightbox thumbnails. 2024-09-27 13:22:05 -07:00
Karl Stolley
ead6f29200 lightbox: Restore centered media list. 2024-09-17 11:55:18 -07:00
Alex Vandiver
d448a0b271 thumbnail: Use the pre-fetched thumbnail as a temporary stand-in.
This improves the user experience by showing *something* as we fetch
the full-resolution image in the background.
2024-07-23 16:41:09 -07:00
Aman Agrawal
b443916da1 lightbox: Replace image with media.
Since lightbox can also play videos now, replace image with media.
2023-10-02 22:39:02 -07:00
Aman Agrawal
3a507b5752 lightbox: Add support for playing video. 2023-10-02 22:39:02 -07:00
Aman Agrawal
5d1cd2d62f css: Use 200 font weight instead of 100.
We don't support 100 font weight, so it defaults to 200 which we
support.
2023-07-06 17:57:37 -07:00
Anders Kaseorg
d274583d8f styles: Use modern color notation.
postcss-preset-env transpiles this back as necessary.  (It does a
better job than we did, in fact: we had several four-argument hsl()
calls that should have been hsla().)

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-24 17:26:55 -07:00
Anders Kaseorg
5cdf38b1f7 styles: Use standard CSS nesting syntax.
CSS nesting is being standardized with the syntactic restriction that
the nested selector cannot start with an identifier.  This was
necessary to allow the syntax to be parsed without lookahead.

https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/
https://www.w3.org/TR/css-nesting-1/#syntax

The postcss-nesting plugin used by postcss-preset-env enforces this
restriction.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 11:26:30 -07:00
Anders Kaseorg
c1675913a2 web: Move web app to ‘web’ directory.
Ever since we started bundling the app with webpack, there’s been less
and less overlap between our ‘static’ directory (files belonging to
the frontend app) and Django’s interpretation of the ‘static’
directory (files served directly to the web).

Split the app out to its own ‘web’ directory outside of ‘static’, and
remove all the custom collectstatic --ignore rules.  This makes it
much clearer what’s actually being served to the web, and what’s being
bundled by webpack.  It also shrinks the release tarball by 3%.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-02-23 16:04:17 -08:00