Skip to content

Commit 4408d66

Browse files
VitorCarvalho67VitorCarvalho67
authored
Merge pull request #113 from VitorCarvalho67/dev
Dev
2 parents d4f9d16 + 21a5f04 commit 4408d66

File tree

4 files changed

+164
-53
lines changed

4 files changed

+164
-53
lines changed

‎client/src/scss/pages/shared/_ranking.scss‎

Lines changed: 124 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
main {
2-
min-height: calc(100vh - 80px);
2+
height: calc(100vh - 80px);
33
@include flex(row, flex-start, start);
44
border-bottom: 1px solid #0000008f;
55

66
.content {
77
@include flex(row, center, start);
88
width: calc(100% - 300px);
9-
min-height: calc(100vh - 80px);
9+
height: calc(100vh - 80px);
1010
padding: 0px 20px;
1111
background-color: $primary-color-dark;
1212

13+
overflow-y: auto; /* Ativa o scroll vertical */
14+
max-height: calc(100vh - 80px);
15+
1316
@include m-screen(700px) {
1417
@include flex(column-reverse, flex-start, start);
1518
justify-content: flex-end;
@@ -23,6 +26,18 @@ main {
2326
padding: 50px 0px 0px 0px;
2427
width: 70%;
2528

29+
@include m-screen(1400px) {
30+
width: 80%;
31+
}
32+
33+
@include m-screen(1200px) {
34+
width: 90%;
35+
}
36+
37+
@include m-screen(900px) {
38+
width: 95%;
39+
}
40+
2641
h1 {
2742
font-size: 2rem;
2843
margin-bottom: 5px;
@@ -49,26 +64,17 @@ main {
4964
}
5065
}
5166

52-
@include m-screen(1000px) {
53-
width: 60%;
54-
}
55-
56-
@include m-screen(700px) {
57-
width: 100%;
58-
margin-bottom: 20px;
59-
}
60-
61-
.alunos{
67+
.alunos {
6268
@include flex(column, flex-start, start);
6369
width: 100%;
6470

65-
.info{
71+
.info {
6672
color: $primary-color-orange;
6773
@include font-inter(bold);
6874
margin-bottom: 10px;
6975
}
7076

71-
.aluno{
77+
.aluno {
7278
position: relative;
7379
width: 100%;
7480
max-width: 1000px;
@@ -82,42 +88,132 @@ main {
8288
text-decoration: none;
8389
color: $font-color-dark;
8490

85-
&:hover{
91+
@include m-screen(770px) {
92+
padding: 10px 10px;
93+
}
94+
95+
@include m-screen(600px) {
96+
@include flex(column, center, start);
97+
}
98+
99+
&:hover {
86100
transform: scale(1.04);
87101
}
88102

89-
b{
103+
.xx {
104+
height: 100%;
105+
@include flex(row, flex-start, center);
106+
107+
.pontos {
108+
display: none;
109+
}
110+
111+
@include m-screen(600px) {
112+
width: 100%;
113+
@include flex(row, flex-start, center);
114+
115+
.pontos {
116+
display: block;
117+
@include font-inter(bold);
118+
}
119+
}
120+
}
121+
122+
b {
90123
font-size: 1.8rem;
91124
@include font-inter(bold);
92125
margin-right: 30px;
126+
127+
@include m-screen(1000px) {
128+
margin-right: 20px;
129+
font-size: 1.6rem;
130+
}
131+
132+
@include m-screen(770px) {
133+
margin-right: 10px;
134+
font-size: 1.2rem;
135+
}
93136
}
94137

95-
img{
138+
img {
96139
width: 40px;
97140
margin-right: 30px;
141+
142+
@include m-screen(1000px) {
143+
margin-right: 20px;
144+
width: 30px;
145+
}
146+
147+
@include m-screen(770px) {
148+
margin-right: 10px;
149+
}
98150
}
99151

100-
img:nth-child(3){
152+
img:nth-child(3) {
101153
width: 50px;
154+
height: 50px;
155+
object-fit: cover;
102156
border-radius: 50%;
103157
padding: 2px;
104158
background-color: $secondary-color-dark;
159+
160+
@include m-screen(770px) {
161+
width: 40px;
162+
height: 40px;
163+
}
105164
}
106165

107166
.normal {
108167
filter: saturate(0);
109168
}
110169

111-
.name{
112-
font-size: 1.2rem;
113-
@include font-inter(400);
114-
margin-right: 30px;
115-
}
116-
117-
.pontos{
118-
@include font-inter(bold);
119-
position: absolute;
120-
right: 20px;
170+
.zz {
171+
height: 100%;
172+
@include flex(row, flex-start, center);
173+
174+
@include m-screen(680px) {
175+
@include flex(column, center, start);
176+
margin-left: 10px;
177+
}
178+
179+
@include m-screen(600px) {
180+
width: 100%;
181+
@include flex(row, flex-start, center);
182+
margin-left: 0px;
183+
.pontos {
184+
display: none;
185+
}
186+
}
187+
188+
.name {
189+
font-size: 1.2rem;
190+
@include font-inter(400);
191+
margin-right: 30px;
192+
193+
@include m-screen(1000px) {
194+
margin-right: 20px;
195+
font-size: 1rem;
196+
}
197+
198+
@include m-screen(680px) {
199+
margin-right: 0px;
200+
}
201+
}
202+
203+
.pontos {
204+
@include font-inter(bold);
205+
position: absolute;
206+
right: 20px;
207+
208+
@include m-screen(770px) {
209+
right: 10px;
210+
}
211+
212+
@include m-screen(680px) {
213+
position: relative;
214+
right: 0px;
215+
}
216+
}
121217
}
122218
}
123219

‎client/src/views/aluno/Ranking.vue‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,18 @@
1313

1414
<router-link v-for="(item, index) in ranking" :key="index"
1515
:to="`/aluno/profile/${item.aluno.rm}`" class="aluno">
16-
<b>#{{ index + 1 }}</b>
17-
<img :src="index + 1 < 4 ? medalhas[index] : medalhas[3]"
18-
:class="(index + 1 < 4) ? 'medalha' : 'medalha normal'" alt="" />
19-
20-
<img v-if="item.aluno.imagem != 'default'" :src="item.aluno.imagem" alt="Foto do aluno">
21-
<img v-else src="../../assets/icons/artwork.png" alt="Foto padrão">
22-
<p class="name">{{ item.aluno.nome }} - 3º DS</p>
23-
<p class="pontos">{{ (item.rankingNota * 1000).toFixed(2) }} / {{ item.numeroNotas }}</p>
16+
<div class="xx">
17+
<b>#{{ index + 1 }}</b>
18+
<img :src="index + 1 < 4 ? medalhas[index] : medalhas[3]"
19+
:class="(index + 1 < 4) ? 'medalha' : 'medalha normal'" alt="" />
20+
<img v-if="item.aluno.imagem != 'default'" :src="item.aluno.imagem" alt="Foto do aluno">
21+
<img v-else src="../../assets/icons/artwork.png" alt="Foto padrão">
22+
<p class="pontos">{{ (item.rankingNota * 1000).toFixed(2) }} / {{ item.numeroNotas }} pontos</p>
23+
</div>
24+
<div class="zz">
25+
<p class="name">{{ item.aluno.nome }} - 3º DS</p>
26+
<p class="pontos">{{ (item.rankingNota * 1000).toFixed(2) }} / {{ item.numeroNotas }} pontos</p>
27+
</div>
2428
</router-link>
2529
</div>
2630
</div>

‎client/src/views/empresa/Ranking.vue‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,18 @@
1212
<p class="info">Clique para entrar em contato:</p>
1313

1414
<router-link v-for="(item, index) in ranking" :key="index" :to="`/empresa/aluno/profile/${item.aluno.rm}`" class="aluno">
15-
<b>#{{ index + 1 }}</b>
16-
<img :src="(index + 1 < 4) ? '../assets/icons/m' + (index + 1) + '.png' : '../../assets/icons/m3.png'" :class="(index + 1 < 4) ? 'medalha' : 'medalha normal' " alt="">
17-
<img v-if="item.aluno.imagem != 'default'" :src="item.aluno.imagem" alt="Foto do aluno">
18-
<img v-else src="../../assets/icons/artwork.png" alt="Foto padrão">
19-
<p class="name">{{ item.aluno.nome }} - 3º DS</p>
20-
<p class="pontos">{{ (item.rankingNota * 1000).toFixed(2) }} / {{ item.numeroNotas }}</p>
15+
<div class="xx">
16+
<b>#{{ index + 1 }}</b>
17+
<img :src="index + 1 < 4 ? medalhas[index] : medalhas[3]"
18+
:class="(index + 1 < 4) ? 'medalha' : 'medalha normal'" alt="" />
19+
<img v-if="item.aluno.imagem != 'default'" :src="item.aluno.imagem" alt="Foto do aluno">
20+
<img v-else src="../../assets/icons/artwork.png" alt="Foto padrão">
21+
<p class="pontos">{{ (item.rankingNota * 1000).toFixed(2) }} / {{ item.numeroNotas }} pontos</p>
22+
</div>
23+
<div class="zz">
24+
<p class="name">{{ item.aluno.nome }} - 3º DS</p>
25+
<p class="pontos">{{ (item.rankingNota * 1000).toFixed(2) }} / {{ item.numeroNotas }} pontos</p>
26+
</div>
2127
</router-link>
2228
</div>
2329
</div>

‎client/src/views/shared/Ranking.vue‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,18 @@
1111
<p class="info">Ranking geral:</p>
1212

1313
<router-link v-for="(item, index) in ranking" :key="index" :to="`/aluno/profile/${item.aluno.rm}`" class="aluno">
14-
<b>#{{ index + 1 }}</b>
15-
<img :src="index + 1 < 4 ? medalhas[index] : medalhas[3]"
16-
:class="(index + 1 < 4) ? 'medalha' : 'medalha normal'" alt="" />
17-
<img v-if="item.aluno.imagem != 'default'" :src="item.aluno.imagem" alt="Foto do aluno">
18-
<img v-else src="../../assets/icons/artwork.png" alt="Foto padrão">
19-
<p class="name">{{ item.aluno.nome }} - 3º DS</p>
20-
<p class="pontos">{{ (item.rankingNota * 1000).toFixed(2) }} / {{ item.numeroNotas }}</p>
14+
<div class="xx">
15+
<b>#{{ index + 1 }}</b>
16+
<img :src="index + 1 < 4 ? medalhas[index] : medalhas[3]"
17+
:class="(index + 1 < 4) ? 'medalha' : 'medalha normal'" alt="" />
18+
<img v-if="item.aluno.imagem != 'default'" :src="item.aluno.imagem" alt="Foto do aluno">
19+
<img v-else src="../../assets/icons/artwork.png" alt="Foto padrão">
20+
<p class="pontos">{{ (item.rankingNota * 1000).toFixed(2) }} / {{ item.numeroNotas }} pontos</p>
21+
</div>
22+
<div class="zz">
23+
<p class="name">{{ item.aluno.nome }} - 3º DS</p>
24+
<p class="pontos">{{ (item.rankingNota * 1000).toFixed(2) }} / {{ item.numeroNotas }} pontos</p>
25+
</div>
2126
</router-link>
2227
</div>
2328
</div>
@@ -91,18 +96,18 @@ export default {
9196
#app {
9297
display: flex;
9398
flex-direction: column;
94-
min-height: calc(100vh - 80px);
95-
min-height: 510px;
99+
height: calc(100vh - 80px);
100+
overflow: hidden;
96101
97102
main {
98103
display: flex;
99104
flex: 1;
100-
min-height: calc(100vh - 80px);
105+
height: calc(100vh - 80px);
101106
overflow: hidden;
102107
103108
.content {
104109
flex: 1;
105-
min-height: calc(100vh - 80px);
110+
height: calc(100vh - 80px);
106111
padding: 20px;
107112
overflow-y: auto;
108113

0 commit comments

Comments
 (0)