This is an automated email from the ASF dual-hosted git repository.
chaokunyang pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/fury-site.git
The following commit(s) were added to refs/heads/main by this push:
new 4d199825 Fix：CSS media queries solve mobile adaptation issues (#202)
4d199825 is described below
commit 4d1998252be00f3a4df6d21675c7853c163f431a
Author: LofiSu <[email protected]>
AuthorDate: Sun Nov 10 22:24:18 2024 +0800
Fix：CSS media queries solve mobile adaptation issues (#202)
before：（Bug found）
after：
in iphone
in ipad mini
in ipad pro
Desktop：
---
src/pages/home/components/HomePageLanguageCard.tsx | 37 ++++++++++++++++++----
src/pages/home/components/HomepageCodeDisplay.tsx | 25 +++++++++++++--
2 files changed, 53 insertions(+), 9 deletions(-)
diff --git a/src/pages/home/components/HomePageLanguageCard.tsx
b/src/pages/home/components/HomePageLanguageCard.tsx
index dd930442..ae77cf10 100644
--- a/src/pages/home/components/HomePageLanguageCard.tsx
+++ b/src/pages/home/components/HomePageLanguageCard.tsx
@@ -29,6 +29,7 @@ export default function HomePageLanguageCard() {
return (
<div>
+ <style>{mediaQueryStyles}</style>
<div style={{ textAlign: "center" }}>
<h2>Quick Start!</h2>
<p>Choose a language to get started.</p>
@@ -42,33 +43,37 @@ export default function HomePageLanguageCard() {
}}
>
<Card.Grid
+ className="grid-item"
style={gridStyle}
onClick={() => {
window.location.href = getLanguageUrl("java-serialization");
}}
>
<img src={imageUrls.java} style={imageStyle} alt="Java logo" />
- Java
+ <span>Java</span>
</Card.Grid>
<Card.Grid
+ className="grid-item"
style={gridStyle}
onClick={() => {
window.location.href = getLanguageUrl("python");
}}
>
<img src={imageUrls.python} style={imageStyle} alt="Python logo" />
- Python
+ <span>Python</span>
</Card.Grid>
<Card.Grid
+ className="grid-item"
style={gridStyle}
onClick={() => {
window.location.href = getLanguageUrl("golang");
}}
>
<img src={imageUrls.golang} style={imageStyle} alt="Golang logo" />
- Golang
+ <span>Golang</span>
</Card.Grid>
<Card.Grid
+ className="grid-item"
style={gridStyle}
onClick={() => {
window.location.href = getLanguageUrl("javascript");
@@ -79,18 +84,20 @@ export default function HomePageLanguageCard() {
style={imageStyle}
alt="JavaScript logo"
/>
- JavaScript
+ <span>JavaScript</span>
</Card.Grid>
<Card.Grid
+ className="grid-item"
style={gridStyle}
onClick={() => {
window.location.href = getLanguageUrl("rust");
}}
>
<img src={imageUrls.rust} style={imageStyle} alt="Rust logo" />
- Rust
+ <span>Rust</span>
</Card.Grid>
<Card.Grid
+ className="grid-item"
style={gridStyle}
onClick={() => {
window.location.href = getLanguageUrl(
@@ -99,7 +106,7 @@ export default function HomePageLanguageCard() {
}}
>
<img src={imageUrls.more} style={imageStyle} alt="More languages" />
- More
+ <span>More</span>
</Card.Grid>
</Card>
</div>
@@ -117,7 +124,25 @@ const gridStyle: React.CSSProperties = {
borderRadius: "10px",
fontWeight: "bold",
fontSize: "18px",
+ cursor: "pointer",
};
+
+//媒体查询
+const mediaQueryStyles = `
+ @media (max-width: 768px) {
+ .grid-item {
+ width: 100% !important;
+ }
+ .grid-item img {
+ width: 28px !important;
+ height: 28px !important;
+ }
+ .grid-item span {
+ display: none !important;
+ }
+ }
+`;
+
const imageStyle: React.CSSProperties = {
width: "38px",
height: "38px",
diff --git a/src/pages/home/components/HomepageCodeDisplay.tsx
b/src/pages/home/components/HomepageCodeDisplay.tsx
index 529472ae..85f2c9ee 100644
--- a/src/pages/home/components/HomepageCodeDisplay.tsx
+++ b/src/pages/home/components/HomepageCodeDisplay.tsx
@@ -47,27 +47,46 @@ public class Example {
};
const programmingImageUrl = useBaseUrl("/home/programming.svg");
-
+
+ //媒体查询
+ const mediaQueryStyles = `
+ @media (max-width: 768px) {
+ .desktop-only {
+ display: none !important;
+ }
+ .code-display {
+ width: 100% !important;
+ }
+ .code-display pre {
+ font-size: 8px !important;
+ }
+ }
+ `;
return (
<>
+ <style>{mediaQueryStyles}</style>
<div
style={{
display: "flex",
- margin: "12%",
+ margin: "10%",
borderRadius: "10px",
+ flexDirection: "row",
}}
>
<div
+ className="desktop-only"
style={{
width: "50%",
justifyContent: "flex-start",
margin: "50px",
height: "auto",
+ display: "block",
}}
>
<img src={programmingImageUrl} alt="programming-coding" />
</div>
<div
+ className="code-display"
style={{
position: "relative",
padding: "12px",
@@ -75,7 +94,7 @@ public class Example {
backgroundColor: "#2d2d2d",
borderRadius: "5px",
width: "50%",
- height: "auto",
+ height: "0 auto",
}}
>
{/* 复制按钮 */}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
