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

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

@ -32,76 +32,80 @@ const MediaAssetsSettings = ( { settings, updateSetting } ) => {
min={ 0 }
/>
<div className="helix-settings-subsection">
{ /* Image Sizes Section - Header spans full width */ }
<div className="helix-settings-subsection-header">
<h4>Image Sizes</h4>
<NumberInput
label="Thumbnail Width"
description="Maximum width of thumbnail images in pixels."
value={ settings.thumbnailSizeW }
onChange={ ( value ) =>
updateSetting( 'thumbnailSizeW', value )
}
min={ 0 }
max={ 2000 }
/>
<NumberInput
label="Thumbnail Height"
description="Maximum height of thumbnail images in pixels."
value={ settings.thumbnailSizeH }
onChange={ ( value ) =>
updateSetting( 'thumbnailSizeH', value )
}
min={ 0 }
max={ 2000 }
/>
<NumberInput
label="Medium Width"
description="Maximum width of medium-sized images in pixels."
value={ settings.mediumSizeW }
onChange={ ( value ) =>
updateSetting( 'mediumSizeW', value )
}
min={ 0 }
max={ 2000 }
/>
<NumberInput
label="Medium Height"
description="Maximum height of medium-sized images in pixels."
value={ settings.mediumSizeH }
onChange={ ( value ) =>
updateSetting( 'mediumSizeH', value )
}
min={ 0 }
max={ 2000 }
/>
<NumberInput
label="Large Width"
description="Maximum width of large-sized images in pixels."
value={ settings.largeSizeW }
onChange={ ( value ) =>
updateSetting( 'largeSizeW', value )
}
min={ 0 }
max={ 4000 }
/>
<NumberInput
label="Large Height"
description="Maximum height of large-sized images in pixels."
value={ settings.largeSizeH }
onChange={ ( value ) =>
updateSetting( 'largeSizeH', value )
}
min={ 0 }
max={ 4000 }
/>
</div>
{ /* Thumbnail dimensions - side by side */ }
<NumberInput
label="Thumbnail Width"
description="Maximum width of thumbnail images in pixels."
value={ settings.thumbnailSizeW }
onChange={ ( value ) =>
updateSetting( 'thumbnailSizeW', value )
}
min={ 0 }
max={ 2000 }
/>
<NumberInput
label="Thumbnail Height"
description="Maximum height of thumbnail images in pixels."
value={ settings.thumbnailSizeH }
onChange={ ( value ) =>
updateSetting( 'thumbnailSizeH', value )
}
min={ 0 }
max={ 2000 }
/>
{ /* Medium dimensions - side by side */ }
<NumberInput
label="Medium Width"
description="Maximum width of medium-sized images in pixels."
value={ settings.mediumSizeW }
onChange={ ( value ) =>
updateSetting( 'mediumSizeW', value )
}
min={ 0 }
max={ 2000 }
/>
<NumberInput
label="Medium Height"
description="Maximum height of medium-sized images in pixels."
value={ settings.mediumSizeH }
onChange={ ( value ) =>
updateSetting( 'mediumSizeH', value )
}
min={ 0 }
max={ 2000 }
/>
{ /* Large dimensions - side by side */ }
<NumberInput
label="Large Width"
description="Maximum width of large-sized images in pixels."
value={ settings.largeSizeW }
onChange={ ( value ) =>
updateSetting( 'largeSizeW', value )
}
min={ 0 }
max={ 4000 }
/>
<NumberInput
label="Large Height"
description="Maximum height of large-sized images in pixels."
value={ settings.largeSizeH }
onChange={ ( value ) =>
updateSetting( 'largeSizeH', value )
}
min={ 0 }
max={ 4000 }
/>
<ToggleInput
label="Organize my uploads into month- and year-based folders"
description="Organize uploaded files into date-based folder structure."

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

@ -289,13 +289,45 @@
.helix-settings-grid {
display: grid;
grid-template-columns: 1fr 1fr;
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 {
border-top: 1px solid var(--helix-color-3);
padding-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 {
@ -520,6 +552,18 @@
}
/* 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) {
.helix-settings-page {
padding: 15px;
@ -551,6 +595,16 @@
padding: 20px;
}
.helix-settings-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.helix-settings-subsection-header {
margin-top: 20px;
padding-top: 20px;
}
.helix-save-buttons {
flex-direction: column;
width: 100%;