wireframe
This commit is contained in:
parent
dce9fb86d9
commit
62dffed702
@ -52,6 +52,7 @@ export class EditstepperComponent implements OnInit {
|
|||||||
|
|
||||||
|
|
||||||
public entryForm: FormGroup;
|
public entryForm: FormGroup;
|
||||||
|
|
||||||
submitted = false;
|
submitted = false;
|
||||||
rowSelected: any = {};
|
rowSelected: any = {};
|
||||||
modalcomplete = false;
|
modalcomplete = false;
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
@ -137,33 +137,158 @@
|
|||||||
[class.mobile-open]="sidebarOpen"
|
[class.mobile-open]="sidebarOpen"
|
||||||
[class.visible]="sidebarOpen || !isMobile">
|
[class.visible]="sidebarOpen || !isMobile">
|
||||||
|
|
||||||
<!-- Sidebar Header -->
|
<!-- Loading Overlay -->
|
||||||
|
<!-- <div *ngIf="isLoading" class="loading-overlay">
|
||||||
|
<mat-spinner diameter="40"></mat-spinner>
|
||||||
|
<div class="loading-text">Generating Pages...</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- Updated Close Button -->
|
||||||
<div class="sidebar-header">
|
<div class="sidebar-header">
|
||||||
<div (click)="toggleSidebar()">
|
<button
|
||||||
|
(click)="toggleSidebar()"
|
||||||
|
class="close-btn"
|
||||||
|
style="
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #060606;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
font-size: 16px;
|
||||||
|
"
|
||||||
|
>
|
||||||
<i class="fas" [ngClass]="sidebarCollapsed ? 'fa-chevron-left' : 'fa-chevron-right'"></i>
|
<i class="fas" [ngClass]="sidebarCollapsed ? 'fa-chevron-left' : 'fa-chevron-right'"></i>
|
||||||
|
</button>
|
||||||
|
<h2>Wireframe Controls</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<h2>
|
|
||||||
|
|
||||||
<i class="fas fa-cogs" style="margin-right: 8px; font-size: 18px;"></i>
|
|
||||||
|
|
||||||
Wireframe Controls
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Main Actions Section -->
|
<!-- Main Actions Section -->
|
||||||
<div class="sidebar-content">
|
<div class="sidebar-content">
|
||||||
<div class="control-section fade-in-up" [@fadeIn]>
|
|
||||||
|
<div class="control-section search-section fade-in-up" [@fadeIn]>
|
||||||
<h3>
|
<h3>
|
||||||
<i class="fas fa-play-circle" style="margin-right: 6px; color: #28a745;"></i>
|
<i class="fas fa-search" style="margin-right: 6px; color: #17a2b8;"></i>
|
||||||
Generate Wireframe
|
Search Sections
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<button class="action-btn primary" (click)="buildWireframe(37688)" [@buttonHover]>
|
<div class="search-container">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="search-input"
|
||||||
|
[(ngModel)]="searchTerm"
|
||||||
|
(input)="onSearchChange()"
|
||||||
|
placeholder="Search sections..."
|
||||||
|
> </div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Global Sections -->
|
||||||
|
<div class="control-section fade-in-left" [@fadeIn]>
|
||||||
|
<h3>
|
||||||
|
<i class="fas fa-globe" style="margin-right: 6px; color: #6f42c1;"></i>
|
||||||
|
Global Sections
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="wf-section-list" *ngIf="getFilteredSections(globalSections).length">
|
||||||
|
<div class="wf-section-item"
|
||||||
|
*ngFor="let section of getFilteredSections(globalSections)"
|
||||||
|
(click)="addSectionFromTemplate(section)">
|
||||||
|
<div class="section-icon">
|
||||||
|
<i [class]="section.icon"></i>
|
||||||
|
</div>
|
||||||
|
<div class="section-info">
|
||||||
|
<div class="section-name">{{ section.type }}</div>
|
||||||
|
<div class="section-desc">{{ section.description }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Standard Sections -->
|
||||||
|
<div class="control-section fade-in-left" [@fadeIn]>
|
||||||
|
<h3>
|
||||||
|
<i class="fas fa-th-large" style="margin-right: 6px; color: #fd7e14;"></i>
|
||||||
|
Standard Sections
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="wf-section-list" *ngIf="getFilteredSections(standardSections).length">
|
||||||
|
<div class="wf-section-item"
|
||||||
|
*ngFor="let section of getFilteredSections(standardSections)"
|
||||||
|
(click)="addSectionFromTemplate(section)">
|
||||||
|
<div class="section-icon">
|
||||||
|
<i [class]="section.icon"></i>
|
||||||
|
</div>
|
||||||
|
<div class="section-info">
|
||||||
|
<div class="section-name">{{ section.type }}</div>
|
||||||
|
<div class="section-desc">{{ section.description }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Custom Sections -->
|
||||||
|
<div class="control-section fade-in-left" [@fadeIn]>
|
||||||
|
<h3>
|
||||||
|
<i class="fas fa-puzzle-piece" style="margin-right: 6px; color: #e83e8c;"></i>
|
||||||
|
Custom Sections
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="wf-section-list" *ngIf="getFilteredSections(customSections).length">
|
||||||
|
<div class="wf-section-item"
|
||||||
|
*ngFor="let section of getFilteredSections(customSections)"
|
||||||
|
(click)="addSectionFromTemplate(section)">
|
||||||
|
<div class="section-icon">
|
||||||
|
<i [class]="section.icon"></i>
|
||||||
|
</div>
|
||||||
|
<div class="section-info">
|
||||||
|
<div class="section-name">{{ section.type }}</div>
|
||||||
|
<div class="section-desc">{{ section.description }}</div>
|
||||||
|
</div>
|
||||||
|
<button class="delete-custom-btn" (click)="deleteCustomSection($event, section)">
|
||||||
|
<i class="fas fa-trash"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add Custom Section -->
|
||||||
|
<div class="add-custom-section">
|
||||||
|
<button class="action-btn secondary full-width" (click)="showAddCustomSectionModal()">
|
||||||
|
<i class="fas fa-plus"></i>
|
||||||
|
Add Custom Section
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Additional Features Section -->
|
||||||
|
<div class="control-section fade-in-up" [@fadeIn]>
|
||||||
|
<h3>
|
||||||
|
<i class="fas fa-tools" style="margin-right: 6px; color: #20c997;"></i>
|
||||||
|
Additional Features
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<button class="action-btn primary" (click)="createHtmlFiles()">
|
||||||
|
<i class="fas fa-save"></i>
|
||||||
|
Save All HTML Files
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="action-btn secondary" (click)="recreateWireframe()">
|
||||||
|
<i class="fas fa-redo"></i>
|
||||||
|
Regenerate Wireframe
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="action-btn primary" (click)="showNavbarEditor()">
|
||||||
|
<i class="fas fa-bars"></i>
|
||||||
|
Navbar Editor
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="action-btn secondary" (click)="buildWireframe(37688)" [@buttonHover]>
|
||||||
<i class="fas fa-hammer"></i>
|
<i class="fas fa-hammer"></i>
|
||||||
Build Wireframe
|
Build Wireframe
|
||||||
</button>
|
</button>
|
||||||
@ -173,44 +298,15 @@
|
|||||||
Regenerate Modified
|
Regenerate Modified
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button class="action-btn secondary" (click)="createHtmlFiles()">
|
|
||||||
<i class="fas fa-save"></i>
|
|
||||||
Save All HTML Files
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="action-btn secondary" (click)="recreateWireframe()">
|
|
||||||
<i class="fas fa-redo"></i>
|
|
||||||
Recreate Wireframe
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="action-btn secondary">
|
<button class="action-btn secondary">
|
||||||
<i class="fa-solid fa-link"></i>
|
<i class="fas fa-external-link-alt"></i>
|
||||||
{{ deployedUrl ? 'DEPLOYED URL: ' + deployedUrl : 'NO URL YET' }}
|
{{ deployedUrl ? 'DEPLOYED URL: ' + deployedUrl : 'NO URL YET' }}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Navbar Controls Section -->
|
<!-- Commented out sections as requested -->
|
||||||
<div class="control-section fade-in-left" [@fadeIn]>
|
<!--
|
||||||
<h3>
|
|
||||||
<i class="fas fa-bars" style="margin-right: 6px; color: #17a2b8;"></i>
|
|
||||||
Navbar Editor
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="navbarSelect">Select Navbar Page:</label>
|
|
||||||
<select id="navbarSelect" class="form-control" [(ngModel)]="selectedNavbarPage"
|
|
||||||
(change)="selectedNavbarPage && selectNavbar(selectedNavbarPage)"
|
|
||||||
[@focusBorder]>
|
|
||||||
<option value="">Choose a page...</option>
|
|
||||||
<option *ngFor="let page of pageRenderOrder" [value]="page">
|
|
||||||
<i class="fas fa-file-alt"></i> {{ page }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Style Controls Section -->
|
|
||||||
<div class="control-section bounce-in" [@fadeIn]>
|
<div class="control-section bounce-in" [@fadeIn]>
|
||||||
<h3>
|
<h3>
|
||||||
<i class="fas fa-palette" style="margin-right: 6px; color: #fd7e14;"></i>
|
<i class="fas fa-palette" style="margin-right: 6px; color: #fd7e14;"></i>
|
||||||
@ -235,26 +331,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="style-grid">
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Text Align:</label>
|
|
||||||
<select class="form-control" [(ngModel)]="liveStyles.textAlign">
|
|
||||||
<option value="">Default</option>
|
|
||||||
<option value="left">Left</option>
|
|
||||||
<option value="center">Center</option>
|
|
||||||
<option value="right">Right</option>
|
|
||||||
<option value="justify">Justify</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<button class="action-btn secondary small" (click)="verifyCssInSections()">
|
|
||||||
<i class="fas fa-search"></i>
|
|
||||||
Verify CSS
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="color-controls">
|
<div class="color-controls">
|
||||||
<div class="color-input-group">
|
<div class="color-input-group">
|
||||||
<span class="color-label">
|
<span class="color-label">
|
||||||
@ -278,8 +354,9 @@
|
|||||||
Apply Style to Selection
|
Apply Style to Selection
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
-->
|
||||||
|
|
||||||
<!-- Page Management Section -->
|
<!--
|
||||||
<div class="control-section fade-in-up" [@fadeIn]>
|
<div class="control-section fade-in-up" [@fadeIn]>
|
||||||
<h3>
|
<h3>
|
||||||
<i class="fas fa-file-alt" style="margin-right: 6px; color: #dc3545;"></i>
|
<i class="fas fa-file-alt" style="margin-right: 6px; color: #dc3545;"></i>
|
||||||
@ -302,8 +379,9 @@
|
|||||||
Delete Current Page
|
Delete Current Page
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
-->
|
||||||
|
|
||||||
<!-- Additional Tools Section -->
|
<!--
|
||||||
<div class="control-section fade-in-up" [@fadeIn]>
|
<div class="control-section fade-in-up" [@fadeIn]>
|
||||||
<h3>
|
<h3>
|
||||||
<i class="fas fa-tools" style="margin-right: 6px; color: #6f42c1;"></i>
|
<i class="fas fa-tools" style="margin-right: 6px; color: #6f42c1;"></i>
|
||||||
@ -330,6 +408,7 @@
|
|||||||
Add Section
|
Add Section
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -357,61 +436,63 @@
|
|||||||
(wheel)="onWheel($event)">
|
(wheel)="onWheel($event)">
|
||||||
|
|
||||||
<!-- Loading Overlay -->
|
<!-- Loading Overlay -->
|
||||||
<div *ngIf="isLoading" class="loading-overlay">
|
<!-- Updated Loading Overlay -->
|
||||||
<div class="spinner"></div>
|
<div *ngIf="isLoading" class="loading-overlay" [@fadeIn]>
|
||||||
<div class="loading-text">Loading wireframe...</div>
|
<div class="loading-container">
|
||||||
|
<mat-spinner diameter="50" color="accent"></mat-spinner>
|
||||||
|
<div class="loading-text">Building Interface...</div>
|
||||||
|
<div class="loading-subtext">Please wait while we prepare your components</div>
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress-fill" [style.width.%]="loadProgress"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- Full Page Display -->
|
<!-- Full Page Display -->
|
||||||
<div *ngIf="!isLoading && getCurrentPage()"
|
<div *ngIf="!isLoading "
|
||||||
class="page-display"
|
class="page-display"
|
||||||
[style.transform]="getPageTransform()">
|
[style.transform]="getPageTransform()">
|
||||||
|
|
||||||
<!-- Connected Sections Container -->
|
<!-- Update your section template -->
|
||||||
<div class="connected-sections"
|
<div class="connected-sections"
|
||||||
cdkDropList
|
cdkDropList
|
||||||
cdkDropListOrientation="vertical"
|
|
||||||
[cdkDropListData]="getCurrentPageSections()"
|
[cdkDropListData]="getCurrentPageSections()"
|
||||||
(cdkDropListDropped)="onSectionDrop($event, getCurrentPageName())">
|
[cdkDropListConnectedTo]="allConnectedLists"
|
||||||
|
(cdkDropListDropped)="onSectionDrop($event)">
|
||||||
|
|
||||||
<!-- Individual Connected Sections -->
|
<div *ngFor="let sectionKey of getCurrentPageSections()"
|
||||||
<!-- Change this in your *ngFor -->
|
|
||||||
<!-- Update the section wrapper div -->
|
|
||||||
<div *ngFor="let sectionKey of getCurrentPageSections(); let i = index"
|
|
||||||
class="section-wrapper"
|
|
||||||
[class.editing]="isCurrentSectionEditing(sectionKey)"
|
|
||||||
cdkDrag
|
cdkDrag
|
||||||
[cdkDragData]="sectionKey"
|
[cdkDragData]="sectionKey"
|
||||||
(mouseenter)="hoveredSection = sectionKey"
|
class="section-wrapper"
|
||||||
(mouseleave)="hoveredSection = null"
|
#dragItem>
|
||||||
(dblclick)="toggleSectionEditing(getCurrentPageName(), sectionKey, $event)">
|
|
||||||
|
|
||||||
<!-- Section Content (Full Width, No Gaps) -->
|
<!-- Drag Handle -->
|
||||||
|
<div class="drag-handle" cdkDragHandle>
|
||||||
|
<i class="fas fa-grip-vertical"></i>
|
||||||
|
<div style="height: 16px !important;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Section Content -->
|
||||||
<div class="section-content"
|
<div class="section-content"
|
||||||
[innerHTML]="getSectionHtml(getCurrentPageName(), sectionKey)"
|
[innerHTML]="getSectionHtml(getCurrentPageName(), sectionKey)"
|
||||||
[attr.contenteditable]="isCurrentSectionEditing(sectionKey)"
|
[attr.contenteditable]="isCurrentSectionEditing(sectionKey)"
|
||||||
(blur)="handleDirectContentEdit($event, getCurrentPageName(), sectionKey)">
|
(blur)="handleDirectContentEdit($event, getCurrentPageName(), sectionKey)">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Section Overlay for Hover/Edit State -->
|
<!-- Section Overlay -->
|
||||||
<div class="section-overlay"
|
<div class="section-overlay" *ngIf="!isCurrentSectionEditing(sectionKey)">
|
||||||
[class.visible]="hoveredSection === sectionKey || isCurrentSectionEditing(sectionKey)">
|
<div class="section-label">{{sectionKey}}</div>
|
||||||
<div class="section-label">
|
|
||||||
<i class="fas fa-puzzle-piece" style="margin-right: 4px;"></i>
|
|
||||||
{{ sectionKey }}
|
|
||||||
<button *ngIf="isCurrentSectionEditing(sectionKey)"
|
|
||||||
class="btn btn-sm btn-success ms-2"
|
|
||||||
(click)="saveSectionEdit(getCurrentPageName(), sectionKey)">
|
|
||||||
<i class="fas fa-check"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Drag Handle -->
|
<!-- Drag Handle -->
|
||||||
<div class="drag-handle" cdkDragHandle style="display: none;">
|
<!-- <div class="drag-handle" cdkDragHandle style="display: none;">
|
||||||
<i class="fa fa-grip-lines"></i>
|
<i class="fa fa-grip-lines"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<!-- Empty State for Sections -->
|
<!-- Empty State for Sections -->
|
||||||
<div *ngIf="getCurrentPageSections().length === 0" class="empty-sections"
|
<div *ngIf="getCurrentPageSections().length === 0" class="empty-sections"
|
||||||
@ -493,49 +574,73 @@
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Navbar Editor Modal -->
|
<!-- Navbar Editor Modal -->
|
||||||
<div class="modal-overlay" *ngIf="selectedNavbarPage" [@fadeIn] (click)="closeNavbarModal()">
|
|
||||||
<div class="modal-content" (click)="$event.stopPropagation()" [@slideIn]>
|
<!-- Updated Navbar Editor Modal -->
|
||||||
|
<div class="modal-overlay" *ngIf="showNavbarEditorModal" [@fadeIn] (click)="closeNavbarEditorModal()">
|
||||||
|
<div class="modal-content navbar-editor-modal" (click)="$event.stopPropagation()" [@slideIn]>
|
||||||
|
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h3>
|
<h3>
|
||||||
<i class="fas fa-edit" style="margin-right: 8px; color: #17a2b8;"></i>
|
<i class="fas fa-bars" style="margin-right: 8px; color: #17a2b8;"></i>
|
||||||
Edit Navbar Links - {{ selectedNavbarPage }}
|
Navbar Editor
|
||||||
</h3>
|
</h3>
|
||||||
<button class="close-btn" (click)="closeNavbarModal()">
|
<button class="close-btn" (click)="closeNavbarEditorModal()">
|
||||||
<i class="fas fa-times"></i>
|
<i class="fas fa-times"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="navbar-link-item" *ngFor="let link of navbarLinks[selectedNavbarPage]; let i = index" [@fadeIn]
|
<!-- Page Selection -->
|
||||||
style="display: flex; gap: 10px; align-items: center; margin-bottom: 15px; padding: 15px; background: #f8f9fa; border-radius: 8px;">
|
<div class="form-group">
|
||||||
<div class="form-group" style="flex: 1; margin-bottom: 0;">
|
<label for="navbarPageSelect">Select Page:</label>
|
||||||
|
<select id="navbarPageSelect" class="form-control" [(ngModel)]="selectedNavbarPage"
|
||||||
|
(change)="onNavbarPageChange()"
|
||||||
|
[@focusBorder]>
|
||||||
|
<option value="">Choose a page...</option>
|
||||||
|
<option *ngFor="let page of pageRenderOrder" [value]="page">
|
||||||
|
<i class="fas fa-file-alt"></i> {{ page }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navbar Links -->
|
||||||
|
<div *ngIf="selectedNavbarPage" class="navbar-links-section">
|
||||||
|
<h4>Navbar Links</h4>
|
||||||
|
<div class="navbar-link-item" *ngFor="let link of currentNavbarLinks; let i = index" [@fadeIn]>
|
||||||
|
<div class="link-inputs">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Link Text:</label>
|
||||||
<input type="text" [(ngModel)]="link.label" placeholder="Link Label" class="form-control">
|
<input type="text" [(ngModel)]="link.label" placeholder="Link Label" class="form-control">
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group" style="flex: 1; margin-bottom: 0;">
|
<div class="form-group">
|
||||||
|
<label>Link URL:</label>
|
||||||
<select [(ngModel)]="link.href" class="form-control">
|
<select [(ngModel)]="link.href" class="form-control">
|
||||||
<option value="">Select page...</option>
|
<option value="">Select page...</option>
|
||||||
<option *ngFor="let page of availablePages" [value]="page.href">{{ page.label }}</option>
|
<option *ngFor="let page of availablePages" [value]="page.href">{{ page.label }}</option>
|
||||||
|
<option value="custom">Custom URL...</option>
|
||||||
</select>
|
</select>
|
||||||
|
<input *ngIf="link.href === 'custom'" type="text" [(ngModel)]="link.customUrl"
|
||||||
|
placeholder="Enter custom URL" class="form-control mt-2">
|
||||||
</div>
|
</div>
|
||||||
<button class="remove-btn" (click)="removeLink(selectedNavbarPage, i)" title="Remove Link"
|
<button class="remove-btn" (click)="removeNavbarLink(i)" title="Remove Link">
|
||||||
style="background: #dc3545; color: white; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer;">
|
|
||||||
<i class="fas fa-trash"></i>
|
<i class="fas fa-trash"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button class="action-btn secondary full-width add-link-btn" (click)="addLink(selectedNavbarPage)">
|
<button class="action-btn secondary full-width" (click)="addNavbarLink()">
|
||||||
<i class="fas fa-plus"></i>
|
<i class="fas fa-plus"></i>
|
||||||
Add New Link
|
Add New Link
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button class="action-btn secondary" (click)="closeNavbarModal()">
|
<button class="action-btn secondary" (click)="closeNavbarEditorModal()">
|
||||||
<i class="fas fa-times" style="margin-right: 5px;"></i>
|
<i class="fas fa-times" style="margin-right: 5px;"></i>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
<button class="action-btn primary" (click)="applyNavbarChanges(selectedNavbarPage)">
|
<button class="action-btn primary" (click)="saveNavbarChanges()">
|
||||||
<i class="fas fa-check" style="margin-right: 5px;"></i>
|
<i class="fas fa-check" style="margin-right: 5px;"></i>
|
||||||
Save Changes
|
Save Changes
|
||||||
</button>
|
</button>
|
||||||
@ -543,74 +648,72 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modal for Adding New Section -->
|
<!-- Add Custom Section Modal -->
|
||||||
<div class="modal-overlay" *ngIf="showNewSectionModal" [@fadeIn] (click)="closeNewSectionModal()">
|
<div class="modal-overlay" *ngIf="showAddCustomModal" [@fadeIn] (click)="closeAddCustomModal()">
|
||||||
<div class="modal-content" (click)="$event.stopPropagation()" [@slideIn]>
|
<div class="modal-content" (click)="$event.stopPropagation()" [@slideIn]>
|
||||||
|
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h3>
|
<h3>
|
||||||
<i class="fas fa-plus-circle" style="margin-right: 8px; color: #28a745;"></i>
|
<i class="fas fa-plus-circle" style="margin-right: 8px; color: #28a745;"></i>
|
||||||
Add New Section to {{ newSectionPage }}
|
Add Custom Section
|
||||||
</h3>
|
</h3>
|
||||||
<button class="close-btn" (click)="closeNewSectionModal()">
|
<button class="close-btn" (click)="closeAddCustomModal()">
|
||||||
<i class="fas fa-times"></i>
|
<i class="fas fa-times"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="sectionName">
|
<label for="customSectionName">
|
||||||
<i class="fas fa-tag" style="margin-right: 4px;"></i>
|
<i class="fas fa-tag" style="margin-right: 4px;"></i>
|
||||||
Section Name:
|
Section Name:
|
||||||
</label>
|
</label>
|
||||||
<input id="sectionName"
|
<input id="customSectionName"
|
||||||
type="text"
|
type="text"
|
||||||
[(ngModel)]="newSectionName"
|
[(ngModel)]="newCustomSectionName"
|
||||||
placeholder="Enter section name (e.g., Hero, About, Contact)"
|
placeholder="Enter section name (e.g., Custom Header, Special CTA)"
|
||||||
class="form-control">
|
class="form-control">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="sectionType">
|
<label for="customSectionDesc">
|
||||||
<i class="fas fa-layer-group" style="margin-right: 4px;"></i>
|
|
||||||
Section Type:
|
|
||||||
</label>
|
|
||||||
<select id="sectionType" [(ngModel)]="newSectionType" class="form-control">
|
|
||||||
<option value="">Select a type...</option>
|
|
||||||
<option *ngFor="let type of sectionTypes" [value]="type.value">
|
|
||||||
{{ type.label }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="sectionDescription">
|
|
||||||
<i class="fas fa-align-left" style="margin-right: 4px;"></i>
|
<i class="fas fa-align-left" style="margin-right: 4px;"></i>
|
||||||
Section Description:
|
Section Description:
|
||||||
</label>
|
</label>
|
||||||
<textarea id="sectionDescription"
|
<textarea id="customSectionDesc"
|
||||||
[(ngModel)]="newSectionDescription"
|
[(ngModel)]="newCustomSectionDesc"
|
||||||
rows="4"
|
rows="4"
|
||||||
placeholder="Describe the content and purpose of this section..."
|
placeholder="Describe the content and purpose of this custom section..."
|
||||||
class="form-control"></textarea>
|
class="form-control"></textarea>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="customSectionIcon">
|
||||||
|
<i class="fas fa-icons" style="margin-right: 4px;"></i>
|
||||||
|
Icon Class:
|
||||||
|
</label>
|
||||||
|
<input id="customSectionIcon"
|
||||||
|
type="text"
|
||||||
|
[(ngModel)]="newCustomSectionIcon"
|
||||||
|
placeholder="e.g., fas fa-star, fas fa-rocket"
|
||||||
|
class="form-control">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button class="action-btn secondary" (click)="closeNewSectionModal()">
|
<button class="action-btn secondary" (click)="closeAddCustomModal()">
|
||||||
<i class="fas fa-times" style="margin-right: 5px;"></i>
|
<i class="fas fa-times" style="margin-right: 5px;"></i>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
<button class="action-btn primary"
|
<button class="action-btn primary"
|
||||||
[disabled]="!newSectionName || !newSectionType"
|
[disabled]="!newCustomSectionName || !newCustomSectionDesc"
|
||||||
(click)="confirmAddSection()">
|
(click)="confirmAddCustomSection()">
|
||||||
<i class="fas fa-plus" style="margin-right: 5px;"></i>
|
<i class="fas fa-plus" style="margin-right: 5px;"></i>
|
||||||
Add Section
|
Add Custom Section
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modal for Adding New Page -->
|
<!-- Modal for Adding New Page -->
|
||||||
<div class="modal-overlay" *ngIf="showNewPageModal" [@fadeIn] (click)="closeNewPageModal()">
|
<div class="modal-overlay" *ngIf="showNewPageModal" [@fadeIn] (click)="closeNewPageModal()">
|
||||||
<div class="modal-content" (click)="$event.stopPropagation()" [@slideIn]>
|
<div class="modal-content" (click)="$event.stopPropagation()" [@slideIn]>
|
||||||
|
|||||||
@ -149,6 +149,8 @@ $shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|||||||
top: 0 ;
|
top: 0 ;
|
||||||
z-index: 10 ;
|
z-index: 10 ;
|
||||||
backdrop-filter: blur(10px) ;
|
backdrop-filter: blur(10px) ;
|
||||||
|
display: flex ;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
margin: 0 ;
|
margin: 0 ;
|
||||||
@ -374,6 +376,129 @@ $shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.wf-section-list {
|
||||||
|
max-height: 300px !important;
|
||||||
|
overflow-y: auto !important;
|
||||||
|
margin: 12px 0 !important;
|
||||||
|
border: 1px solid #e9ecef !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
padding: 8px !important;
|
||||||
|
background: #ffffff !important;
|
||||||
|
|
||||||
|
.wf-section-item {
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
padding: 12px !important;
|
||||||
|
margin-bottom: 8px !important;
|
||||||
|
border: 1px solid #e9ecef !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
cursor: pointer !important;
|
||||||
|
transition: all 0.2s ease !important;
|
||||||
|
position: relative !important;
|
||||||
|
background: #f8f9fa !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #007bff !important;
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
transform: translateY(-2px) !important;
|
||||||
|
box-shadow: 0 3px 6px rgba(0,0,0,0.1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-icon {
|
||||||
|
width: 40px !important;
|
||||||
|
height: 40px !important;
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
background: #ffffff !important;
|
||||||
|
border-radius: 6px !important;
|
||||||
|
margin-right: 12px !important;
|
||||||
|
border: 1px solid #dee2e6 !important;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 18px !important;
|
||||||
|
color: #007bff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-info {
|
||||||
|
flex: 1 !important;
|
||||||
|
|
||||||
|
.section-name {
|
||||||
|
font-weight: 600 !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
color: #2c3e50 !important;
|
||||||
|
margin-bottom: 4px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-desc {
|
||||||
|
font-size: 12px !important;
|
||||||
|
color: #7f8c8d !important;
|
||||||
|
line-height: 1.4 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-custom-btn {
|
||||||
|
position: absolute !important;
|
||||||
|
top: 50% !important;
|
||||||
|
right: 12px !important;
|
||||||
|
transform: translateY(-50%) !important;
|
||||||
|
width: 28px !important;
|
||||||
|
height: 28px !important;
|
||||||
|
border: none !important;
|
||||||
|
background: #dc3545 !important;
|
||||||
|
color: white !important;
|
||||||
|
border-radius: 50% !important;
|
||||||
|
display: none !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
cursor: pointer !important;
|
||||||
|
transition: background 0.2s ease !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #c82333 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover .delete-custom-btn {
|
||||||
|
display: flex !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Custom Section for adding new sections
|
||||||
|
.add-custom-section {
|
||||||
|
display: flex ;
|
||||||
|
align-items: center ;
|
||||||
|
gap: 12px ;
|
||||||
|
margin-top: 20px ;
|
||||||
|
padding: 12px ;
|
||||||
|
background: rgba(255, 255, 255, 0.9) ;
|
||||||
|
border-radius: 8px ;
|
||||||
|
box-shadow: $shadow-light ;
|
||||||
|
transition: $transition-smooth ;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-2px) ;
|
||||||
|
box-shadow: $shadow-medium ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-icon {
|
||||||
|
font-size: 24px ;
|
||||||
|
color: $primary-black ;
|
||||||
|
cursor: pointer ;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $secondary-black ;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-text {
|
||||||
|
font-size: 14px ;
|
||||||
|
color: $text-gray ;
|
||||||
|
font-weight: 600 ;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -412,6 +537,62 @@ $shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Enhanced Loading Styles */
|
||||||
|
.loading-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
z-index: 9999;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
|
||||||
|
.loading-container {
|
||||||
|
text-align: center;
|
||||||
|
max-width: 400px;
|
||||||
|
padding: 2rem;
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||||
|
|
||||||
|
.loading-text {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #333;
|
||||||
|
margin: 1rem 0 0.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-subtext {
|
||||||
|
color: #666;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
background: #f0f0f0;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: #2196F3;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
mat-spinner {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Main Canvas Area
|
// Main Canvas Area
|
||||||
.canvas-main-area {
|
.canvas-main-area {
|
||||||
position: relative ;
|
position: relative ;
|
||||||
@ -537,6 +718,110 @@ $shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.search-section {
|
||||||
|
.search-container {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 40px 12px 15px;
|
||||||
|
border: 2px solid #e9ecef;
|
||||||
|
border-radius: 25px;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
background: #f8f9fa;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #007bff;
|
||||||
|
background: white;
|
||||||
|
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: #6c757d;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 15px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: #6c757d;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.navbar-editor-modal {
|
||||||
|
max-width: 600px;
|
||||||
|
max-height: 80vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
.navbar-links-section {
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
color: #333;
|
||||||
|
border-bottom: 1px solid #e9ecef;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-link-item {
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.link-inputs {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr auto;
|
||||||
|
gap: 15px;
|
||||||
|
align-items: end;
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.remove-btn {
|
||||||
|
background: #dc3545;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
height: fit-content;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #c82333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-custom-section {
|
||||||
|
margin-top: 15px;
|
||||||
|
padding-top: 15px;
|
||||||
|
border-top: 1px dashed #dee2e6;
|
||||||
|
}
|
||||||
|
|
||||||
.page-actions {
|
.page-actions {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -1036,3 +1321,139 @@ $shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Add these styles */
|
||||||
|
.loading-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(255,255,255,0.9);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide-scroll {
|
||||||
|
overflow: hidden;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
scrollbar-width: none;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-loading {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-list {
|
||||||
|
max-height: 60vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.page-list {
|
||||||
|
border: 1px solid #eee;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 8px;
|
||||||
|
margin: 12px 0;
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
padding: 12px;
|
||||||
|
margin: 6px 0;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
|
||||||
|
.handle {
|
||||||
|
cursor: move;
|
||||||
|
margin-right: 8px;
|
||||||
|
color: #6c757d;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.cdk-drag-preview {
|
||||||
|
background: white;
|
||||||
|
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.cdk-drag-placeholder {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.cdk-drag-animating {
|
||||||
|
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cdk-drop-list-dragging .page-list-item:not(.cdk-drag-placeholder) {
|
||||||
|
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Add to your styles */
|
||||||
|
.connected-sections {
|
||||||
|
min-height: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
/* Add these styles */
|
||||||
|
.drag-handle {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 30px;
|
||||||
|
background: rgba(224, 221, 221, 0.05);
|
||||||
|
cursor: grab;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 10;
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(0,0,0,0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-grip-vertical {
|
||||||
|
opacity: 0.5;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cdk-drag-preview {
|
||||||
|
cursor: grabbing !important;
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
||||||
|
opacity: 0.8;
|
||||||
|
|
||||||
|
.drag-handle {
|
||||||
|
cursor: grabbing !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cdk-drag-placeholder {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cdk-drag-animating {
|
||||||
|
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.connected-sections.cdk-drop-list-dragging .section-wrapper:not(.cdk-drag-placeholder) {
|
||||||
|
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user