mirror of
https://gitcode.com/gh_mirrors/hy/Hydro.git
synced 2026-10-20 01:38:19 +08:00
ui: collapse problem_solution long content by default
This commit is contained in:
18 files changed
+155
-52
No files matched your search
@@ -0,0 +1,40 @@
|
||||
.collapsible-content
|
||||
position: relative
|
||||
|
||||
&::after
|
||||
content: ""
|
||||
position: absolute
|
||||
bottom: rem(16px)
|
||||
left: 0
|
||||
right: 0
|
||||
height: rem(55px)
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1))
|
||||
pointer-events: none
|
||||
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1)
|
||||
opacity: 1
|
||||
z-index: 1
|
||||
|
||||
&__inner
|
||||
overflow: hidden
|
||||
max-height: rem(300px)
|
||||
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1)
|
||||
|
||||
.collapsible-toggle
|
||||
text-align: center
|
||||
opacity: 0
|
||||
|
||||
&.visible
|
||||
opacity: 1
|
||||
|
||||
&__link
|
||||
color: $primary-color
|
||||
text-decoration: none
|
||||
display: inline-block
|
||||
position: relative
|
||||
overflow: hidden
|
||||
|
||||
.collapsible-content.expanded
|
||||
&::after
|
||||
opacity: 0 !important
|
||||
.collapsible-content__inner
|
||||
max-height: none
|
||||
@@ -0,0 +1,62 @@
|
||||
import 'jquery.easing';
|
||||
|
||||
import $ from 'jquery';
|
||||
import { AutoloadPage } from 'vj/misc/Page';
|
||||
import { i18n } from 'vj/utils';
|
||||
|
||||
function initCollapsibleContent() {
|
||||
$('.collapsible-content').each(function () {
|
||||
const $content = $(this);
|
||||
let $inner = $content.find('.collapsible-content__inner');
|
||||
if ($inner.length) return;
|
||||
const $children = $content.children().detach();
|
||||
$inner = $('<div class="collapsible-content__inner"></div>');
|
||||
$inner.append($children);
|
||||
$content.append($inner);
|
||||
$content.find('.collapsible-toggle').remove();
|
||||
const scrollHeight = $inner[0].scrollHeight;
|
||||
const clientHeight = $inner[0].clientHeight;
|
||||
if (scrollHeight > clientHeight + 10) {
|
||||
const $toggle = $(`<div class="collapsible-toggle">
|
||||
<a href="javascript:;" class="collapsible-toggle__link">${i18n('Show more')}</a>
|
||||
</div>`);
|
||||
$content.append($toggle);
|
||||
const $toggleLink = $toggle.find('.collapsible-toggle__link');
|
||||
requestAnimationFrame(() => {
|
||||
$toggle.addClass('visible');
|
||||
});
|
||||
$toggleLink.on('click', (e) => {
|
||||
e.preventDefault();
|
||||
if ($content.hasClass('expanded')) {
|
||||
const currentHeight = $inner[0].scrollHeight;
|
||||
$inner.css('max-height', `${currentHeight}px`);
|
||||
requestAnimationFrame(() => {
|
||||
$content.removeClass('expanded');
|
||||
$inner.css('max-height', '');
|
||||
$toggleLink.text(i18n('Show more'));
|
||||
});
|
||||
} else {
|
||||
// Expand: get full height by temporarily removing max-height, then animate to it
|
||||
const currentMaxHeight = $inner.css('max-height');
|
||||
$inner.css('max-height', 'none');
|
||||
const fullHeight = $inner[0].scrollHeight;
|
||||
$inner.css('max-height', currentMaxHeight);
|
||||
requestAnimationFrame(() => {
|
||||
$inner.css('max-height', `${fullHeight}px`);
|
||||
$content.addClass('expanded');
|
||||
$toggleLink.text(i18n('Show less'));
|
||||
});
|
||||
}
|
||||
});
|
||||
} else $content.addClass('expanded');
|
||||
});
|
||||
}
|
||||
|
||||
const commentsPage = new AutoloadPage('commentsPage', () => {
|
||||
initCollapsibleContent();
|
||||
$(document).on('vjContentNew', () => {
|
||||
initCollapsibleContent();
|
||||
});
|
||||
});
|
||||
|
||||
export default commentsPage;
|
||||
@@ -133,6 +133,8 @@ $downvote-color = red
|
||||
box-shadow: none !important
|
||||
cursor: default
|
||||
|
||||
.dczcomments__replies .collapsible-content__inner
|
||||
max-height: rem(200px)
|
||||
|
||||
+mobile()
|
||||
.dczcomments__item
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import 'jquery.easing';
|
||||
|
||||
import $ from 'jquery';
|
||||
import { ConfirmDialog } from 'vj/components/dialog';
|
||||
import { confirm } from 'vj/components/dialog';
|
||||
import CommentBox from 'vj/components/discussion/CommentBox';
|
||||
import { AutoloadPage } from 'vj/misc/Page';
|
||||
import {
|
||||
delay, i18n, request, slideDown, slideUp, tpl,
|
||||
delay, i18n, request, slideDown, slideUp,
|
||||
} from 'vj/utils';
|
||||
|
||||
const $replyTemplate = $('.commentbox-container').eq(0).clone();
|
||||
@@ -162,10 +162,7 @@ async function onCommentClickDelete(type, ev) {
|
||||
const message = (type === 'comment')
|
||||
? 'Confirm deleting this comment? Its replies will be deleted as well.'
|
||||
: 'Confirm deleting this reply?';
|
||||
const action = await new ConfirmDialog({
|
||||
$body: tpl.typoMsg(i18n(message)),
|
||||
}).open();
|
||||
if (action !== 'yes') return;
|
||||
if (!await confirm(i18n(message))) return;
|
||||
|
||||
const $evTarget = $(ev.currentTarget);
|
||||
const form = JSON.parse($evTarget.attr('data-form'));
|
||||
|
||||
@@ -878,7 +878,9 @@ Settings: 设置
|
||||
Share: 分享
|
||||
She: 她
|
||||
Show all tags: 显示所有标签
|
||||
Show less: 显示更少
|
||||
Show MOD badge: 展示 MOD 徽章
|
||||
Show more: 显示更多
|
||||
Show tags: 显示标签
|
||||
Show: 显示
|
||||
Sign In: 登录
|
||||
|
||||
@@ -20,10 +20,10 @@
|
||||
"@fontsource/source-code-pro": "^5.2.7",
|
||||
"@fontsource/ubuntu-mono": "^5.2.8",
|
||||
"@hydrooj/utils": "workspace:^",
|
||||
"@mantine/core": "^8.3.10",
|
||||
"@mantine/hooks": "^8.3.10",
|
||||
"@mantine/notifications": "^8.3.10",
|
||||
"@sentry/browser": "^10.32.1",
|
||||
"@mantine/core": "^8.3.12",
|
||||
"@mantine/hooks": "^8.3.12",
|
||||
"@mantine/notifications": "^8.3.12",
|
||||
"@sentry/browser": "^10.33.0",
|
||||
"@sentry/webpack-plugin": "^4.6.1",
|
||||
"@simplewebauthn/browser": "13.2.2",
|
||||
"@svgr/webpack": "^8.1.0",
|
||||
@@ -31,12 +31,12 @@
|
||||
"@types/jquery": "^3.5.33",
|
||||
"@types/jquery.transit": "^0.9.33",
|
||||
"@types/json-schema": "^7.0.15",
|
||||
"@types/katex": "^0.16.7",
|
||||
"@types/katex": "^0.16.8",
|
||||
"@types/markdown-it": "^14.1.2",
|
||||
"@types/nunjucks": "^3.2.6",
|
||||
"@types/pickadate": "^3.5.35",
|
||||
"@types/qrcode": "^1.5.6",
|
||||
"@types/react": "^19.2.7",
|
||||
"@types/react": "^19.2.8",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@types/redux-logger": "^3.0.13",
|
||||
"@types/uuid": "^11.0.0",
|
||||
@@ -55,12 +55,12 @@
|
||||
"core-js": "^3.47.0",
|
||||
"core-js-compat": "^3.47.0",
|
||||
"css-loader": "^7.1.2",
|
||||
"diff": "^8.0.2",
|
||||
"diff": "^8.0.3",
|
||||
"diff-dom": "^5.2.1",
|
||||
"echarts": "^6.0.0",
|
||||
"emojis-keywords": "2.0.0",
|
||||
"emojis-list": "2.1.0",
|
||||
"esbuild-loader": "^4.4.1",
|
||||
"esbuild-loader": "^4.4.2",
|
||||
"flatpickr": "^4.6.13",
|
||||
"idb": "^8.0.3",
|
||||
"jquery": "^3.7.1",
|
||||
@@ -69,7 +69,7 @@
|
||||
"jquery.transit": "^0.9.12",
|
||||
"mantine-contextmenu": "^8.3.11",
|
||||
"matchmedia-polyfill": "^0.3.2",
|
||||
"md-editor-rt": "^6.2.1",
|
||||
"md-editor-rt": "^6.3.1",
|
||||
"mini-css-extract-plugin": "^2.9.4",
|
||||
"moment": "^2.30.1",
|
||||
"monaco-editor": "0.52.2",
|
||||
@@ -80,7 +80,7 @@
|
||||
"nanoid": "^5.1.6",
|
||||
"normalize.css": "^8.0.1",
|
||||
"nprogress": "^0.2.0",
|
||||
"p-queue": "^9.0.1",
|
||||
"p-queue": "^9.1.0",
|
||||
"pickadate": "^3.6.4",
|
||||
"postcss-loader": "7.3.4",
|
||||
"postcss-preset-mantine": "^1.18.0",
|
||||
@@ -101,7 +101,7 @@
|
||||
"redux-promise-middleware": "^6.2.0",
|
||||
"redux-thunk": "^3.1.0",
|
||||
"rupture": "^0.7.1",
|
||||
"sass": "^1.97.1",
|
||||
"sass": "^1.97.2",
|
||||
"sass-loader": "^16.0.6",
|
||||
"schemastery": "^3.17.2",
|
||||
"shorty.js": "^1.0.1",
|
||||
@@ -118,8 +118,8 @@
|
||||
"ts-loader": "^9.5.4",
|
||||
"web-streams-polyfill": "^4.2.0",
|
||||
"webpack": "^5.104.1",
|
||||
"webpack-bundle-analyzer": "^5.1.0",
|
||||
"webpack-dev-server": "^5.2.2",
|
||||
"webpack-bundle-analyzer": "^5.1.1",
|
||||
"webpack-dev-server": "^5.2.3",
|
||||
"webpack-manifest-plugin": "^6.0.1",
|
||||
"webpackbar": "^7.0.0"
|
||||
},
|
||||
|
||||
@@ -124,7 +124,7 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="typo richmedia" data-emoji-enabled data-raw-url="{{ url('problem_solution_raw', pid=doc.parentId, psid=doc._id) }}">
|
||||
<div class="typo richmedia collapsible-content" data-emoji-enabled data-raw-url="{{ url('problem_solution_raw', pid=doc.parentId, psid=doc._id) }}">
|
||||
{{ doc['content']|markdown|safe }}
|
||||
</div>
|
||||
<div class="commentbox-edit-target"></div>
|
||||
@@ -154,7 +154,7 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="typo richmedia" data-emoji-enabled data-raw-url="{{ url('problem_solution_reply_raw', pid=doc.parentId, psid=doc._id, psrid=rdoc._id) }}">
|
||||
<div class="typo richmedia collapsible-content" data-emoji-enabled data-raw-url="{{ url('problem_solution_reply_raw', pid=doc.parentId, psid=doc._id, psrid=rdoc._id) }}">
|
||||
{{ rdoc['content']|markdown|safe }}
|
||||
</div>
|
||||
<div class="commentbox-edit-target"></div>
|
||||
|
||||
Reference in new issue
Block a user