p90524618
/
answer
mirror of https://gitee.com/answerdev/answer.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: improve responsive layout

This commit is contained in:
robin 2022-09-30 11:50:14 +08:00
parent d4967ee004
commit 99b537a1d1
11 changed files with 40 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/src/pages/Questions/Ask/index.tsx
View File

@ -269,12 +269,12 @@ const Ask = () => {
<PageTitle title={pageTitle} />
<Container className="pt-4 mt-2 mb-5">
<Row className="justify-content-center">
<Col sm={12} md={10}>
<Col xxl={10} md={12}>
<h3 className="mb-4">{isEdit ? t('edit_title') : t('title')}</h3>
</Col>
</Row>
<Row className="justify-content-center">
<Col sm={12} md={7} className="mb-4 mb-md-0">
<Col xxl={7} lg={8} sm={12} className="mb-4 mb-md-0">
<Form noValidate onSubmit={handleSubmit}>
{isEdit && (
<Form.Group controlId="revision" className="mb-3">
@ -421,7 +421,7 @@ const Ask = () => {
)}
</Form>
</Col>
<Col sm={12} md={3}>
<Col xxl={3} lg={4} sm={12}>
{focusType === 'title' && (
<Card className="mb-4">
<Card.Header>{t('how_to_ask.title')}</Card.Header>

9
ui/src/pages/Questions/Detail/index.scss
View File

@ -1,5 +1,10 @@
.fmt img {
max-width: 100%;
.fmt {
img {
max-width: 100%;
}
p {
word-break: break-all;
}
}
.answer-item {

4
ui/src/pages/Questions/Detail/index.tsx
View File

@ -109,7 +109,7 @@ const Index = () => {
<PageTitle title={question?.title} />
<Container className="pt-4 mt-2 mb-5">
<Row className="justify-content-center">
<Col lg={7}>
<Col xxl={7} lg={8} sm={12}>
{question?.operation?.operation_type && (
<Alert data={question.operation} />
)}
@ -156,7 +156,7 @@ const Index = () => {
/>
)}
</Col>
<Col lg={3}>
<Col xxl={3} lg={4} sm={12}>
<RelatedQuestions id={question?.id || ''} />
</Col>
</Row>

6
ui/src/pages/Questions/EditAnswer/index.tsx
View File

@ -123,12 +123,12 @@ const Ask = () => {
<PageTitle title={t('edit_answer', { keyPrefix: 'page_title' })} />
<Container className="pt-4 mt-2 mb-5 edit-answer-wrap">
<Row className="justify-content-center">
<Col sm={12} md={10}>
<Col xxl={10} md={12}>
<h3 className="mb-4">{t('title')}</h3>
</Col>
</Row>
<Row className="justify-content-center">
<Col sm={12} md={7} className="mb-4 mb-md-0">
<Col xxl={7} lg={8} sm={12} className="mb-4 mb-md-0">
<a href={`/questions/${qid}`} target="_blank" rel="noreferrer">
<h5 className="mb-3">{data?.question.title}</h5>
</a>
@ -216,7 +216,7 @@ const Ask = () => {
</div>
</Form>
</Col>
<Col sm={12} md={3}>
<Col xxl={3} lg={4} sm={12}>
<Card className="mb-4">
<Card.Header>{t('how_to_ask.title')}</Card.Header>
<Card.Body>

4
ui/src/pages/Questions/index.tsx
View File

@ -26,10 +26,10 @@ const Questions: FC = () => {
<PageTitle title={pageTitle} suffix={slogan} />
<Container className="pt-4 mt-2 mb-5">
<Row className="justify-content-center">
<Col lg={7}>
<Col xxl={7} lg={8} sm={12}>
<QuestionList source="questions" />
</Col>
<Col lg={3}>
<Col xxl={3} lg={4} sm={12}>
<FollowingTags />
<HotQuestions />
</Col>

4
ui/src/pages/Search/index.tsx
View File

@ -32,7 +32,7 @@ const Index = () => {
<PageTitle title={pageTitle} />
<Container className="pt-4 mt-2 mb-5">
<Row className="justify-content-center">
<Col lg={7} className="mb-3">
<Col xxl={7} lg={8} sm={12} className="mb-3">
<Head data={extra} />
<ListGroup variant="flush" className="mb-5">
@ -53,7 +53,7 @@ const Index = () => {
/>
</div>
</Col>
<Col lg={3}>
<Col xxl={3} lg={4} sm={12}>
<Tips />
</Col>
</Row>

4
ui/src/pages/Tags/Detail/index.tsx
View File

@ -58,7 +58,7 @@ const Questions: FC = () => {
<PageTitle title={pageTitle} />
<Container className="pt-4 mt-2 mb-5">
<Row className="justify-content-center">
<Col lg={7}>
<Col xxl={7} lg={8} sm={12}>
<div className="tag-box mb-5">
<h3 className="mb-3">
<Link
@ -90,7 +90,7 @@ const Questions: FC = () => {
</div>
<QuestionList source="tag" />
</Col>
<Col lg={3}>
<Col xxl={3} lg={4} sm={12}>
<FollowingTags />
<HotQuestions />
</Col>

6
ui/src/pages/Tags/Edit/index.tsx
View File

@ -147,12 +147,12 @@ const Ask = () => {
<PageTitle title={t('edit_tag', { keyPrefix: 'page_title' })} />
<Container className="pt-4 mt-2 mb-5 edit-answer-wrap">
<Row className="justify-content-center">
<Col sm={12} md={10}>
<Col xxl={10} md={12}>
<h3 className="mb-4">{t('title')}</h3>
</Col>
</Row>
<Row className="justify-content-center">
<Col sm={12} md={7} className="mb-4 mb-md-0">
<Col xxl={7} lg={8} sm={12} className="mb-4 mb-md-0">
<Form noValidate onSubmit={handleSubmit}>
<Form.Group controlId="revision" className="mb-3">
<Form.Label>{t('form.fields.revision.label')}</Form.Label>
@ -248,7 +248,7 @@ const Ask = () => {
</div>
</Form>
</Col>
<Col sm={12} md={3}>
<Col xxl={3} lg={4} sm={12}>
<Card className="mb-4">
<Card.Header>{t('how_to_format.title')}</Card.Header>
<Card.Body>

14
ui/src/pages/Tags/index.tsx
View File

@ -53,9 +53,9 @@ const Tags = () => {
<PageTitle title={t('tags', { keyPrefix: 'page_title' })} />
<Container className="py-3 my-3">
<Row className="mb-4 d-flex justify-content-center">
<Col lg={10}>
<Col xxl={10} sm={12}>
<h3 className="mb-4">{t('title')}</h3>
<div className="d-flex justify-content-between align-items-center">
<div className="d-flex justify-content-between align-items-center flex-wrap">
<Form>
<Form.Group controlId="formBasicEmail">
<Form.Control
@ -94,10 +94,16 @@ const Tags = () => {
</div>
</Col>
<Col className="mt-4" lg={10}>
<Col className="mt-4" xxl={10} sm={12}>
<Row>
{tags?.list?.map((tag) => (
<Col key={tag.slug_name} lg={3} md={4} className="mb-4">
<Col
key={tag.slug_name}
xs={12}
lg={3}
md={4}
sm={6}
className="mb-4">
<Card className="h-100">
<Card.Body className="d-flex flex-column align-items-start">
<Tag className="mb-3" href={`/tags/${tag.slug_name}`}>

4
ui/src/pages/Users/Notifications/index.tsx
View File

@ -69,7 +69,7 @@ const Notifications = () => {
<PageTitle title={t('notifications', { keyPrefix: 'page_title' })} />
<Container className="pt-4 mt-2 mb-5">
<Row className="justify-content-center">
<Col xs={12} lg={7}>
<Col xxl={7} lg={8} sm={12}>
<h3 className="mb-4">{t('title')}</h3>
<div className="d-flex justify-content-between mb-3">
<ButtonGroup size="sm">
@ -120,7 +120,7 @@ const Notifications = () => {
</div>
)}
</Col>
<Col xs={12} lg={3} />
<Col xxl={3} lg={4} sm={12} />
</Row>
</Container>
</>

8
ui/src/pages/Users/Personal/index.tsx
View File

@ -57,10 +57,10 @@ const Personal: FC = () => {
{userInfo?.info?.status !== 'normal' && userInfo?.info?.status_msg && (
<Alert data={userInfo?.info.status_msg} />
)}
<Col lg={7}>
<Col xxl={7} lg={8} sm={12}>
<UserInfo data={userInfo?.info} />
</Col>
<Col lg={3} className="d-flex justify-content-end">
<Col xxl={3} lg={4} sm={12} className="d-flex justify-content-end">
{isSelf && (
<div>
<Button
@ -78,7 +78,7 @@ const Personal: FC = () => {
<Col lg={10}>
<NavBar tabName={tabName} slug={username} isSelf={isSelf} />
</Col>
<Col lg={7}>
<Col xxl={7} lg={8} sm={12}>
<Overview
visible={tabName === 'overview'}
introduction={userInfo?.info?.bio_html}
@ -111,7 +111,7 @@ const Personal: FC = () => {
</div>
)}
</Col>
<Col lg={3}>
<Col xxl={3} lg={4} sm={12}>
<h5 className="mb-3">Stats</h5>
{userInfo?.info && (
<>