Spaces:
Paused
Paused
Update app.py
Browse files
app.py
CHANGED
|
@@ -1,4 +1,3 @@
|
|
| 1 |
-
|
| 2 |
from flask import Flask, render_template_string, request, redirect, url_for
|
| 3 |
import json
|
| 4 |
import os
|
|
@@ -125,7 +124,7 @@ def catalog():
|
|
| 125 |
|
| 126 |
.products-grid {
|
| 127 |
display: grid;
|
| 128 |
-
grid-template-columns: repeat(
|
| 129 |
gap: 20px;
|
| 130 |
padding: 0 15px;
|
| 131 |
}
|
|
@@ -205,7 +204,7 @@ def catalog():
|
|
| 205 |
|
| 206 |
@media (max-width: 768px) {
|
| 207 |
.products-grid {
|
| 208 |
-
grid-template-columns: repeat(
|
| 209 |
gap: 10px;
|
| 210 |
}
|
| 211 |
|
|
@@ -426,7 +425,7 @@ def admin():
|
|
| 426 |
padding: 20px;
|
| 427 |
border: 1px solid #ddd;
|
| 428 |
border-radius: 5px;
|
| 429 |
-
max-width:
|
| 430 |
margin-bottom: 20px;
|
| 431 |
}
|
| 432 |
label {
|
|
@@ -440,6 +439,7 @@ def admin():
|
|
| 440 |
margin-top: 5px;
|
| 441 |
border: 1px solid #ddd;
|
| 442 |
border-radius: 4px;
|
|
|
|
| 443 |
}
|
| 444 |
button {
|
| 445 |
margin-top: 15px;
|
|
@@ -470,6 +470,25 @@ def admin():
|
|
| 470 |
border-radius: 5px;
|
| 471 |
background-color: #f9f9f9;
|
| 472 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 473 |
</style>
|
| 474 |
</head>
|
| 475 |
<body>
|
|
|
|
|
|
|
| 1 |
from flask import Flask, render_template_string, request, redirect, url_for
|
| 2 |
import json
|
| 3 |
import os
|
|
|
|
| 124 |
|
| 125 |
.products-grid {
|
| 126 |
display: grid;
|
| 127 |
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
| 128 |
gap: 20px;
|
| 129 |
padding: 0 15px;
|
| 130 |
}
|
|
|
|
| 204 |
|
| 205 |
@media (max-width: 768px) {
|
| 206 |
.products-grid {
|
| 207 |
+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
| 208 |
gap: 10px;
|
| 209 |
}
|
| 210 |
|
|
|
|
| 425 |
padding: 20px;
|
| 426 |
border: 1px solid #ddd;
|
| 427 |
border-radius: 5px;
|
| 428 |
+
max-width: 100%; /* Make form responsive */
|
| 429 |
margin-bottom: 20px;
|
| 430 |
}
|
| 431 |
label {
|
|
|
|
| 439 |
margin-top: 5px;
|
| 440 |
border: 1px solid #ddd;
|
| 441 |
border-radius: 4px;
|
| 442 |
+
box-sizing: border-box; /* Include padding and border in the element's total width and height */
|
| 443 |
}
|
| 444 |
button {
|
| 445 |
margin-top: 15px;
|
|
|
|
| 470 |
border-radius: 5px;
|
| 471 |
background-color: #f9f9f9;
|
| 472 |
}
|
| 473 |
+
|
| 474 |
+
/* Media query for mobile devices */
|
| 475 |
+
@media (max-width: 600px) {
|
| 476 |
+
body {
|
| 477 |
+
margin: 10px;
|
| 478 |
+
}
|
| 479 |
+
h1 {
|
| 480 |
+
font-size: 24px;
|
| 481 |
+
}
|
| 482 |
+
form {
|
| 483 |
+
padding: 10px;
|
| 484 |
+
}
|
| 485 |
+
.product-item {
|
| 486 |
+
padding: 10px;
|
| 487 |
+
}
|
| 488 |
+
input[type="file"] {
|
| 489 |
+
margin-bottom: 10px;
|
| 490 |
+
}
|
| 491 |
+
}
|
| 492 |
</style>
|
| 493 |
</head>
|
| 494 |
<body>
|