diff --git a/app/public/css/style.css b/app/public/css/style.css index 1ac01a7..4759739 100644 --- a/app/public/css/style.css +++ b/app/public/css/style.css @@ -364,3 +364,57 @@ tr.revoked-cert:hover { width: 100%; } } + +/* Styles for certificate entries */ +.certificate-entry { + display: flex; + justify-content: space-between; /* Aligne les enfants (infos du cert et actions) aux extrémités */ + align-items: center; /* Centre les enfants verticalement */ + margin-bottom: 10px; /* Ajoute un peu d'espace entre les entrées de certificat */ + padding: 10px; /* Ajoute un peu de rembourrage à l'intérieur de chaque entrée */ + border: 1px solid #eee; /* Optionnel : ajoute une bordure pour mieux visualiser les boîtes */ + flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur les petits écrans si nécessaire */ +} + +.certificate-info { + flex-grow: 1; /* Permet à cette section de prendre l'espace disponible */ + margin-right: 10px; /* Espace entre les infos et les boutons d'action */ +} + +.certificate-actions { + display: flex; /* Rend les boutons d'action eux-mêmes flexibles pour un alignement interne si nécessaire */ + flex-shrink: 0; /* Empêche les actions de rétrécir si l'espace est limité */ + gap: 5px; /* Ajoute un petit espace entre les boutons de téléchargement */ +} + +.certificate-info h4 { + margin-top: 0; + margin-bottom: 0; + /* Vous pouvez également envisager de définir display: inline ou display: inline-block si nécessaire, + mais les marges sont le problème le plus courant pour l'alignement vertical dans les conteneurs flex. + Pour l'instant, concentrons-nous sur les marges. */ +} + +/* Ajustements pour les certificats finaux dans les listes */ +.certificates-overview ul .certificate-entry { + /* Peut-être des ajustements spécifiques si nécessaire, mais les styles .certificate-entry ci-dessus devraient déjà bien fonctionner */ + /* Par exemple, si la bordure n'est pas souhaitée ici : */ + /* border: none; */ + /* padding: 5px 0; */ /* Ajuster le rembourrage pour un look plus compact dans la liste */ +} + +/* Assurer que les paragraphes à l'intérieur des actions n'ajoutent pas de marges indésirables */ +.certificate-actions p { + margin: 0; +} + +/* Styles pour les boutons de téléchargement pour qu'ils soient plus compacts si nécessaire */ +.download-button-small { + padding: 5px 10px; /* Réduire le rembourrage pour les rendre plus petits */ + font-size: 0.9em; /* Réduire la taille de la police */ +} + +/* Pour s'assurer que les liens dans .certificate-actions ne sont pas soulignés par défaut s'ils héritent d'un style global */ +.certificate-actions a { + text-decoration: none; +} diff --git a/app/src/Views/dashboard/index.php b/app/src/Views/dashboard/index.php index d61e5a4..d4cbc36 100644 --- a/app/src/Views/dashboard/index.php +++ b/app/src/Views/dashboard/index.php @@ -34,16 +34,16 @@ require_once APP_ROOT_DIR . '/src/Views/shared/header.php';

-
-

-

+

+ +
-

+

@@ -54,32 +54,38 @@ require_once APP_ROOT_DIR . '/src/Views/shared/header.php';
-

( )

-

- - - - - - - +

+
+

( )

+
+
+ + - -

+ + + + + + +
+