[phpBB 3.3.x] Afficher les sous-forums en liste déroulante

[cabot]

Permet d'afficher les sous-forums dans une liste déroulante verticale affichée au clic sur un forum phpBB 3.3.x.



Ouvrir styles/prosilver/forumlist_body.html
Trouver (vers ligne 55) :

Code : Tout sélectionner

						<!-- IF .forumrow.subforum and forumrow.S_LIST_SUBFORUMS -->
							<!-- EVENT forumlist_body_subforums_before -->
							<br /><strong>{forumrow.L_SUBFORUM_STR}{L_COLON}</strong>
							<!-- BEGIN subforum -->
								<!-- EVENT forumlist_body_subforum_link_prepend --><a href="{forumrow.subforum.U_SUBFORUM}" class="subforum<!-- IF forumrow.subforum.S_UNREAD --> unread<!-- ELSE --> read<!-- ENDIF -->" title="<!-- IF forumrow.subforum.S_UNREAD -->{L_UNREAD_POSTS}<!-- ELSE -->{L_NO_UNREAD_POSTS}<!-- ENDIF -->">
									<i class="icon <!-- IF forumrow.subforum.IS_LINK -->fa-external-link<!-- ELSE -->fa-file-o<!-- ENDIF --> fa-fw <!-- IF forumrow.subforum.S_UNREAD --> icon-red<!-- ELSE --> icon-blue<!-- ENDIF --> icon-md" aria-hidden="true"></i>{forumrow.subforum.SUBFORUM_NAME}</a><!-- IF not forumrow.subforum.S_LAST_ROW -->{L_COMMA_SEPARATOR}<!-- ENDIF --><!-- EVENT forumlist_body_subforum_link_append -->
							<!-- END subforum -->
							<!-- EVENT forumlist_body_subforums_after -->
						<!-- ENDIF -->

Remplacer par :

Code : Tout sélectionner

						<!-- IF .forumrow.subforum and forumrow.S_LIST_SUBFORUMS -->
							<!-- EVENT forumlist_body_subforums_before -->
							<div class="cp-container dropdown-container subforums">
							<a href="#" class="dropdown-trigger">{forumrow.L_SUBFORUM_STR} <i class="fa fa-sort-desc" aria-hidden="true"></i></a>
							<div class="dropdown">
								<div class="pointer"><div class="pointer-inner"></div></div>
								<ul class="dropdown-contents" role="menu">							
							<!-- BEGIN subforum -->
								<!-- EVENT forumlist_body_subforum_link_prepend --><li><a href="{forumrow.subforum.U_SUBFORUM}" class="subforum<!-- IF forumrow.subforum.S_UNREAD --> unread<!-- ELSE --> read<!-- ENDIF -->" title="<!-- IF forumrow.subforum.S_UNREAD -->{L_UNREAD_POSTS}<!-- ELSE -->{L_NO_UNREAD_POSTS}<!-- ENDIF -->">
									<i class="icon <!-- IF forumrow.subforum.IS_LINK -->fa-external-link<!-- ELSE -->fa-file-o<!-- ENDIF --> fa-fw <!-- IF forumrow.subforum.S_UNREAD --> icon-red<!-- ELSE --> icon-blue<!-- ENDIF --> icon-md" aria-hidden="true"></i>{forumrow.subforum.SUBFORUM_NAME}</a></li><!-- EVENT forumlist_body_subforum_link_append -->
							<!-- END subforum -->
								</ul>
							</div>							
							</div>
							<!-- EVENT forumlist_body_subforums_after -->
						<!-- ENDIF -->

Ajouter dans le CSS :

Code : Tout sélectionner

/* Sous-forums en liste déroulante (forumlist_body.html, ligne ~ 55)
/* https://forum.cabotweb.fr/viewtopic.php?t=127
******************************************************************************/
.topiclist.forums dl {
	overflow: visible;
	display: flex;
}

.topiclist.forums li.row dd {
	padding: 4px 0;
	margin-bottom: 0;
}

.subforums>a>i {
	vertical-align: super;
}

.subforums .dropdown {
	animation: unfold 150ms ease-in-out forwards;
	transform-origin: top center;
}

.subforums.dropdown-up .dropdown {
	transform-origin: bottom center;
}

.subforums .subforum {
	display: block;
	line-height: 2;
}

ul.topiclist li.row dt .subforums a.subforum {
	max-width: none;
}

@keyframes unfold {
	0% {
		transform: scaleY(0);
	}

	100% {
		transform: scaleY(1);
	}
}