mirror of
https://gitlab.unicamp.br/infimecc_drupal11_modules/site_users.git
synced 2026-05-03 13:30:41 -03:00
Quintino A. G. Souza
0c7b346530
Widget unificado para field_user_photos: exibe tira de thumbnails em linha com destaque (borda azul) na foto padrão; clicar num thumbnail seleciona-o como padrão. O campo field_user_default_photo é atualizado ao salvar. Edição/remoção de mídias individuais ficam a cargo do menu contextual do Drupal. O hook _site_users_add_default_photo_selector() é ignorado automaticamente quando o widget está ativo. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
93 lines
2.2 KiB
CSS
93 lines
2.2 KiB
CSS
/**
|
|
* @file
|
|
* Widget de tira de thumbnails com seletor de foto padrão.
|
|
*/
|
|
|
|
/* ---- Título da seção ----------------------------------------------------- */
|
|
|
|
.user-photos-strip-label {
|
|
margin: 0 0 0.5rem;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
color: #444;
|
|
}
|
|
|
|
/* ---- Tira de thumbnails -------------------------------------------------- */
|
|
|
|
.user-photos-strip {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.user-photos-empty {
|
|
color: #666;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ---- Card de foto -------------------------------------------------------- */
|
|
|
|
.user-photos-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
/* O .form-type--radio (ou .form-type-radio) envolve input + label.
|
|
Tratamos o bloco inteiro como o card clicável. */
|
|
.user-photos-item .form-type--radio,
|
|
.user-photos-item .form-type-radio {
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Oculta o círculo do radio sem tirá-lo do fluxo de acessibilidade */
|
|
.user-photos-item .form-radio {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Label = thumbnail — recebe borda ao ser selecionado */
|
|
.user-photos-item .form-type--radio label,
|
|
.user-photos-item .form-type-radio label {
|
|
display: block;
|
|
cursor: pointer;
|
|
border: 3px solid transparent;
|
|
border-radius: 6px;
|
|
padding: 2px;
|
|
transition: border-color 0.15s, background-color 0.15s;
|
|
}
|
|
|
|
/* Destaque na foto padrão selecionada */
|
|
.user-photos-item .form-type--radio:has(input[type="radio"]:checked) label,
|
|
.user-photos-item .form-type-radio:has(input[type="radio"]:checked) label {
|
|
border-color: #0678be;
|
|
background-color: #e8f4fd;
|
|
}
|
|
|
|
/* Thumbnail contido dentro do label */
|
|
.user-photos-item .form-type--radio label .media,
|
|
.user-photos-item .form-type-radio label .media,
|
|
.user-photos-item .form-type--radio label img,
|
|
.user-photos-item .form-type-radio label img {
|
|
display: block;
|
|
width: 120px;
|
|
height: 100px;
|
|
object-fit: cover;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* ---- Área de upload ------------------------------------------------------ */
|
|
|
|
.user-photos-widget .js-form-item-new-photo,
|
|
.user-photos-widget .form-item-new-photo {
|
|
margin-top: 0.5rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid #ddd;
|
|
}
|