brincando com css

This commit is contained in:
2024-12-16 20:54:18 -03:00
parent a840781473
commit 1e0e4d7b6f
12 changed files with 2861 additions and 23 deletions

View File

@@ -13,24 +13,24 @@ Comandas
{% block 'body' %} {% block 'body' %}
<body> <body>
<div class="grid-container"> <button id="openModal">Abrir Comanda</button>
<button class="button" id="openModal">Abrir Comanda</button> <div class="container ">
{% for comanda in comandas %} {% for comanda in comandas %}
<a href="{% url 'viewcomanda' %}?parametro={{ comanda.id }}"><div class="card" > <a href="{% url 'viewcomanda' %}?parametro={{ comanda.id }}"><article >
{{comanda.name}} <br> <header> {{comanda.name}} </header><br>
{{comanda.mesa}} {{comanda.mesa}}
</div></a> </article></a>
{% endfor %} {% endfor %}
</div> </div>
<div class="modal" id="Modal-create-comanda"> <dialog id="Modal-create-comanda">
<div class="modal-content"> <article >
<form id="form-comanda" method="post" action="{% url 'createComanda' %}"> <form id="form-comanda" method="post" action="{% url 'createComanda' %}">
{% csrf_token %} {% csrf_token %}
<h2>Abrir Comanda</h2> <h2>Abrir Comanda</h2>
@@ -45,8 +45,8 @@ Comandas
<button type="submit">Abrir</button> <button type="submit">Abrir</button>
<button type="button" onclick="closeModal()" style="background-color:red;">Fechar</button> <button type="button" onclick="closeModal()" style="background-color:red;">Fechar</button>
</form> </form>
</div> </article>
</div> </dialog >
</body> </body>
<script src="{% static 'comandas/js/comandas.js' %}"></script> <script src="{% static 'comandas/js/comandas.js' %}"></script>

Binary file not shown.

View File

@@ -26,7 +26,14 @@ SECRET_KEY = 'django-insecure-mqcnrs5!hc6bj$&#0@@9d8^2@x#w&$qhk3vlr5_)3znd9h6&d8
# SECURITY WARNING: don't run with debug turned on in production! # SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True DEBUG = True
ALLOWED_HOSTS = [] ALLOWED_HOSTS = [
'192.168.0.100',
'http://192.168.0.100',
'https://192.168.0.100',
'192.168.0.100/24',
'localhost',
'127.0.0.1',
]
# Application definition # Application definition

View File

@@ -19,8 +19,8 @@ Produtos
<body> <body>
<div class="grid-container"> <div class="grid-container">
<div><input type="text"></div> <div class="pico"><input class="pico" type="text"></div>
<button class="button" id="openModal">Adicionar Novo Produto</button> <button class="pico" id="openModal">Adicionar Novo Produto</button>
{% for product in products %} {% for product in products %}

View File

@@ -8,7 +8,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'base.css' %}"> <link rel="stylesheet" href="{% static 'pico.css' %}">
<script src="{% static 'htmx_base.js' %}"></script> <script src="{% static 'htmx_base.js' %}"></script>
{% block 'head' %} {% block 'head' %}
@@ -17,9 +17,9 @@
</head> </head>
<div> <div>
aqui o menu <!-- aqui o menu -->
<div class="sidebar"> <nav >
<ul> <ul>
<li><a href="#">Home</a></li> <li><a href="#">Home</a></li>
<li><a href="{% url 'mesas' %}">Mesas</a></li> <li><a href="{% url 'mesas' %}">Mesas</a></li>
@@ -28,10 +28,10 @@
<li><a href="#">Categorias</a></li> <li><a href="#">Categorias</a></li>
<li><a href="#">Sobre</a></li> <li><a href="#">Sobre</a></li>
</ul> </ul>
</div> </nav>
<div class="content"> <!-- <div class="content">
<h1>Bem-vindo ao meu site!</h1> <h1>Bem-vindo ao meu site!</h1>
</div> </div> -->
</div> </div>

File diff suppressed because one or more lines are too long

View File

@@ -1,14 +1,14 @@
.grid-container { .grid-container {
display: grid; display: grid;
grid-template-columns: repeat(3, 2fr); grid-template-columns: repeat(4, 2fr);
gap: 20px; gap: 20px;
max-width: 800px; /* Define a largura máxima do grid */ max-width: 800px; /* Define a largura máxima do grid */
margin: 0 auto; /* Centraliza o grid na página */ margin: 0 auto; /* Centraliza o grid na página */
} }
.card { .card {
width: 220px; width: 120px;
height: 220px; height: 120px;
background-color: #f2f2f2; background-color: #f2f2f2;
border-radius: 15px; border-radius: 15px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
@@ -77,3 +77,11 @@ input, textarea {
border-radius: 5px; border-radius: 5px;
border: 1px solid #ccc; border: 1px solid #ccc;
} }
@media (min-width: 768px) {
.grid-containerid {
grid-template-columns: repeat(3, 1fr);
/* grid-template-columns: repeat(auto-fit, minmax(2%, 3fr)); */
}
}

View File

@@ -1,6 +1,6 @@
.grid-container { .grid-container {
display: grid; display: grid;
grid-template-columns: repeat(2, 2fr); grid-template-columns: repeat(1, 2fr);
gap: 10px; gap: 10px;
max-width: 800px; /* Define a largura máxima do grid */ max-width: 800px; /* Define a largura máxima do grid */
margin: 0 auto; /* Centraliza o grid na página */ margin: 0 auto; /* Centraliza o grid na página */

View File

@@ -1,5 +1,7 @@
function openModal() { function openModal() {
document.getElementById('Modal-create-comanda').style.display = 'block'; document.getElementById('Modal-create-comanda').style.display = 'block';
// HTMLDialogElement.show()
// HTMLDialogElement.showModal()
} }
function closeModal() { function closeModal() {

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff