Skip to content

Commit 9109cfa

Browse files
Alexanderer159Alexanderer159
committed
Prettier
1 parent b805afd commit 9109cfa

File tree

2 files changed

+91
-42
lines changed

2 files changed

+91
-42
lines changed

‎src/js/components/Calendario.jsx‎

Lines changed: 65 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,103 @@
11
const Calendar = () => {
22
return (
3-
3+
<>
44
<div className="All vh-100 container-fluid vh-100 m-auto col-12 col-md-4 d-flex flex-column">
5-
<div className="calendar h-10 d-flex flex-row align-items-center justify-content-center gap-3 my-3">
6-
<div className="calendarday rounded-5 shadow-lg border-0 bg-light text-center justify-content-center w-25">
7-
<p>Mon</p>
8-
<p>20</p>
9-
<a>X</a>
5+
<div className="calendar h-10 d-flex flex-row align-items-center justify-content-center gap-3 my-4">
6+
<div className="calendarday rounded-5 shadow-lg border-0 bg-light text-center justify-content-center w-25 p-1 bg-opacity-50">
7+
<p className="fs-4 m-0 p-0 d-flex justify-content-center align-items-center">Mon</p>
8+
<p className="fs-4 m-0 p-0 d-flex justify-content-center align-items-center">20</p>
9+
<a>❌</a>
1010
</div>
11-
<div className="calendarday rounded-5 shadow-lg border-0 bg-light text-center justify-content-center w-25">
12-
<p>Tue</p>
13-
<p>21</p>
14-
<a>X</a>
11+
<div className="calendarday rounded-5 shadow-lg border-0 bg-light text-center justify-content-center w-25 p-1 bg-opacity-50">
12+
<p className="fs-4 m-0 p-0 d-flex justify-content-center align-items-center">Tue</p>
13+
<p className="fs-4 m-0 p-0 d-flex justify-content-center align-items-center">21</p>
14+
<a>❌</a>
1515
</div>
16-
<div className="calendarday rounded-5 shadow-lg border-0 bg-light text-center justify-content-center w-25">
17-
<p>Wed</p>
18-
<p>22</p>
19-
<a>X</a>
16+
<div className="calendarday rounded-5 shadow-lg border-0 bg-light text-center justify-content-center w-25 p-1">
17+
<p className="fs-4 m-0 p-0 d-flex justify-content-center align-items-center">Wed</p>
18+
<p className="fs-4 m-0 p-0 d-flex justify-content-center align-items-center">22</p>
19+
<a>❌</a>
2020
</div>
21-
<div className="calendarday rounded-5 shadow-lg border-0 bg-light text-center justify-content-center w-25">
22-
<p>Thu</p>
23-
<p>23</p>
24-
<a>Y</a>
21+
<div className="calendarday rounded-5 shadow-lg border-0 bg-light text-center justify-content-center w-25 p-1 bg-opacity-50">
22+
<p className="fs-4 m-0 p-0 d-flex justify-content-center align-items-center">Thu</p>
23+
<p className="fs-4 m-0 p-0 d-flex justify-content-center align-items-center">23</p>
24+
<a>✔️</a>
2525
</div>
26-
<div className="calendarday rounded-5 shadow-lg border-0 bg-light text-center justify-content-center w-25">
27-
<p>Fri</p>
28-
<p>24</p>
29-
<a>Y</a>
26+
<div className="calendarday rounded-5 shadow-lg border-0 bg-light text-center justify-content-center w-25 p-1 bg-opacity-50">
27+
<p className="fs-4 m-0 p-0 d-flex justify-content-center align-items-center">Fri</p>
28+
<p className="fs-4 m-0 p-0 d-flex justify-content-center align-items-center">24</p>
29+
<a>✔️</a>
3030
</div>
3131
</div>
3232

33-
<div className="location rounded-5 w-100 my-2 h-30 d-flex flex-column align-items-center justify-content-center bg-light">
33+
<div className="location rounded-5 w-100 py-4 my-2 h-30 d-flex flex-column align-items-center justify-content-center bg-light">
3434

3535
<div className="location-top m-2 h-30 w-100 d-flex flex-row align-items-center justify-content-center">
3636

37-
<div className="location-top-left m-2 my-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">
38-
<div className="car-left m-2 my-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">1</div>
39-
<div className="car-middle m-2 my-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">2</div>
40-
<div className="car-right m-2 my-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">3</div>
37+
<div className="location-top-left shadow p-2 px-3 m-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">
38+
<div className="car-left shadow m-2 h-100 w-25 rounded-circle d-flex align-items-center justify-content-center fs-4">🚘</div>
39+
<div className="car-middle shadow m-2 p-0 h-100 w-50 rounded-5 d-flex align-items-center justify-content-center">56 min</div>
40+
<div className="car-right shadow p-0 m-2 mx-3 h-100 w-25 rounded-circle d-flex align-items-center justify-content-center">⚫</div>
4141
</div>
4242

43-
<div className="location-top-right m-2 h-100 w-25 rounded-5 d-flex flex-row align-items-center justify-content-center">
44-
<div className="weather-left m-2 my-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">1</div>
45-
<div className="weather-right m-2 my-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">2</div>
43+
<div className="location-top-right shadow m-2 h-100 w-50 rounded-5 d-flex flex-row align-items-center justify-content-center p-1">
44+
<div className="weather-left m-1 h-100 w-50 rounded-circle d-flex align-items-center justify-content-center fs-2">⛅</div>
45+
<div className="weather-right m-4 w-50 d-flex flex-column justify-content-center align-items-start p-2">
46+
<div className="fs-5 d-flex align-items-start"><strong>48° F</strong></div>
47+
<div className="d-flex align-items-start">Cloudy</div>
48+
</div>
4649
</div>
4750
</div>
4851

49-
<div className="location-bottom my-2 w-100 h-70 d-flex flex-row align-items-center justify-content-center">
50-
<div className="location-bottom-left m-2 my-2 h-100 w-75 rounded-5 d-flex flex-column align-items-center justify-content-center">
51-
<div className="car-left m-2 my-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">Atenolol</div>
52-
<div className="car-middle m-2 my-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">Lisinopril</div>
53-
<div className="car-right m-2 my-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">Astorvastatin</div>
52+
<div className="location-bottom my-3 mb-3 w-100 h-70 d-flex flex-row align-items-center justify-content-center">
53+
54+
<div className="location-bottom-left h-100 w-50 rounded-5 d-flex flex-column align-items-center justify-content-center">
55+
56+
<div className="location-bottom-left-1 my-1 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">
57+
<button type="button" className="btn btn-light w-100 shadow d-flex flex-row rounded-5 p-0 border-0">
58+
<div className="icon my-2 h-100 w-25 rounded-5 d-flex justify-content-end align-items-center">💊</div>
59+
<div className="pill m-2 my-2 h-100 w-75 d-flex justify-content-start align-items-center">Atenolol</div>
60+
</button>
61+
</div>
62+
<div className="location-bottom-left-2 my-1 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">
63+
<button type="button" className="btn btn-light w-100 shadow d-flex flex-row rounded-5 p-0 border-0">
64+
<div className="icon my-2 h-100 w-25 rounded-5 d-flex justify-content-end align-items-center">💊</div>
65+
<div className="pill m-2 my-2 h-100 w-75 d-flex justify-content-start align-items-center">Lisinopril</div>
66+
</button>
67+
</div>
68+
<div className="location-bottom-left-3 my-1 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">
69+
<button type="button" className="btn btn-light w-100 shadow d-flex flex-row rounded-5 p-0 border-0">
70+
<div className="icon my-2 h-100 w-25 rounded-circle d-flex justify-content-end align-items-center">💊</div>
71+
<div className="pill m-2 my-2 h-100 w-75 d-flex justify-content-start align-items-center">Astorvastatin</div>
72+
</button>
73+
</div>
5474
</div>
5575

56-
<div className="location-bottom-right m-2 h-100 w-25 rounded-5 d-flex flex-row align-items-center justify-content-center">2</div>
76+
<div className="location-bottom-right m-2 h-100 w-50 rounded-5 d-flex flex-row align-items-center justify-content-center">
77+
<img src="https://www.jaspersoft.com/content/dam/jaspersoft/images/graphics/infographics/donut-chart-example.svg" className="img-fluid "></img>
78+
</div>
5779
</div>
5880
</div>
5981

6082
<div className="quality my-2 h-60 rounded-5 d-flex flex-column align-items-center justify-content-center bg-light">
6183

62-
<div className="quality-top my-3 h-10 rounded-5 d-flex flex-row align-items-center justify-content-center bg-light">
84+
<div className="quality-top my-3 h-10 rounded-5 w-100 d-flex flex-row align-items-center justify-content-center bg-light">
6385
<div className="quality-top-1 m-2 my-2 h-100 w-50 rounded-5 d-flex align-items-center justify-content-center">Life Quality</div>
6486
<div className="quality-top-2 m-2 my-2 h-100 w-25 rounded-5 d-flex align-items-center justify-content-center">...</div>
65-
<div className="quality-top-3 m-2 my-2 h-100 w-25 rounded-5 d-flex align-items-center justify-content-center">Week ...</div>
87+
<div className="quality-top-3 m-2 my-2 h-100 w-25 rounded-5 d-flex flex-row align-items-center justify-content-center">
88+
<div className="quality-top-3 m-2 my-2 h-100 w-25 rounded-5 d-flex flex-row align-items-center justify-content-center">Week</div>
89+
<div className="quality-top-3 m-2 my-2 h-100 w-25 rounded-5 d-flex flex-row align-items-center justify-content-center">...</div>
90+
</div>
6691
</div>
67-
<div className="quality-middle my-2 h-30 rounded-5 d-flex flex-row align-items-center justify-content-center bg-light">
92+
<div className="quality-middle my-2 h-30 w-100 rounded-5 d-flex flex-row align-items-center justify-content-center bg-light">
6893
<div className="quality-middle-1 m-2 my-2 h-100 w-25 rounded-5 d-flex flex-row align-items-center justify-content-center">1</div>
6994
<div className="quality-middle-2 m-2 my-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">2</div>
7095
</div>
7196
<div className="quality-bottom my-2 h-60 rounded-5 d-flex flex-row align-items-center justify-content-center bg-light">3</div>
7297

7398
</div>
7499
</div>
100+
</>
75101
);
76102
};
77103

‎src/styles/calendar.css‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.All {
22
height: 100vh;
3-
background-color: grey;
3+
background-color: rgb(167, 196, 216);
44
}
55

66
.h-10 {
@@ -11,6 +11,10 @@
1111
height: 30%;
1212
}
1313

14+
.h-40 {
15+
height: 40%;
16+
}
17+
1418
.h-60 {
1519
height: 60%;
1620
}
@@ -20,9 +24,28 @@
2024
}
2125

2226
.location-top-right {
23-
background-color: gray;
27+
background-color: rgba(128, 128, 128, 0.4);
28+
2429
}
2530

2631
.location-top-left {
27-
background-color: gray;
32+
background: url(https://www.shutterstock.com/image-vector/fictitious-generic-street-map-urban-600nw-2312834423.jpg);
33+
object-fit:scale-down;
34+
}
35+
36+
.car-right {
37+
background-color: white;
38+
}
39+
40+
.car-left {
41+
background-color: rgb(255, 255, 101);
42+
}
43+
44+
.car-middle {
45+
background-color: midnightblue;
46+
color: white;
47+
}
48+
49+
.weather-left {
50+
background-color: white;
2851
}

0 commit comments

Comments
 (0)