Skip to content

Commit e763967

Browse files
SachaWildCodeSachaWildCode
committed
fixes
1 parent c8cae83 commit e763967

File tree

5 files changed

+161
-6
lines changed

5 files changed

+161
-6
lines changed

‎src/app/components/donation-card/donation-card.component.scss

+35-3
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@
1313
align-items: center;
1414

1515
.donation-name {
16-
flex: 1;
16+
flex: 0;
1717
font-weight: bold;
18-
margin-right: 10px;
18+
margin-right: 8px;
1919
}
2020

2121
.donation-slider {
2222
flex: 2;
23-
margin-right: 10px;
23+
margin-right: 8px;
2424
}
2525

2626
.donation-percentage {
@@ -36,3 +36,35 @@
3636
margin-left: 10px;
3737
}
3838
}
39+
@media screen and (max-width: 700px) {
40+
.donation-card {
41+
flex-direction: column;
42+
.donation-details {
43+
display: flex;
44+
align-items: center;
45+
flex: 1;
46+
47+
.donation-name {
48+
font-size: 12px;
49+
font-weight: bold;
50+
margin-right: 8px;
51+
}
52+
53+
.donation-slider {
54+
margin-right: 8px;
55+
}
56+
57+
.donation-percentage {
58+
text-align: right;
59+
flex: 1;
60+
}
61+
}
62+
63+
.donation-amount {
64+
flex: 0.5;
65+
text-align: right;
66+
font-weight: bold;
67+
margin-left: 10px;
68+
}
69+
}
70+
}

‎src/app/components/donations/donations.component.scss

+56
Original file line numberDiff line numberDiff line change
@@ -53,3 +53,59 @@ main {
5353
}
5454
}
5555
}
56+
@media screen and (max-width: 700px) {
57+
main {
58+
display: flex;
59+
flex-direction: column;
60+
align-items: center;
61+
padding: 16px;
62+
background-color: var(--color-white); // Light gray background
63+
min-height: 100%; // Ensure the main area covers the full height of the viewport
64+
height: 100%;
65+
border-radius: 8px;
66+
position: relative;
67+
padding-bottom: 80px;
68+
box-shadow: var(--button-box-shadow);
69+
h2 {
70+
padding-bottom: 16px;
71+
color: #333; // Dark gray color for better contrast
72+
}
73+
74+
.donation-container {
75+
overflow-y: auto;
76+
width: 100%;
77+
max-width: 1200px; // Max width for large screens
78+
padding: 0; // Padding on the sides for better spacing
79+
display: flex;
80+
flex-direction: column;
81+
gap: 10px; // Space between donation cards
82+
}
83+
84+
button {
85+
position: absolute;
86+
bottom: 20px;
87+
right: 20px;
88+
padding: 10px 20px;
89+
font-size: 1rem;
90+
font-weight: bold;
91+
color: #fff;
92+
background-color: var(--color-black); // Accent color
93+
border: none;
94+
border-radius: 5px;
95+
cursor: pointer;
96+
transition:
97+
background-color 0.3s ease,
98+
transform 0.2s ease;
99+
100+
&:hover {
101+
background-color: var(--color-black);
102+
transform: translateY(-2px);
103+
}
104+
105+
&:active {
106+
background-color: #1a6b67;
107+
transform: translateY(0);
108+
}
109+
}
110+
}
111+
}

‎src/app/components/side-bar/side-bar.component.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@ <h4>Mon compte</h4>
33
<ul>
44
<li>
55
<a [routerLink]="['/profile']" [routerLinkActive]="['is-active']" [routerLinkActiveOptions]="{ exact: true }"
6-
><fa-icon [icon]="faUser" />Mon profil</a
6+
><fa-icon [icon]="faUser" /><span>Mon profil</span></a
77
>
88
</li>
99
<li>
1010
<a [routerLink]="['/profile', 'donations']" [routerLinkActive]="['is-active']"
11-
><fa-icon [icon]="faCalendar" />Dons programmés</a
11+
><fa-icon [icon]="faCalendar" /><span>Dons programmés</span></a
1212
>
1313
</li>
1414
<li>
1515
<a [routerLink]="['/profile', 'payments']" [routerLinkActive]="['is-active']"
16-
><fa-icon [icon]="faMoney" />Paiements</a
16+
><fa-icon class="icon" [icon]="faMoney" /><span>Paiements</span></a
1717
>
1818
</li>
1919
</ul>

‎src/app/components/side-bar/side-bar.component.scss

+46
Original file line numberDiff line numberDiff line change
@@ -40,3 +40,49 @@
4040
.is-active {
4141
background-color: #e0e0e0;
4242
}
43+
@media screen and (max-width: 700px) {
44+
.sidebar {
45+
display: flex;
46+
flex-direction: row;
47+
background-color: var(--color-white); // Light gray background
48+
padding: 16px;
49+
border-radius: 8px;
50+
height: 4rem;
51+
min-height: 0;
52+
box-shadow: var(--button-box-shadow);
53+
justify-content: space-between;
54+
55+
h4 {
56+
padding: 0px;
57+
padding-bottom: 0px;
58+
}
59+
ul {
60+
display: flex;
61+
flex-direction: row;
62+
justify-content: space-between;
63+
align-items: center;
64+
li {
65+
list-style-type: none;
66+
padding: 0;
67+
margin-bottom: 0rem;
68+
a {
69+
border-radius: 8px;
70+
padding: 0.7rem 1rem;
71+
text-decoration: none;
72+
color: #333;
73+
display: block;
74+
span {
75+
display: none;
76+
}
77+
fa-icon {
78+
font-size: 1.2rem;
79+
margin-right: 0px;
80+
}
81+
&:hover {
82+
background-color: #e0e0e0;
83+
}
84+
}
85+
}
86+
}
87+
}
88+
}

‎src/app/pages/user-page/user-page.component.scss

+21
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,24 @@ main {
1616
.routercontainer {
1717
flex: 3;
1818
}
19+
@media screen and (max-width: 700px) {
20+
:host {
21+
height: 100%;
22+
overflow-y: scroll;
23+
}
24+
main {
25+
padding: 8px;
26+
flex: 1;
27+
height: 100%;
28+
width: 100%;
29+
display: flex;
30+
flex-direction: column;
31+
}
32+
.sidebarcontainer {
33+
flex: 1;
34+
}
35+
.routercontainer {
36+
flex: 5;
37+
padding-bottom: 1rem;
38+
}
39+
}

0 commit comments

Comments
 (0)