From 6bf730dc7692ce0346e48e4568a9761275161450 Mon Sep 17 00:00:00 2001 From: jon ander Date: Thu, 3 Apr 2025 17:34:00 +0200 Subject: [PATCH] Enhance user management page with improved styling, layout adjustments, and action buttons (css v1) --- src/main/resources/static/css/table_style.css | 135 +++++++++++------- .../resources/templates/user_management.html | 48 ++++--- 2 files changed, 108 insertions(+), 75 deletions(-) diff --git a/src/main/resources/static/css/table_style.css b/src/main/resources/static/css/table_style.css index 3bb191d..167a038 100644 --- a/src/main/resources/static/css/table_style.css +++ b/src/main/resources/static/css/table_style.css @@ -1,54 +1,83 @@ + body { - font-family: Arial, sans-serif; - display: flex; - flex-direction: column; - align-items: center; - margin: 0; - padding: 20px; - } - .container { - width: 80%; - max-width: 800px; - border: 1px solid #ccc; - padding: 10px; - } - .header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 10px; - background-color: #f4f4f4; - } - table { - width: 100%; - border-collapse: collapse; - } - thead { - background-color: #ddd; - } - th, td { - padding: 10px; - border: 1px solid #ccc; - text-align: left; - } - .footer { - padding: 10px; - background-color: #f4f4f4; - text-align: right; - } - .id-column { - width: 50px; /* Columna ID más estrecha */ - } - .email-column { - width: 250px; /* Columna Email más ancha */ - } - .table-container { - height: 400px; /* Altura fija del contenedor */ - overflow-y: auto; /* Scroll vertical */ - border: 1px solid #ddd; /* Borde opcional */ - } - .action-buttons { - display: flex; - justify-content: center; - gap: 10px; /* Espacio entre botones */ - } + background: linear-gradient(45deg, #49a09d, #5f2c82); + font-family: sans-serif; + font-weight: 100; +} +h2{ + color: #f0f0f0; +} +.contenido { + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); +} +.table-container { + height: 400px; /* Altura fija del contenedor */ + overflow-y: auto; /* Scroll vertical */ + /*border: 1px solid #ddd; !* Borde opcional *!*/ +} +table { + width: 800px; + border-collapse: collapse; + overflow: hidden; + box-shadow: 0 0 20px rgba(0,0,0,0.1); +} + +th, td { + padding: 15px; + background-color: rgba(255,255,255,0.2); + color: #fff; +} + +th { + text-align: left; +} + +thead { + th { + background-color: #55608f; + } +} + +tbody { + tr { + &:hover { + background-color: rgba(255,255,255,0.3); + } + } + td { + position: relative; + &:hover { + &:before { + content: ""; + position: absolute; + left: 0; + right: 0; + top: -9999px; + bottom: -9999px; + background-color: rgba(255,255,255,0.2); + z-index: -1; + } + } + } +} +.celda-acciones{ + text-align: center; + padding: 0; +} +.celda-acciones button{ + background-color: #007bff; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; + padding: 5px; + margin: 1px/*vertical*/ 10px/*horizontal*/; +} +.celda-acciones button:hover { + background-color: #0056b3; +} + + diff --git a/src/main/resources/templates/user_management.html b/src/main/resources/templates/user_management.html index 7a4985e..99b2e6f 100644 --- a/src/main/resources/templates/user_management.html +++ b/src/main/resources/templates/user_management.html @@ -2,30 +2,34 @@ Gestión de Usuarios - + -

Gestión de Usuarios

-
- - - - - - - - - - - - - - - - - -
IDNOMBREROLEMAIL
- +
+

Gestión de Usuarios

+
+ + + + + + + + + + + + + + + + + + + +
IDNombreRolEmailAcciones
+
+