mirror of
https://github.com/discourse/discourse.git
synced 2026-08-06 13:08:40 +08:00
f115292370This change makes it so quotes that fit within the limit don't unnecessarily show the fade and expand button... Short quote... no expand in quote header: <img width="800" alt="image" src="https://github.com/user-attachments/assets/37928efb-b96d-4a4f-865d-52308218968a" /> Long quote... expand and fade: <img width="800" alt="image" src="https://github.com/user-attachments/assets/019e37a3-709c-41bb-9a7c-83726f0115bb" /> In the process I noticed the setting `solved_quote_length` is currently only acting as a boolean. If set to 0, nothing will be quoted, and otherwise the content is shown and the height was being limited in CSS. To make this a little more functional again, I've added a rough calculation that figures out roughly how many lines of content equate to the `solved_quote_length` characters, and use that to set the max-height in CSS. * I've changed the default from 300 to 700 so the new line-based calculation has a height roughly matching the previous CSS-only behavior. * We need a resizeObserver here because when the screen size changes, the number of lines will be different and we may need to show/hide the expansion and fade. * `--cooked-line-height` is a new variable added to the CSS to make the line height of cooked content a little easier to track for the purpose of our calculations.
36 lines
1.1 KiB
SCSS
Vendored
36 lines
1.1 KiB
SCSS
Vendored
:root {
|
|
--base-font-size-smallest: 0.815em; // eq. to 13px
|
|
--base-font-size-smaller: 0.875em; // eq. to 14px
|
|
--base-font-size: 1em; // eq. to 16px
|
|
--base-font-size-larger: 1.125em; // eq. to 18px
|
|
--base-font-size-largest: 1.25em; // eq. to 20px
|
|
|
|
// Font-size definitions, multiplier ^ (step / interval)
|
|
--font-up-6: 2.296em;
|
|
--font-up-5: 2em;
|
|
--font-up-4: 1.7511em;
|
|
--font-up-3: 1.5157em;
|
|
--font-up-2: 1.3195em;
|
|
--font-up-1: 1.1487em; // 2^(1/5)
|
|
--font-0: 1em;
|
|
--font-down-1: 0.8706em; // 2^(-1/5)
|
|
--font-down-2: 0.7579em; // Smallest size we use based on the 1em base
|
|
--font-down-3: 0.6599em;
|
|
--font-down-4: 0.5745em;
|
|
--font-down-5: 0.5em;
|
|
--font-down-6: 0.4355em;
|
|
|
|
// Font-size definitions in rem used in cooked headings
|
|
--font-up-3-rem: 1.5157rem;
|
|
--font-up-2-rem: 1.3195rem;
|
|
--font-up-1-rem: 1.1487rem;
|
|
--font-0-rem: 1rem;
|
|
--font-down-1-rem: 0.8706rem;
|
|
--font-down-2-rem: 0.7579rem;
|
|
|
|
// Common line-heights
|
|
--line-height-small: 1;
|
|
--line-height-medium: 1.2; // Headings or large text
|
|
--line-height-large: 1.4; // Normal or small text
|
|
--cooked-line-height: 1.5; // Cooked post content
|
|
}
|
