design(preview): consolidate desktop/mobile toggles inside the URL bar for a cleaner layout
This commit is contained in:
@@ -172,79 +172,75 @@ function PreviewDeviceToggles() {
|
|||||||
paddingLeft: 4,
|
paddingLeft: 4,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{/* Device Toggles Inside the Address Bar */}
|
||||||
|
<div style={{ display: "flex", gap: 2, alignItems: "center", marginRight: 4 }}>
|
||||||
|
<button
|
||||||
|
onClick={() => setDeviceMode("desktop")}
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
width: 24,
|
||||||
|
height: 24,
|
||||||
|
borderRadius: 4,
|
||||||
|
border: "none",
|
||||||
|
cursor: "pointer",
|
||||||
|
transition: "all 0.15s",
|
||||||
|
background: deviceMode === "desktop" ? "#e4e4e7" : "transparent",
|
||||||
|
color: deviceMode === "desktop" ? "#18181b" : "#71717a",
|
||||||
|
}}
|
||||||
|
title="Desktop view"
|
||||||
|
>
|
||||||
|
<Monitor size={12} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setDeviceMode("mobile")}
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
width: 24,
|
||||||
|
height: 24,
|
||||||
|
borderRadius: 4,
|
||||||
|
border: "none",
|
||||||
|
cursor: "pointer",
|
||||||
|
transition: "all 0.15s",
|
||||||
|
background: deviceMode === "mobile" ? "#e4e4e7" : "transparent",
|
||||||
|
color: deviceMode === "mobile" ? "#18181b" : "#71717a",
|
||||||
|
}}
|
||||||
|
title="Mobile view"
|
||||||
|
>
|
||||||
|
<Smartphone size={12} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 1,
|
||||||
|
height: 14,
|
||||||
|
background: "#e4e4e7",
|
||||||
|
margin: "0 4px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
{displayUrl && (
|
{displayUrl && (
|
||||||
<a
|
<a
|
||||||
href={displayUrl}
|
href={displayUrl}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
title="Open preview in new tab"
|
title="Open preview in new tab"
|
||||||
style={{ color: "#71717a", display: "flex", marginLeft: 4 }}
|
style={{ color: "#71717a", display: "flex", padding: "4px" }}
|
||||||
>
|
>
|
||||||
<ExternalLink size={14} />
|
<ExternalLink size={14} />
|
||||||
</a>
|
</a>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
gap: 4,
|
|
||||||
background: "#f4f4f5",
|
|
||||||
padding: 4,
|
|
||||||
borderRadius: 8,
|
|
||||||
border: "1px solid #e4e4e7",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
onClick={() => setDeviceMode("desktop")}
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
width: 32,
|
|
||||||
height: 26,
|
|
||||||
borderRadius: 6,
|
|
||||||
border: "none",
|
|
||||||
cursor: "pointer",
|
|
||||||
transition: "all 0.15s",
|
|
||||||
background: deviceMode === "desktop" ? "#ffffff" : "transparent",
|
|
||||||
color: deviceMode === "desktop" ? "#18181b" : "#71717a",
|
|
||||||
boxShadow:
|
|
||||||
deviceMode === "desktop" ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
|
|
||||||
}}
|
|
||||||
title="Desktop view"
|
|
||||||
>
|
|
||||||
<Monitor size={14} />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setDeviceMode("mobile")}
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
width: 32,
|
|
||||||
height: 26,
|
|
||||||
borderRadius: 6,
|
|
||||||
border: "none",
|
|
||||||
cursor: "pointer",
|
|
||||||
transition: "all 0.15s",
|
|
||||||
background: deviceMode === "mobile" ? "#ffffff" : "transparent",
|
|
||||||
color: deviceMode === "mobile" ? "#18181b" : "#71717a",
|
|
||||||
boxShadow:
|
|
||||||
deviceMode === "mobile" ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
|
|
||||||
}}
|
|
||||||
title="Mobile view"
|
|
||||||
>
|
|
||||||
<Smartphone size={14} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const bar: React.CSSProperties = {
|
const bar: React.CSSProperties = {
|
||||||
display: "flex",
|
|
||||||
flexDirection: "row",
|
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
flex: 1,
|
flex: 1,
|
||||||
minWidth: 0,
|
minWidth: 0,
|
||||||
|
|||||||
Reference in New Issue
Block a user