first commit

This commit is contained in:
dgsoft
2025-10-14 21:27:41 +02:00
commit 44b8667f31
40 changed files with 4619 additions and 0 deletions
+753
View File
@@ -0,0 +1,753 @@
/* Hauptstyles für die Query Builder Anwendung */
/* Basis-Reset und Layout */
* {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
margin: 0;
padding: 0;
background-color: #f8f9fa;
color: #333;
line-height: 1.5;
}
/* Fallback für Bootstrap Klassen falls CDN nicht lädt */
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-md-3 {
flex: 0 0 25%;
max-width: 25%;
padding-right: 15px;
padding-left: 15px;
}
.col-md-9 {
flex: 0 0 75%;
max-width: 75%;
padding-right: 15px;
padding-left: 15px;
}
.h-100 {
height: 100vh !important;
}
/* Navigation Bar */
.navbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
background-color: #343a40 !important;
color: white;
margin-bottom: 0;
}
.navbar-brand {
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
font-size: 1.25rem;
color: white !important;
text-decoration: none;
font-weight: bold;
}
.navbar-nav {
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
}
.navbar-text {
color: rgba(255,255,255,.5) !important;
margin-right: 1rem;
}
.nav-link {
color: rgba(255,255,255,.5) !important;
text-decoration: none;
padding: 0.5rem 1rem;
}
.nav-link:hover {
color: rgba(255,255,255,.75) !important;
}
/* Buttons */
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
text-decoration: none;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:hover {
color: #fff;
background-color: #0056b3;
border-color: #004085;
}
.btn-success {
color: #fff;
background-color: #28a745;
border-color: #28a745;
}
.btn-success:hover {
color: #fff;
background-color: #1e7e34;
border-color: #1c7430;
}
.btn-secondary {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
.btn-secondary:hover {
color: #fff;
background-color: #545b62;
border-color: #4e555b;
}
.btn-outline-primary {
color: #007bff;
border-color: #007bff;
background-color: transparent;
}
.btn-outline-primary:hover {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.btn-outline-success {
color: #28a745;
border-color: #28a745;
background-color: transparent;
}
.btn-outline-success:hover {
color: #fff;
background-color: #28a745;
border-color: #28a745;
}
.btn-outline-danger {
color: #dc3545;
border-color: #dc3545;
background-color: transparent;
}
.btn-outline-danger:hover {
color: #fff;
background-color: #dc3545;
border-color: #dc3545;
}
.btn-sm {
padding: 0.15rem 0.4rem;
font-size: 0.75rem;
border-radius: 0.15rem;
line-height: 1.2;
}
.btn-xs {
padding: 0.1rem 0.25rem;
font-size: 0.65rem;
border-radius: 0.1rem;
line-height: 1.1;
}
.btn-group {
position: relative;
display: inline-flex;
vertical-align: middle;
}
.btn-group > .btn {
position: relative;
flex: 1 1 auto;
margin-right: -1px;
}
.btn-group > .btn:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn-group > .btn:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* Cards */
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: 0.25rem;
margin-bottom: 1rem;
}
.card-body {
flex: 1 1 auto;
padding: 1.25rem;
}
.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0,0,0,.03);
border-bottom: 1px solid rgba(0,0,0,.125);
border-top-left-radius: calc(0.25rem - 1px);
border-top-right-radius: calc(0.25rem - 1px);
}
.card-footer {
padding: 0.75rem 1.25rem;
background-color: rgba(0,0,0,.03);
border-top: 1px solid rgba(0,0,0,.125);
}
.card-title {
margin-bottom: 0.75rem;
font-size: 1.25rem;
font-weight: 500;
}
.card-text {
margin-bottom: 1rem;
}
/* Forms */
.form-control {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
.form-label {
margin-bottom: 0.5rem;
font-weight: 500;
}
/* Alerts */
.alert {
position: relative;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
}
.alert-info {
color: #0c5460;
background-color: #d1ecf1;
border-color: #bee5eb;
}
.alert-success {
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
}
.alert-danger {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
}
.alert-dismissible {
padding-right: 4rem;
}
/* Tables */
.table {
width: 100%;
margin-bottom: 1rem;
color: #212529;
border-collapse: collapse;
}
.table th,
.table td {
padding: 0.75rem;
vertical-align: top;
border-top: 1px solid #dee2e6;
}
.table thead th {
vertical-align: bottom;
border-bottom: 2px solid #dee2e6;
background-color: #f8f9fa;
font-weight: 600;
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(0,0,0,.05);
}
.table-hover tbody tr:hover {
color: #212529;
background-color: rgba(0,0,0,.075);
}
/* Utilities */
.text-center { text-align: center !important; }
.text-muted { color: #6c757d !important; }
.text-danger { color: #dc3545 !important; }
.text-success { color: #28a745 !important; }
.text-primary { color: #007bff !important; }
.text-info { color: #17a2b8 !important; }
.text-warning { color: #ffc107 !important; }
.bg-light { background-color: #f8f9fa !important; }
.bg-dark { background-color: #343a40 !important; }
.border-end { border-right: 1px solid #dee2e6 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-5 { margin-top: 3rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center { align-items: center !important; }
.float-end { float: right !important; }
.ms-auto { margin-left: auto !important; }
.me-3 { margin-right: 1rem !important; }
/* Sidebar Styles */
.col-md-3.border-end {
height: calc(100vh - 56px);
overflow-y: auto;
background-color: #f8f9fa;
border-right: 1px solid #dee2e6;
}
.col-md-9 {
height: calc(100vh - 56px);
overflow-y: auto;
}
/* Tabellen und Query Cards */
.saved-query-card {
transition: all 0.2s ease;
cursor: pointer;
}
.saved-query-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.table-container {
margin-bottom: 4px;
}
.table-item {
padding: 4px 8px;
margin: 1px 0;
background: white;
border: 1px solid #dee2e6;
border-radius: 3px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.85rem;
}
.table-item:hover {
background: #f8f9fa;
border-color: #007bff;
}
.table-item.selected {
background: #e3f2fd;
border-color: #2196f3;
font-weight: 600;
}
.table-item i {
color: #6c757d;
margin-right: 6px;
font-size: 0.8rem;
}
/* Spalten-Anzeige unter Tabellen */
.table-columns {
margin-left: 8px;
margin-top: 2px;
padding: 4px 6px;
background: #f8f9fa;
border-left: 2px solid #007bff;
border-radius: 0 3px 3px 0;
}
.column-item {
padding: 2px 6px;
margin: 0.5px 0;
background: white;
border: 1px solid #e9ecef;
border-radius: 2px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 11px;
display: flex;
align-items: center;
gap: 4px;
line-height: 1.2;
}
.column-item:hover {
background: #e7f3ff;
border-color: #007bff;
}
.column-name {
font-weight: 500;
color: #495057;
}
.column-type {
font-size: 9px;
color: #6c757d;
margin-left: auto;
}
/* Toggle-Button für Spalten-Anzeige */
#toggle-columns-btn {
margin-right: 3px;
transition: all 0.3s ease;
padding: 0.1rem 0.3rem;
font-size: 0.7rem;
}
#toggle-columns-btn:hover {
transform: scale(1.05);
}
#toggle-columns-btn.btn-outline-secondary {
opacity: 0.7;
}
#toggle-columns-btn.btn-outline-primary {
opacity: 1;
}
/* Drag & Drop Styles */
.table-item, .column-item {
cursor: grab;
}
.table-item:active, .column-item:active {
cursor: grabbing;
}
.drag-icon {
opacity: 0;
transition: opacity 0.2s ease;
margin-left: auto;
color: #6c757d;
font-size: 10px;
}
.table-item:hover .drag-icon,
.column-item:hover .drag-icon {
opacity: 0.7;
}
/* Drop Zone Styles */
#query-input.drag-over {
border-color: #007bff !important;
box-shadow: 0 0 10px rgba(0, 123, 255, 0.3) !important;
background-color: #f8f9ff !important;
}
.table-item[draggable="true"]:hover,
.column-item[draggable="true"]:hover {
background-color: #e3f2fd;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Query Input Area */
#query-input {
font-family: 'Courier New', monospace;
font-size: 14px;
resize: vertical;
min-height: 150px;
}
/* Results Table */
.results-table {
max-height: 400px;
overflow: auto;
}
.results-table table {
font-size: 14px;
}
.results-table th {
position: sticky;
top: 0;
background: #f8f9fa;
border-bottom: 2px solid #dee2e6;
}
/* Loading Spinner */
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid #f3f3f3;
border-top: 3px solid #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Alert Styles */
.alert-custom {
margin: 0 0 15px 0;
padding: 10px 15px;
border-radius: 4px;
}
.alert-success-custom {
background-color: #d4edda;
border: 1px solid #c3e6cb;
color: #155724;
}
.alert-error-custom {
background-color: #f8d7da;
border: 1px solid #f5c6cb;
color: #721c24;
}
/* Responsive Design */
@media (max-width: 768px) {
.col-md-3.border-end {
height: auto;
max-height: 300px;
}
.col-md-9 {
height: auto;
}
body {
overflow: auto;
}
.container-fluid {
height: auto;
overflow: auto;
}
.row.h-100 {
height: auto;
}
}
/* Button Improvements */
.btn-group-sm > .btn, .btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}
/* Card Improvements */
.card {
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-header {
background-color: #f8f9fa;
border-bottom: 1px solid #dee2e6;
}
/* Navigation Improvements */
.navbar-brand {
font-weight: bold;
}
/* Modal Improvements */
.modal-content {
border-radius: 8px;
}
.modal-header {
background-color: #f8f9fa;
border-bottom: 1px solid #dee2e6;
}
/* Table Schema Popup */
.schema-popup {
position: absolute;
background: white;
border: 1px solid #dee2e6;
border-radius: 4px;
padding: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
z-index: 1000;
max-width: 300px;
font-size: 12px;
}
/* Autocomplete Dropdown */
.autocomplete-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid #007bff;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 1050;
max-height: 200px;
overflow-y: auto;
display: none;
}
.autocomplete-item {
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid #f0f0f0;
transition: background-color 0.2s ease;
font-size: 0.9rem;
display: flex;
align-items: center;
}
.autocomplete-item:last-child {
border-bottom: none;
}
.autocomplete-item:hover {
background-color: #f8f9fa;
}
.autocomplete-item.selected {
background-color: #e3f2fd;
color: #1976d2;
}
.autocomplete-item i {
margin-right: 8px;
color: #6c757d;
font-size: 0.8rem;
}
.autocomplete-item small {
margin-left: auto;
font-size: 0.75rem;
color: #6c757d;
}
.autocomplete-item strong {
flex: 1;
}
.autocomplete-header {
padding: 6px 12px;
background-color: #f8f9fa;
font-size: 0.75rem;
font-weight: 600;
color: #495057;
border-bottom: 1px solid #dee2e6;
}
.schema-column {
padding: 2px 0;
border-bottom: 1px solid #f0f0f0;
}
.schema-column:last-child {
border-bottom: none;
}
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+1
View File
@@ -0,0 +1 @@
# Placeholder für favicon - in Produktion sollte hier eine echte .ico Datei sein
+1628
View File
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.