Skip to content

Commit

Permalink
feat: sidebar responsive styles
Browse files Browse the repository at this point in the history
  • Loading branch information
danieljstri committed Dec 20, 2024
1 parent fc25dbb commit 1e7c36d
Show file tree
Hide file tree
Showing 5 changed files with 150 additions and 43 deletions.
69 changes: 63 additions & 6 deletions frontend/src/components/SideBar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,9 @@

<template>
<div class="app">
<div class="toggle-button" @click="ToggleMenu">
<span class="material-icons">menu</span>
</div>
<aside :class="`${is_expanded ? 'is-expanded' : ''}`">

<div class="menu">
Expand All @@ -61,7 +64,7 @@
v-if="is_expanded"
:src="LogoDetalhada"
alt="DashUp" />
</div>
</div>

<!--div para o botão Visão Geral-->
<router-link to="/" class="button" :class="{ active: selectedButton === 'overview' }"
Expand Down Expand Up @@ -120,6 +123,7 @@ aside {
position: fixed;
z-index: 1;
/*Parametros globais para os botões da sidebar*/
.button .text {
Expand Down Expand Up @@ -252,7 +256,8 @@ aside {
color: #CCDEE7;
font-size: 13px;
line-height: 15px;
opacity: 0;
opacity: 1;
font-weight: 500;
transition: opacity 0.2s ease-in-out;
white-space: nowrap;
letter-spacing: 0.05em;
Expand Down Expand Up @@ -299,14 +304,66 @@ aside {
}
}
}
.toggle-button {
display: flex;
position: fixed;
align-items: baseline;
justify-content: baseline;
align-content: baseline;
top: 1rem;
left: 1rem;
z-index: 2;
background-color: #245269;
border-radius: 100%;
padding: 10px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
.material-icons {
color: #CCDEE7;
}
@media (max-width: 768px) {
width: var(--sidebar-width-col);
position: fixed;
z-index: 99;
&:hover {
background-color: #1a3d4c;
}
}
@media (max-width: 768px) {
aside {
background: none;
transform: translateY(-100%);
height: fit-content;
width: fit-content;
margin: 0;
transition: transform 0.3s ease;
}
.menu-toggle-wrap.logo-expanded {
margin-bottom: 1rem;
}
.menu-toggle-wrap img {
display: none;
}
.is-expanded {
transform: translateY(0);
}
.toggle-button {
display: block;
}
.button {
background-color: #245269;
opacity: 0.9;
}
.frameInferior {
background-color: #245269;
.button {
background-color: #245269;
opacity: 0.9;
}
}
}
.main {
flex: 1;
transition: margin-left 0.3s ease;
Expand Down
14 changes: 14 additions & 0 deletions frontend/src/components/home_page/Valuable-ProductCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,8 @@ export default {
}
.wrapper {
display: inline-block;
height: 100%;
width: 100%;
}
.wrapper h4 {
Expand Down Expand Up @@ -136,4 +138,16 @@ export default {
color: #1a202c;
text-align: left;
}
@media (max-width: 1024px) {
.valuable-product-card {
height: 100%;
}
.wrapper h4 {
font-size: 1em;
}
.footer p {
font-size: 1.2rem;
}
}
</style>
3 changes: 3 additions & 0 deletions frontend/src/views/HomeView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -199,6 +199,9 @@
}
@media (max-width: 1024px) {
main {
max-width: 100%;
}
.cash-data {
width: 100%;
}
Expand Down
99 changes: 66 additions & 33 deletions frontend/src/views/RegisterView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@
// Variables that will store the email and password
const email = ref('');
const password = ref('');
const confirmPassword = ref('');
const name = ref('');
const passwordMismatch = ref(false);
const errMsg = ref('');
const router = useRouter();
const showPassword = ref(false); // Estado para alternar visibilidade da senha
Expand All @@ -24,28 +27,17 @@ const togglePasswordVisibility = () => {
// Function to create a new user
const register = () => {
if (password.value !== confirmPassword.value) {
passwordMismatch.value = true;
}
else {
createUserWithEmailAndPassword(getAuth(), email.value, password.value)
.then((data) => {
console.log('User created', data);
router.push('/');
})
.catch((error) => {
console.error(error);
switch (error.code) {
case 'auth/email-already-in-use':
errMsg.value = 'Email já está em uso';
break;
case 'auth/invalid-email':
errMsg.value = 'Email inválido';
break;
case 'auth/weak-password':
errMsg.value = 'Senha fraca';
break;
default:
errMsg.value = 'Erro desconhecido';
}
});
};
};
// Function to register with Google
const signInwithGoogle = () => {
Expand All @@ -66,7 +58,7 @@ const togglePasswordVisibility = () => {
<div class="form-container">

<div class="imgLogin">
<img :src="loginImagem" alt="Apresentação" />
<img :src="loginImagem" alt="Apresentação" width="80%"/>
</div>

<form class="loginForm" @submit.prevent="register">
Expand All @@ -78,6 +70,15 @@ const togglePasswordVisibility = () => {

<div class="container">

<label for="name">Nome Completo</label>
<input
id="name"
type="text"
v-model="name"
placeholder="Digite seu nome"
required>


<label for="email"><b>Email</b></label>
<input
id="email"
Expand Down Expand Up @@ -107,12 +108,31 @@ const togglePasswordVisibility = () => {
</button>
</div>

<div v-if="errMsg" class="error-message">
{{ errMsg }}
<header class="confirmation-header" >
<label for="password"><b>Confirme sua senha</b></label>
<span v-if="passwordMismatch" :class="{ show: passwordMismatch }" class="error-message">As senhas não coincidem.</span>
</header>
<div class="input-wrapper">
<input
id="password"
:type="showPassword ? 'text' : 'password'"
v-model="passwordConfirm"
placeholder="Digite sua senha"
required
/>
<button
type="button"
class="toggle-password"
@click="togglePasswordVisibility"
>
<span class="material-icons">
{{ showPassword ? 'visibility' : 'visibility_off' }}
</span>
</button>
</div>

<div class="buttons">
<button type="submit" class="btn-login">Criar conta</button>
<button type="submit" class="btn-login" :disabled="passwordMismatch">Criar conta</button>
<span class="optionLogin">Ou entre com:</span>
<button
type="button"
Expand Down Expand Up @@ -144,12 +164,12 @@ const togglePasswordVisibility = () => {
justify-content: center;
align-items: center;
height: 100vh;
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
.imgLogin {
display: none;
display: none;
}
.loginForm {
Expand Down Expand Up @@ -235,7 +255,6 @@ label {
line-height: 21.6px;
letter-spacing: 0.07em;
color: #538094;
}
/* Style for placeholder text */
Expand Down Expand Up @@ -295,19 +314,33 @@ input {
background: #ffffff;
}
.confirmation-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
}
.error-message {
font-family: 'General Sans Variable', sans-serif;
font-weight: 500;
font-size: 16px;
color: #538094;
font-weight: 500;
letter-spacing: 0.05em;
padding-top: 1.5rem;
text-align: center;
display: block;
background: none;
border: none;
color: #538094;
cursor: pointer;
letter-spacing: 0.07em;
color: #dc7830;
background-color: #f8d3d3;
border: 1px solid #dc7830;
padding: 10px;
border-radius: 16px;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.error-message.show {
transition: opacity 0.3s ease, transform 0.3s ease;
opacity: 1;
transform: translateY(0);
}
.buttons {
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/views/SignInView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ const validateEmail = (email) => {
<div class="form-container">

<div class="imgLogin">
<img :src="loginImagem" alt="Apresentação" />
<img :src="loginImagem" alt="Apresentação" width="80%" />
</div>

<form class="loginForm" @submit.prevent="signIn">
Expand Down Expand Up @@ -207,12 +207,12 @@ const validateEmail = (email) => {
justify-content: center;
align-items: center;
height: 100vh;
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
.imgLogin {
display: none;
display: none;
}
.loginForm {
Expand Down Expand Up @@ -452,7 +452,7 @@ input {
}
.google-content:hover {
background-color: #f4fef4d1;
background-color: #EAEEF0;
transition: all 0.2s ease-in-out;
opacity: 1;
}
Expand Down

0 comments on commit 1e7c36d

Please sign in to comment.