Optimize responsive layout for LED count control interface
- 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:
@ -81,7 +81,7 @@ function App() {
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
<Route path="/info" component={InfoIndex} />
|
||||
<Route path="/displays" component={DisplayStateIndex} />
|
||||
|
||||
@ -95,7 +95,7 @@ const LedCountControlItem: Component<LedCountControlItemProps> = (props) => {
|
||||
|
||||
return (
|
||||
<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={{
|
||||
'ring-2 ring-primary bg-primary/20 border-primary':
|
||||
stripConfiguration.hoveredStripPart?.border === props.border &&
|
||||
@ -111,9 +111,9 @@ const LedCountControlItem: Component<LedCountControlItemProps> = (props) => {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="flex items-center gap-0.5">
|
||||
<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}
|
||||
disabled={!config() || (config()?.len || 0) <= 0}
|
||||
title="减少LED数量"
|
||||
@ -123,7 +123,7 @@ const LedCountControlItem: Component<LedCountControlItemProps> = (props) => {
|
||||
|
||||
<input
|
||||
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}
|
||||
min="0"
|
||||
max="1000"
|
||||
@ -136,7 +136,7 @@ const LedCountControlItem: Component<LedCountControlItemProps> = (props) => {
|
||||
/>
|
||||
|
||||
<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}
|
||||
disabled={!config() || (config()?.len || 0) >= 1000}
|
||||
title="增加LED数量"
|
||||
@ -147,7 +147,7 @@ const LedCountControlItem: Component<LedCountControlItemProps> = (props) => {
|
||||
|
||||
<div class="mt-1">
|
||||
<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}
|
||||
onChange={handleLedTypeChange}
|
||||
title="LED类型"
|
||||
@ -177,13 +177,13 @@ export const LedCountControlPanel: Component<LedCountControlPanelProps> = (props
|
||||
|
||||
return (
|
||||
<div {...rootProps} class={'card bg-base-200 shadow-lg border border-base-300 ' + (rootProps.class || '')}>
|
||||
<div class="card-body p-4">
|
||||
<div class="card-title text-base mb-3 flex items-center justify-between">
|
||||
<div class="card-body p-3">
|
||||
<div class="card-title text-sm mb-2 flex items-center justify-between">
|
||||
<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 class="grid grid-cols-4 gap-2">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
|
||||
<For each={borders}>
|
||||
{(item) => (
|
||||
<LedCountControlItem
|
||||
@ -195,7 +195,7 @@ export const LedCountControlPanel: Component<LedCountControlPanelProps> = (props
|
||||
</For>
|
||||
</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）
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -104,13 +104,13 @@ export const LedStripConfiguration = () => {
|
||||
];
|
||||
|
||||
return (
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-4">
|
||||
<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="stat">
|
||||
<div class="stat-title">显示器数量</div>
|
||||
<div class="stat-value text-primary">{displayStore.displays.length}</div>
|
||||
<div class="stat py-2 px-4">
|
||||
<div class="stat-title text-xs">显示器数量</div>
|
||||
<div class="stat-value text-primary text-lg">{displayStore.displays.length}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -118,10 +118,10 @@ export const LedStripConfiguration = () => {
|
||||
<LedStripConfigurationContext.Provider value={ledStripConfigurationContextValue}>
|
||||
{/* LED Strip Sorter Panel */}
|
||||
<div class="card bg-base-200 shadow-lg">
|
||||
<div class="card-body p-4">
|
||||
<div class="card-title text-base mb-3">
|
||||
<div class="card-body p-3">
|
||||
<div class="card-title text-sm mb-2">
|
||||
<span>灯条排序</span>
|
||||
<div class="badge badge-info badge-outline">实时预览</div>
|
||||
<div class="badge badge-info badge-outline text-xs">实时预览</div>
|
||||
</div>
|
||||
<LedStripPartsSorter />
|
||||
<div class="text-xs text-base-content/50 mt-2">
|
||||
@ -132,12 +132,12 @@ export const LedStripConfiguration = () => {
|
||||
|
||||
{/* Display Configuration Panel */}
|
||||
<div class="card bg-base-200 shadow-lg">
|
||||
<div class="card-body p-4">
|
||||
<div class="card-title text-base mb-3">
|
||||
<div class="card-body p-3">
|
||||
<div class="card-title text-sm mb-2">
|
||||
<span>显示器配置</span>
|
||||
<div class="badge badge-secondary badge-outline">可视化编辑</div>
|
||||
<div class="badge badge-secondary badge-outline text-xs">可视化编辑</div>
|
||||
</div>
|
||||
<div class="h-96 mb-4">
|
||||
<div class="h-80 mb-3">
|
||||
<DisplayListContainer>
|
||||
{displayStore.displays.map((display) => (
|
||||
<DisplayView display={display} />
|
||||
@ -151,12 +151,12 @@ export const LedStripConfiguration = () => {
|
||||
</div>
|
||||
|
||||
{/* LED Count Control Panels */}
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<h2 class="text-lg font-semibold text-base-content">LED数量控制</h2>
|
||||
<div class="badge badge-info badge-outline">实时调整</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<h2 class="text-base font-semibold text-base-content">LED数量控制</h2>
|
||||
<div class="badge badge-info badge-outline text-xs">实时调整</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="led-control-grid">
|
||||
{displayStore.displays.map((display) => (
|
||||
<LedCountControlPanel display={display} />
|
||||
))}
|
||||
|
||||
@ -1,2 +1,24 @@
|
||||
@import "tailwindcss";
|
||||
@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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user