display-ambient-light/desktop
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects 1 Releases Wiki Activity

Optimize responsive layout for LED count control interface

Browse Source 
- Improve grid layout responsiveness from md:grid-cols-2 to lg:grid-cols-2
- Add responsive LED control items with grid-cols-2 sm:grid-cols-4
- Reduce padding and spacing for better small window display
- Optimize button and input sizes with compact styling
- Add custom CSS for small screen handling (<640px and <600px)
- Implement auto-fit grid layout with minmax(280px, 1fr)
- Enhance main container with overflow-x-auto and responsive padding
- Reduce overall page spacing and card body padding for compact display
This commit is contained in:
Ivan Li
2025-07-08 03:02:24 +08:00
parent c57f52ea74
commit 2834b7fe57
4 changed files with 52 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@ -81,7 +81,7 @@ function App() {
</div> </div>
{/* Main Content with top padding to account for fixed navbar */} {/* Main Content with top padding to account for fixed navbar */}
<main class="container mx-auto p-4 pt-20"> <main class="container mx-auto px-2 sm:px-4 py-4 pt-20 max-w-full overflow-x-auto">
<Routes> <Routes>
<Route path="/info" component={InfoIndex} /> <Route path="/info" component={InfoIndex} />
<Route path="/displays" component={DisplayStateIndex} /> <Route path="/displays" component={DisplayStateIndex} />

22
src/components/led-strip-configuration/led-count-control-panel.tsx
View File

@ -95,7 +95,7 @@ const LedCountControlItem: Component<LedCountControlItemProps> = (props) => {
return ( return (
<div <div
class="card bg-base-100 border border-base-300/50 p-2 transition-all duration-200 cursor-pointer" class="card bg-base-100 border border-base-300/50 p-1.5 transition-all duration-200 cursor-pointer"
classList={{ classList={{
'ring-2 ring-primary bg-primary/20 border-primary': 'ring-2 ring-primary bg-primary/20 border-primary':
stripConfiguration.hoveredStripPart?.border === props.border && stripConfiguration.hoveredStripPart?.border === props.border &&
@ -111,9 +111,9 @@ const LedCountControlItem: Component<LedCountControlItemProps> = (props) => {
</span> </span>
</div> </div>
<div class="flex items-center gap-1"> <div class="flex items-center gap-0.5">
<button <button
class="btn btn-xs btn-circle btn-outline flex-shrink-0" class="btn btn-xs btn-circle btn-outline flex-shrink-0 min-h-0 h-6 w-6"
onClick={handleDecrease} onClick={handleDecrease}
disabled={!config() || (config()?.len || 0) <= 0} disabled={!config() || (config()?.len || 0) <= 0}
title="减少LED数量" title="减少LED数量"
@ -123,7 +123,7 @@ const LedCountControlItem: Component<LedCountControlItemProps> = (props) => {
<input <input
type="number" type="number"
class="input input-xs flex-1 text-center min-w-0 text-sm font-medium [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" class="input input-xs flex-1 text-center min-w-0 text-xs font-medium [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none h-6 px-1"
value={config()?.len || 0} value={config()?.len || 0}
min="0" min="0"
max="1000" max="1000"
@ -136,7 +136,7 @@ const LedCountControlItem: Component<LedCountControlItemProps> = (props) => {
/> />
<button <button
class="btn btn-xs btn-circle btn-outline flex-shrink-0" class="btn btn-xs btn-circle btn-outline flex-shrink-0 min-h-0 h-6 w-6"
onClick={handleIncrease} onClick={handleIncrease}
disabled={!config() || (config()?.len || 0) >= 1000} disabled={!config() || (config()?.len || 0) >= 1000}
title="增加LED数量" title="增加LED数量"
@ -147,7 +147,7 @@ const LedCountControlItem: Component<LedCountControlItemProps> = (props) => {
<div class="mt-1"> <div class="mt-1">
<select <select
class="select select-xs w-full text-xs" class="select select-xs w-full text-xs h-6 min-h-0"
value={config()?.led_type || LedType.RGB} value={config()?.led_type || LedType.RGB}
onChange={handleLedTypeChange} onChange={handleLedTypeChange}
title="LED类型" title="LED类型"
@ -177,13 +177,13 @@ export const LedCountControlPanel: Component<LedCountControlPanelProps> = (props
return ( return (
<div {...rootProps} class={'card bg-base-200 shadow-lg border border-base-300 ' + (rootProps.class || '')}> <div {...rootProps} class={'card bg-base-200 shadow-lg border border-base-300 ' + (rootProps.class || '')}>
<div class="card-body p-4"> <div class="card-body p-3">
<div class="card-title text-base mb-3 flex items-center justify-between"> <div class="card-title text-sm mb-2 flex items-center justify-between">
<span>LED数量控制</span> <span>LED数量控制</span>
<div class="badge badge-info badge-outline">显示器 {localProps.display.id}</div> <div class="badge badge-info badge-outline text-xs">显示器 {localProps.display.id}</div>
</div> </div>
<div class="grid grid-cols-4 gap-2"> <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
<For each={borders}> <For each={borders}>
{(item) => ( {(item) => (
<LedCountControlItem <LedCountControlItem
@ -195,7 +195,7 @@ export const LedCountControlPanel: Component<LedCountControlPanelProps> = (props
</For> </For>
</div> </div>
<div class="text-xs text-base-content/50 mt-3 p-2 bg-base-300/50 rounded"> <div class="text-xs text-base-content/50 mt-2 p-1.5 bg-base-300/50 rounded">
💡 提示：点击 +/- 按钮或直接输入数值来调整LED数量（范围：0-1000） 💡 提示：点击 +/- 按钮或直接输入数值来调整LED数量（范围：0-1000）
</div> </div>
</div> </div>

34
src/components/led-strip-configuration/led-strip-configuration.tsx
View File

@ -104,13 +104,13 @@ export const LedStripConfiguration = () => {
]; ];
return ( return (
<div class="space-y-6"> <div class="space-y-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<h1 class="text-2xl font-bold text-base-content">灯条配置</h1> <h1 class="text-xl font-bold text-base-content">灯条配置</h1>
<div class="stats shadow"> <div class="stats shadow">
<div class="stat"> <div class="stat py-2 px-4">
<div class="stat-title">显示器数量</div> <div class="stat-title text-xs">显示器数量</div>
<div class="stat-value text-primary">{displayStore.displays.length}</div> <div class="stat-value text-primary text-lg">{displayStore.displays.length}</div>
</div> </div>
</div> </div>
</div> </div>
@ -118,10 +118,10 @@ export const LedStripConfiguration = () => {
<LedStripConfigurationContext.Provider value={ledStripConfigurationContextValue}> <LedStripConfigurationContext.Provider value={ledStripConfigurationContextValue}>
{/* LED Strip Sorter Panel */} {/* LED Strip Sorter Panel */}
<div class="card bg-base-200 shadow-lg"> <div class="card bg-base-200 shadow-lg">
<div class="card-body p-4"> <div class="card-body p-3">
<div class="card-title text-base mb-3"> <div class="card-title text-sm mb-2">
<span>灯条排序</span> <span>灯条排序</span>
<div class="badge badge-info badge-outline">实时预览</div> <div class="badge badge-info badge-outline text-xs">实时预览</div>
</div> </div>
<LedStripPartsSorter /> <LedStripPartsSorter />
<div class="text-xs text-base-content/50 mt-2"> <div class="text-xs text-base-content/50 mt-2">
@ -132,12 +132,12 @@ export const LedStripConfiguration = () => {
{/* Display Configuration Panel */} {/* Display Configuration Panel */}
<div class="card bg-base-200 shadow-lg"> <div class="card bg-base-200 shadow-lg">
<div class="card-body p-4"> <div class="card-body p-3">
<div class="card-title text-base mb-3"> <div class="card-title text-sm mb-2">
<span>显示器配置</span> <span>显示器配置</span>
<div class="badge badge-secondary badge-outline">可视化编辑</div> <div class="badge badge-secondary badge-outline text-xs">可视化编辑</div>
</div> </div>
<div class="h-96 mb-4"> <div class="h-80 mb-3">
<DisplayListContainer> <DisplayListContainer>
{displayStore.displays.map((display) => ( {displayStore.displays.map((display) => (
<DisplayView display={display} /> <DisplayView display={display} />
@ -151,12 +151,12 @@ export const LedStripConfiguration = () => {
</div> </div>
{/* LED Count Control Panels */} {/* LED Count Control Panels */}
<div class="space-y-4"> <div class="space-y-3">
<div class="flex items-center gap-2 mb-3"> <div class="flex items-center gap-2 mb-2">
<h2 class="text-lg font-semibold text-base-content">LED数量控制</h2> <h2 class="text-base font-semibold text-base-content">LED数量控制</h2>
<div class="badge badge-info badge-outline">实时调整</div> <div class="badge badge-info badge-outline text-xs">实时调整</div>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="led-control-grid">
{displayStore.displays.map((display) => ( {displayStore.displays.map((display) => (
<LedCountControlPanel display={display} /> <LedCountControlPanel display={display} />
))} ))}

22
src/styles.css
View File

@ -1,2 +1,24 @@
@import "tailwindcss"; @import "tailwindcss";
@config "../tailwind.config.js"; @config "../tailwind.config.js";
/* Custom responsive styles for small windows */
@media (max-width: 640px) {
.container {
max-width: 100%;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
}
/* Ensure LED control panels are responsive */
.led-control-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 0.75rem;
}
@media (max-width: 600px) {
.led-control-grid {
grid-template-columns: 1fr;
}
}