welton/RRBEC
1
0
Fork 0
mirror of https://github.com/welton89/RRBEC.git synced 2026-04-05 05:25:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

page comanda e barra navegação resposivo

Browse Source
This commit is contained in:
Welton Moura
2025-01-05 14:23:44 -03:00
parent f11686dbdb
commit 26af988846
6 changed files with 214 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
gestaoRaul/comandas/templates/comandas.html
View File

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

BIN
gestaoRaul/db.sqlite3
View File

Binary file not shown.

56
gestaoRaul/templates/base.html
View File

@@ -16,23 +16,50 @@
<title> {% block 'title' %}{% endblock %} </title>
</head>
<div>
<!-- aqui o menu -->
<nav >
<header class="p-header">
<nav class="nav-bar">
<div class="logo">
<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>
<li><a href="#">Categorias</a></li>
</ul>
</nav>
<!-- <div class="content">
<h1>Bem-vindo ao meu site!</h1>
</div> -->
</nav> -->
</div>
@@ -40,5 +67,6 @@
{% block 'body' %}
{% endblock %}
<script src="{% static 'htmx_base.js' %}"></script>
<script src="{% static 'base.js' %}"></script>
</body>
</html>

138
gestaoRaul/templates/static/base.css
View File

@@ -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;
}
li a {
display: block;
padding: 15px;
text-decoration: none;
color: #333;
}
li a:hover {
background-color: #ccc;
margin: 0;
font-family: 'Inter', sans-serif;
} */
.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;
}
}

10
gestaoRaul/templates/static/base.js Normal file
View File

@@ -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";
}
}

60
gestaoRaul/templates/static/comandas/css/comandas.css
View File

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