Skip to content

Commit fa8dc81

Browse files
sebadersebader
authored
Merge pull request #296 from sebader/dev
Big design overhaul
2 parents 9bfc5e0 + 6d30eed commit fa8dc81

File tree

7 files changed

+1709
-206
lines changed

7 files changed

+1709
-206
lines changed

‎website/public/css/components.css‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
/* Common Component Styles - Used across multiple components */
2+
3+
/* Card Components */
4+
.info-card, .map-card, .filter-card, .availability-table-container {
5+
background-color: white;
6+
border-radius: 12px;
7+
padding: 1.5rem;
8+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
9+
height: 100%;
10+
}
11+
12+
.card-title, .section-title, .filter-title {
13+
font-weight: 600;
14+
color: #333;
15+
margin-bottom: 1.5rem;
16+
}
17+
18+
.card-title {
19+
font-size: 1.4rem;
20+
border-bottom: 2px solid #f5f5f5;
21+
padding-bottom: 10px;
22+
}
23+
24+
.section-title {
25+
font-size: 1.6rem;
26+
}
27+
28+
.filter-title {
29+
font-size: 1.2rem;
30+
margin-bottom: 1rem;
31+
}
32+
33+
/* Loading Spinner */
34+
.loading-container {
35+
display: flex;
36+
flex-direction: column;
37+
align-items: center;
38+
justify-content: center;
39+
height: 200px;
40+
}
41+
42+
.spinner {
43+
width: 40px;
44+
height: 40px;
45+
border: 4px solid rgba(0, 0, 0, 0.1);
46+
border-radius: 50%;
47+
border-top: 4px solid #3498db;
48+
animation: spin 1s linear infinite;
49+
margin-bottom: 1rem;
50+
}
51+
52+
@keyframes spin {
53+
0% { transform: rotate(0deg); }
54+
100% { transform: rotate(360deg); }
55+
}
56+
57+
/* Custom Checkboxes */
58+
.custom-checkbox-group {
59+
display: flex;
60+
flex-wrap: wrap;
61+
gap: 12px;
62+
}
63+
64+
.custom-checkbox-option {
65+
position: relative;
66+
}
67+
68+
.custom-checkbox {
69+
position: absolute;
70+
opacity: 0;
71+
cursor: pointer;
72+
height: 0;
73+
width: 0;
74+
}
75+
76+
.custom-checkbox-label {
77+
display: inline-block;
78+
padding: 8px 16px;
79+
border-radius: 30px;
80+
background-color: #f5f5f5;
81+
color: #666;
82+
cursor: pointer;
83+
transition: all 0.2s;
84+
user-select: none;
85+
}
86+
87+
.custom-checkbox:checked + .custom-checkbox-label {
88+
background-color: #3498db;
89+
color: white;
90+
box-shadow: 0 2px 5px rgba(52, 152, 219, 0.3);
91+
}
92+
93+
.custom-checkbox:hover + .custom-checkbox-label {
94+
background-color: #e0e0e0;
95+
}
96+
97+
.custom-checkbox:checked:hover + .custom-checkbox-label {
98+
background-color: #2980b9;
99+
}
100+
101+
/* Enhanced Tables */
102+
.enhanced-table {
103+
width: 100%;
104+
border-collapse: collapse;
105+
}
106+
107+
.enhanced-table th, .enhanced-table td {
108+
padding: 12px 16px;
109+
border-bottom: 1px solid #f0f0f0;
110+
}
111+
112+
.enhanced-table thead th {
113+
background-color: #f8f9fa;
114+
font-weight: 600;
115+
color: #555;
116+
text-align: left;
117+
}
118+
119+
/* Month Headers */
120+
.month-header {
121+
background-color: #f0f4f8;
122+
color: #2c3e50;
123+
text-align: left;
124+
font-weight: 600;
125+
position: relative;
126+
transition: background-color 0.2s;
127+
}
128+
129+
.month-header:hover {
130+
background-color: #e4ebf5;
131+
}
132+
133+
/* Availability colors - for data visualization */
134+
.availability-high {
135+
background-color: rgba(46, 204, 113, 0.1);
136+
color: #27ae60;
137+
}
138+
139+
.availability-medium {
140+
background-color: rgba(255, 159, 64, 0.1);
141+
color: #f39c12;
142+
}
143+
144+
.availability-low {
145+
background-color: rgba(231, 76, 60, 0.1);
146+
color: #c0392b;
147+
}
148+
149+
/* Buttons */
150+
.action-btn {
151+
display: inline-flex;
152+
align-items: center;
153+
gap: 8px;
154+
padding: 10px 24px;
155+
border-radius: 8px;
156+
text-decoration: none;
157+
font-weight: 600;
158+
transition: all 0.2s ease;
159+
border: none;
160+
cursor: pointer;
161+
}
162+
163+
.btn-primary {
164+
background-color: #2ecc71;
165+
color: white;
166+
}
167+
168+
.btn-primary:hover {
169+
background-color: #27ae60;
170+
transform: translateY(-2px);
171+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
172+
}
173+
174+
.btn-secondary {
175+
background-color: #95a5a6;
176+
color: white;
177+
}
178+
179+
.btn-secondary:hover {
180+
background-color: #7f8c8d;
181+
}
182+
183+
/* Layouts */
184+
.container-fluid {
185+
max-width: 1200px;
186+
margin: 0 auto;
187+
padding: 0 20px;
188+
}
189+
190+
/* Responsive Utilities */
191+
@media (max-width: 768px) {
192+
.custom-checkbox-group {
193+
justify-content: center;
194+
}
195+
}

‎website/public/css/main.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,19 @@ button.action-button:hover {
211211
.leaflet-tooltip-pane { display: none; }
212212
}
213213

214+
/* Ensure consistent popup width throughout the app */
215+
.leaflet-popup-content-wrapper,
216+
.leaflet-popup-content {
217+
width: 320px !important;
218+
min-width: 320px !important;
219+
max-width: 320px !important;
220+
}
221+
222+
.leaflet-popup-content {
223+
margin: 0 !important;
224+
padding: 0 !important;
225+
}
226+
214227
@media screen and (max-width: 576px) {
215228
table {
216229
width: 100%;

‎website/public/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<link rel="stylesheet" href="./css/main.css" type="text/css" />
7+
<link rel="stylesheet" href="/css/main.css" type="text/css" />
8+
<link rel="stylesheet" href="/css/components.css" type="text/css" />
89
<title>Alpine Huts booking overview</title>
910
</head>
1011
<body>

0 commit comments

Comments
 (0)