wip: styling the navbar - badly

2 files changed, 110 insertions, 53 deletions

diff --git a/alphabetlearning/static/css/project.css b/alphabetlearning/static/css/project.css
index 7835f2e..923d397 100644
--- a/alphabetlearning/static/css/project.css
+++ b/alphabetlearning/static/css/project.css
@@ -2,6 +2,8 @@
     /* --link-colour: rgb(64, 21, 92); */
     --link-colour: darkslategray;
     --dark-gray: #4c4c4c;
+    border: solid darkgray;
+    border-radius: 3px;
 }
 
 * {
@@ -9,8 +11,65 @@
     margin: 0;
     padding: 0;
     font-size: 16px;
-    font-family: "Noto Sans", Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, sans-serif;
 }
+
+/* 
+  Extra small devices (phones, 600px and down) 
+*/
+@media only screen and (max-width: 600px) {
+  nav {
+    flex-direction: column;
+  }
+  nav ul {
+    flex-direction: column;
+    padding-top: 0.5rem;
+    padding-left: 10px;
+  }
+  nav li {
+    padding: 0.5rem 0;
+  }
+} 
+
+
+nav ul {
+    border: solid darkgray;
+    border-radius: 3px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    list-style: none;
+    background-color: white;
+    margin: 0;
+    padding: 0;
+}
+
+nav ul li {
+    display: inline;
+    padding-left: 1rem;
+    font: Helvetica;
+    color: black;
+    text-align: center;
+}
+
+nav a {
+    text-decoration: none;
+    color: #0d47a1;
+    font-size: 1.3rem;
+    font-style: bold;
+}
+
+nav ul li:hover {
+    background-color: lightgray;
+}
+
+.empty-basket {
+    background-color: white;
+    padding: 3px 20px;
+    margin: 1.1rem 1.1rem;
+
+}
+
 .section-title {
     position: relative;
     width: max-content;
diff --git a/alphabetlearning/templates/base.html b/alphabetlearning/templates/base.html
index 2979f33..693a839 100644
--- a/alphabetlearning/templates/base.html
+++ b/alphabetlearning/templates/base.html
@@ -37,62 +37,60 @@
                 <a href="{% url "home" %}">
                     <img src="{% static "images/AL_long_logo_black_grey.png" %}" width=300px alt="Alphabet Learning Logo">
                 </a>
-                <div>
-                    <ul>
-                        <li>
-                            {% if request.user.is_authenticated %}
-                            <a href="{% url "users:detail" request.user.id %}">{{ request.user }}</a>
-                            {% else %}
-                            <a href="{% url "account_login" %}">Log in</a>
-                            {% endif %}
-                        </li>
+                <ul>
 
-                        <li>
-                            <a href="{% url "resources:resource_list" %}">Resources</a>
-                        </li>
-                        <li>
-                            <a href="https://www.tes.com/teaching-resources/shop/joannalemon"
-                               target="_blank">TES Shop</a>
-                        </li>
-                        <li>
-                            <a href="https://joannalemon.etsy.com/" target="_blank">Etsy</a>
-                        </li>
-                        <li>
-                            <a href="https://blog.joannalemon.com" target="_blank">Blog</a>
-                        </li>
-                        <li>
-                            {% if request.user.is_authenticated %}
-                            <a href="{% url "account_logout" %}">Log out</a>
-                            {% endif %}
-                        </li>
-                        <li>
-                            {% if request.user.shoppingcart %}
+                    <li>
+                        <a href="{% url "resources:resource_list" %}">Resources</a>
+                    </li>
+                    <li>
+                        <a href="https://www.tes.com/teaching-resources/shop/joannalemon"
+                           target="_blank">TES Shop</a>
+                    </li>
+                    <li>
+                        <a href="https://joannalemon.etsy.com/" target="_blank">Etsy</a>
+                    </li>
+                    <li>
+                        <a href="https://blog.joannalemon.com" target="_blank">Blog</a>
+                    </li>
+                    <li>
+                        {% if request.user.is_authenticated %}
+                        <a href="{% url "account_logout" %}">Log out</a>
+                        {% endif %}
+                    </li>
+                    <li>
+                        {% if request.user.is_authenticated %}
+                        <a href="{% url "users:detail" request.user.id %}">My profile</a>
+                        {% else %}
+                        <a href="{% url "account_login" %}">Log in</a>
+                        {% endif %}
+                    </li>
+                    <li>
+                        {% if request.user.shoppingcart %}
 
-                            <!- TODO - fix this, the logic should be different button if no cart ->
-                            <! this is a problem because it seems you can have an empty cart ->
-                                <a href="{% url "payments:cart_detail" %}" class="full-basket-button">
-                                    <span>
-                                        Items in cart (
-                                        {{ request.user.shoppingcart.items.count }}
-                                        )
-                                    </span>
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bag" viewBox="0 0 16 16">
-                                        <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/>
-                                    </svg>
-                                </a>
+                        <div>
+                        <a href="{% url "payments:cart_detail" %}">
+                            <span>
+                                Items in cart (
+                                {{ request.user.shoppingcart.items.count }}
+                                )
+                            </span>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bag" viewBox="0 0 16 16">
+                                <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/>
+                            </svg>
+                        </a>
+                        </div>
 
-                            {% else %}
+                        {% else %}
 
-                                <button disabled><span class="fw-bold px-1">Empty Basket</span>	
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bag-x" viewBox="0 0 16 16">
-                                        <path fill-rule="evenodd" d="M6.146 8.146a.5.5 0 0 1 .708 0L8 9.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 10l1.147 1.146a.5.5 0 0 1-.708.708L8 10.707l-1.146 1.147a.5.5 0 0 1-.708-.708L7.293 10 6.146 8.854a.5.5 0 0 1 0-.708"/>
-                                        <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/>
-                                    </svg>
-                                </button>
-                            {% endif %}
-                        </li>
-                    </ul>
-                </div>
+                        <div class="empty-basket">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bag-x" viewBox="0 0 16 16">
+                                <path fill-rule="evenodd" d="M6.146 8.146a.5.5 0 0 1 .708 0L8 9.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 10l1.147 1.146a.5.5 0 0 1-.708.708L8 10.707l-1.146 1.147a.5.5 0 0 1-.708-.708L7.293 10 6.146 8.854a.5.5 0 0 1 0-.708"/>
+                                <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/>
+                            </svg>
+                        </div>
+                        {% endif %}
+                    </li>
+                </ul>
             </nav>
             <div></div>
         </header>