feat: optimize mobile responsive layout for share page
- Add responsive design for mobile devices (≤768px) - Switch from horizontal to vertical layout on mobile - Hide middle divider panel on mobile - Optimize button sizes for mobile touch interaction - Improve input field and button alignment on mobile
This commit is contained in:
loveuer
@@ -11,6 +11,12 @@ const useUploadStyle = createUseStyles({
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
minHeight: "50vh",
|
||||
|
||||
"@media (max-width: 768px)": {
|
||||
minHeight: "auto",
|
||||
padding: "20px 10px",
|
||||
},
|
||||
},
|
||||
form: {
|
||||
backgroundColor: "#C8E6C9",
|
||||
@@ -19,10 +25,20 @@ const useUploadStyle = createUseStyles({
|
||||
borderRadius: "15px",
|
||||
width: "70%",
|
||||
margin: "20px 60px 20px 0",
|
||||
/*todo margin 不用 px*/
|
||||
|
||||
"@media (max-width: 768px)": {
|
||||
width: "90%",
|
||||
margin: "20px 0",
|
||||
padding: "20px",
|
||||
},
|
||||
},
|
||||
title: {
|
||||
color: "#2c9678"
|
||||
color: "#2c9678",
|
||||
|
||||
"@media (max-width: 768px)": {
|
||||
fontSize: "1.5rem",
|
||||
marginBottom: "15px",
|
||||
},
|
||||
},
|
||||
file: {
|
||||
display: 'none',
|
||||
@@ -33,7 +49,11 @@ const useUploadStyle = createUseStyles({
|
||||
},
|
||||
name: {
|
||||
color: "#2c9678",
|
||||
marginLeft: '10px'
|
||||
marginLeft: '10px',
|
||||
|
||||
"@media (max-width: 768px)": {
|
||||
fontSize: "14px",
|
||||
},
|
||||
},
|
||||
clean: {
|
||||
borderRadius: '50%',
|
||||
@@ -48,14 +68,12 @@ const useShowStyle = createUseStyles({
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
position: "relative", // 为关闭按钮提供定位基准
|
||||
minHeight: "50vh",
|
||||
|
||||
"@media (max-width: 768px)": {
|
||||
minHeight: "auto",
|
||||
padding: "20px 10px",
|
||||
},
|
||||
title: {
|
||||
color: "#2c9678",
|
||||
marginTop: 0,
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
},
|
||||
form: {
|
||||
backgroundColor: "#C8E6C9",
|
||||
@@ -65,6 +83,25 @@ const useShowStyle = createUseStyles({
|
||||
width: "70%",
|
||||
margin: "20px 60px 20px 0",
|
||||
position: "relative",
|
||||
|
||||
"@media (max-width: 768px)": {
|
||||
width: "90%",
|
||||
margin: "20px 0",
|
||||
padding: "20px",
|
||||
},
|
||||
},
|
||||
title: {
|
||||
color: "#2c9678",
|
||||
marginTop: 0,
|
||||
marginBottom: "25px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
|
||||
"@media (max-width: 768px)": {
|
||||
fontSize: "1.5rem",
|
||||
marginBottom: "15px",
|
||||
},
|
||||
},
|
||||
closeButton: {
|
||||
position: "absolute",
|
||||
@@ -78,9 +115,7 @@ const useShowStyle = createUseStyles({
|
||||
height: "24px",
|
||||
cursor: "pointer",
|
||||
"&:hover": {
|
||||
// background: "#cc0000",
|
||||
boxShadow: "20px 20px 60px #fff, -20px -20px 60px #fff",
|
||||
// boxShadow: "20px 20px 60px #eee",
|
||||
},
|
||||
},
|
||||
codeWrapper: {
|
||||
@@ -89,6 +124,10 @@ const useShowStyle = createUseStyles({
|
||||
borderRadius: "8px",
|
||||
margin: "15px 0",
|
||||
overflowX: "auto",
|
||||
|
||||
"@media (max-width: 768px)": {
|
||||
padding: "0 10px",
|
||||
},
|
||||
},
|
||||
pre: {
|
||||
display: 'flex',
|
||||
@@ -98,6 +137,12 @@ const useShowStyle = createUseStyles({
|
||||
height: '24px',
|
||||
"& > code": {
|
||||
marginLeft: "0",
|
||||
fontSize: "14px",
|
||||
wordBreak: "break-all",
|
||||
|
||||
"@media (max-width: 768px)": {
|
||||
fontSize: "12px",
|
||||
},
|
||||
}
|
||||
},
|
||||
copyButton: {
|
||||
@@ -112,6 +157,11 @@ const useShowStyle = createUseStyles({
|
||||
"&:hover": {
|
||||
background: "#1f6d5a",
|
||||
},
|
||||
|
||||
"@media (max-width: 768px)": {
|
||||
padding: "6px 12px",
|
||||
fontSize: "12px",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -5,6 +5,10 @@ const useStyle = createUseStyles({
|
||||
backgroundColor: 'lightgray',
|
||||
position: "relative",
|
||||
overflow: "hidden",
|
||||
|
||||
"@media (max-width: 768px)": {
|
||||
display: "none",
|
||||
},
|
||||
},
|
||||
left: {
|
||||
backgroundColor: "#e3f2fd",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import {createUseStyles} from "react-jss";
|
||||
import {UButton} from "../../../component/button/u-button.tsx";
|
||||
import {useStore} from "../../../store/share.ts";
|
||||
import { createUseStyles } from "react-jss";
|
||||
import { UButton } from "../../../component/button/u-button.tsx";
|
||||
import { useStore } from "../../../store/share.ts";
|
||||
|
||||
const useStyle = createUseStyles({
|
||||
container: {
|
||||
@@ -8,6 +8,12 @@ const useStyle = createUseStyles({
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
minHeight: "50vh",
|
||||
|
||||
"@media (max-width: 768px)": {
|
||||
minHeight: "auto",
|
||||
padding: "20px 10px",
|
||||
},
|
||||
},
|
||||
form: {
|
||||
backgroundColor: "#BBDEFB",
|
||||
@@ -16,25 +22,58 @@ const useStyle = createUseStyles({
|
||||
borderRadius: "15px",
|
||||
width: "70%",
|
||||
margin: "20px 0 20px 60px",
|
||||
/*todo margin 不用 px*/
|
||||
|
||||
"@media (max-width: 768px)": {
|
||||
width: "90%",
|
||||
margin: "20px 0",
|
||||
padding: "20px",
|
||||
},
|
||||
},
|
||||
title: {
|
||||
color: '#1661ab', // 靛青
|
||||
color: '#1661ab',
|
||||
|
||||
"@media (max-width: 768px)": {
|
||||
fontSize: "1.5rem",
|
||||
marginBottom: "15px",
|
||||
},
|
||||
},
|
||||
code: {
|
||||
padding: '11px',
|
||||
margin: '20px 0',
|
||||
margin: '0',
|
||||
width: '200px',
|
||||
border: '2px solid #ddd',
|
||||
borderRadius: '5px',
|
||||
'&:active': {
|
||||
border: '2px solid #1661ab',
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"@media (max-width: 768px)": {
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
padding: '10px',
|
||||
fontSize: '14px',
|
||||
},
|
||||
},
|
||||
inputContainer: {
|
||||
display: 'flex',
|
||||
gap: '10px',
|
||||
|
||||
"@media (max-width: 768px)": {
|
||||
flexDirection: 'column',
|
||||
alignItems: 'stretch',
|
||||
},
|
||||
},
|
||||
buttonContainer: {
|
||||
display: 'flex',
|
||||
|
||||
"@media (max-width: 768px)": {
|
||||
justifyContent: 'left',
|
||||
},
|
||||
},
|
||||
})
|
||||
export const PanelRight = () => {
|
||||
const style = useStyle()
|
||||
const {code, setCode} = useStore()
|
||||
const { code, setCode } = useStore()
|
||||
|
||||
function onCodeChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
setCode(e.currentTarget.value)
|
||||
@@ -52,7 +91,7 @@ export const PanelRight = () => {
|
||||
return <div className={style.container}>
|
||||
<div className={style.form}>
|
||||
<h2 className={style.title}>获取文件</h2>
|
||||
<div>
|
||||
<div className={style.inputContainer}>
|
||||
<input
|
||||
type="text"
|
||||
className={style.code}
|
||||
@@ -60,7 +99,9 @@ export const PanelRight = () => {
|
||||
value={code}
|
||||
onChange={onCodeChange}
|
||||
/>
|
||||
<UButton style={{marginLeft: '10px'}} onClick={onFetchFile}>获取文件</UButton>
|
||||
<div className={style.buttonContainer}>
|
||||
<UButton onClick={onFetchFile}>获取文件</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -13,6 +13,12 @@ const useStyle = createUseStyles({
|
||||
height: "100vh",
|
||||
display: "grid",
|
||||
gridTemplateColumns: "40% 20% 40%",
|
||||
|
||||
"@media (max-width: 768px)": {
|
||||
gridTemplateColumns: "100%",
|
||||
gridTemplateRows: "auto auto",
|
||||
overflowY: "auto",
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
@@ -20,7 +26,7 @@ export const FileSharing = () => {
|
||||
const style = useStyle()
|
||||
return <div className={style.container}>
|
||||
<PanelLeft />
|
||||
<PanelMid/>
|
||||
<PanelMid />
|
||||
<PanelRight/>
|
||||
</div>
|
||||
};
|
||||
Reference in New Issue
Block a user