fix(dashboard): make resize handles always visible in edit mode
- Change resize handles from hover-only to always visible in edit mode - Handles now show at 60% opacity in edit mode - Brighten to 100% opacity on hover for visual feedback - Update UI hint to explicitly mention green dots on corners/edges - Makes resize functionality more discoverable - Improves UX by showing affordances clearly
This commit is contained in:
@@ -140,12 +140,17 @@
|
|||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Resize handles - hidden by default */
|
/* Resize handles - visible in edit mode */
|
||||||
.resize-handles {
|
.resize-handles {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.2s;
|
transition: opacity 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Always show handles in edit mode, brighter on hover */
|
||||||
|
.edit-mode .resize-handles {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
.edit-mode .widget:hover .resize-handles,
|
.edit-mode .widget:hover .resize-handles,
|
||||||
.widget.resizing .resize-handles {
|
.widget.resizing .resize-handles {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@@ -258,7 +263,8 @@
|
|||||||
<div class="hint">
|
<div class="hint">
|
||||||
<strong>Features:</strong><br>
|
<strong>Features:</strong><br>
|
||||||
• Click "Edit Layout" to enter edit mode<br>
|
• Click "Edit Layout" to enter edit mode<br>
|
||||||
• In edit mode: drag widgets, resize from corners/edges, delete widgets, add from library<br>
|
• In edit mode: <strong>green dots appear on widget corners/edges</strong> - drag them to resize<br>
|
||||||
|
• Click widget body to drag and reposition<br>
|
||||||
• Click widgets in the library (left side) to add them<br>
|
• Click widgets in the library (left side) to add them<br>
|
||||||
• Hover over widgets to see edit controls (settings ⚙ and delete ×)<br>
|
• Hover over widgets to see edit controls (settings ⚙ and delete ×)<br>
|
||||||
• Click "Save" to commit changes or "Cancel" to discard<br>
|
• Click "Save" to commit changes or "Cancel" to discard<br>
|
||||||
|
|||||||
Reference in New Issue
Block a user