mirror of
https://github.com/DumbWareio/DumbAssets.git
synced 2026-01-09 06:10:52 +08:00
Merge pull request #44 from DumbWareio/fix/export-btn-main-app-container-stylings
Styling Updates to export buttons sections and main app container
This commit is contained in:
Chris
GitHub
commit
5169290d16
@ -789,36 +789,30 @@
|
||||
<form id="systemSettingsForm">
|
||||
<fieldset>
|
||||
<legend>Data Export</legend>
|
||||
<div class="settings-grid">
|
||||
<div class="export-section">
|
||||
<div class="export-info">
|
||||
<h4>Export All Data</h4>
|
||||
<div>
|
||||
<button type="button" id="exportDataBtn" class="action-button export-btn">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-15"></path>
|
||||
<path d="M7 10l5 5 5-5"></path>
|
||||
<path d="M12 15V3"></path>
|
||||
</svg>
|
||||
Export All Data CSV
|
||||
<div class="spinner"></div>
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" id="exportDataBtn" class="action-button export-btn">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-15"></path>
|
||||
<path d="M7 10l5 5 5-5"></path>
|
||||
<path d="M12 15V3"></path>
|
||||
</svg>
|
||||
Export CSV
|
||||
<div class="spinner"></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="export-section">
|
||||
<div class="export-info">
|
||||
<h4>Export Simple Data</h4>
|
||||
<div>
|
||||
<button type="button" id="exportSimpleDataBtn" class="action-button export-btn">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-15"></path>
|
||||
<path d="M7 10l5 5 5-5"></path>
|
||||
<path d="M12 15V3"></path>
|
||||
</svg>
|
||||
Export Simple CSV
|
||||
<div class="spinner"></div>
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" id="exportSimpleDataBtn" class="action-button export-btn">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-15"></path>
|
||||
<path d="M7 10l5 5 5-5"></path>
|
||||
<path d="M12 15V3"></path>
|
||||
</svg>
|
||||
Export CSV
|
||||
<div class="spinner"></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -363,7 +363,6 @@ input[type="date"][data-has-value="true"] {
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: background-color var(--transition);
|
||||
|
||||
}
|
||||
|
||||
.header-btn:hover, #sidebarToggle:hover, #themeToggle:hover {
|
||||
@ -481,7 +480,7 @@ input[type="date"][data-has-value="true"] {
|
||||
border-radius: var(--app-border-radius);
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
min-height: calc(100vh - 7.5rem);
|
||||
min-height: calc(100vh - 7rem);
|
||||
max-height: calc(100vh - 7rem);
|
||||
height: calc(100vh - 7rem); /* Explicit height */
|
||||
}
|
||||
@ -1382,17 +1381,9 @@ input[type="date"][data-has-value="true"] {
|
||||
/* Export Section Styling */
|
||||
#settingsModal .export-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem;
|
||||
background: var(--hover-color);
|
||||
border: var(--app-border);
|
||||
border-radius: var(--app-border-radius);
|
||||
margin: 0.5rem 0;
|
||||
text-align: center;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
/* Make export sections display side by side */
|
||||
@ -1404,24 +1395,6 @@ input[type="date"][data-has-value="true"] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#settingsModal .export-info {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
#settingsModal .export-info h4 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#settingsModal .export-info p {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--secondary-color);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
#settingsModal .export-btn {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
@ -1989,7 +1962,7 @@ a:hover {
|
||||
/* Dashboard section shared styles */
|
||||
.dashboard-section {
|
||||
width: 100%;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.dashboard-section:not(:first-of-type) {
|
||||
@ -2031,8 +2004,8 @@ a:hover {
|
||||
justify-content: space-between;
|
||||
min-width: calc(100% - 1rem);
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
@ -2052,7 +2025,7 @@ a:hover {
|
||||
.chart-container h3 {
|
||||
font-size: 1rem;
|
||||
color: var(--secondary-color);
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -2472,7 +2445,7 @@ a:hover {
|
||||
.dashboard-legend {
|
||||
border: var(--app-border);
|
||||
border-radius: var(--app-border-radius);
|
||||
padding: 1.5rem 1.5rem 1.2rem 1.5rem;
|
||||
padding: 0.85rem 0.5rem 0.5rem 0.5rem;
|
||||
margin: 1.5rem 0 0 0;
|
||||
background: var(--container);
|
||||
box-shadow: 0 2px 8px rgba(37, 100, 235, 0.04);
|
||||
@ -3075,13 +3048,22 @@ a:hover {
|
||||
/* Mobile layout adjustments */
|
||||
.app-container {
|
||||
grid-template-columns: 1fr; /* Single column layout on mobile */
|
||||
position: relative;
|
||||
/* position: relative; */
|
||||
padding: 0; /* Remove horizontal padding on mobile */
|
||||
}
|
||||
.app-container.sidebar-active .sidebar-overlay {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 0; /* Remove padding from main content */
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.dashboard-legend {
|
||||
margin: 0.5rem 0 0 0; /* Remove horizontal margins */
|
||||
@ -3164,12 +3146,6 @@ a:hover {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.app-container.sidebar-active .sidebar-overlay {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
display: block !important;
|
||||
position: static !important;
|
||||
@ -3183,9 +3159,6 @@ a:hover {
|
||||
font-size: 1.8rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.header-actions {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.events-table-container {
|
||||
margin: 0; /* Remove margins */
|
||||
@ -3248,12 +3221,29 @@ a:hover {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#settingsModal .export-section {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.container, .app-container, .main-content {
|
||||
max-height: calc(100vh - 9rem);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.container {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
#siteTitle {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.header-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
form {
|
||||
padding: 1rem 0.5rem 0.5rem;
|
||||
}
|
||||
@ -3265,10 +3255,6 @@ a:hover {
|
||||
.dashboard-charts-section {
|
||||
flex-direction: column;
|
||||
}
|
||||
.chart-container {
|
||||
flex: 1 1 100%;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.event-row {
|
||||
grid-template-columns: 1fr;
|
||||
@ -3337,6 +3323,10 @@ a:hover {
|
||||
.files-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
#settingsModal .tab-nav {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
@ -3356,20 +3346,4 @@ a:hover {
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
/* Stack export sections vertically on mobile */
|
||||
#systemSettingsForm .settings-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
#settingsModal .export-section {
|
||||
min-height: 120px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#settingsModal .export-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user