refactor: adjust the content of the sidebar display

This commit is contained in:
robin 2022-09-30 17:17:41 +08:00 committed by mingcheng
parent 9e250a7d88
commit 8cfb573bb3
4 changed files with 41 additions and 118 deletions

View File

@ -1,4 +1,8 @@
{
"how_to_format": {
"title": "How to Format",
"description": "<ul><li><p>to make links</p><pre><code>&lt;https: //url.com&gt;<br/><br/>[Title](https: //url.com)</code></pre></li><li><p>put returns between paragraphs</p></li><li><p><em>italic</em> or **<strong>bold</strong>**</p></li><li><p>indent code by 4 spaces</p></li><li><p>quote by placing &gt; at start of line</p></li><li><p>backtick escapes <code>`like _so_`</code></p></li><li><p>create code fences with backticks `</p><pre><code>``` <br/>code here<br/>```</code></pre></li></ul>"
},
"pagination": {
"prev": "Prev",
"next": "Next"
@ -272,11 +276,7 @@
}
},
"btn_save_edits": "Save edits",
"btn_cancel": "Cancel",
"how_to_format": {
"title": "How to Format",
"description": "This is some text within a card body."
}
"btn_cancel": "Cancel"
},
"dates": {
"long_date": "MMM D",
@ -318,23 +318,7 @@
}
},
"btn_save_edits": "Save edits",
"btn_cancel": "Cancel",
"how_to_ask": {
"title": "How to Ask",
"description": "Not sure what to ask? Recurring questions, onboarding procedures, local setups, and FAQs all make for useful questions."
},
"how_to_format": {
"title": "How to Format",
"description": "This is some text within a card body."
},
"how_to_tag": {
"title": "How to Tag",
"description": "A tag helps ensure that your question will get attention from the right people. Here are tagging tips:",
"tips": [
"If youre not sure what tags to use, check out popular tags.",
"Tag things in more than one way so people can find them more easily. Add tags for product lines, projects, teams, and the specific technologies or languages used."
]
}
"btn_cancel": "Cancel"
},
"tags": {
"title": "Tags",
@ -390,23 +374,7 @@
"btn_post_question": "Post your question",
"btn_save_edits": "Save edits",
"answer_question": "Answer your own question",
"post_question&answer": "Post your question and answer",
"how_to_ask": {
"title": "How to Ask",
"description": "Not sure what to ask? Recurring questions, onboarding procedures, local setups, and FAQs all make for useful questions."
},
"how_to_format": {
"title": "How to Format",
"description": "This is some text within a card body."
},
"how_to_tag": {
"title": "How to Tag",
"description": "A tag helps ensure that your question will get attention from the right people. Here are tagging tips:",
"tips": [
"If youre not sure what tags to use, check out popular tags.",
"Tag things in more than one way so people can find them more easily. Add tags for product lines, projects, teams, and the specific technologies or languages used."
]
}
"post_question&answer": "Post your question and answer"
},
"tag_selector": {
"add_btn": "Add tag",

View File

@ -63,7 +63,6 @@ const Ask = () => {
const { qid } = useParams();
const navigate = useNavigate();
const { t } = useTranslation('translation', { keyPrefix: 'ask' });
const { t: t2 } = useTranslation('translation', { keyPrefix: 'dates' });
const isEdit = qid !== undefined;
const { data: similarQuestions = { list: [] } } = useQueryQuestionByTitle(
@ -282,7 +281,7 @@ const Ask = () => {
<Form.Select onChange={handleSelectedRevision}>
{revisions.map(({ reason, create_at }, index) => {
const date = dayjs(create_at * 1000).format(
t2('long_date_with_time'),
t('long_date_with_time', { keyPrefix: 'dates' }),
);
return (
<option key={`${create_at}`} value={index}>
@ -302,12 +301,6 @@ const Ask = () => {
onChange={handleTitleChange}
placeholder={t('form.fields.title.placeholder')}
autoFocus
onFocus={() => {
setForceType('title');
}}
onBlur={() => {
setForceType('');
}}
/>
<Form.Control.Feedback type="invalid">
@ -351,12 +344,6 @@ const Ask = () => {
<TagSelector
value={formData.tags.value}
onChange={handleTagsChange}
onFocus={() => {
setForceType('tags');
}}
onBlur={() => {
setForceType('');
}}
/>
<Form.Control.Feedback type="invalid">
{formData.tags.errorMsg}
@ -422,38 +409,17 @@ const Ask = () => {
</Form>
</Col>
<Col xxl={3} lg={4} sm={12}>
{focusType === 'title' && (
<Card className="mb-4">
<Card.Header>{t('how_to_ask.title')}</Card.Header>
<Card.Body>
<Card.Text>{t('how_to_ask.description')}</Card.Text>
</Card.Body>
<Card.Header>
{t('title', { keyPrefix: 'how_to_format' })}
</Card.Header>
<Card.Body
className="fmt"
dangerouslySetInnerHTML={{
__html: t('description', { keyPrefix: 'how_to_format' }),
}}
/>
</Card>
)}
{focusType === 'content' && (
<Card className="mb-4">
<Card.Header>{t('how_to_format.title')}</Card.Header>
<Card.Body>
<Card.Text>{t('how_to_format.description')}</Card.Text>
</Card.Body>
</Card>
)}
{focusType === 'tags' && (
<Card>
<Card.Header>{t('how_to_tag.title')}</Card.Header>
<Card.Body>
<Card.Text>{t('how_to_tag.description')}</Card.Text>
<ul className="mb-0">
{Array.from(
t('how_to_tag.tips', { returnObjects: true }) as string[],
).map((item) => {
return <li key={item}>{item}</li>;
})}
</ul>
</Card.Body>
</Card>
)}
</Col>
</Row>
</Container>

View File

@ -38,7 +38,6 @@ const Ask = () => {
const [focusType, setForceType] = useState('');
const { t } = useTranslation('translation', { keyPrefix: 'edit_answer' });
const { t: t2 } = useTranslation('translation', { keyPrefix: 'dates' });
const navigate = useNavigate();
const { data } = useQueryAnswerInfo(aid);
@ -154,7 +153,7 @@ const Ask = () => {
<Form.Select onChange={handleSelectedRevision}>
{revisions.map(({ create_at, reason }, index) => {
const date = dayjs(create_at * 1000).format(
t2('long_date_with_time'),
t('long_date_with_time', { keyPrefix: 'dates' }),
);
return (
<option key={`${create_at}`} value={index}>
@ -217,30 +216,16 @@ const Ask = () => {
</Form>
</Col>
<Col xxl={3} lg={4} sm={12}>
<Card className="mb-4">
<Card.Header>{t('how_to_ask.title')}</Card.Header>
<Card.Body>
<Card.Text>{t('how_to_ask.description')}</Card.Text>
</Card.Body>
</Card>
<Card className="mb-4">
<Card.Header>{t('how_to_format.title')}</Card.Header>
<Card.Body>
<Card.Text>{t('how_to_format.description')}</Card.Text>
</Card.Body>
</Card>
<Card>
<Card.Header>{t('how_to_tag.title')}</Card.Header>
<Card.Body>
<Card.Text>{t('how_to_tag.description')}</Card.Text>
<ul className="mb-0">
{Array.from(
t('how_to_tag.tips', { returnObjects: true }) as string[],
).map((item) => {
return <li>{item}</li>;
})}
</ul>
</Card.Body>
<Card.Header>
{t('title', { keyPrefix: 'how_to_format' })}
</Card.Header>
<Card.Body
className="fmt"
dangerouslySetInnerHTML={{
__html: t('description', { keyPrefix: 'how_to_format' }),
}}
/>
</Card>
</Col>
</Row>

View File

@ -45,7 +45,6 @@ const Ask = () => {
const { tagId } = useParams();
const navigate = useNavigate();
const { t } = useTranslation('translation', { keyPrefix: 'edit_tag' });
const { t: t2 } = useTranslation('translation', { keyPrefix: 'dates' });
const [focusType, setForceType] = useState('');
const { data } = useTagInfo({ id: tagId });
@ -159,7 +158,7 @@ const Ask = () => {
<Form.Select onChange={handleSelectedRevision}>
{revisions.map(({ create_at, reason }, index) => {
const date = dayjs(create_at * 1000).format(
t2('long_date_with_time'),
t('long_date_with_time', { keyPrefix: 'dates' }),
);
return (
<option key={`${create_at}`} value={index}>
@ -249,11 +248,16 @@ const Ask = () => {
</Form>
</Col>
<Col xxl={3} lg={4} sm={12}>
<Card className="mb-4">
<Card.Header>{t('how_to_format.title')}</Card.Header>
<Card.Body>
<Card.Text>{t('how_to_format.description')}</Card.Text>
</Card.Body>
<Card>
<Card.Header>
{t('title', { keyPrefix: 'how_to_format' })}
</Card.Header>
<Card.Body
className="fmt"
dangerouslySetInnerHTML={{
__html: t('description', { keyPrefix: 'how_to_format' }),
}}
/>
</Card>
</Col>
</Row>