page comanda e barra navegação resposivo

gestaoRaul/comandas/templates/comandas.html

@@ -17,21 +17,23 @@ Comandas
     <div class="grid-container ">
 
     {% for comanda in comandas %}
-    
+    <div class="card-comanda">
       <a  href="{% url 'viewcomanda' %}?parametro={{ comanda.id }}" style="text-decoration: none;">
-      <article  > 
         <header 
           {% if comanda.status == 'OPEN' %}
-      style="background-color: #036800;"
+          style="min-height: 60px;border-radius: 10px 10px 0px 0px; background-color: #036800;"
           {% elif comanda.status == 'PAYING' %}
-      style="background-color: rgb(165, 86, 33);"
+          style="min-height: 60px;border-radius: 10px 10px 0px 0px; background-color: rgb(165, 86, 33);"
           {% endif %}
-      > {{comanda.name}}  | {{comanda.mesa}}</header><br>
+            > 
-      <p>Aberta ás: {{comanda.dt_open|date:"H:i"}}</p>
+            {{comanda.name}} | {{comanda.mesa}}
-        
+        </header>
-    
+          <br>
-  </article></a>
+            <p>
-
+              Aberta ás: {{comanda.dt_open|date:"H:i"}}
+            </p>
+      </a>
+    </div>
     {% endfor %} 
 
 

gestaoRaul/templates/base.html

@@ -16,23 +16,50 @@
     <title>  {% block 'title' %}{% endblock  %} </title>
 </head>
 <div>
-    
+    <header class="p-header">
-    <!-- aqui o menu -->
+        <nav class="nav-bar">
-    
+            <div class="logo">
-    <nav >
+                <h1>RRBEC</h1>
+            </div>
+            <div class="nav-list">
+                <ul>
+                    <li class="nav-item"><a href="{% url 'home' %}" class="nav-link">Início</a></li>
+                    <li class="nav-item"><a href="{% url 'comandas' %}" class="nav-link">Comandas</a></li>
+                    <li class="nav-item"><a href="{% url 'viewBalcao' %}" class="nav-link"> Balcão</a></li>
+                    <li class="nav-item"><a href="{% url 'mapMesas' %}" class="nav-link"> Mapa</a></li>
+                    <li class="nav-item"><a href="{% url 'products' %}" class="nav-link"> Produtos</a></li>
+                </ul>
+            </div>
+            <div class="login-button">
+                <button><a href="#">Entrar</a></button>
+            </div>
+
+            <div class="mobile-menu-icon">
+                <button onclick="menuShow()"><img class="icon" src="https://raw.githubusercontent.com/Larissakich/menu_responsivo/6e3b09504434628c1b01f65b7d8ccf6ace3225cb/menu%20responsivo/assets/img/menu_white_36dp.svg" alt=""></button>
+            </div>
+        </nav>
+        <div class="mobile-menu">
+            <ul>
+                <li class="nav-item"><a href="{% url 'home' %}" class="nav-link">Início</a></li>
+                <li class="nav-item"><a href="{% url 'comandas' %}" class="nav-link">Comandas</a></li>
+                <li class="nav-item"><a href="{% url 'viewBalcao' %}" class="nav-link">Balcão</a></li>
+                <li class="nav-item"><a href="{% url 'mapMesas' %}" class="nav-link">Mapa</a></li>
+                <li class="nav-item"><a href="{% url 'products' %}" class="nav-link">Produtos</a></li>
+            </ul>
+
+            <div class="login-button">
+                <button><a href="#">Entrar</a></button>
+            </div>
+        </div>
+    </header>
+        
+    <!-- <nav >
         <ul>
-            <li><a href="{% url 'home' %}">Home</a></li>
             <li><a href="{% url 'mesas' %}">Mesas</a></li>
-            <li><a href="{% url 'comandas' %}">Comandas</a></li>
-            <li><a href="{% url 'products' %}">Produtos</a></li>
-            <li><a href="{% url 'viewBalcao' %}">Balcão</a></li>
-            <li><a href="{% url 'mapMesas' %}">Mapa de Mesas</a></li>
             <li><a href="#">Categorias</a></li> 
         </ul>
-    </nav>
+    </nav> -->
-    <!-- <div class="content">
+
-        <h1>Bem-vindo ao meu site!</h1>
-    </div> -->
     
     
 </div>
@@ -40,5 +67,6 @@
     {% block 'body' %}
     {% endblock  %}
     <script src="{% static 'htmx_base.js' %}"></script>
+    <script src="{% static 'base.js' %}"></script>
 </body>
 </html>

gestaoRaul/templates/static/base.css

@@ -1,36 +1,116 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap');
 body {
-    margin: 15px;
+    margin: 0px 0px 0px 0px;
     padding: 15px;
     font-family: Arial, sans-serif;
 }
 
-/* .sidebar {
+/* * {
-    height: 100vh;
-    width: 200px;
-    background-color: #f1f1f1;
-    padding: 20px;
-    position: fixed;
-    top: 0;
-    left: 0;
-}
-
-.content {
-    margin-left: 220px; 
-    padding: 20px;
-}
-
-ul {
-    list-style-type: none;
     padding: 0;
-}
+    margin: 0;
-
+    font-family: 'Inter', sans-serif;
-li a {
-    display: block;
-    padding: 15px;
-    text-decoration: none;
-    color: #333;
-}
-
-li a:hover {
-    background-color: #ccc;
 } */
+
+.p-header {
+    background-color: #24252a;
+    box-shadow: 0px 3px 10px #464646;
+}
+
+.nav-bar {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.1rem 2rem;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+}
+
+.logo h1 {
+    color: #fff;
+}
+
+.nav-list {
+    display: flex;
+    align-items: center;
+}
+
+.nav-list ul {
+    display: flex;
+    justify-content: center;
+    list-style: none;
+}
+
+.nav-item {
+    margin: 0 15px;
+}
+
+.nav-link {
+    text-decoration: none;
+    font-size: 1.15rem;
+    color: #fff;
+    font-weight: 400;
+}
+
+.login-button button {
+    border: none;
+    padding: 10px 15px;
+    border-radius: 5px;
+    background-color: #0187a7;
+}
+
+.login-button button a {
+    text-decoration: none;
+    color: #fff;
+    font-weight: 500;
+    font-size: 1.1rem;
+}
+
+.mobile-menu-icon {
+    display: none;
+}
+
+.mobile-menu {
+    display: none;
+}
+
+@media screen and (max-width: 730px) {
+    .nav-bar {
+        padding: 0.1rem 2rem;
+    }
+    .nav-item {
+        display: none;
+    }
+    .login-button {
+        display: none;
+    }
+    .mobile-menu-icon {
+        display: block;
+    }
+    .mobile-menu-icon button {
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+    }
+    .mobile-menu ul {
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        padding-bottom: 1rem;
+    }
+    .mobile-menu .nav-item {
+        display: block;
+        padding-top: 1.2rem;
+    }
+    .mobile-menu .login-button {
+        display: block;
+        padding: 1rem 2rem;
+    }
+    .mobile-menu .login-button button {
+        width: 100%;
+    }
+    .open {
+        display: block;
+    }
+}

gestaoRaul/templates/static/base.js

@@ -0,0 +1,10 @@
+function menuShow() {
+    let menuMobile = document.querySelector('.mobile-menu');
+    if (menuMobile.classList.contains('open')) {
+        menuMobile.classList.remove('open');
+        document.querySelector('.icon').src = "https://raw.githubusercontent.com/Larissakich/menu_responsivo/6e3b09504434628c1b01f65b7d8ccf6ace3225cb/menu%20responsivo/assets/img/menu_white_36dp.svg";
+    } else {
+        menuMobile.classList.add('open');
+        document.querySelector('.icon').src = "https://raw.githubusercontent.com/Larissakich/menu_responsivo/6e3b09504434628c1b01f65b7d8ccf6ace3225cb/menu%20responsivo/assets/img/close_white_36dp.svg";
+    }
+}

gestaoRaul/templates/static/comandas/css/comandas.css

@@ -1,20 +1,23 @@
 .grid-container {
   display: grid;
-    grid-template-columns: repeat(3, 2fr);
+  grid-template-columns: repeat(5, 2fr);
-    gap: 20px;
+  gap: 10px;
-    max-width: 90%; /* Define a largura máxima do grid */
+  max-width: 95%; 
-    margin: 0 auto; /* Centraliza o grid na página */
+  margin-top: 40px;
+  /* margin: 0 auto;  */
 }
 
-.card {
+
-    width: 120px;
+.card-comanda {
-    height: 120px;
+  width: 80%;
-    background-color: #f2f2f2;
+  /* min-width: 220px;
-    border-radius: 15px;
+  min-height: 250px; */
+  background-color: #292929;
+  border-radius: 10px 10px 5px 5px;
   box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
   text-align: center;
-    line-height: 50px; /* Centraliza o texto verticalmente */
+  line-height: 30px; 
-    font-size: 20px;
+  font-size: 15px;
   font-weight: bold;
   color: #333;
   transition: transform 0.2s;
@@ -79,9 +82,18 @@ input, textarea {
 }
 
 
-@media (min-width: 768px) {
+@media (max-width: 768px) {
-    .grid-containerid {
+  .grid-container {
-        grid-template-columns: repeat(3, 1fr);
+    display: flex;
-      /* grid-template-columns: repeat(auto-fit, minmax(2%, 3fr)); */
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  .card-comanda {
+    width: 31%;
+      font-size: 15px;
+      font-weight: bold;
+      color: #333;
+      transition: transform 0.2s;
     }
 }