Skip to content

Commit

Permalink
Merge pull request #29 from fedecarboni7/styling
Browse files Browse the repository at this point in the history 
Styling
  • Loading branch information
@fedecarboni7
fedecarboni7 authored Aug 1, 2024
2 parents c1556c6 + f263270 commit 5245984
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 59 deletions.
3 changes: 3 additions & 0 deletions app/database.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,9 @@ class Player(Base):
user_id = Column(Integer, ForeignKey("users.id"))
user = relationship("User", back_populates="players")

# Create all tables in the database
if LOCAL_DB:
Base.metadata.create_all(engine)

def get_db():
db = SessionLocal()
Expand Down
88 changes: 55 additions & 33 deletions static/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
body {
background-color: #1c1c1c;
color: #e0e0e0;
font-family: Arial, sans-serif;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
}
Expand All @@ -12,20 +12,36 @@ h1 {
margin-bottom: 40px;
}

label {
font-weight: 500;
}

p {
font-weight: 500;
}

a.logout-link {
color: #ff7158; /* Color del enlace */
text-decoration: none; /* Quitar subrayado */
margin-top: 10px; /* Espacio arriba */
margin-left: 10px; /* Espacio a la izquierda */
font-size: 14px; /* Tamaño de fuente */
font-weight: bold; /* Negrita */
transition: color 0.3s ease; /* Transición suave del color */
color: #ff7158;
text-decoration: none;
margin-top: 10px;
margin-left: 10px;
font-size: 14px;
transition: color 0.3s ease;
display: flex;
align-items: center;
font-weight: 500;
width: 102px;
}

a.logout-link:hover {
color: #c5413d;
}

.logout-link i {
margin-right: 5px;
margin-top: 2px;
}

.player-container {
display: flex;
flex-direction: column;
Expand All @@ -51,10 +67,6 @@ a.logout-link:hover {
gap: 10px;
}

.player-header label {
font-weight: normal;
}

.player-header input[type="text"] {
flex: 1;
padding: 8px;
Expand All @@ -78,6 +90,14 @@ a.logout-link:hover {
margin-top: 5px;
}

.toggle-icon {
transition: transform 0.3s ease;
}

.rotate {
transform: rotate(180deg);
}

.toggle-details {
background-color: transparent;
border: none;
Expand All @@ -93,7 +113,6 @@ a.logout-link:hover {
transition: max-height 0.2s ease-out;
}

/* Contenedor de habilidades */
.skills-container {
display: flex;
flex-wrap: wrap;
Expand All @@ -102,11 +121,11 @@ a.logout-link:hover {
margin-left: 5px;
}

/* Estilo para cada entrada de habilidad */
.skill-entry {
display: flex;
align-items: center;
width: calc(33.33% - 10px); /* Para 3 columnas en pantallas grandes */
width: calc(33.33% - 10px);
/* Para 3 columnas en pantallas grandes */
}

.skill-entry label {
Expand All @@ -127,14 +146,16 @@ a.logout-link:hover {

@media (max-width: 768px) {
.skill-entry {
width: calc(50% - 10px); /* 2 columnas en tablets */
width: calc(50% - 10px);
/* 2 columnas en tablets */
}
}

@media (max-width: 480px) {
.skill-entry {
width: 100%;
margin-right: 10px; /* 1 columna en móviles */
margin-right: 10px;
/* 1 columna en móviles */
}
}

Expand Down Expand Up @@ -188,16 +209,13 @@ a.logout-link:hover {
}
}

label {
font-weight: bold;
}

input {
padding: 10px;
border: 1px solid #555;
border-radius: 5px;
background-color: #333;
color: #e0e0e0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

button {
Expand All @@ -208,6 +226,9 @@ button {
background-color: #444;
color: #e0e0e0;
cursor: pointer;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px;
font-weight: 600;
}

button:hover {
Expand All @@ -232,7 +253,8 @@ table {
margin-top: 10px;
}

th, td {
th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
Expand All @@ -248,7 +270,7 @@ th {
right: 20px;
background-color: #333333d0;
color: white;
padding: 10px 20px;
padding: 10px 10px;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
font-size: 16px;
Expand All @@ -270,7 +292,7 @@ th {
z-index: 1000;
}

#floating-button:hover #selected-players-list{
#floating-button:hover #selected-players-list {
display: block;
padding: 5px 10px;
}
Expand Down Expand Up @@ -305,14 +327,14 @@ th {

#scroll-button {
position: fixed;
bottom: 20px;
right: 200px;
bottom: 18px;
right: 164px;
background-color: transparent;
padding: 0;
font-size: 24px;
cursor: pointer;
display: block;
color: #000000d9;
color: #cbcbcb;
}

#scroll-button:hover {
Expand All @@ -327,24 +349,24 @@ th {
position: relative;
width: 100%;
max-width: 400px;
margin: 0 auto 20px; /* Centra el buscador y añade un margen inferior */
margin: 0 auto 20px;
}

#searchInput {
width: 100%; /* Ocupa todo el ancho del contenedor */
padding: 10px 40px 10px 20px; /* Añade espacio para el icono a la derecha */
width: 100%;
padding: 10px 40px 10px 20px;
border-radius: 20px;
border: 1px solid #ccc;
font-size: 16px;
outline: none;
box-sizing: border-box; /* Asegura que el padding esté incluido en el ancho */
box-sizing: border-box;
}

.search-icon {
position: absolute;
top: 50%;
right: 15px; /* Ajusta el espacio del icono desde el borde derecho */
right: 15px;
transform: translateY(-50%);
color: #999;
pointer-events: none; /* Evita que el icono interfiera con el clic en el campo de entrada */
pointer-events: none;
}
32 changes: 17 additions & 15 deletions static/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ function addPlayer() {
const toggleButton = document.createElement("button");
toggleButton.className = "toggle-details";
toggleButton.type = "button";
toggleButton.innerHTML = '<i class="fas fa-caret-up"></i>';
toggleButton.innerHTML = '<i class="fa-solid fa-angle-up toggle-icon"></i>';
toggleButton.addEventListener("click", function() {
toggleDetails(this);
});
Expand All @@ -45,7 +45,7 @@ function addPlayer() {
const detailsContainer = document.createElement("div");
detailsContainer.className = "details-container";
detailsContainer.style.display = "block";
detailsContainer.style.maxHeight = "338px";
detailsContainer.style.maxHeight = "353px";
detailsContainer.style.paddingBottom = "5px";

// Skills Container
Expand Down Expand Up @@ -85,7 +85,7 @@ function addPlayer() {
deleteButton.type = "button";

const trashIcon = document.createElement("i");
trashIcon.className = "fas fa-trash-alt";
trashIcon.className = "fa-solid fa-trash";

deleteButton.appendChild(trashIcon);

Expand Down Expand Up @@ -178,15 +178,16 @@ function validateForm(event) {

function toggleDetails(button) {
const details = button.parentNode.nextElementSibling;
const icon = button.querySelector('.toggle-icon');

if (details.style.maxHeight === "0px") {
details.style.maxHeight = details.scrollHeight + "px";
details.style.paddingBottom = "5px";
button.innerHTML = '<i class="fas fa-caret-up"></i>';
icon.classList.add('rotate');
} else {
details.style.maxHeight = "0px";
details.style.paddingBottom = "0px";
button.innerHTML = '<i class="fas fa-caret-down"></i>';
icon.classList.remove('rotate');
}
}

Expand All @@ -200,9 +201,9 @@ function toggleSelectPlayers() {
});

if (allSelected) {
toggleButton.textContent = "Seleccionar todos los jugadores";
toggleButton.textContent = "Seleccionar a todos";
} else {
toggleButton.textContent = "Deseleccionar todos los jugadores";
toggleButton.textContent = "Deseleccionar a todos";
}

updateSelectedCount();
Expand Down Expand Up @@ -270,20 +271,21 @@ document.addEventListener('DOMContentLoaded', function() {
});
});

function scrollToBottom() {
const scrollButton = document.getElementById('scroll-button');
if (window.scrollY + window.innerHeight >= document.body.scrollHeight) {
window.scrollTo({ top: 0, behavior: 'smooth' });
} else {
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
function scrollToSubmit() {
const submitBtn = document.getElementById('submitBtn');
if (submitBtn) {
submitBtn.scrollIntoView({ behavior: 'smooth' });
}
}

// Evento para mostrar u ocultar el botón dependiendo de la posición de la página
window.addEventListener('scroll', function() {
const scrollButton = document.getElementById('scroll-button');
// Añadimos una pequeña tolerancia para asegurar la detección del fondo de la página
if (window.scrollY + window.innerHeight >= document.body.scrollHeight - 2) {
const submitBtn = document.getElementById('submitBtn');
const submitBtnPosition = submitBtn.getBoundingClientRect().top + window.scrollY;
const windowBottom = window.scrollY + window.innerHeight;

if (windowBottom >= submitBtnPosition) {
scrollButton.style.display = 'none';
} else {
scrollButton.style.display = 'block';
Expand Down
26 changes: 15 additions & 11 deletions templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<link rel="icon" type="image/png" sizes="16x16" href="../static/favicon/favicon-16x16.png">
<link rel="manifest" href="../static/favicon/site.webmanifest">
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<script src="static/js/script.js"></script>
</head>
<body>
Expand All @@ -29,10 +29,10 @@ <h1>Armar Equipos</h1>
<label>Jugador {{ loop.index }}:</label>
<input type="text" name="names" value="{{ player.name }}" required>
<button class="toggle-details" type="button" onclick="toggleDetails(this)">
<i class="fas fa-caret-down"></i>
<i class="fa-solid fa-angle-down toggle-icon"></i>
</button>
<button class="delete-button" type="button" onclick="deletePlayer('{{ player.id }}')">
<i class="fas fa-trash-alt"></i>
<i class="fa-solid fa-trash"></i>
</button>
</div>
<div class="details-container" style="max-height: 0px;">
Expand Down Expand Up @@ -80,22 +80,24 @@ <h1>Armar Equipos</h1>
</div>
<button type="button" onclick="addPlayer()">Agregar jugador</button>
<button type="submit" id="submitBtn">Calcular</button>
<button type="button" id="toggle-select-button" onclick="toggleSelectPlayers()">Seleccionar todos los jugadores</button>
<button type="button" id="toggle-select-button" onclick="toggleSelectPlayers()">Seleccionar a todos</button>
</form>
<button class="reset-button" type="button" onclick="reset()">Borrar a todos</button>
<br>
<a href="/logout" class="logout-link">Cerrar sesión</a>
<a href="/logout" class="logout-link">
<i class="fa-solid fa-right-from-bracket"></i> Cerrar sesión
</a>

{% if teams %}
<h3>Diferencia mínima de habilidades: {{ min_difference }}</h3>
<h3>Diferencia mínima encontrada: {{ min_difference_total }}</h3>
<h3>Combinaciones encontradas: {{ len_teams // 2 }}</h3>
<p>Diferencia mínima de habilidades: {{ min_difference }}</p>
<p>Diferencia mínima encontrada: {{ min_difference_total }}</p>
<p>Combinaciones encontradas: {{ len_teams // 2 }}</p>

{% for i in range(0, len_teams - 1, 2) %}
{% if len_teams > 2 %}
<p>Opción {{ i // 2 + 1 }}</p>
{% endif %}
<button class="share-button" id="shareButton{{ i // 2 + 1 }}" onclick="compartirEquipos(this)">Compartir Equipos</button>
<button type="button" class="share-button" id="shareButton{{ i // 2 + 1 }}" onclick="compartirEquipos(this)">Compartir Equipos</button>
<div class="team-container" id="resultados-equipos{{ i // 2 + 1 }}">
<div class="team">
<h2>Equipo 1</h2>
Expand Down Expand Up @@ -172,13 +174,15 @@ <h2>Equipo 2</h2>
{% endif %}

<div id="floating-button">
Cant. Jugadores: <span id="selected-count">0</span>
Seleccionados: <span id="selected-count">0</span>
<div id="selected-players-list" class="hidden">
<ul id="selected-players-ul"></ul>
</div>
</div>

<button id="scroll-button" onclick="scrollToBottom()">⬇️</button>
<button type="button" id="scroll-button" onclick="scrollToSubmit()">
<i class="fa-solid fa-circle-down"></i>
</button>

</body>
</html>

0 comments on commit 5245984

Please sign in to comment.