royrga/bachemap
1
0
Fork 0
forked from orson/bachemap
Code Pull Requests Activity

added support for mobile and tablet

Browse Source
This commit is contained in:
Orson 2024-08-31 19:23:49 -06:00
parent b206c1def3
commit 8b98ac3004
4 changed files with 100 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -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!!!
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"

92
static/styles.css
View File

@ -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);
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 */
}
}

4
templates/dashboard.html
View File

@ -7,8 +7,8 @@
</style>
<div style="padding-top: 30px; padding-left: 15px;">
<h3>Hola <span style="color: darkgreen;">{{current_user.username}}</span></h3>
<p>Tu link de invitación es:</p>
<p>https://baches.qro.mx/registrame/{{current_user.referral_code}}</p>
<h4>Tu link de invitación es:</h4>
<h4>https://baches.qro.mx/registrame/{{current_user.referral_code}}</h4>
{% if pins %}
{% for pin in pins %}

4
templates/secondbase.html
View File

@ -9,14 +9,14 @@
</head>
<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>
<a href="/"><li><h2>El Bachemapa</h2></li></a>
</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>
</ul>
</nav>