git/meteo-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance UI with hamburger menu, GPS modal, and search functionality; update styles for better responsiveness

Browse Source
This commit is contained in:
xavs
2026-05-18 17:44:17 +02:00
parent c2fe21d9e8
commit db69e1bb22
6 changed files with 891 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/prediccio-diaria/prediccio-diaria.scss
+63 -15
View File
@@ -3,69 +3,113 @@
flex-direction: column;
gap: 1px;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
border-radius: 12px;
overflow: hidden;
@media (min-width: 768px) {
border-radius: 15px;
}
.day-item {
display: grid;
grid-template-columns: 1fr auto auto 1.2fr;
align-items: center;
gap: 15px;
padding: 15px;
gap: 8px;
padding: 10px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
@media (min-width: 768px) {
gap: 15px;
padding: 15px;
}
&:hover {
background: rgba(255, 255, 255, 0.1);
}
.day-info {
.day-name {
font-size: 16px;
font-size: 13px;
font-weight: 500;
margin-bottom: 2px;
@media (min-width: 768px) {
font-size: 16px;
}
}
.date {
font-size: 13px;
font-size: 11px;
opacity: 0.7;
@media (min-width: 768px) {
font-size: 13px;
}
}
}
.weather-icon {
font-size: 32px;
font-size: 26px;
line-height: 1;
text-align: center;
@media (min-width: 768px) {
font-size: 32px;
}
.weather-icon-img {
width: 36px;
height: 36px;
width: 28px;
height: 28px;
object-fit: contain;
@media (min-width: 768px) {
width: 36px;
height: 36px;
}
}
}
.precipitation {
font-size: 13px;
font-size: 11px;
opacity: 0.8;
min-width: 50px;
min-width: 40px;
text-align: center;
@media (min-width: 768px) {
font-size: 13px;
min-width: 50px;
}
}
.precipitation-placeholder {
min-width: 50px;
min-width: 40px;
@media (min-width: 768px) {
min-width: 50px;
}
}
.temps {
.temp-bar-container {
display: flex;
align-items: center;
gap: 10px;
gap: 6px;
@media (min-width: 768px) {
gap: 10px;
}
.temp-min, .temp-max {
font-size: 16px;
font-size: 13px;
font-weight: 500;
min-width: 35px;
min-width: 30px;
text-align: center;
@media (min-width: 768px) {
font-size: 16px;
min-width: 35px;
}
}
.temp-min {
@@ -74,11 +118,15 @@
.temp-bar {
flex: 1;
height: 6px;
height: 5px;
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
position: relative;
@media (min-width: 768px) {
height: 6px;
}
.temp-range {
position: absolute;
height: 100%;