CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2026-01-20 07:12:58 -05:00
Code Issues Packages Projects Releases Wiki Activity

style: Improve embed options UI and logic

Browse Source 
Refactored the embed options layout to use a grid for better alignment and spacing. The 'Link title' and 'Show user avatar' checkboxes are now disabled and visually dimmed when 'Show title' is unchecked, improving usability and clarity.
This commit is contained in:
Yiannis Christodoulou
2026-01-07 13:36:43 +02:00
parent eac08a51a8
commit c54e46c412
1 changed files with 12 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/static/js/components/media-actions/MediaShareEmbed.jsx
View File

@@ -207,39 +207,37 @@ export function MediaShareEmbed(props) {
</div>*/}
<div className="option-content">
<div className="ratio-options">
<div className="ratio-options" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 10px' }}>
<div className="options-group">
<label style={{ minHeight: '36px' }}>
<label style={{ minHeight: '36px', whiteSpace: 'nowrap' }}>
<input type="checkbox" checked={showTitle} onChange={onShowTitleChange} />
Show title
</label>
</div>
{showTitle && (
<div className="options-group" style={{ paddingLeft: '20px' }}>
<label style={{ minHeight: '36px' }}>
<input type="checkbox" checked={linkTitle} onChange={onLinkTitleChange} />
<div className="options-group">
<label style={{ minHeight: '36px', whiteSpace: 'nowrap', opacity: showTitle ? 1 : 0.5 }}>
<input type="checkbox" checked={linkTitle} onChange={onLinkTitleChange} disabled={!showTitle} />
Link title
</label>
</div>
)}
<div className="options-group">
<label style={{ minHeight: '36px' }}>
<label style={{ minHeight: '36px', whiteSpace: 'nowrap' }}>
<input type="checkbox" checked={showRelated} onChange={onShowRelatedChange} />
Show related
</label>
</div>
<div className="options-group">
<label style={{ minHeight: '36px' }}>
<input type="checkbox" checked={showUserAvatar} onChange={onShowUserAvatarChange} />
<label style={{ minHeight: '36px', whiteSpace: 'nowrap', opacity: showTitle ? 1 : 0.5 }}>
<input type="checkbox" checked={showUserAvatar} onChange={onShowUserAvatarChange} disabled={!showTitle} />
Show user avatar
</label>
</div>
<div className="options-group">
<label style={{ minHeight: '36px' }}>
<label style={{ minHeight: '36px', whiteSpace: 'nowrap' }}>
<input type="checkbox" checked={keepAspectRatio} onChange={onKeepAspectRatioChange} />
Keep aspect ratio
</label>