From 7c422f4fb3392940246b8a6ab096403c753aeaaa Mon Sep 17 00:00:00 2001 From: Michele de Barros Santos Date: Sun, 8 Oct 2023 11:44:41 -0300 Subject: [PATCH] feat: ajuste responsividade telas --- db.sqlite3 | Bin 159744 -> 159744 bytes filme/templates/editarperfil.html | 2 +- filme/templates/homefilmes.html | 42 +++++++------- filme/templates/homepage.html | 6 +- static/css/style_base.css | 93 ++++++++++++++++++++++++++++++ static/css/style_criarconta.css | 22 +++++-- static/css/style_editarperfil.css | 19 +++++- static/css/style_homepage.css | 35 ++++++++++- static/css/style_login.css | 24 ++++++++ static/js/navbar.js | 6 ++ templates/navbar.html | 4 +- 11 files changed, 219 insertions(+), 34 deletions(-) diff --git a/db.sqlite3 b/db.sqlite3 index b2fa2875fb9fe447a89eccb133aaab44f96973c1..2d9c8eb7d9fbdcb6fb2622d79b6205f405a8037c 100644 GIT binary patch delta 558 zcmZp8z}fJCbAmMEvWYUzjLSAAJkw)j-|Vix%RrPxlYyOKCj(zA_hqKz9JXAmS=$+Q zPBs)+%-zDx&dH!|-_9@1xcO+pdqzg4&0CU68Ce(@7~?kUrbIDvw;Ho?GHBX&#!E78 zHc6SzG{{}cW@{8u&$HXPs=U}I-tU}R)wXJZ4?Y}=pcGb#iC6<=lG|IPoF{|o<9{=58F zfr=0E3$U{=g4D7@Xg0R#Px~3=fodNx@c-fe&i@H$^fUekK(%N1d03f2O2H)C^f&Vv zC4lPgfz*BAf5ra|=!APfb*CWe*um=9*tWk~&nVTv!63lEz;};#+h#?DHN4w**fOax zY5@JOHq)$ delta 532 zcmZp8z}fJCbAmME%!xA2j59YTJkw)j-R!Qv%RrRv9s@hWE(X3LH-Zq`kSV%+>R&4p3U$iT>0*T7QO z$V9=&*vizv%E*#|fia#z(XrW6l5_L6EKWvw3^j&EEmG4b6&2R-Zr@?cq{gVxB+tm|+wALTXi-#DSZ-uiTAY_< zSx}K_o|{&fU7TN$m{?e4VxFHqoz0$UgIB&|xq(%#PkLZbnn#F}PlUTkut$-Jlc$A& zNvL^Pa$cCDWmZ70ZcbjXdvH!>kO??Q3=MP*EkMC$U}|Mzpl4)iY+zuy&4GzUfSHm1 w&UW?yrmOr0%FMo;gxtWz01R{fM-2Rr_zwd;w~K%Jv3w>OIay{$PTUp&08<#HeE
- Edição de Perfil

{{ user.username }}

+ Edição de Perfil
diff --git a/filme/templates/homefilmes.html b/filme/templates/homefilmes.html index 339f88d..36149d6 100644 --- a/filme/templates/homefilmes.html +++ b/filme/templates/homefilmes.html @@ -70,27 +70,29 @@
-
-
Filmes Vistos
-
- - -
-
- {% for filme in request.user.filmes_vistos.all %} - - -

{{ filme.titulo }}

- - {% endfor %} + {% if request.user.filmes_vistos.all %} +
+
Filmes Vistos
+
+ + +
+
+ {% for filme in request.user.filmes_vistos.all %} + + +

{{ filme.titulo }}

+ + {% endfor %} +
-
-
-
+ + + {% endif %} diff --git a/filme/templates/homepage.html b/filme/templates/homepage.html index 707a536..86911cc 100644 --- a/filme/templates/homepage.html +++ b/filme/templates/homepage.html @@ -47,13 +47,13 @@ Watch on Smart TVs, Playstation, Xbox, Chromecast, Apple TV, Blu-ray players, and more. -
+
tv
-
+
mobile
@@ -75,7 +75,7 @@ Send kids on adventures with their favorite characters in a space made just for them—free with your membership.
-
+
hashflix_kid
diff --git a/static/css/style_base.css b/static/css/style_base.css index 38afb16..8efcb15 100644 --- a/static/css/style_base.css +++ b/static/css/style_base.css @@ -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; + } +} diff --git a/static/css/style_criarconta.css b/static/css/style_criarconta.css index 00d6ac6..1b00eab 100644 --- a/static/css/style_criarconta.css +++ b/static/css/style_criarconta.css @@ -37,6 +37,7 @@ display: flex; flex-direction: column; justify-content: center; + flex-wrap: wrap; padding: 2rem 4rem; gap: 1rem; } @@ -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; } @@ -63,6 +64,7 @@ height: 3rem; border-radius: 0.3rem; outline: none; + margin: auto; width: 90%; background-color: rgb(255, 0, 0); border: transparent; @@ -77,9 +79,6 @@ cursor: pointer; } -.form-criarconta small { -} - .form-criarconta ul { list-style-type: none; /* Retira o simbolo da lista */ } @@ -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; + } +} diff --git a/static/css/style_editarperfil.css b/static/css/style_editarperfil.css index 21822e3..82103ce 100644 --- a/static/css/style_editarperfil.css +++ b/static/css/style_editarperfil.css @@ -37,7 +37,6 @@ display: flex; flex-direction: column; justify-content: center; - padding: 2rem 4rem; gap: 1rem; } @@ -45,8 +44,12 @@ 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 { @@ -54,9 +57,13 @@ 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 { @@ -101,3 +108,9 @@ font-size: 0.8rem; color: rgb(255, 0, 0); } + +@media (max-width: 501px) { + .content-form { + width: 95%; + } +} diff --git a/static/css/style_homepage.css b/static/css/style_homepage.css index b29e29d..28e8de6 100644 --- a/static/css/style_homepage.css +++ b/static/css/style_homepage.css @@ -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 { @@ -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; @@ -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; + } +} diff --git a/static/css/style_login.css b/static/css/style_login.css index b696409..7bfe8cd 100644 --- a/static/css/style_login.css +++ b/static/css/style_login.css @@ -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%); @@ -64,6 +65,7 @@ height: 3rem; border-radius: 0.3rem; outline: none; + margin: auto; width: 90%; background-color: rgb(255, 0, 0); border: transparent; @@ -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%; + } +} diff --git a/static/js/navbar.js b/static/js/navbar.js index 0ea24e1..4d2cd42 100644 --- a/static/js/navbar.js +++ b/static/js/navbar.js @@ -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")); diff --git a/templates/navbar.html b/templates/navbar.html index 49b8f84..629fcdf 100644 --- a/templates/navbar.html +++ b/templates/navbar.html @@ -6,6 +6,8 @@
+ +
{% if user.is_authenticated %} @@ -15,7 +17,7 @@ {% endif %} {% if user.is_authenticated %}
- Sair + Sair
{% else %}