Made the navbar responsive down to 350px #35
Conversation
ruioliveira02
left a comment
ruioliveira02
left a comment
There was a problem hiding this comment.
If I click on the go to button on the home page nothing happens and the button disappears. This happens only in the unauthenticated pages.
I think the dropdown should start right after the button ends vertically, as to not have any overlap which makes it a bit awkward to use
JoseBambora
force-pushed
the
jc/navbar_friendly
branch
from
947183f to
95c3114
Compare
ruioliveira02
left a comment
ruioliveira02
left a comment
There was a problem hiding this comment.
On mobile it is off center (there is some extra padding coming from the <ul> tags.
| <ul> | ||
| <a href={subentry.url}><%= subentry.title %></a> | ||
| </ul> |
There was a problem hiding this comment.
You should not be using <ul> here. If anything, it should be a <li> tag and you put the <ul> on top of the for loop
<ul>
<%= for .... do %>
<li>
...
</li>
<% end %>
</ul>
ruioliveira02
left a comment
ruioliveira02
left a comment
There was a problem hiding this comment.
Make sure to format / lint your code so the checks pass
| <script> | ||
| var isClicked = false | ||
| function pixeis(){ | ||
| var result = false | ||
| if(window.innerWidth < 700) | ||
| result = true | ||
| return result | ||
| } | ||
| function scene1() | ||
| { | ||
| document.getElementById("menu2").className = "text-center" | ||
| document.getElementById("content").className = "hidden" | ||
| document.getElementById("menu").className = "hidden" | ||
| } | ||
| function scene2() | ||
| { | ||
| document.getElementById("menu").className = "text-center" | ||
| document.getElementById("menu2").className = "hidden" | ||
| document.getElementById("content").className = "container" | ||
| } | ||
| function clickedbutton() { | ||
| isClicked = !isClicked | ||
| if(isClicked){ | ||
| if(pixeis()) | ||
| scene1(); | ||
| else | ||
| scene2(); | ||
| } | ||
| else{ | ||
| document.getElementById("menu").className = "hidden" | ||
| document.getElementById("menu2").className = "hidden" | ||
| document.getElementById("content").className = "container" | ||
| } | ||
| } | ||
| function resized() | ||
| { | ||
| if(isClicked) | ||
| if(pixeis()) | ||
| scene1() | ||
| else | ||
| scene2() | ||
| } | ||
| window.onresize = resized; | ||
| </script> |
There was a problem hiding this comment.
I am not a fan of this. Maybe we can use Alpine.js and Tailwind's breakpoints to clean this up (@nelsonmestevao)
There was a problem hiding this comment.
I think it would be really cool to use Alpine and tailwind breakpoints. Should I add alpine to this project?
There was a problem hiding this comment.
Yes I think it would be a good addition
Made the navbar mobile friendly, fixed a typo error and changed the name "performancelive" to "karaoke_performance_id" in order to be more intuitive of what it represent.