Fix missing card styling for reports section and add shared footer
- Add card styling to map-section with proper spacing and visual hierarchy - Add reports-header with flexbox layout for title and view toggle buttons - Add styling for view-toggle buttons, map-info, and table-controls - Create shared footer component with consistent styling across pages - Add footer to admin.html and privacy.html for consistency - Add missing CSS variables for links, secondary text, and font-size-xs - Ensure footer uses proper theme colors for light/dark modes - Restore visual box around Current Reports section on main page
This commit is contained in:
Deco Vander
parent
2fd9475f5d
commit
dbf7b8e282
9 changed files with 195 additions and 3 deletions
|
|
@ -12,7 +12,10 @@
|
|||
<div class="admin-container">
|
||||
<!-- Login Section -->
|
||||
<div id="login-section" class="login-section">
|
||||
<h2>🔐 Admin Login</h2>
|
||||
<div class="login-header">
|
||||
<h2>🔐 Admin Login</h2>
|
||||
<a href="/" class="header-btn btn-home">🏠 Back to Homepage</a>
|
||||
</div>
|
||||
<form id="login-form">
|
||||
<div class="form-group">
|
||||
<label for="password">Admin Password:</label>
|
||||
|
|
@ -132,6 +135,14 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p><strong>Safety Notice:</strong> This is a community tool for awareness. Stay safe and <a href="https://www.aclu.org/know-your-rights/immigrants-rights" target="_blank" rel="noopener noreferrer">know your rights</a>.</p>
|
||||
<div class="disclaimer">
|
||||
<small>This website is for informational purposes only. Verify information independently.
|
||||
Reports are automatically deleted after 48 hours. • <a href="/privacy">Privacy Policy</a></small>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://iceymi.b-cdn.net/admin.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -173,6 +173,14 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p><strong>Safety Notice:</strong> This is a community tool for awareness. Stay safe and <a href="https://www.aclu.org/know-your-rights/immigrants-rights" target="_blank" rel="noopener noreferrer">know your rights</a>.</p>
|
||||
<div class="disclaimer">
|
||||
<small>This website is for informational purposes only. Verify information independently.
|
||||
Reports are automatically deleted after 48 hours. • <a href="/privacy">Privacy Policy</a></small>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Theme toggle functionality (shared with main page)
|
||||
function initializeTheme() {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -38,6 +38,7 @@ $shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|||
|
||||
// Typography
|
||||
$font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
$font-size-xs: 10px;
|
||||
$font-size-sm: 12px;
|
||||
$font-size-md: 14px;
|
||||
$font-size-lg: 16px;
|
||||
|
|
|
|||
55
src/scss/components/_footer.scss
Normal file
55
src/scss/components/_footer.scss
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
// Import variables and mixins
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
// Shared footer styles
|
||||
footer {
|
||||
margin-top: $spacing-xl;
|
||||
padding: $spacing-lg;
|
||||
background-color: var(--bg-secondary);
|
||||
border-top: 1px solid var(--border-color);
|
||||
border-radius: $border-radius-md $border-radius-md 0 0;
|
||||
|
||||
p {
|
||||
margin: $spacing-sm 0;
|
||||
color: var(--text-color);
|
||||
text-align: center;
|
||||
font-size: $font-size-sm;
|
||||
line-height: 1.6;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
color: var(--link-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.disclaimer {
|
||||
margin-top: $spacing-md;
|
||||
|
||||
small {
|
||||
color: var(--text-secondary);
|
||||
font-size: $font-size-xs;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
padding: $spacing-md;
|
||||
|
||||
p {
|
||||
font-size: $font-size-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
// Import variables and mixins first
|
||||
@use 'variables' as *;
|
||||
@use 'mixins' as *;
|
||||
@use 'components/footer';
|
||||
@use 'pages/admin';
|
||||
@use 'pages/index';
|
||||
|
||||
|
|
@ -33,6 +34,9 @@ $status-info: #3b82f6;
|
|||
--status-warning: #{$status-warning};
|
||||
--status-danger: #{$status-danger};
|
||||
--status-info: #{$status-info};
|
||||
--link-color: #007bff;
|
||||
--link-hover: #0056b3;
|
||||
--text-secondary: #6c757d;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
|
|
@ -50,6 +54,9 @@ $status-info: #3b82f6;
|
|||
/* Dark theme additional variables */
|
||||
--bg-secondary: #{$dark-card-bg};
|
||||
--bg-hover: #4b5563;
|
||||
--link-color: #60a5fa;
|
||||
--link-hover: #93c5fd;
|
||||
--text-secondary: #9ca3af;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,16 @@
|
|||
@include card($spacing-xl);
|
||||
max-width: 400px;
|
||||
margin: 50px auto;
|
||||
|
||||
.login-header {
|
||||
@include flex-between;
|
||||
align-items: center;
|
||||
margin-bottom: $spacing-lg;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admin-section {
|
||||
|
|
|
|||
|
|
@ -63,6 +63,19 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Specific map element styling
|
||||
#map {
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
border-radius: $border-radius-md;
|
||||
box-shadow: $shadow-md;
|
||||
margin: $spacing-lg 0;
|
||||
|
||||
@include mobile {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
// Reports table (main page)
|
||||
.reports-table {
|
||||
@include table-base;
|
||||
|
|
@ -183,6 +196,93 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Map section with card styling
|
||||
.map-section {
|
||||
@include card;
|
||||
margin-bottom: $spacing-lg;
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacing-md;
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Reports header
|
||||
.reports-header {
|
||||
@include flex-between;
|
||||
align-items: center;
|
||||
margin-bottom: $spacing-lg;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// View toggle buttons
|
||||
.view-toggle {
|
||||
display: flex;
|
||||
gap: $spacing-xs;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
@include button($size: sm);
|
||||
|
||||
&.active {
|
||||
background-color: $primary-color;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:not(.active) {
|
||||
background-color: transparent;
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
}
|
||||
|
||||
// View containers
|
||||
.view-container {
|
||||
margin-top: $spacing-md;
|
||||
}
|
||||
|
||||
// Map info styling
|
||||
.map-info {
|
||||
margin-top: $spacing-md;
|
||||
padding: $spacing-md;
|
||||
background-color: var(--bg-secondary);
|
||||
border-radius: $border-radius-sm;
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
p {
|
||||
margin: $spacing-xs 0;
|
||||
font-size: $font-size-sm;
|
||||
color: var(--text-color);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Table controls
|
||||
.table-controls {
|
||||
margin-bottom: $spacing-md;
|
||||
}
|
||||
|
||||
.table-info {
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: var(--text-color);
|
||||
font-size: $font-size-md;
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
// Add location form
|
||||
.add-location-form {
|
||||
display: grid;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue