jukka/intra.cuitunet.fi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add multiple connections per customer, contract period, and layout redesign

Browse Source 
- Refactor data model: each customer now has a liittymat array (auto-migration from old format)
- Add sopimuskausi (1/12/24/36 kk) and alkupvm fields per connection
- Form supports adding/removing multiple connection rows per company
- Add "use same as installation address" checkbox for billing address
- Move stat cards to compact sidebar on the right
- Place search bar above customer table

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jukka Lampikoski
2026-03-10 00:21:31 +02:00
parent c648c9311c
commit 695d8c6545
4 changed files with 650 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

305
style.css
View File

@@ -122,38 +122,69 @@ header {
/* Main container */
.main-container {
max-width: 1200px;
max-width: 1400px;
margin: 0 auto;
padding: 1.5rem;
min-height: calc(100vh - 120px);
}
/* Stat cards */
.stats-row {
/* Content layout: table left, stats right */
.content-layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 1.25rem;
grid-template-columns: 1fr 220px;
gap: 1.25rem;
align-items: start;
}
.stat-card {
.content-main {
min-width: 0;
}
/* Sidebar stats */
.sidebar-stats {
display: flex;
flex-direction: column;
gap: 0.6rem;
position: sticky;
top: 80px;
}
.sidebar-stats .stat-card {
background: #fff;
border-radius: 12px;
padding: 1.25rem 1.5rem;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
border-radius: 10px;
padding: 0.8rem 1rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
text-align: center;
}
.sidebar-stats .stat-card.highlight {
background: #0f3460;
color: #fff;
}
.sidebar-stats .stat-card.highlight .stat-label {
color: rgba(255,255,255,0.7);
}
.sidebar-stats .stat-card.highlight .stat-value {
color: #fff;
}
.sidebar-stats .stat-card.trivia {
background: #f8f9fb;
border: 1px dashed #d5dbe5;
}
.stat-label {
font-size: 0.8rem;
font-size: 0.7rem;
color: #888;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.4rem;
margin-bottom: 0.2rem;
}
.stat-value {
font-size: 1.6rem;
font-size: 1.2rem;
font-weight: 700;
color: #1a1a2e;
}
@@ -162,38 +193,31 @@ header {
color: #0f3460;
}
.stat-trivia {
background: #f8f9fb;
border: 1px dashed #d5dbe5;
}
.stat-trivia .stat-value {
font-size: 1.3rem;
.sidebar-stats .stat-card.trivia .stat-value {
font-size: 1rem;
color: #555;
}
.stat-sub {
font-size: 0.78rem;
font-size: 0.7rem;
color: #999;
margin-top: 2px;
}
.stat-wide {
grid-column: span 2;
margin-top: 1px;
}
.speed-table {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 0.75rem;
margin-top: 0.4rem;
justify-content: center;
flex-direction: column;
gap: 0.25rem;
margin-top: 0.3rem;
}
.speed-item {
font-size: 0.85rem;
font-size: 0.78rem;
color: #666;
white-space: nowrap;
display: flex;
align-items: center;
gap: 4px;
}
.speed-item.top {
@@ -203,11 +227,10 @@ header {
.speed-bar {
display: inline-block;
height: 6px;
height: 5px;
background: #d5dbe5;
border-radius: 3px;
margin-left: 4px;
vertical-align: middle;
flex-shrink: 0;
}
.speed-item.top .speed-bar {
@@ -235,10 +258,10 @@ header {
.search-bar input {
width: 100%;
padding: 12px 16px 12px 40px;
padding: 11px 16px 11px 40px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 0.95rem;
font-size: 0.93rem;
background: #fff;
transition: border-color 0.2s, box-shadow 0.2s;
}
@@ -266,10 +289,10 @@ table {
thead th {
background: #16213e;
color: #fff;
padding: 13px 16px;
padding: 11px 14px;
text-align: left;
font-weight: 600;
font-size: 0.85rem;
font-size: 0.82rem;
cursor: pointer;
user-select: none;
white-space: nowrap;
@@ -294,9 +317,23 @@ tbody tr:hover {
background: #f4f7fb;
}
tbody tr.sub-row {
background: #fafbfc;
}
tbody tr.sub-row:hover {
background: #f0f3f7;
}
.sub-marker {
color: #bbb;
font-size: 0.85rem;
margin-left: 0.5rem;
}
tbody td {
padding: 13px 16px;
font-size: 0.93rem;
padding: 11px 14px;
font-size: 0.9rem;
}
.price-cell {
@@ -312,8 +349,8 @@ tbody td {
background: none;
border: none;
cursor: pointer;
padding: 6px 8px;
font-size: 1rem;
padding: 5px 7px;
font-size: 0.95rem;
border-radius: 6px;
transition: background 0.15s;
}
@@ -349,17 +386,17 @@ tbody td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
padding: 0.8rem 1.25rem;
background: #fff;
border-radius: 12px;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
font-weight: 600;
font-size: 0.9rem;
font-size: 0.85rem;
color: #555;
}
#total-billing {
font-size: 1rem;
font-size: 0.95rem;
color: #0f3460;
}
@@ -425,6 +462,39 @@ footer {
background: #c0392b;
}
.btn-add-row {
background: #3498db;
color: #fff;
border: none;
padding: 4px 12px;
border-radius: 6px;
font-size: 0.78rem;
cursor: pointer;
margin-left: 0.75rem;
vertical-align: middle;
transition: background 0.2s;
}
.btn-add-row:hover {
background: #2980b9;
}
.btn-remove-row {
background: none;
border: none;
color: #ccc;
font-size: 1rem;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
transition: color 0.15s, background 0.15s;
}
.btn-remove-row:hover {
color: #e74c3c;
background: #fef2f2;
}
/* Modal */
.modal {
position: fixed;
@@ -452,6 +522,10 @@ footer {
animation: modalIn 0.2s ease-out;
}
.modal-content.modal-wide {
max-width: 800px;
}
@keyframes modalIn {
from { opacity: 0; transform: scale(0.95) translateY(10px); }
to { opacity: 1; transform: scale(1) translateY(0); }
@@ -502,16 +576,22 @@ form h3 {
margin: 1.25rem 0 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #f0f2f5;
display: flex;
align-items: center;
}
form h3:first-child {
form h3:first-of-type {
margin-top: 0;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
gap: 0.85rem;
}
.form-grid-liittyma {
grid-template-columns: repeat(3, 1fr);
}
.form-group {
@@ -524,29 +604,46 @@ form h3:first-child {
}
.form-group label {
font-size: 0.82rem;
font-size: 0.78rem;
font-weight: 600;
color: #555;
margin-bottom: 0.3rem;
margin-bottom: 0.25rem;
}
.form-group input,
.form-group textarea {
padding: 10px 12px;
.form-group textarea,
.form-group select {
padding: 9px 11px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 0.93rem;
font-size: 0.9rem;
transition: border-color 0.2s, box-shadow 0.2s;
font-family: inherit;
}
.form-group input:focus,
.form-group textarea:focus {
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: #0f3460;
box-shadow: 0 0 0 3px rgba(15,52,96,0.1);
}
.checkbox-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: #555;
cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: #0f3460;
}
.form-actions {
display: flex;
gap: 0.75rem;
@@ -565,6 +662,28 @@ form h3:first-child {
border-color: #999;
}
/* Liittymä rows in form */
.liittyma-row {
background: #f8f9fb;
border: 1px solid #e8ebf0;
border-radius: 10px;
padding: 0.75rem 1rem;
margin-bottom: 0.6rem;
}
.liittyma-row-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.liittyma-row-title {
font-size: 0.8rem;
font-weight: 600;
color: #0f3460;
}
/* Detail view */
#detail-body {
padding: 1.5rem;
@@ -597,7 +716,7 @@ form h3:first-child {
}
.detail-label {
font-size: 0.75rem;
font-size: 0.72rem;
color: #999;
text-transform: uppercase;
letter-spacing: 0.5px;
@@ -605,7 +724,7 @@ form h3:first-child {
}
.detail-value {
font-size: 0.95rem;
font-size: 0.93rem;
font-weight: 500;
color: #1a1a2e;
word-break: break-word;
@@ -620,11 +739,40 @@ form h3:first-child {
text-decoration: underline;
}
.detail-value.empty {
.detail-value.empty,
span.empty {
color: #ccc;
font-style: italic;
}
/* Liittymä card in detail view */
.liittyma-card {
background: #f8f9fb;
border: 1px solid #e8ebf0;
border-radius: 10px;
padding: 0.75rem 1rem;
margin-bottom: 0.5rem;
}
.liittyma-num {
font-size: 0.75rem;
font-weight: 700;
color: #0f3460;
margin-bottom: 0.4rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.liittyma-total {
text-align: right;
font-weight: 700;
font-size: 0.95rem;
color: #0f3460;
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 2px solid #e8ebf0;
}
/* Files */
.file-upload-area {
display: flex;
@@ -692,6 +840,24 @@ form h3:first-child {
}
/* Responsive */
@media (max-width: 1024px) {
.content-layout {
grid-template-columns: 1fr;
}
.sidebar-stats {
position: static;
flex-direction: row;
flex-wrap: wrap;
gap: 0.5rem;
}
.sidebar-stats .stat-card {
flex: 1;
min-width: 120px;
}
}
@media (max-width: 768px) {
header {
flex-direction: column;
@@ -708,27 +874,8 @@ form h3:first-child {
padding: 1rem;
}
.stats-row {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.stat-card {
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.stat-label {
margin-bottom: 0;
}
.stat-value {
font-size: 1.3rem;
}
.form-grid,
.form-grid-liittyma,
.detail-grid {
grid-template-columns: 1fr;
}
@@ -741,8 +888,8 @@ form h3:first-child {
thead th,
tbody td {
padding: 10px 10px;
font-size: 0.85rem;
padding: 9px 10px;
font-size: 0.83rem;
}
}