forked from orson/bachemap
added support for mobile and tablet
This commit is contained in:
parent
b206c1def3
commit
8b98ac3004
@ -5,3 +5,5 @@ Un mapa comunitario para visibilizar todo lo que está mal con nuestra vía púb
|
|||||||
Antes de subirlo a producción, CAMBIA LA LLAVE SECRETA DE LA BASE DE DATOS!!!
|
Antes de subirlo a producción, CAMBIA LA LLAVE SECRETA DE LA BASE DE DATOS!!!
|
||||||
|
|
||||||
Aparte de instalar el contenido de requirements.txt, ocupas tener corriendo el servicio de mongodb (sudo apt install mongodb && sudo systemctl start mongodb)
|
Aparte de instalar el contenido de requirements.txt, ocupas tener corriendo el servicio de mongodb (sudo apt install mongodb && sudo systemctl start mongodb)
|
||||||
|
|
||||||
|
El primer usuario se agrega manualmente en terminal con el comando "flask add_user"
|
||||||
@ -86,3 +86,95 @@ nav {
|
|||||||
text-shadow: -1px 0 rgb(255, 136, 0), 0 1px rgb(255, 136, 0), 1px 0 rgb(255, 136, 0), 0 -1px rgb(255, 136, 0);
|
text-shadow: -1px 0 rgb(255, 136, 0), 0 1px rgb(255, 136, 0), 1px 0 rgb(255, 136, 0), 0 -1px rgb(255, 136, 0);
|
||||||
font-size: larger;
|
font-size: larger;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width: 1024px) and (min-width: 768px) {
|
||||||
|
div#pinner-modal form {
|
||||||
|
max-width: 80%;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.leaflet-popup-content {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.pinner-modal {
|
||||||
|
top: 8vh;
|
||||||
|
left: 5%;
|
||||||
|
width: 90%;
|
||||||
|
padding: 1.2rem; /* Slightly larger padding for better touch interaction */
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
padding: 12px; /* Increased padding for easier interaction */
|
||||||
|
font-size: 1.3rem; /* Increased font size for readability */
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa, .far, .fas {
|
||||||
|
font-size: 1.6rem; /* Slightly larger icons for better usability */
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 15px 25px; /* Larger buttons for easier tapping */
|
||||||
|
font-size: 1.2rem; /* Increase font size for better readability */
|
||||||
|
border-radius: 8px; /* Rounded corners for a modern look */
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"], input[type="password"], input[type="email"], textarea {
|
||||||
|
font-size: 1.1rem; /* Ensure input text is readable */
|
||||||
|
padding: 12px; /* Comfortable padding for touch input */
|
||||||
|
border-radius: 5px; /* Slight rounding for aesthetic consistency */
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.5rem; /* Larger header text for readability on tablets */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
div#pinner-modal form {
|
||||||
|
max-width: 90%;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.leaflet-popup-content {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.pinner-modal {
|
||||||
|
top: 5vh;
|
||||||
|
left: 5%;
|
||||||
|
width: 90%;
|
||||||
|
padding: 1rem; /* Adequate padding for small screens */
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
padding: 20px; /* Larger padding for tappable navigation */
|
||||||
|
font-size: 1.5rem; /* Increased font size for readability */
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa, .far, .fas {
|
||||||
|
font-size: 2.2rem; /* Larger icons for touch interactions */
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 18px 30px; /* Large buttons for touch interaction */
|
||||||
|
font-size: 1.4rem; /* Increased font size for readability */
|
||||||
|
border-radius: 10px; /* Rounded corners for modern design */
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"], input[type="password"], input[type="email"], textarea {
|
||||||
|
font-size: 1.2rem; /* Larger input text for readability */
|
||||||
|
padding: 15px; /* More padding for ease of input */
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3rem; /* Larger header text for small screens */
|
||||||
|
}
|
||||||
|
|
||||||
|
#map {
|
||||||
|
height: 65vh; /* Reduced height to make space for other elements */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -7,8 +7,8 @@
|
|||||||
</style>
|
</style>
|
||||||
<div style="padding-top: 30px; padding-left: 15px;">
|
<div style="padding-top: 30px; padding-left: 15px;">
|
||||||
<h3>Hola <span style="color: darkgreen;">{{current_user.username}}</span></h3>
|
<h3>Hola <span style="color: darkgreen;">{{current_user.username}}</span></h3>
|
||||||
<p>Tu link de invitación es:</p>
|
<h4>Tu link de invitación es:</h4>
|
||||||
<p>https://baches.qro.mx/registrame/{{current_user.referral_code}}</p>
|
<h4>https://baches.qro.mx/registrame/{{current_user.referral_code}}</h4>
|
||||||
|
|
||||||
{% if pins %}
|
{% if pins %}
|
||||||
{% for pin in pins %}
|
{% for pin in pins %}
|
||||||
|
|||||||
@ -9,14 +9,14 @@
|
|||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body style="background-color: rgb(205, 243, 148); color: black;overflow-y: scroll;">
|
<body style="background-color: rgb(205, 243, 148); color: black;overflow-y: scroll;">
|
||||||
<nav style="z-index: 5; height: 7vh;">
|
<nav style="z-index: 500; height: 7vh;">
|
||||||
<ul>
|
<ul>
|
||||||
<a href="/"><li><h2>El Bachemapa</h2></li></a>
|
<a href="/"><li><h2>El Bachemapa</h2></li></a>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><button id="pinner-top">Agregar</button></li>
|
<li><button id="pinner-top"><a href="/">Al mapa</a></button></li>
|
||||||
<li><button><a href="/quienes">Quienes somos</a></button></li>
|
<li><button><a href="/quienes">Quienes somos</a></button></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user