Manage membership

public/css/style.css

@@ -621,6 +621,77 @@ summary:focus-visible {
   vertical-align: top;
 }
 
+/* Demandes d'adhésion
+------------------------------------------------------------------------ */
+
+.table-wrapper {
+  width: 100%;
+  margin-block: 1.5rem;
+}
+
+.memberships-table {
+  width: 100%;
+  table-layout: fixed;
+  font-size: 1rem;
+}
+
+.membership-col-identity {
+  width: 35%;
+}
+
+.membership-col-email {
+  width: 23%;
+}
+
+.membership-col-date {
+  width: 17%;
+}
+
+.membership-col-actions {
+  width: 25%;
+}
+
+.memberships-table th,
+.memberships-table td {
+  padding: 10px 8px;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.memberships-table td strong,
+.membership-kind {
+  display: inline;
+}
+
+.membership-kind {
+  margin-left: 0.25rem;
+  color: var(--color-link);
+  font-size: 0.85rem;
+}
+
+.membership-date {
+  font-size: 0.9rem;
+}
+
+.membership-actions {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.membership-actions form {
+  flex: 0 0 auto;
+  margin: 0;
+}
+
+.membership-actions .button {
+  padding: 8px 10px;
+  font-size: 1rem;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
 /* Pied de page
 ------------------------------------------------------------------------ */
 
@@ -679,6 +750,68 @@ footer {
   }
 }
 
+/* Adaptations pour les écrans intermédiaires et petits
+------------------------------------------------------------------------ */
+
+@media screen and (max-width: 1100px) {
+  .memberships-table,
+  .memberships-table tbody {
+    display: block;
+  }
+
+  .memberships-table thead {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+  }
+
+  .memberships-table tbody {
+    display: grid;
+    gap: 1rem;
+  }
+
+  .memberships-table tr {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.5rem 1rem;
+    padding: 1rem;
+    border: 1px solid var(--color-shadow-light);
+    background: var(--color-surface-dark);
+  }
+
+  .memberships-table td {
+    display: block;
+    min-width: 0;
+    padding: 0.35rem 0;
+    border: 0;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .memberships-table td::before {
+    display: block;
+    margin-bottom: 0.25rem;
+    color: var(--color-highlight);
+    font-weight: 700;
+    content: attr(data-label);
+  }
+
+  .memberships-table td[data-label="Décision"] {
+    grid-column: 1 / -1;
+  }
+
+  .membership-kind {
+    font-size: 0.9rem;
+  }
+
+  .membership-actions {
+    flex-wrap: wrap;
+  }
+}
+
 /* Adaptations pour les petits écrans
 ------------------------------------------------------------------------ */
 
@@ -693,6 +826,22 @@ footer {
     padding-bottom: 60px;
   }
 
+  .memberships-table tr {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .memberships-table td[data-label="Décision"] {
+    grid-column: auto;
+  }
+
+  .membership-actions form {
+    flex: 1 1 auto;
+  }
+
+  .membership-actions .button {
+    width: 100%;
+  }
+
   footer {
     padding: 24px 20px;
   }