Skip to content

Commit

Permalink
Merge pull request #113 from VitorCarvalho67/dev
Browse files Browse the repository at this point in the history 
Dev
  • Loading branch information
@VitorCarvalho67
VitorCarvalho67 authored Nov 25, 2024
2 parents d4f9d16 + 21a5f04 commit 4408d66
Show file tree
Hide file tree
Showing 4 changed files with 164 additions and 53 deletions.
152 changes: 124 additions & 28 deletions client/src/scss/pages/shared/_ranking.scss
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
main {
min-height: calc(100vh - 80px);
height: calc(100vh - 80px);
@include flex(row, flex-start, start);
border-bottom: 1px solid #0000008f;

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

overflow-y: auto; /* Ativa o scroll vertical */
max-height: calc(100vh - 80px);

@include m-screen(700px) {
@include flex(column-reverse, flex-start, start);
justify-content: flex-end;
Expand All @@ -23,6 +26,18 @@ main {
padding: 50px 0px 0px 0px;
width: 70%;

@include m-screen(1400px) {
width: 80%;
}

@include m-screen(1200px) {
width: 90%;
}

@include m-screen(900px) {
width: 95%;
}

h1 {
font-size: 2rem;
margin-bottom: 5px;
Expand All @@ -49,26 +64,17 @@ main {
}
}

@include m-screen(1000px) {
width: 60%;
}

@include m-screen(700px) {
width: 100%;
margin-bottom: 20px;
}

.alunos{
.alunos {
@include flex(column, flex-start, start);
width: 100%;

.info{
.info {
color: $primary-color-orange;
@include font-inter(bold);
margin-bottom: 10px;
}

.aluno{
.aluno {
position: relative;
width: 100%;
max-width: 1000px;
Expand All @@ -82,42 +88,132 @@ main {
text-decoration: none;
color: $font-color-dark;

&:hover{
@include m-screen(770px) {
padding: 10px 10px;
}

@include m-screen(600px) {
@include flex(column, center, start);
}

&:hover {
transform: scale(1.04);
}

b{
.xx {
height: 100%;
@include flex(row, flex-start, center);

.pontos {
display: none;
}

@include m-screen(600px) {
width: 100%;
@include flex(row, flex-start, center);

.pontos {
display: block;
@include font-inter(bold);
}
}
}

b {
font-size: 1.8rem;
@include font-inter(bold);
margin-right: 30px;

@include m-screen(1000px) {
margin-right: 20px;
font-size: 1.6rem;
}

@include m-screen(770px) {
margin-right: 10px;
font-size: 1.2rem;
}
}

img{
img {
width: 40px;
margin-right: 30px;

@include m-screen(1000px) {
margin-right: 20px;
width: 30px;
}

@include m-screen(770px) {
margin-right: 10px;
}
}

img:nth-child(3){
img:nth-child(3) {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 50%;
padding: 2px;
background-color: $secondary-color-dark;

@include m-screen(770px) {
width: 40px;
height: 40px;
}
}

.normal {
filter: saturate(0);
}

.name{
font-size: 1.2rem;
@include font-inter(400);
margin-right: 30px;
}

.pontos{
@include font-inter(bold);
position: absolute;
right: 20px;
.zz {
height: 100%;
@include flex(row, flex-start, center);

@include m-screen(680px) {
@include flex(column, center, start);
margin-left: 10px;
}

@include m-screen(600px) {
width: 100%;
@include flex(row, flex-start, center);
margin-left: 0px;
.pontos {
display: none;
}
}

.name {
font-size: 1.2rem;
@include font-inter(400);
margin-right: 30px;

@include m-screen(1000px) {
margin-right: 20px;
font-size: 1rem;
}

@include m-screen(680px) {
margin-right: 0px;
}
}

.pontos {
@include font-inter(bold);
position: absolute;
right: 20px;

@include m-screen(770px) {
right: 10px;
}

@include m-screen(680px) {
position: relative;
right: 0px;
}
}
}
}

Expand Down
20 changes: 12 additions & 8 deletions client/src/views/aluno/Ranking.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,18 @@

<router-link v-for="(item, index) in ranking" :key="index"
:to="`/aluno/profile/${item.aluno.rm}`" class="aluno">
<b>#{{ index + 1 }}</b>
<img :src="index + 1 < 4 ? medalhas[index] : medalhas[3]"
:class="(index + 1 < 4) ? 'medalha' : 'medalha normal'" alt="" />

<img v-if="item.aluno.imagem != 'default'" :src="item.aluno.imagem" alt="Foto do aluno">
<img v-else src="../../assets/icons/artwork.png" alt="Foto padrão">
<p class="name">{{ item.aluno.nome }} - 3º DS</p>
<p class="pontos">{{ (item.rankingNota * 1000).toFixed(2) }} / {{ item.numeroNotas }}</p>
<div class="xx">
<b>#{{ index + 1 }}</b>
<img :src="index + 1 < 4 ? medalhas[index] : medalhas[3]"
:class="(index + 1 < 4) ? 'medalha' : 'medalha normal'" alt="" />
<img v-if="item.aluno.imagem != 'default'" :src="item.aluno.imagem" alt="Foto do aluno">
<img v-else src="../../assets/icons/artwork.png" alt="Foto padrão">
<p class="pontos">{{ (item.rankingNota * 1000).toFixed(2) }} / {{ item.numeroNotas }} pontos</p>
</div>
<div class="zz">
<p class="name">{{ item.aluno.nome }} - 3º DS</p>
<p class="pontos">{{ (item.rankingNota * 1000).toFixed(2) }} / {{ item.numeroNotas }} pontos</p>
</div>
</router-link>
</div>
</div>
Expand Down
18 changes: 12 additions & 6 deletions client/src/views/empresa/Ranking.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,18 @@
<p class="info">Clique para entrar em contato:</p>

<router-link v-for="(item, index) in ranking" :key="index" :to="`/empresa/aluno/profile/${item.aluno.rm}`" class="aluno">
<b>#{{ index + 1 }}</b>
<img :src="(index + 1 < 4) ? '../assets/icons/m' + (index + 1) + '.png' : '../../assets/icons/m3.png'" :class="(index + 1 < 4) ? 'medalha' : 'medalha normal' " alt="">
<img v-if="item.aluno.imagem != 'default'" :src="item.aluno.imagem" alt="Foto do aluno">
<img v-else src="../../assets/icons/artwork.png" alt="Foto padrão">
<p class="name">{{ item.aluno.nome }} - 3º DS</p>
<p class="pontos">{{ (item.rankingNota * 1000).toFixed(2) }} / {{ item.numeroNotas }}</p>
<div class="xx">
<b>#{{ index + 1 }}</b>
<img :src="index + 1 < 4 ? medalhas[index] : medalhas[3]"
:class="(index + 1 < 4) ? 'medalha' : 'medalha normal'" alt="" />
<img v-if="item.aluno.imagem != 'default'" :src="item.aluno.imagem" alt="Foto do aluno">
<img v-else src="../../assets/icons/artwork.png" alt="Foto padrão">
<p class="pontos">{{ (item.rankingNota * 1000).toFixed(2) }} / {{ item.numeroNotas }} pontos</p>
</div>
<div class="zz">
<p class="name">{{ item.aluno.nome }} - 3º DS</p>
<p class="pontos">{{ (item.rankingNota * 1000).toFixed(2) }} / {{ item.numeroNotas }} pontos</p>
</div>
</router-link>
</div>
</div>
Expand Down
27 changes: 16 additions & 11 deletions client/src/views/shared/Ranking.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,18 @@
<p class="info">Ranking geral:</p>

<router-link v-for="(item, index) in ranking" :key="index" :to="`/aluno/profile/${item.aluno.rm}`" class="aluno">
<b>#{{ index + 1 }}</b>
<img :src="index + 1 < 4 ? medalhas[index] : medalhas[3]"
:class="(index + 1 < 4) ? 'medalha' : 'medalha normal'" alt="" />
<img v-if="item.aluno.imagem != 'default'" :src="item.aluno.imagem" alt="Foto do aluno">
<img v-else src="../../assets/icons/artwork.png" alt="Foto padrão">
<p class="name">{{ item.aluno.nome }} - 3º DS</p>
<p class="pontos">{{ (item.rankingNota * 1000).toFixed(2) }} / {{ item.numeroNotas }}</p>
<div class="xx">
<b>#{{ index + 1 }}</b>
<img :src="index + 1 < 4 ? medalhas[index] : medalhas[3]"
:class="(index + 1 < 4) ? 'medalha' : 'medalha normal'" alt="" />
<img v-if="item.aluno.imagem != 'default'" :src="item.aluno.imagem" alt="Foto do aluno">
<img v-else src="../../assets/icons/artwork.png" alt="Foto padrão">
<p class="pontos">{{ (item.rankingNota * 1000).toFixed(2) }} / {{ item.numeroNotas }} pontos</p>
</div>
<div class="zz">
<p class="name">{{ item.aluno.nome }} - 3º DS</p>
<p class="pontos">{{ (item.rankingNota * 1000).toFixed(2) }} / {{ item.numeroNotas }} pontos</p>
</div>
</router-link>
</div>
</div>
Expand Down Expand Up @@ -91,18 +96,18 @@ export default {
#app {
display: flex;
flex-direction: column;
min-height: calc(100vh - 80px);
min-height: 510px;
height: calc(100vh - 80px);
overflow: hidden;
main {
display: flex;
flex: 1;
min-height: calc(100vh - 80px);
height: calc(100vh - 80px);
overflow: hidden;
.content {
flex: 1;
min-height: calc(100vh - 80px);
height: calc(100vh - 80px);
padding: 20px;
overflow-y: auto;
Expand Down

0 comments on commit 4408d66

Please sign in to comment.