Antoni Nuñez Romeu
8bf0b33249
- Add pharmacy_products table (PostgreSQL + SQLite) - Add public route GET /api/products/:source/:id/pharmacies - Add admin CRUD routes for pharmacy-product links - Add cascade delete when pharmacy is removed - Update ProductView to show linked pharmacies - Create PharmacyProductLink admin component - Add 'Vincular Producto a Farmacia' tab in AdminView
186 lines
3.2 KiB
CSS
186 lines
3.2 KiB
CSS
.product-view {
|
|
width: 100%;
|
|
max-width: 48rem;
|
|
margin: 0 auto;
|
|
padding: 1rem var(--margin-main) 2rem;
|
|
animation: fadeInUp 0.3s ease-out;
|
|
}
|
|
|
|
.back-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0;
|
|
margin-bottom: 1rem;
|
|
background: none;
|
|
border: none;
|
|
color: var(--primary, #2563eb);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.back-btn:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.product-loading,
|
|
.product-error {
|
|
text-align: center;
|
|
padding: 3rem 1rem;
|
|
color: var(--on-surface-variant, #6b7280);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.product-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.product-image {
|
|
width: 120px;
|
|
height: 120px;
|
|
object-fit: contain;
|
|
border-radius: var(--radius-md, 0.75rem);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.source-badge {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 9999px;
|
|
color: white;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.product-name {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--on-surface);
|
|
text-align: center;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.product-brand {
|
|
font-size: 1rem;
|
|
color: var(--on-surface-variant, #6b7280);
|
|
text-align: center;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.product-details {
|
|
background: var(--surface-container-lowest, #f9fafb);
|
|
border-radius: var(--radius-md, 0.75rem);
|
|
padding: 1rem;
|
|
}
|
|
|
|
.detail-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
padding: 0.75rem 0;
|
|
border-bottom: 1px solid var(--outline-variant, #e5e7eb);
|
|
}
|
|
|
|
.detail-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.detail-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--on-surface-variant, #9ca3af);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.detail-value {
|
|
font-size: 0.9375rem;
|
|
color: var(--on-surface);
|
|
}
|
|
|
|
.product-pharmacies {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.pharmacies-loading {
|
|
text-align: center;
|
|
padding: 2rem 1rem;
|
|
color: var(--on-surface-variant, #6b7280);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.pharmacies-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--on-surface);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.pharmacies-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.product-pharmacy-card {
|
|
background: var(--surface-container-lowest, #f9fafb);
|
|
border-radius: var(--radius-md, 0.75rem);
|
|
padding: 1rem;
|
|
}
|
|
|
|
.product-pharmacy-name {
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
color: var(--on-surface);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.product-pharmacy-address {
|
|
font-size: 0.8125rem;
|
|
color: var(--on-surface-variant, #6b7280);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.product-pharmacy-phone {
|
|
font-size: 0.8125rem;
|
|
color: var(--on-surface-variant, #6b7280);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.product-pharmacy-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.product-pharmacy-price {
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
color: var(--primary, #2563eb);
|
|
}
|
|
|
|
.product-pharmacy-stock {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
padding: 0.15rem 0.5rem;
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.product-pharmacy-stock.in-stock {
|
|
background: #dcfce7;
|
|
color: #166534;
|
|
}
|
|
|
|
.product-pharmacy-stock.low-stock {
|
|
background: #fef9c3;
|
|
color: #854d0e;
|
|
}
|
|
|
|
.product-pharmacy-stock.out-of-stock {
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
}
|