Skip to content

Commit

Permalink
feat: ajuste responsividade telas
Browse files Browse the repository at this point in the history
  • Loading branch information
@michelebswm
michelebswm committed Oct 8, 2023
1 parent f07a046 commit 7c422f4
Show file tree
Hide file tree
Showing 11 changed files with 219 additions and 34 deletions.
Binary file modified db.sqlite3
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion filme/templates/editarperfil.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<header class="header">
<div class="content-form">
<div class="title-form">
Edição de Perfil <p>{{ user.username }}</p>
Edição de Perfil
</div>

<form method="post" class="form-editarperfil">
Expand Down
42 changes: 22 additions & 20 deletions filme/templates/homefilmes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,27 +70,29 @@
</div>
</section>

<section class="sec-assistidos">
<div class="subtitle">Filmes Vistos</div>
<div class="container">
<button class="arrow-left3 control3" aria-label="Previous image">
◄
</button>
<button class="arrow-right control3" aria-label="Next image">
►
</button>
<div class="gallery-wrapper">
<div class="gallery">
{% for filme in request.user.filmes_vistos.all %}
<a href="{% url 'filme:detalhesfilme' filme.pk %}">
<img src="{{ filme.thumb.url }}" alt="" class="item3">
<p class="text-list">{{ filme.titulo }}</p>
</a>
{% endfor %}
{% if request.user.filmes_vistos.all %}
<section class="sec-assistidos">
<div class="subtitle">Filmes Vistos</div>
<div class="container">
<button class="arrow-left3 control3" aria-label="Previous image">
◄
</button>
<button class="arrow-right control3" aria-label="Next image">
►
</button>
<div class="gallery-wrapper">
<div class="gallery">
{% for filme in request.user.filmes_vistos.all %}
<a href="{% url 'filme:detalhesfilme' filme.pk %}">
<img src="{{ filme.thumb.url }}" alt="" class="item3">
<p class="text-list">{{ filme.titulo }}</p>
</a>
{% endfor %}
</div>
</div>
</div>
</div>
</section>
</div>
</section>
{% endif %}
</div>
<script src="{% static 'js/carousel.js'%}" charset="utf-8"></script>

Expand Down
6 changes: 3 additions & 3 deletions filme/templates/homepage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,13 @@
Watch on Smart TVs, Playstation, Xbox, Chromecast, Apple TV, Blu-ray players, and more.
</div>
</div>
<div>
<div class="image-sec">
<img src="{% static 'images/tv.png' %}" alt="tv">
</div>
</section>

<section class="section">
<div>
<div class="image-sec">
<img src="{% static 'images/mobile-0819.jpg' %}" alt="mobile">
</div>
<div class="group-txt">
Expand All @@ -75,7 +75,7 @@
Send kids on adventures with their favorite characters in a space made just for them—free with your membership.
</div>
</div>
<div>
<div class="image-sec">
<img src="{% static 'images/netflix_kid.png' %}" alt="hashflix_kid">
</div>
</section>
Expand Down
93 changes: 93 additions & 0 deletions static/css/style_base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,3 +77,96 @@ input[type="search"] {
.navbar-bg {
background-color: rgb(0, 0, 0, 0.95);
}

.hamburger{
display: none;
}

.hamburger {
display: none;
border: none;
background: none;
border-top: 3px solid #fff; /* Cria o primeiro traço do menu hamburger */
cursor: pointer;
}
/* Criando os outros 2 traços do menu hamburger */
.hamburger::after,
.hamburger::before {
content: " ";
display: block;
width: 30px;
height: 3px;
background: #fff;
margin-top: 5px;
position: relative;
transition: 0.3s;
}

@media (max-width: 600px) {

.hamburger {
display: block;
z-index: 1; /* Para ficar acima */
}

.group-nav {
position: fixed;
top: 0;
left: 0;
width: 100vw; /* Equivale a 100% da largura da tela*/
height: 100vh; /* Equivale a 100% da altura da tela*/
background: #3f0e0e;
clip-path: circle(
100px at 90% -15%
); /* circulo de 100px deixando 90% no eixo x e 15% negativo no eixo y*/
transition: 1s ease-out;

flex-direction: column;
justify-content: space-around;
align-items: center;
gap: 0;
pointer-events: none; /* Para o user nao clicar em algo que não está aparecendo na tela*/
}

.group-nav a {
font-size: 24px;
opacity: 0;
}


/* Estilos ativos */

.navbar.active .group-nav {
clip-path: circle(1500px at 90% -15%);
pointer-events: all;
}

.navbar.active .group-nav a {
opacity: 1;
}

.navbar.active .hamburger {
position: fixed;
top: 26px;
right: 16px;
border-top-color: transparent;
}

.navbar.active .hamburger::before {
transform: rotate(135deg);
}

.navbar.active .hamburger::after {
transform: rotate(-135deg);
top: -7px;
}

.nav-btn{
background-color: inherit;
border: none;
}

.nav-btn a{
font-size: 1rem;
}
}
22 changes: 18 additions & 4 deletions static/css/style_criarconta.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
padding: 2rem 4rem;
gap: 1rem;
}
Expand All @@ -45,7 +46,7 @@
font-family: "Montserrat", sans-serif;
color: rgb(255, 255, 255);
font: 2rem bold;
padding-left: 4.9rem;
margin: auto;
padding-top: 2rem;
}

Expand All @@ -63,6 +64,7 @@
height: 3rem;
border-radius: 0.3rem;
outline: none;
margin: auto;
width: 90%;
background-color: rgb(255, 0, 0);
border: transparent;
Expand All @@ -77,9 +79,6 @@
cursor: pointer;
}

.form-criarconta small {
}

.form-criarconta ul {
list-style-type: none; /* Retira o simbolo da lista */
}
Expand All @@ -100,3 +99,18 @@
font-size: 0.8rem;
color: rgb(255, 0, 0);
}

@media (max-width: 501px) {
.content-form {
width: 95%;
}

.form-criarconta {
padding-inline:1rem;
}

.form-criarconta small{
text-align: center;
font-size: 0.8rem;
}
}
19 changes: 16 additions & 3 deletions static/css/style_editarperfil.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,26 +37,33 @@
display: flex;
flex-direction: column;
justify-content: center;
padding: 2rem 4rem;
gap: 1rem;
}

.title-form {
font-family: "Montserrat", sans-serif;
color: rgb(255, 255, 255);
font: 2rem bold;
padding-left: 4.5rem;
padding-top: 2rem;
margin: auto;
padding-block: 2rem;
}

.form-group{
padding-inline: 1rem;
}

.form-editarperfil input {
height: 3rem;
padding-left: 0.8rem;
border-radius: 0.3rem;
outline: none;
width: 90%;
margin: auto;
border: 1px rgb(204, 204, 204);
background-color: #313235;
color: hsl(0, 0%, 100%);
flex-grow: 1;
flex-basis: auto;
}

.form-editarperfil button {
Expand Down Expand Up @@ -101,3 +108,9 @@
font-size: 0.8rem;
color: rgb(255, 0, 0);
}

@media (max-width: 501px) {
.content-form {
width: 95%;
}
}
35 changes: 33 additions & 2 deletions static/css/style_homepage.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,14 @@

.title-header {
color: rgb(255, 255, 255);
font: 3.5rem bold;
font: 2rem bold;
padding: 0.8rem;
}

.paragraph {
padding: 0.8rem;
font: 1.2rem bold;
max-width: 30rem;
}

.form-access {
Expand All @@ -60,13 +61,19 @@

.section {
min-height: 60vh;
padding:1rem 0;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
/* box-shadow: inset 0 0 0.4rem rgb(62, 101, 228), 0 0 0.8rem rgb(25, 25, 26); */
border-bottom: 0.4rem solid rgba(170, 177, 194, 0.5);
}

.image-sec img{
max-width: 100%;
}


.title-sec {
color: rgb(255, 255, 255);
font: 3rem bold;
Expand All @@ -82,3 +89,27 @@
font-size: 0.8rem;
color: rgb(255, 0, 0);
}


@media (max-width: 768px) {
.title-sec {
max-width: 30rem;
}
}

@media (max-width: 682px) {
.section {
justify-content:center;
}
.paragraph,
.title-sec,
.title-header {
text-align: center;
}
}

@media (max-width: 682px) {
.title-sec {
font-size: 2rem;
}
}
24 changes: 24 additions & 0 deletions static/css/style_login.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@
border-radius: 0.3rem;
outline: none;
width: 90%;
margin: auto;
border: 1px rgb(204, 204, 204);
background-color: #313235;
color: hsl(0, 0%, 100%);
Expand All @@ -64,6 +65,7 @@
height: 3rem;
border-radius: 0.3rem;
outline: none;
margin: auto;
width: 90%;
background-color: rgb(255, 0, 0);
border: transparent;
Expand Down Expand Up @@ -107,3 +109,25 @@
font-size: 0.8rem;
color: rgb(255, 0, 0);
}

@media (max-width: 501px) {
.content-form {
width: 95%;
}
.form-login small{
text-align: center;
font-size: 0.8rem;
}
}

@media (max-width: 381px) {
.form-login {
padding: 2rem;
}
.form-login input{
width: 100%;
}
.form-login button{
width: 100%;
}
}
6 changes: 6 additions & 0 deletions static/js/navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,9 @@ document.addEventListener("scroll", (e) => {
nav.classList.remove("invisible");
}
});


const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".navbar");

hamburger.addEventListener("click", () => navbar.classList.toggle("active"));
Loading

0 comments on commit 7c422f4

Please sign in to comment.