Refactor payment verification to manual workflow and add comprehensive cleanup tools
Major changes: • Remove BTCPay Server integration in favor of SilverPAY manual verification • Add test data cleanup mechanisms (API endpoints and shell scripts) • Fix compilation errors in TestController (IdentityReference vs CustomerIdentity) • Add deployment automation scripts for Hostinger VPS • Enhance integration testing with comprehensive E2E validation • Add Blazor components and mobile-responsive CSS for admin interface • Create production environment configuration scripts Key Features Added: • Manual payment verification through Admin panel Order Details • Bulk test data cleanup with proper cascade handling • Deployment automation with systemd service configuration • Comprehensive E2E testing suite with SilverPAY integration validation • Mobile-first admin interface improvements Security & Production: • Environment variable configuration for production secrets • Proper JWT and VAPID key management • SilverPAY API integration with live credentials • Database cleanup and maintenance tools 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
457
LittleShop/wwwroot/css/mobile-admin.css
Normal file
457
LittleShop/wwwroot/css/mobile-admin.css
Normal file
@@ -0,0 +1,457 @@
|
||||
/* Mobile-First Admin Styles */
|
||||
|
||||
:root {
|
||||
--mobile-nav-height: 60px;
|
||||
--touch-target-size: 44px;
|
||||
--primary-color: #2563eb;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--danger-color: #ef4444;
|
||||
}
|
||||
|
||||
/* Mobile Bottom Navigation Bar */
|
||||
.mobile-bottom-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: var(--mobile-nav-height);
|
||||
background: white;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.mobile-bottom-nav-items {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.mobile-nav-item {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mobile-nav-link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #6b7280;
|
||||
text-decoration: none;
|
||||
font-size: 10px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.mobile-nav-link i {
|
||||
font-size: 20px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.mobile-nav-link.active {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.mobile-nav-link:active {
|
||||
background: rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.mobile-nav-badge {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: calc(50% - 15px);
|
||||
background: var(--danger-color);
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
padding: 2px 6px;
|
||||
font-size: 9px;
|
||||
font-weight: bold;
|
||||
min-width: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Settings Menu Drawer */
|
||||
.settings-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -300px;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
background: white;
|
||||
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
|
||||
transition: right 0.3s ease;
|
||||
z-index: 1001;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.settings-drawer.open {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.settings-drawer-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.settings-drawer-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
color: #6b7280;
|
||||
padding: 0;
|
||||
width: var(--touch-target-size);
|
||||
height: var(--touch-target-size);
|
||||
}
|
||||
|
||||
.settings-menu-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.settings-menu-item {
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.settings-menu-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
color: #374151;
|
||||
text-decoration: none;
|
||||
min-height: var(--touch-target-size);
|
||||
}
|
||||
|
||||
.settings-menu-link i {
|
||||
margin-right: 15px;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.settings-menu-link:active {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
/* Drawer Overlay */
|
||||
.drawer-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.drawer-overlay.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Touch-Friendly Forms */
|
||||
@media (max-width: 768px) {
|
||||
.form-control, .form-select, .btn {
|
||||
min-height: var(--touch-target-size);
|
||||
font-size: 16px; /* Prevents zoom on iOS */
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
/* Larger checkboxes and radios */
|
||||
.form-check-input {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
padding-left: 10px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile Cards for Orders/Products */
|
||||
.mobile-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mobile-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mobile-card-title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.mobile-card-status {
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.status-accepted {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.status-packing {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.status-dispatched {
|
||||
background: #e9d5ff;
|
||||
color: #6b21a8;
|
||||
}
|
||||
|
||||
/* Swipe Actions */
|
||||
.swipeable {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swipe-actions {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -200px;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
transition: right 0.3s ease;
|
||||
}
|
||||
|
||||
.swipeable.swiped .swipe-actions {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.swipe-action {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.swipe-action-accept {
|
||||
background: var(--success-color);
|
||||
}
|
||||
|
||||
.swipe-action-reject {
|
||||
background: var(--danger-color);
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
/* Hide desktop nav on mobile */
|
||||
.navbar-collapse {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Show mobile bottom nav */
|
||||
.mobile-bottom-nav {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Adjust main content for bottom nav */
|
||||
main {
|
||||
padding-bottom: calc(var(--mobile-nav-height) + 20px) !important;
|
||||
}
|
||||
|
||||
/* Full-width buttons on mobile */
|
||||
.btn-group-mobile {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn-group-mobile .btn {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Responsive tables to cards */
|
||||
.table-responsive-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cards-responsive-mobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
/* Hide mobile-only elements on desktop */
|
||||
.mobile-bottom-nav,
|
||||
.settings-drawer,
|
||||
.drawer-overlay,
|
||||
.cards-responsive-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.table-responsive-mobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pull to Refresh */
|
||||
.pull-to-refresh {
|
||||
position: absolute;
|
||||
top: -60px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: top 0.3s ease;
|
||||
}
|
||||
|
||||
.pull-to-refresh.active {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.pull-to-refresh-spinner {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 3px solid #e5e7eb;
|
||||
border-top-color: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Floating Action Button */
|
||||
.fab {
|
||||
position: fixed;
|
||||
bottom: calc(var(--mobile-nav-height) + 20px);
|
||||
right: 20px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
transition: transform 0.2s;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.fab:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Tab Navigation - Mobile Optimized */
|
||||
.nav-tabs-mobile {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.nav-tabs-mobile::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-tabs-mobile .nav-link {
|
||||
white-space: nowrap;
|
||||
padding: 12px 20px;
|
||||
color: #6b7280;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
min-width: fit-content;
|
||||
}
|
||||
|
||||
.nav-tabs-mobile .nav-link.active {
|
||||
color: var(--primary-color);
|
||||
border-bottom-color: var(--primary-color);
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* Improved Touch Feedback */
|
||||
button, a, .clickable {
|
||||
-webkit-tap-highlight-color: rgba(37, 99, 235, 0.2);
|
||||
}
|
||||
|
||||
/* Loading States */
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: loading 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
/* Product Variants Tab */
|
||||
.variants-container {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.variant-card {
|
||||
background: #f9fafb;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.variant-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.variant-quantity {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.variant-price {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.variant-unit-price {
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
Reference in New Issue
Block a user