Skip to content
Extraits de code Groupes Projets
Valider 62be1ec0 rédigé par RastaPopoulos's avatar RastaPopoulos Validation de marcimat
Parcourir les fichiers

feat(5922): remonter tous les éléments du bandeau bas de l'admin dans celui du haut, et réarranger 

Ref: #5922
parent 20b59ed7
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Masquer les modifications d'espaces
En ligne Côte à côte
prive/javascript/gadgets.js
+ 1
− 2
Voir le fichier @ 62be1ec0
......@@ -105,8 +105,7 @@ jQuery(function(){
jQuery('#bando_navigation ul li>ul').css({'top':hauteur});
});
jQuery('#bando_navigation .deroulant > li').menuFocus();
jQuery('#bando_outils .deroulant > li').menuFocus();
jQuery('#bando_haut .deroulant > li').menuFocus();
jQuery('#bandeau_haut #formRecherche input').on('hover touchstart', function(){
jQuery('#bandeau_haut ul.actif').trigger('mouseout');
......
prive/squelettes/inclure/barre-nav.html
+ 119
− 117
Voir le fichier @ 62be1ec0
#SET{contexte,#EVAL{definir_barre_contexte()}}
#SET{boutons,#GET{contexte}|definir_barre_boutons{1}|trier_boutons_enfants_par_favoris_alpha}
#SET{boutons_infos_perso, #VAL{infos_perso}|definir_barre_onglets}
<div id="bando_haut" class="bando-haut" role="navigation">
[(#REM) Liens d'évitement ]
......@@ -16,49 +17,124 @@
[(#REM) Bandeau identité ]
<div id="bando_identite" class="bando-id">
<div class="largeur">
<p class="menu-simple menu-simple_perso">
<a
class="menu-simple__item menu-simple__item_nom"
title="<:icone_informations_personnelles|attribut_html:> \(<:auteur|attribut_html:> ##SESSION{id_auteur}\)"
href="#URL_ECRIRE{infos_perso}">
<strong class="nom">[(#SESSION{nom}|trim|sinon{#SESSION{login}}|typo|couper{30})]</strong>
</a>
<a class="menu-simple__item menu-simple__item_lang menu_lang"
href="#URL_ECRIRE{configurer_langage}"
title="<:titre_config_langage:>">
[(#CHEMIN_IMAGE{langue-12.svg}|balise_svg{<:titre_config_langage:>,picto-lang})][(#LANG|traduire_nom_langue)]
</a>
[(#PLUGIN{aide}|oui)<a
class="menu-simple__item menu-simple__item_aide aide popin" target="_blank"
href="#URL_ECRIRE{aide,var_lang=#LANG}">
<:icone_aide_ligne:>
</a>]
<a class="menu-simple__item menu-simple__item_logout" href="[(#VAL{logout}|generer_url_action{logout=prive})]">
<:icone_deconnecter:>
</a>
</p>
<p class="menu-simple menu-simple_site nom_site_spip">
[(#SET{configurer,#AUTORISER{configurer,_identite}|?{oui,''}})]
[(#GET{configurer}|oui)
<a
class="menu-simple__item menu-simple__item_site info"
title="<:titre_identite_site|attribut_html:>"
href="#URL_ECRIRE{configurer_identite}"
>
][(#GET{configurer}|non)
<span class="menu-simple__item menu-simple__item_nom">
]
<strong class="nom">[(#NOM_SITE_SPIP|couper{35})]</strong>
[(#GET{configurer}|?{</a>,</span>})]
<a
class="menu-simple__item menu-simple__item_voir voir"
href="#URL_SITE_SPIP">
<:icone_visiter_site:>
</a>
</p>
[(#REM) Identité et contenu du site ]
<ul class="deroulant deroulant_infos_site" data-racine>
<li class="deroulant__item">
<a
class="deroulant__lien"
href="#URL_SITE_SPIP"
>
[(#CHEMIN_IMAGE{favicon-spip.png}|balise_img{'', picto picto_identite, 24})]
<span class="libelle">[(#NOM_SITE_SPIP|couper{35})]</span>
</a>
<ul class="deroulant__sous-menu" data-profondeur="1">
<li class="deroulant__item">
<a
class="deroulant__lien voir"
href="#URL_SITE_SPIP"
>
[(#CHEMIN_IMAGE{voir-ligne-24.png}|balise_img{'', picto picto_preview, 24})]
<span class="libelle"><:icone_visiter_site:></span>
</a>
</li>
</ul>
</li>
<li class="deroulant__item deroulant__item_plan plan_site" data-racine>
<a
class="deroulant__lien"
href="#URL_ECRIRE{plan}"
id="boutonbandeautoutsite"
title="<:public:plan_site:>"
data-racine
>
[(#CHEMIN_IMAGE{plan_site-24.png}|balise_img{<:public:plan_site:>,picto picto_plan})]
</a>
[(#REM|menu_rubriques)]
</li>
<B_creer>
<li class="deroulant__item">
<a class="deroulant__lien bando2_creer" href="#URL_ECRIRE{navigation, menu=outils_rapides}">
[(#CHEMIN_IMAGE{creer-24.png}|balise_img{'', picto picto_creer})]
<span class="libelle"><:icone_outils_rapides:></span>
</a>
<ul class="deroulant__sous-menu" data-profondeur="1">
<BOUCLE_creer(DATA){source table, #GET{boutons}} {cle=outils_rapides}>
<BOUCLE_creersous(DATA){source table, #VALEUR{sousmenu}}{par position}>
#SET{objet_exec, #VALEUR{url}|trouver_objet_exec}
#SET{libelle, #GET{objet_exec/table_objet_sql}|?{#GET{objet_exec/table_objet_sql}|objet_info{texte_objet}, #VALEUR{libelle}}|_T}
[<li class="deroulant__item">
<a
href="[(#VALEUR{url}|sinon{#CLE}|bandeau_creer_url{#VALEUR{urlArg},#GET{contexte}})]"
title="[(#VALEUR{libelle}|_T|attribut_html)]"
class="deroulant__lien bando2_#CLE"><span class="libelle">(#GET{libelle})</span></a>
</li>]
</BOUCLE_creersous></BOUCLE_creer>
</ul>
</li>
</B_creer>
</ul>
[(#REM) La recherche au milieu ]
#FORMULAIRE_RECHERCHE_ECRIRE
<BOUCLE_collaborer(DATA){source table, #GET{boutons}} {cle=outils_collaboratifs}>
<B_collaborersous>
<ul class="deroulant deroulant_collaborer collaborer">
<BOUCLE_collaborersous(DATA){source table, #VALEUR{sousmenu}}>
[<li class="deroulant__item deroulant__item_collaborer">
<a
href="[(#VALEUR{url}|sinon{#CLE}|bandeau_creer_url{#VALEUR{urlArg},#GET{contexte}})]"
title="[(#VALEUR{libelle}|_T|attribut_html)]"
class="deroulant__lien bando2_#CLE"><span class="libelle">(#VALEUR{libelle}|_T)</span></a>
</li>]
</BOUCLE_collaborersous>
</ul>
</B_collaborersous>
</BOUCLE_collaborer>
[(#REM) Identité de la personne connectée ]
<ul class="deroulant deroulant_infos_perso" data-racine>
[(#PLUGIN{aide}|oui)<li class="deroulant__item deroulant__item_aide">
<a
class="deroulant__lien popin" target="_blank"
href="#URL_ECRIRE{aide,var_lang=#LANG}"
>
<span class="libelle"><:icone_aide_ligne:></span>
</a>
</li>]
<li class="deroulant__item">
<a
class="deroulant__lien"
title="<:icone_informations_personnelles|attribut_html:> \(<:auteur|attribut_html:> ##SESSION{id_auteur}\)"
href="#URL_ECRIRE{infos_perso}"
>
[(#CHEMIN_IMAGE{auteur-24.png}|balise_img{'', picto picto_auteur})]
<span class="libelle">[(#SESSION{nom}|trim|sinon{#SESSION{login}}|typo|couper{30})]</span>
</a>
<ul class="deroulant__sous-menu" data-profondeur="1">
<BOUCLE_infos_perso(DATA){source table, #GET{boutons_infos_perso}}{par position}{cle!=infos_perso}>
[<li class="deroulant__item">
<a
href="[(#VALEUR{url}|sinon{#CLE|generer_url_ecrire})]"
class="deroulant__lien bando2_#CLE"
>
[(#VALEUR{icone}|balise_img{'', picto picto_#CLE})]
<span class="libelle">(#VALEUR{libelle}|_T)[(#CLE|=={configurer_langage}|oui)[ - (#LANG|traduire_nom_langue)]]</span>
</a>
</li>]
</BOUCLE_infos_perso>
<li class="deroulant__item">
<a class="deroulant__lien" href="[(#VAL{logout}|generer_url_action{logout=prive})]">
[(#CHEMIN_IMAGE{auteur-5poubelle-24.png}|balise_img{'', picto picto_logout})]
<span class="libelle"><:icone_deconnecter:></span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
......@@ -100,78 +176,4 @@
</B_boutons>
</div>
</div>
[(#REM) Menu outils ]
<div id="bando_outils" class="bando-outils">
<div class="largeur">
[(#REM) Groupe d'outils n°1 ]
<div class="outils outils_plan-creer">
[(#REM) Plan des rubriques ]
<ul class="deroulant deroulant_rubriques bandeau_rubriques" data-racine>
<li class="deroulant__item deroulant__item_plan plan_site" data-racine>
<a
class="deroulant__lien"
href="#URL_ECRIRE{plan}"
id="boutonbandeautoutsite"
data-racine
>
[(#CHEMIN_IMAGE{plan_site-24.png}|balise_img{'',picto picto_plan})]
</a>
[(#REM|menu_rubriques)]
</li>
</ul>
[(#REM) Boutons de création rapide ]
<B_creer>
<ul class="deroulant deroulant_creer" data-racine>
<li class="deroulant__item">
<a class="deroulant__lien bando2_creer" href="#URL_ECRIRE{navigation, menu=outils_rapides}">
[(#CHEMIN_IMAGE{creer-24.png}|balise_img{'', picto picto_creer})]
<span class="libelle"><:icone_outils_rapides:></span>
</a>
<ul class="deroulant__sous-menu" data-profondeur="1">
<BOUCLE_creer(DATA){source table, #GET{boutons}} {cle=outils_rapides}>
<BOUCLE_creersous(DATA){source table, #VALEUR{sousmenu}}{par position}>
#SET{objet_exec, #VALEUR{url}|trouver_objet_exec}
#SET{libelle, #GET{objet_exec/table_objet_sql}|?{#GET{objet_exec/table_objet_sql}|objet_info{texte_objet}, #VALEUR{libelle}}|_T}
[<li class="deroulant__item">
<a
href="[(#VALEUR{url}|sinon{#CLE}|bandeau_creer_url{#VALEUR{urlArg},#GET{contexte}})]"
title="[(#VALEUR{libelle}|_T|attribut_html)]"
class="deroulant__lien bando2_#CLE"><span class="libelle">(#GET{libelle})</span></a>
</li>]
</BOUCLE_creersous></BOUCLE_creer>
</ul>
</li>
</ul>
</B_creer>
</div>
[(#REM) Groupe d'outils n°2 ]
<div class="outils outils_collab-cherche" id="rapides">
<B_collaborer>
<ul class="rapides rapides_collaborer collaborer">
<BOUCLE_collaborer(DATA){source table, #GET{boutons}} {cle=outils_collaboratifs}>
<BOUCLE_collaborersous(DATA){source table, #VALEUR{sousmenu}}>
[<li class="rapides__item">
<a
href="[(#VALEUR{url}|sinon{#CLE}|bandeau_creer_url{#VALEUR{urlArg},#GET{contexte}})]"
title="[(#VALEUR{libelle}|_T|attribut_html)]"
class="rapides__lien bando2_#CLE"><span class="libelle">(#VALEUR{libelle}|_T)</span></a>
</li>]
</BOUCLE_collaborersous></BOUCLE_collaborer>
</ul>
</B_collaborer>
#FORMULAIRE_RECHERCHE_ECRIRE
</div>
</div>
</div>
</div>
prive/themes/spip/bando.css.html
+ 68
− 113
Voir le fichier @ 62be1ec0
......@@ -9,8 +9,7 @@
2. Bandeau liens d'évitement
3. Bandeau identité
4. Bandeau de navigation principale
5. Bandeau d'outils
6. Autres
5. Autres
<style>
]
......@@ -36,7 +35,7 @@
/* Outils */
--spip-bando-outils-spacing-x: 0.33rem;
--spip-bando-outils-spacing-y: 0.25rem;
--spip-bando-outils-icon-size: 16px;
--spip-bando-outils-icon-size: 1em;
/* Menus déroulants */
--spip-deroulant-spacing-x: 0.33rem;
--spip-deroulant-spacing-y: 0.5rem;
......@@ -50,7 +49,7 @@
/* Outils */
--spip-bando-outils-spacing-x: 0.5rem;
--spip-bando-outils-spacing-y: 0.33rem;
--spip-bando-outils-icon-size: 20px;
--spip-bando-outils-icon-size: 1.3em;
/* Menus déroulants */
--spip-deroulant-spacing-x: 0.5rem;
--spip-deroulant-spacing-y: 0.66rem;
......@@ -77,6 +76,7 @@
.bando-haut {
position: relative;
z-index: 1001;
border-bottom: 1px solid var(--spip-color-theme);
}
.bando-haut a {
text-decoration: none;
......@@ -198,6 +198,7 @@
.bando-haut .deroulant {
display: flex;
flex-flow: row wrap;
align-items: center;
line-height: 1.2;
}
......@@ -205,6 +206,7 @@
.bando-haut .deroulant__item {
flex: auto 1; /* effectif à la racine uniquement, plus bas le conteneur est en display:block */
display: block; /* block obligé, cf. notes */
position: relative;
}
/* Liens <a> */
......@@ -217,6 +219,9 @@
transition: all 0.1s;
position: relative;
}
.bando-id .deroulant__lien img, .bando-id .deroulant__lien svg{
margin-#RIGHT: 0.5em;
}
.bando-haut .deroulant__lien .libelle {
flex: 1 1 100%;
}
......@@ -231,8 +236,8 @@
outline: none;
box-shadow: inset 0 0 0 1px var(--spip-color-theme);
}
/* Liens des sous-menus : prévoir les icônes à gauche en background */
.bando-haut .deroulant__sous-menu .deroulant__lien {
/* Liens des sous-menus : prévoir les icônes à gauche en background pour ceux qui n'ont pas déjà une image en HTML */
.navigation_avec_icones .bando-haut .deroulant__sous-menu .deroulant__lien:not(:has(img), :has(svg)) {
padding-#LEFT: calc(var(--spip-deroulant-icon-size) + (var(--spip-deroulant-spacing-x) * 2));
background-position: var(--spip-left) var(--spip-deroulant-spacing-x) center;
background-size: var(--spip-deroulant-icon-size);
......@@ -267,6 +272,12 @@
#LEFT: auto;
opacity: 1;
}
/* Ajustements pour le menu perso tout à droite */
.deroulant_infos_perso .deroulant__item:focus-within > .deroulant__sous-menu,
.deroulant_infos_perso .deroulant__item.actif > .deroulant__sous-menu,
.deroulant_infos_perso .deroulant__item.actif_tempo > .deroulant__sous-menu {
#RIGHT: 0;
}
/* Ajustements arrondis */
.bando-haut .deroulant__sous-menu[data-profondeur="1"] {
border-top-left-radius: 0;
......@@ -353,14 +364,18 @@
.bando-id {
z-index: 10;
position: relative;
overflow: hidden;
background: var(--spip-color-theme-lightest);
font-size: 0.9em;
background: var(--spip-color-theme-light);
color: var(--spip-color-gray-darkest);
}
.bando-id .largeur {
display: flex;
flex-flow: row wrap;
}
.bando-id img, .bando-id svg {
max-height: 1.3em;
width: auto;
}
/* Menu liens */
.bando-id .menu-simple {
flex: 1 1 100%;
......@@ -372,6 +387,9 @@
.bando-id a:focus {
color: var(--spip-color-theme-dark);
}
.bando-id .picto_identite {
filter: saturate(0);
}
.bando-id svg.picto-lang {
height: 1.3em;
width: auto;
......@@ -381,14 +399,42 @@
.bando-id svg.picto-lang path {
fill: inherit; /* forcer la main (?) */
}
.bando-id .deroulant__item_plan .picto {
margin-right: 0;
}
.bando-id .deroulant__item_collaborer:not(:last-child) {
margin-inline-end: calc(-1 * var(--spip-deroulant-spacing-x));
}
.bando-id .deroulant__item_collaborer .deroulant__lien {
flex: 0 0 auto;
align-items: center;
background-position: center;
background-repeat: no-repeat;
background-size: var(--spip-bando-outils-icon-size);
padding-left: calc(2 * var(--spip-deroulant-spacing-x));
padding-right: calc(2 * var(--spip-deroulant-spacing-x));
}
.bando-id .deroulant__item_collaborer .deroulant__lien .libelle {
visibility: hidden;
display: block;
height: var(--spip-bando-outils-icon-size);
width: var(--spip-bando-outils-icon-size);
overflow: hidden;
}
.bando-id .deroulant__item_aide .deroulant__lien {
border-left: 1px solid var(--spip-color-theme-lighter);
border-right: 1px solid var(--spip-color-theme-lighter);
padding-left: 1em;
padding-right: 1em;
}
/* Responsive */
@media (min-width: 580px) {
.bando-id .largeur {
justify-content: space-between;
.bando-id .largeur > *:not(:first-child) {
margin-left: auto;
}
.bando-id .menu-simple {
flex: 0 1 auto;
flex-wrap: nowrap;
.bando-id .largeur .formulaire_recherche,
.bando-id .largeur .deroulant_infos_perso {
margin-left: 0;
}
}
......@@ -463,130 +509,39 @@
border-top: 1px solid var(--spip-color-gray-lighter);
}
/**
* =================
* 5. Bandeau outils
* =================
*
* Outils après le menu principal
* Voir aussi 1.2 pour les styles mutualisés du menu déroulant
*/
.bando-outils {
width: 100%;
background: var(--spip-color-theme-light);
}
/* Layout */
.bando-outils > .largeur,
.bando-outils .outils,
.bando-outils .rapides,
.bando-outils .rapides__item,
.bando-outils .rapides__lien {
display: flex;
}
.bando-outils .largeur {
flex-flow: row wrap;
justify-content: flex-start;
}
.bando-outils .outils {
flex: 1 0 100%;
}
@media (min-width: 768px) {
.bando-outils .largeur {
flex-flow: row nowrap;
justify-content: space-between;
}
.bando-outils .outils {
flex: 0 1 auto;
}
}
/* Menus « rapides » */
.bando-outils {
color: var(--spip-color-gray-dark);
}
.bando-outils .deroulant[data-racine] > .deroulant__item > .deroulant__lien {
color: var(--spip-color-gray-darkest);
}
.bando-outils .picto {
width: var(--spip-bando-outils-icon-size);
height: auto;
}
.bando-outils .deroulant__lien img + .libelle {
margin-left: 0.25em;
}
.bando-outils .rapides__lien {
flex: 0 0 auto;
align-items: center;
padding: var(--spip-bando-outils-spacing-y) var(--spip-bando-outils-spacing-x);
background-position: center;
background-repeat: no-repeat;
background-size: var(--spip-bando-outils-icon-size);
}
.bando-outils .rapides__lien:hover,
.bando-outils .rapides__lien:focus {
background-color: var(--spip-color-theme-lighter);
}
.bando-outils .rapides__lien:focus {
outline: none;
box-shadow: inset 0 0 0 1px var(--spip-color-theme);
}
.bando-outils .rapides__item .libelle {
visibility: hidden;
display: block;
height: var(--spip-bando-outils-icon-size);
width: var(--spip-bando-outils-icon-size);
overflow: hidden;
}
.bando-outils .rapides_collaborer {
margin-#RIGHT: 1em;
}
/* Plan déroulant : ressérer, icônes customs, ouverture latérale */
.deroulant.deroulant_rubriques {
--spip-deroulant-spacing-y: var(--spip-bando-outils-spacing-y);
--spip-deroulant-spacing-x: var(--spip-bando-outils-spacing-x);
--spip-deroulant-icon-size: 14px;
margin-#RIGHT: 1em;
}
/* 1ère entrée : aligner sur les icônes des outils */
.deroulant_rubriques .deroulant__item_plan {
flex: 1 0 auto;
}
.deroulant_rubriques .deroulant__item_plan > .deroulant__lien {
.deroulant__item_plan > .deroulant__lien {
height: 100%;
}
.deroulant_rubriques .deroulant__item_plan .image_loading {
.deroulant__item_plan .image_loading {
float: var(--spip-right);
}
/* Sous-menus s'ouvrant latéralement */
.deroulant_rubriques .deroulant__sous-menu .deroulant__item {
.deroulant__item_plan .deroulant__sous-menu .deroulant__item {
position: relative;
width: var(--spip-deroulant-col-width);
}
.deroulant_rubriques .deroulant__item_parent.actif > .deroulant__sous-menu,
.deroulant__item_plan .deroulant__item_parent.actif > .deroulant__sous-menu,
.deroulant_rubriques .deroulant__item_parent.actif_tempo > .deroulant__sous-menu {
#LEFT: 4em; /* Décalage arbitraire pas trop grand */
}
/* Lien tout voir sans icône */
.deroulant_rubriques .deroulant__item_tout > .deroulant__lien {
.deroulant__item_plan .deroulant__item_tout > .deroulant__lien {
background-image: none !important;
}
/* Icônes secteur / rubriques selon la profondeur */
.deroulant_rubriques .deroulant__lien[data-profondeur="1"] {
.deroulant__item_plan .deroulant__lien[data-profondeur="1"] {
background-image: url("#CHEMIN_IMAGE{secteur-xx.svg}");
}
.deroulant_rubriques [data-profondeur="2"] .deroulant__lien {
.deroulant__item_plan [data-profondeur="2"] .deroulant__lien {
background-image: url("#CHEMIN_IMAGE{rubrique-xx.svg}");
}
/* picto pour indiquer les items dépliants */
.deroulant_rubriques .deroulant__item_parent > .deroulant__lien {
.deroulant__item_plan .deroulant__item_parent > .deroulant__lien {
position: relative;
}
.deroulant_rubriques .deroulant__item_parent > .deroulant__lien:after {
.deroulant__item_plan .deroulant__item_parent > .deroulant__lien:after {
content: '';
display: block;
width: var(--spip-deroulant-icon-size);
......
prive/themes/spip/forms.css.html
+ 12
− 6
Voir le fichier @ 62be1ec0
......@@ -1507,22 +1507,28 @@
z-index: 1; /* focus dans la mediabox */
}
/* Dans bandeau outils : faire coller l'input aux bords du bandeau, quelque soit sa hauteur*/
#bando_outils .formulaire_recherche {
#bando_haut .formulaire_recherche {
--spip-searchform-padding: 0.66rem;
display: flex;
width: 30ch;
margin: 0;
margin-top: 0;
margin-bottom: 0;
border-left: 1px solid var(--spip-color-theme-light);
border-right: 1px solid var(--spip-color-theme-light);
border-radius: 0;
}
#bando_outils .formulaire_recherche form,
#bando_outils .formulaire_recherche form > div {
#bando_haut .formulaire_recherche form,
#bando_haut .formulaire_recherche form > div {
display: flex;
flex: 1;
}
#bando_outils .formulaire_recherche input.text {
#bando_haut .formulaire_recherche input.text {
height: 100%;
padding-top: 0.44em; /* à la louche pour obtenir même hauteur que le bando */
padding-bottom: 0.44em;
border-radius: 0;
background-color:hsla(0, 0%, 100%, 0.33);
background-color:hsla(0, 0%, 100%, 0.5);
font-size: 1em;
}
/* formulaire_traduire */
......
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter

Forge communautaire SPIP | Charte d'utilisation | Signaler un problème sur ce site