Add comprehensive blog demo showcasing advanced content management features
- Implement complete mushroom foraging blog with chanterelles article - Add rich demonstration of .insertr and .insertr-add functionality - Include comprehensive documentation for future .insertr-content vision - Update project styling and configuration to support blog demo - Enhance engine and API handlers for improved content management
This commit is contained in:
@@ -1,12 +1,6 @@
|
||||
/**
|
||||
* INSERTR CSS - Centralized Styles for Content Management Interface
|
||||
*
|
||||
* Architecture: Simple class-based CSS with proper specificity
|
||||
* - Class selectors (0,0,1,0) automatically beat universal selectors (0,0,0,0)
|
||||
* - No cascade layers needed - works in all browsers
|
||||
* - No !important needed - specificity handles conflicts naturally
|
||||
* - Explicit colors prevent inheritance issues
|
||||
*
|
||||
* Components:
|
||||
* - .insertr-gate: Minimal styling for user-defined gates
|
||||
* - .insertr-auth-*: Authentication controls and buttons
|
||||
@@ -26,18 +20,18 @@
|
||||
--insertr-danger: #dc3545;
|
||||
--insertr-warning: #ffc107;
|
||||
--insertr-info: #17a2b8;
|
||||
|
||||
|
||||
/* Text colors */
|
||||
--insertr-text-primary: #333333;
|
||||
--insertr-text-secondary: #666666;
|
||||
--insertr-text-muted: #999999;
|
||||
--insertr-text-inverse: #ffffff;
|
||||
|
||||
|
||||
/* Background colors */
|
||||
--insertr-bg-primary: #ffffff;
|
||||
--insertr-bg-secondary: #f8f9fa;
|
||||
--insertr-bg-overlay: rgba(0, 0, 0, 0.5);
|
||||
|
||||
|
||||
/* Border and spacing */
|
||||
--insertr-border-color: #dee2e6;
|
||||
--insertr-border-radius: 4px;
|
||||
@@ -45,21 +39,21 @@
|
||||
--insertr-spacing-sm: 8px;
|
||||
--insertr-spacing-md: 16px;
|
||||
--insertr-spacing-lg: 24px;
|
||||
|
||||
|
||||
/* Z-index management */
|
||||
--insertr-z-modal-backdrop: 1040;
|
||||
--insertr-z-modal: 1050;
|
||||
--insertr-z-tooltip: 1070;
|
||||
--insertr-z-overlay: 999999;
|
||||
|
||||
|
||||
/* Typography */
|
||||
--insertr-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
--insertr-font-size-sm: 12px;
|
||||
--insertr-font-size-base: 14px;
|
||||
--insertr-line-height: 1.4;
|
||||
|
||||
|
||||
/* Form elements - using existing variables */
|
||||
|
||||
|
||||
/* Animation */
|
||||
--insertr-transition: all 0.2s ease-in-out;
|
||||
}
|
||||
@@ -142,8 +136,15 @@
|
||||
}
|
||||
|
||||
@keyframes insertr-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* Action Buttons Section */
|
||||
@@ -237,34 +238,6 @@
|
||||
transition: var(--insertr-transition);
|
||||
}
|
||||
|
||||
.insertr-editing-hover::after {
|
||||
content: '✏️ Click to edit';
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--insertr-text-primary);
|
||||
color: var(--insertr-text-inverse);
|
||||
padding: var(--insertr-spacing-xs) var(--insertr-spacing-sm);
|
||||
border-radius: var(--insertr-border-radius);
|
||||
font-size: var(--insertr-font-size-sm);
|
||||
font-family: var(--insertr-font-family);
|
||||
white-space: nowrap;
|
||||
z-index: var(--insertr-z-tooltip);
|
||||
opacity: 0;
|
||||
animation: insertr-tooltip-show 0.2s ease-in-out forwards;
|
||||
}
|
||||
|
||||
@keyframes insertr-tooltip-show {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(-5px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide editing indicators when not in edit mode */
|
||||
body:not(.insertr-edit-mode) .insertr-editing-hover {
|
||||
@@ -376,17 +349,18 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after {
|
||||
background: var(--insertr-bg-primary) !important;
|
||||
border: 1px solid var(--insertr-border-color) !important;
|
||||
border-radius: var(--insertr-border-radius) !important;
|
||||
padding: 6px 10px !important; /* Move padding to button level */
|
||||
padding: 6px 10px !important;
|
||||
/* Move padding to button level */
|
||||
font-size: var(--insertr-font-size-sm);
|
||||
cursor: pointer;
|
||||
transition: var(--insertr-transition);
|
||||
|
||||
|
||||
/* Fixed button dimensions and layout */
|
||||
min-height: 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
/* Reset button-level text properties to prevent inheritance */
|
||||
font-family: var(--insertr-font-family);
|
||||
text-decoration: none;
|
||||
@@ -400,7 +374,7 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
/* Create style containment boundary */
|
||||
contain: layout style;
|
||||
overflow: hidden;
|
||||
@@ -410,13 +384,13 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after {
|
||||
.insertr-style-sample {
|
||||
/* Authentic style preview - let all styling come through naturally */
|
||||
display: inline-block;
|
||||
|
||||
|
||||
/* Size constraints only */
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
|
||||
/* All other styling (color, weight, transform, decoration, etc.)
|
||||
comes from applied classes - no interference */
|
||||
}
|
||||
@@ -534,7 +508,7 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after {
|
||||
}
|
||||
|
||||
/* Form inputs and selects */
|
||||
.insertr-form-input,
|
||||
.insertr-form-input,
|
||||
.insertr-form-select {
|
||||
width: 100%;
|
||||
padding: var(--insertr-spacing-sm) var(--insertr-spacing-md);
|
||||
@@ -550,7 +524,7 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after {
|
||||
}
|
||||
|
||||
/* Focus states */
|
||||
.insertr-form-input:focus,
|
||||
.insertr-form-input:focus,
|
||||
.insertr-form-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--insertr-primary);
|
||||
@@ -563,7 +537,7 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after {
|
||||
}
|
||||
|
||||
/* Disabled states */
|
||||
.insertr-form-input:disabled,
|
||||
.insertr-form-input:disabled,
|
||||
.insertr-form-select:disabled {
|
||||
background: var(--insertr-bg-secondary);
|
||||
color: var(--insertr-text-muted);
|
||||
@@ -572,14 +546,14 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after {
|
||||
}
|
||||
|
||||
/* Error states */
|
||||
.insertr-form-input.insertr-error,
|
||||
.insertr-form-input.insertr-error,
|
||||
.insertr-form-select.insertr-error {
|
||||
border-color: var(--insertr-danger);
|
||||
box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
|
||||
}
|
||||
|
||||
/* Success states */
|
||||
.insertr-form-input.insertr-success,
|
||||
.insertr-form-input.insertr-success,
|
||||
.insertr-form-select.insertr-success {
|
||||
border-color: var(--insertr-success);
|
||||
box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25);
|
||||
@@ -917,7 +891,7 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after {
|
||||
}
|
||||
|
||||
/* Collection items hover state */
|
||||
.insertr-collection-active > *:hover {
|
||||
.insertr-collection-active>*:hover {
|
||||
background: rgba(0, 123, 255, 0.03);
|
||||
outline: 1px solid rgba(var(--insertr-primary), 0.2);
|
||||
outline-offset: 2px;
|
||||
@@ -925,7 +899,7 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after {
|
||||
}
|
||||
|
||||
/* Show item controls on hover */
|
||||
.insertr-collection-active > *:hover .insertr-item-controls {
|
||||
.insertr-collection-active>*:hover .insertr-item-controls {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -938,7 +912,7 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
|
||||
.insertr-item-controls {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
@@ -947,10 +921,10 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after {
|
||||
justify-content: center;
|
||||
margin-top: var(--insertr-spacing-xs);
|
||||
}
|
||||
|
||||
|
||||
.insertr-control-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,9 +18,6 @@ export class InsertrFormRenderer {
|
||||
* @param {Function} onCancel - Cancel callback
|
||||
*/
|
||||
showEditForm(meta, currentContent, onSave, onCancel) {
|
||||
const { element } = meta;
|
||||
|
||||
// All other elements use the editor directly
|
||||
return this.editor.edit(meta, currentContent, onSave, onCancel);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user