Friday, August 06, 2021
I was working on Surlesol and I was going to push out a minor change and then I rememembered that the navbar was not working properly. That is, when I am logged out and I use the application on mobile the hamburger menu in the upper right corner does not appear. But when I am logged in and I visit on mobile, or collapse the screen, the hamburger menu DOES appear. This is quite strange and I am going to embark on a new search with the phrase "Bootstrap Hamburger Menu Not Appearing on Mobile"
So this is interesting. The biggest difference is that there is an image on the home page now:
- - <img src="{{ MEDIA_URL }}media/staircase-image.jpg">
- + <img src={% static "media/staircase-image.jpg" %}>
I wonder, if I take out this image, will it work?
Also, interestingly enough, back in May I added the navbar to the homepage for the first time, so it is possible that it never worked?
<div class="collapse navbar-collapse" id="navbarSupportedContent">
+ <ul class="navbar-nav mr-auto">
+ <li{% if request.path == "/about/" %} class="nav-item active" {% endif %} >
+ <a class="nav-link" href="/about/">About</a>
+ </li>
+ <li{% if request.path == "/careers/" %} class="nav-item active" {% endif %} >
+ <a class="nav-link" href="/careers/">Careers</a>
+ </li>
+ <li{% if request.path == "/login/" %} class="nav-item active" {% endif %} >
+ <a class="nav-link" href="/login/">Login</a>
+ </li>
+ <li{% if request.path == "/contact/" %} class="nav-item active" {% endif %} >
+ <a class="nav-link" href="/contact/">Contact</a>
+ </li>
+ </ul>
+ </div>
I should definitely add test to ensure that this does not break again.
A third thing I am keeping an eye on is that some JavaScript errors are being thrown. But that would not make sense for the NavBar dropdown to work on one of the pages when authenticated and not on another. How does the other navbar look? Are you missing something?
Ah. There it is. I needed the following button:
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Let's write a test for that!
def test_home_page_has_navbar_toggler_button_if_using_bootstrap(self):
"""NOTE: If we stop using bootstrap for the homepage this will break and we can delete it"""
response = self.client.get('/')
html = response.content.decode('utf8')
self.assertIn('navbar-toggler', html)
self.assertTemplateUsed(response, 'surlesol/base.html')
Good to go! Now, serious question, can I run two docker-containers using docker-compose at the same time on my Mac? I seem to think no, but let's find out. Hmm, it would seem that the limiting factor may just be port numbers?
(base) ➜ stevenrameydotcom git:(master) ✗ dcu
Creating network "stevenrameydotcom_default" with the default driver
Creating stevenrameydotcom_certbot_1 ... done
Creating my_postgres ... done
Creating stevenrameydotcom_django_web ... done
Creating stevenrameydotcom_nginx_1 ...
Creating stevenrameydotcom_nginx_1 ... error
ERROR: for stevenrameydotcom_nginx_1 Cannot start service nginx: driver failed programming external connectivity on endpoint stevenrameydotcom_nginx_1 (c99a89915ece7c121c79cb24c0885e11fc063085c671785d5d247df89f08f6f9): Bind for 0.0.0.0:443 failed: port is already allocated
ERROR: for nginx Cannot start service nginx: driver failed programming external connectivity on endpoint stevenrameydotcom_nginx_1 (c99a89915ece7c121c79cb24c0885e11fc063085c671785d5d247df89f08f6f9): Bind for 0.0.0.0:443 failed: port is already allocated
ERROR: Encountered errors while bringing up the project.
I wonder, since I am writing a bash script to automate some aspects of running Surlesol in development, if I could also write a bash script to run both StevenRamey.com and Surlesol.com in development in Nginx at the same time... This may be a little too ambitious for right now.