WPSDK/helix
2
0
Fork 0
mirror of https://ghproxy.net/https://github.com/abhijitb/helix.git synced 2025-08-27 13:29:31 +08:00
Code Issues Projects Packages Wiki Activity Actions

css cleanup

Browse source
This commit is contained in:
Abhijit Bhatnagar 2025-08-17 20:46:48 +05:30
parent b2e6a0a21f
commit 1fa23c846e
4 changed files with 127 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

2
build/assets/App-CmzsIsBk.css → build/assets/App-fm8bB5KR.css
View file

File diff suppressed because one or more lines are too long

2
build/index.js
View file

File diff suppressed because one or more lines are too long

8
src/pages/Settings/components/MediaAssetsSettings.jsx
View file

@ -32,9 +32,12 @@ const MediaAssetsSettings = ( { settings, updateSetting } ) => {
min={ 0 } min={ 0 }
/> />
<div className="helix-settings-subsection"> { /* Image Sizes Section - Header spans full width */ }
<div className="helix-settings-subsection-header">
<h4>Image Sizes</h4> <h4>Image Sizes</h4>
</div>
{ /* Thumbnail dimensions - side by side */ }
<NumberInput <NumberInput
label="Thumbnail Width" label="Thumbnail Width"
description="Maximum width of thumbnail images in pixels." description="Maximum width of thumbnail images in pixels."
@ -57,6 +60,7 @@ const MediaAssetsSettings = ( { settings, updateSetting } ) => {
max={ 2000 } max={ 2000 }
/> />
{ /* Medium dimensions - side by side */ }
<NumberInput <NumberInput
label="Medium Width" label="Medium Width"
description="Maximum width of medium-sized images in pixels." description="Maximum width of medium-sized images in pixels."
@ -79,6 +83,7 @@ const MediaAssetsSettings = ( { settings, updateSetting } ) => {
max={ 2000 } max={ 2000 }
/> />
{ /* Large dimensions - side by side */ }
<NumberInput <NumberInput
label="Large Width" label="Large Width"
description="Maximum width of large-sized images in pixels." description="Maximum width of large-sized images in pixels."
@ -100,7 +105,6 @@ const MediaAssetsSettings = ( { settings, updateSetting } ) => {
min={ 0 } min={ 0 }
max={ 4000 } max={ 4000 }
/> />
</div>
<ToggleInput <ToggleInput
label="Organize my uploads into month- and year-based folders" label="Organize my uploads into month- and year-based folders"

54
src/pages/Settings/settings.css
View file

@ -289,13 +289,45 @@
.helix-settings-grid { .helix-settings-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px; gap: 24px;
align-items: start;
}
/* Ensure form fields take full width within their grid cell */
.helix-settings-grid .helix-form-field {
width: 100%;
}
/* Handle odd number of fields - make the last field span full width if it's alone */
.helix-settings-grid .helix-form-field:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
/* Ensure subsections don't interfere with grid layout */
.helix-settings-subsection .helix-form-field {
margin-bottom: 16px;
}
/* Ensure consistent spacing between form fields */
.helix-settings-grid .helix-form-field + .helix-form-field {
margin-top: 0;
} }
.helix-settings-subsection { .helix-settings-subsection {
border-top: 1px solid var(--helix-color-3); border-top: 1px solid var(--helix-color-3);
padding-top: 24px; padding-top: 24px;
margin-top: 24px; margin-top: 24px;
grid-column: 1 / -1;
}
.helix-settings-subsection-header {
grid-column: 1 / -1;
border-top: 1px solid var(--helix-color-3);
padding-top: 24px;
margin-top: 24px;
} }
.helix-settings-subsection h4 { .helix-settings-subsection h4 {
@ -520,6 +552,18 @@
} }
/* Responsive Design */ /* Responsive Design */
@media (max-width: 1024px) {
.helix-settings-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.helix-settings-subsection-header {
margin-top: 20px;
padding-top: 20px;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
.helix-settings-page { .helix-settings-page {
padding: 15px; padding: 15px;
@ -551,6 +595,16 @@
padding: 20px; padding: 20px;
} }
.helix-settings-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.helix-settings-subsection-header {
margin-top: 20px;
padding-top: 20px;
}
.helix-save-buttons { .helix-save-buttons {
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;