udistrital / sga_documentacion

Repositorio para la documentación del sistema de gestión académica
MIT License
0 stars 0 forks source link

Ajuste de funcionamiento y estilos del microcliente derechos pecunarios, periodos y administración (lista de inscripciones y crear inscripción) en el ambiente de pruebas #271

Closed fabianbarreto02 closed 3 months ago

fabianbarreto02 commented 3 months ago

Se requiere realizar el Ajuste de funcionamiento y estilos del microcliente derechos pecunarios, periodos y administración (lista de inscripciones y crear inscripción) en el ambiente de pruebas, la issue debe cumplir con los siguientes requerimientos

Sub Tareas

Criterios de aceptación

Requerimientos

No aplica

Definition of Ready - DoR

Definition of Done - DoD - Desarrollo

redflox commented 3 months ago
redflox commented 3 months ago

Ajuste de fondo

Se agrega una nueva variable a urano-style.css https://github.com/udistrital/assets/blob/develop/urano-style.css

--background-color: #f0f4f8;

image image

redflox commented 3 months ago

Ajustes de gifs y color letra alert para todo los mf (incluyendo proyecto curricular) para mejorar visualización

image

image

@import 'sweetalert2/src/variables';
@import './animations';

// Colores personalizados basados en tu paleta
$custom-blue: #145a95;
$custom-red: #c86885;
$custom-green: #86ab2e;
$custom-yellow: #d9c53a;

$swal2-dark-theme-black: #f0f4f8;
$swal2-dark-theme-white: #282828;
$swal2-outline-color: lighten($swal2-outline-color, 10%);

$swal2-background: $swal2-dark-theme-black;

$swal2-container-padding: 16px;

$swal2-color: #000000; // Oscurecer el texto del contenedor
$swal2-title-margin: 0;
$swal2-title-text-align: initial;
$swal2-title-font-size: 30px;
$swal2-title-font-weight: 300;
$swal2-title-color: $swal2-dark-theme-white;
$swal2-backdrop: rgba(0, 0, 0, 0.5);

// Animaciones
$swal2-show-animation: fadeInUpTiny .5s;
$swal2-hide-animation: fadeOut .25s;

// HTML CONTAINER
$swal2-html-container-color: #000000; // Oscurecer el texto del contenedor
$swal2-html-container-justify-content: flex-start;
$swal2-html-container-text-align: left;
$swal2-html-container-font-weight: 200;

// ACCIONES
$swal2-actions-justify-content: flex-end;
$swal2-actions-padding: 0 20px;

// PROGRESS STEPS
$swal2-progress-step-background: white;
$swal2-progress-step-color: #333;
$swal2-active-step-background: $custom-blue;

// ICONOS
$swal2-icon-animations: false;
$swal2-icon-zoom: 1; // Aumentar el tamaño de los iconos
$swal2-success: $custom-green;
$swal2-error: $custom-red;
$swal2-warning: $custom-yellow;
$swal2-info: $custom-blue;
$swal2-question: $custom-blue;

// FOOTER
$swal2-footer-border-color: rgba(159, 175, 190, 0.168);
$swal2-footer-color: lighten($swal2-html-container-color, 40%); // Aclarar el texto del footer
$swal2-footer-font-weight: 100; // Hacer el texto del footer más delgado

// INPUT
$swal2-input-height: 30px;
$swal2-input-padding: 0 8px;
$swal2-input-border: 1px solid #7e8993;
$swal2-input-border-radius: 4px;
$swal2-input-box-shadow: 0 0 0 transparent;
$swal2-input-focus-border: 1px solid $custom-blue;
$swal2-input-focus-outline: 2px solid transparent;
$swal2-input-focus-box-shadow: 0 0 0 1px $custom-blue;
$swal2-input-font-size: 14px;
$swal2-input-background: lighten($swal2-dark-theme-black, 5%);
$swal2-input-color: $swal2-dark-theme-white;
$swal2-input-transition: none;

// MENSAJE DE VALIDACIÓN
$swal2-validation-message-justify-content: flex-start;
$swal2-validation-message-padding: 4px 13px;
$swal2-validation-message-background: transparent;
$swal2-validation-message-color: $swal2-dark-theme-white;
$swal2-validation-message-icon-background: $custom-red;
$swal2-validation-message-icon-color: $swal2-white !default;
$swal2-validation-message-icon-zoom: 1; // Aumentar el tamaño del icono de validación

// VARIABLES COMUNES PARA LOS BOTONES DE CONFIRMAR Y CANCELAR
$swal2-button-darken-hover: transparent;
$swal2-button-darken-active: transparent;
$swal2-button-focus-box-shadow: 0 0 1px 1px;

// BOTÓN DE CONFIRMACIÓN
$swal2-confirm-button-background-color: $custom-blue;
$swal2-confirm-button-border: 0;
$swal2-confirm-button-border-radius: 3px;
$swal2-confirm-button-color: white;
$swal2-confirm-button-font-size: 13px;
$swal2-confirm-button-focus-box-shadow: 0 0 0 3px rgba($swal2-confirm-button-background-color, .5);

// BOTÓN DE DENEGACIÓN
$swal2-deny-button-font-size: 13px;

// BOTÓN DE CANCELACIÓN
$swal2-cancel-button-font-size: 13px;

// TOAST
$swal2-toast-show-animation: fadeInUpBig .65s;
$swal2-toast-hide-animation: fadeOut 0.5s;
$swal2-toast-background: $swal2-dark-theme-black;
$swal2-toast-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
$swal2-toast-close-button-width: auto;
$swal2-toast-close-button-height: auto;
$swal2-toast-close-button-line-height: 16px;
$swal2-toast-padding: 16px 24px;
$swal2-toast-title-font-size: 13px;
$swal2-toast-html-container-font-size: 13px;
$swal2-toast-input-font-size: 13px;
$swal2-toast-validation-font-size: 13px;
$swal2-toast-buttons-font-size: 13px;
$swal2-toast-footer-font-size: 13px;

// BARRA DE PROGRESO DEL TEMPORIZADOR
$swal2-timer-progress-bar-height: .25em;
$swal2-timer-progress-bar-background: $custom-blue;

@import 'sweetalert2/src/sweetalert2';

.swal2-success-ring {
  display: none;
}

.swal2-progress-steps {
  align-items: center;
  justify-content: center;
  width: 100%;
}

.swal2-toast .swal2-confirm,
.swal2-toast .swal2-cancel {
  margin: 0 0 0 16px !important;
  padding: 0 !important;
  background: none;
  box-shadow: none !important;
  text-decoration: underline;
}

.swal2-toast .swal2-title {
  font-weight: 400 !important;
  line-height: 13px;
}

.swal2-icon {
  height: 64px; // Aumentar el tamaño de los iconos
  transform: scale(1) translateY(0px);
  border: 0;
}

.swal2-icon.swal2-success {
  transform: scale(1) translateY(0px);
}

.swal2-icon.swal2-error {
  transform: scale(1) translateY(0px);
}

.swal2-success-circular-line-left {
  display: none !important;
}

.swal2-popup.swal2-toast .swal2-icon * {
  animation: none !important;
}

.swal2-toast .swal2-icon {
  transform: scale(1) translateY(0px);
}

.swal2-toast .swal2-icon.swal2-success {
  transform: scale(1) translateY(0px);
}
redflox commented 3 months ago

Realizar el ajuste del micro cliente de periodos para el ajuste de estilos, traducción y botonos de acciones, junto a la revisión y depuración de codigo y servicios

ANTES:

old-periodo

AHORA:

new-periodo

redflox commented 3 months ago

CLIENTE DE ADMINISTRACIÓN

Lista de tipos de inscripcion

redflox commented 3 months ago

Terminado


fabianbarreto02 commented 3 months ago

Se realiza la revisión y se realiza el despliegue en test