forked from orson/bachemap
fixed design some more, loop seems to be working
This commit is contained in:
parent
f3377eb722
commit
ea0b967366
@ -15,7 +15,7 @@
|
||||
|
||||
/* Base styles */
|
||||
body, html {
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
font-family: 'Poppins', 'Montserrat', 'Segoe UI', Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
@ -48,7 +48,7 @@ h1::after {
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
main {
|
||||
@ -64,6 +64,20 @@ main {
|
||||
width: 100vw;
|
||||
z-index: 5;
|
||||
}
|
||||
nav li [role=button],
|
||||
nav li [type=button],
|
||||
nav li button {
|
||||
background-color: rgba(255, 136, 0, 0.8);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
li a {
|
||||
background-color: rgba(255, 136, 0, 0.8);
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
@ -80,6 +94,16 @@ footer {
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
table#mapistas thead tr th {
|
||||
background-color: rgba(202,216,3,0.7);
|
||||
color: black;
|
||||
}
|
||||
|
||||
table#mapistas tbody tr td {
|
||||
background-color: rgba(202,216,3,0.7);
|
||||
color: black;
|
||||
}
|
||||
|
||||
article {
|
||||
position: fixed;
|
||||
top: 12%; /* Space for nav */
|
||||
@ -110,7 +134,7 @@ nav {
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding-left: 10vw;
|
||||
padding-right:10vw;
|
||||
/* padding-right:10vw; */
|
||||
background-color: rgba(189, 216, 3, 0.24);
|
||||
/* padding: var(--spacing-sm); */
|
||||
z-index: 1000;
|
||||
@ -133,6 +157,20 @@ nav ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.desktop-menu li a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.desktop-menu li a:hover {
|
||||
background-color: rgb(74, 133, 34);
|
||||
animation: pulse 1.5s infinite ease-in-out;
|
||||
box-shadow: 0 0 -10px rgba(172, 255, 47, 0.7);
|
||||
transition: all 0.2s ease;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
button {
|
||||
transition: all 0.3s ease;
|
||||
@ -284,12 +322,14 @@ section#pinner-modal::-webkit-scrollbar-thumb {
|
||||
|
||||
/* Notifications */
|
||||
.flashes {
|
||||
position: relative;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: max-content;
|
||||
z-index: 1001;
|
||||
border-radius: 20px;
|
||||
background-color: rgba(189, 216, 3, 0.6);
|
||||
top: 8%;
|
||||
top: 12vh;
|
||||
left: 10vw;
|
||||
padding: var(--spacing-md);
|
||||
border: 2px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 4px 15px var(--shadow-color);
|
||||
@ -308,7 +348,6 @@ section#pinner-modal::-webkit-scrollbar-thumb {
|
||||
90% { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
@keyframes pulse {
|
||||
0% { box-shadow: 0 0 10px rgba(172, 255, 47, 0.7); }
|
||||
50% { box-shadow: 0 0 15px rgba(172, 255, 47, 0.9); }
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block content %}
|
||||
<div id="map" style="height: 100%; position: absolute;"></div>
|
||||
<div id="map" style="height: 100%; position: static;"></div>
|
||||
<script>
|
||||
var map = new L.map('map', {zoomControl: false}, center=([20.57, -100.38], zoom=16));
|
||||
var user_marker = new L.marker([20.57, -100.38]);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{% extends 'secondbase.html' %}
|
||||
{% block content %}
|
||||
<div class="container" style="background-color: rgba(189, 216, 3, 0.8); padding:2rem">
|
||||
<div class="container" style="background-color: rgba(255,255,255,0.85); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(15px); padding:2rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
|
||||
<!-- Header -->
|
||||
<div class="header-cta">
|
||||
<h2 style="text-align: center; color: #172f01; margin-bottom: 1rem;">¡Hazte mapista y pon tu granito de fotoevidencia!</h2>
|
||||
@ -12,16 +12,16 @@
|
||||
<!-- Table column -->
|
||||
<div>
|
||||
<div style="display: flex; align-items: center; height: 300px;">
|
||||
<table style="color: rgb(87, 90, 91); width: 100%;">
|
||||
<table id="mapistas" style="color: rgba(202,216,3,0.7); width: 100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
<tr style="color: rgba(202,216,3,0.7);">
|
||||
<th scope="col">Mapista</th>
|
||||
<th scope="col">Marcador</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for leader in leaders %}
|
||||
<tr>
|
||||
<tr style="color: rgba(202,216,3,0.7);">
|
||||
<td scope="row">{{leader.username}}</td>
|
||||
<td scope="row">{{leader.count}}</td>
|
||||
</tr>
|
||||
@ -58,11 +58,11 @@
|
||||
datasets: [{
|
||||
data: [activePercentage, inactivePercentage],
|
||||
backgroundColor: [
|
||||
'rgba(100, 180, 10, 1)',
|
||||
'rgba(202,216,3,0.7)',
|
||||
'rgba(87, 90, 91, 0.8)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(100, 180, 10, 1)',
|
||||
'rgba(202,216,3,0.7)',
|
||||
'rgb(87, 90, 91)'
|
||||
],
|
||||
borderWidth: 1
|
||||
|
||||
@ -25,7 +25,6 @@
|
||||
{% endif %}
|
||||
<li><a href="/quienes" role="button" class="secondary">Somos</a></li>
|
||||
<li><a href="/leaderboard" role="button">Bachistas ★</a></li>
|
||||
<li><a href="/quienes#tengopreguntas" role="button" class="contrast"><i class="fas fa-question"></i></a></li>
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
@ -40,9 +39,11 @@
|
||||
{% endif %}
|
||||
<li><a href="/quienes" role="button" class="secondary">Somos</a></li>
|
||||
<li><a href="/leaderboard" role="button">Bachistas ★</a></li>
|
||||
<li><a href="/quienes#tengopreguntas" role="button" class="contrast"><i class="fas fa-question"></i></a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
<ul class="desktop-menu">
|
||||
<li><a style="border-radius: 100%; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; margin-right: 10px; text-decoration: none;" href="/quienes#tengopreguntas"><i style="color:white" class="fas fa-question-circle"></i></a></li>
|
||||
</ul>
|
||||
<style>
|
||||
@media (max-width: 715px) {
|
||||
.desktop-menu {
|
||||
|
||||
@ -65,7 +65,7 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
<main class="container-fluid" style="display:block; margin-top:100px; height: calc(100vh - 100px); overflow-y: auto;">
|
||||
<main class="container-fluid" style="display:block; height: calc(100vh - 100px); overflow-y: auto;">
|
||||
|
||||
{% block content %}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user