mirror of
https://github.com/discourse/discourse-math.git
synced 2025-02-13 23:15:05 +00:00
FEATURE: Responsive equations (#16)
* adds class to math containers for styling * adds responsive styles
This commit is contained in:
parent
59123ce98b
commit
9615034d78
@ -22,7 +22,7 @@ function decorate(elem) {
|
||||
|
||||
if ($elem.hasClass("math")) {
|
||||
const text = $elem.text();
|
||||
$elem.text("");
|
||||
$elem.addClass("math-container").text("");
|
||||
window.katex.render(text, elem, { displayMode });
|
||||
}
|
||||
}
|
||||
|
@ -49,14 +49,14 @@ function decorate(elem, isPreview) {
|
||||
const tag = elem.tagName === "DIV" ? "div" : "span";
|
||||
const display = tag === "div" ? "; mode=display" : "";
|
||||
$mathWrapper = $(
|
||||
`<${tag} style="display: none;"><script type="math/tex${display}"></script></${tag}>`
|
||||
`<${tag} class="math-container" style="display: none;"><script type="math/tex${display}"></script></${tag}>`
|
||||
);
|
||||
$math = $mathWrapper.children();
|
||||
$math.text($elem.text());
|
||||
$elem.after($mathWrapper);
|
||||
} else if ($elem.hasClass("asciimath")) {
|
||||
$mathWrapper = $(
|
||||
`<span style="display: none;"><script type="math/asciimath"></script></span>`
|
||||
`<span class="math-container" style="display: none;"><script type="math/asciimath"></script></span>`
|
||||
);
|
||||
$math = $mathWrapper.children();
|
||||
$math.text($elem.text());
|
||||
|
59
assets/stylesheets/common/discourse-math.scss
Normal file
59
assets/stylesheets/common/discourse-math.scss
Normal file
@ -0,0 +1,59 @@
|
||||
.math-container {
|
||||
display: block;
|
||||
|
||||
> div:nth-child(2),
|
||||
> span:nth-child(2),
|
||||
> .katex-display {
|
||||
// Mathjax ships with !important inline;
|
||||
display: block !important;
|
||||
max-width: 100%;
|
||||
margin-bottom: 1em;
|
||||
|
||||
// Inner containers for all renderers
|
||||
> :first-child:not(.katex),
|
||||
.katex-html {
|
||||
display: block;
|
||||
overflow: auto hidden;
|
||||
max-width: 100%;
|
||||
padding: 0.25em 0.5em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
// On mobile we add a slight fade on either side to indicate that the user can
|
||||
// scroll. However, this should not be added to the composer since mathjax does
|
||||
// not render in the mobile composer
|
||||
.cooked & {
|
||||
.mobile-view & {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1em;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba($secondary, 1) 0%,
|
||||
rgba($secondary, 0) 100%
|
||||
);
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 1em;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba($secondary, 0) 0%,
|
||||
rgba($secondary, 1) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user