Switcheroo dans la barre de navigation

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Switcheroo dans la barre de navigation

Message par Aspen_Hayes Jeu 8 Juin 2023 - 16:31

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour, ::fleur::
Je reviens vers vous car je rencontre un petit problème et je ne sais pas comment le résoudre.
Comme c'est visible sur la capture d'écran, j'ai installé le switcheroo mais je souhaite le déplacer de sorte à ce qu'il remplace la partie "avatar" dans ma barre de navigation. Je sais déplacer le switcheroo, le mettre à gauche, à droite, en haut ou en bas, mais mon cerveau n'arrive pas à faire le point sur comment le mettre à l'endroit voulu. Si quelqu'un sait comment je dois m'y prendre, ce serait fantastique ! Et évidemment, de fait, que le crédit "forumactif" soit déplacé sur la droite.
Merci ! ::fleur::

TEMPLATE OVERALL_FOOTER_END:
Spoiler:

TEMPLATE OVERALL HEADER:
Spoiler:

LE CSS:
Spoiler:
Aspen_Hayes

Aspen_Hayes
Nouveau membre

Messages : 8
Inscrit(e) le : 24/05/2023

https://destrucsenvrac.forumactif.com/
Aspen_Hayes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Switcheroo dans la barre de navigation

Message par Toryudo Jeu 8 Juin 2023 - 17:02

Bonjour !

Est-ce que vous pourriez faire un petit "photomontage" pour montrer le résultat final désiré ?
Mettre le premier avatar switcheroo à la place de la partie avatar de la barre de navigation, j'arrive à imaginer, mais où mettre le second avatar switcheroo s'il y a un second ? Où placer les suivants s'il y en a d'autres ? Où mettre le + ? Comment s'afficherait la phrase "Associer un personnage" quand on survole le + ? Est-ce que la barre de navigation augmente en hauteur automatiquement ? Ou est-ce que les choses peuvent/doivent dépasser ?

Je ne sais pas encore si c'est possible, je demande juste le maximum d'informations pour faciliter la visualisation Smile
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1315
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Switcheroo dans la barre de navigation

Message par Aspen_Hayes Jeu 8 Juin 2023 - 17:30

Bonjour,

Merci pour votre réponse.
J'ai fait le montage en essayant d'être la plus précise possible.
Spoiler:
En premier lieu, me semble donc que le "+" sera à la place de l'avatar jusqu'à ce que le membre connecte son compte et descendra ensuite d'un rang à chaque nouveau compte comme dans le switcheroo actuellement.
Je pensais aussi supprimer la phrase "associer un personnage" au survol, tout comme le pseudo qui apparait lorsqu'on survole l'avatar (ou du moins, les rendre invisible).
Voilà, je ne sais pas si tout est clair dans mes explications, mais j'ai essayé de l'être au maximum. compress
Aspen_Hayes

Aspen_Hayes
Nouveau membre

Messages : 8
Inscrit(e) le : 24/05/2023

https://destrucsenvrac.forumactif.com/
Aspen_Hayes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Switcheroo dans la barre de navigation

Message par Toryudo Jeu 8 Juin 2023 - 20:25

Alors je pense que ce sera bon avec ces quelques modifications au niveau du CSS.

On commence par modifier la position du switcheroo, pour que le premier cercle se mette à la place de l'avatar actuel :
Code:
.switcheroo[position="top"] {
  position: fixed;
  top: 11px;
  left: 11px;
  z-index: 901;
}

Ensuite, on ajoute un margin-bottom pour espacer un peu les cercles du switcheroo :
Code:
.switcheroo[theme="discord"] .switcheroo__squircle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-squircle);
  margin-bottom: 16px;
}

Et on supprime les textes au survol :
Code:
.switcheroo__popper {
  display: none;
}

Enfin, repositionnement du logo :
Code:
#fa_left {
  position: fixed;
  z-index: 997;
  top: 70px;
  right: 0;
}

Et normalement, tout est bon !
Voici le CSS final avec toutes les modifications citées ci-dessus :
Code:
/* NAVBAR */
 
:root
{
 --couleur-bleue: #91b5bf;
}
 
.bodylinewidth
{
 margin-top: 72px;
}
 
.navbar_arte
{
 width: 100%;
 background: #f9f9f9;
 height: 70px;
 -webkit-box-shadow: 0 2px 1px #e6e6e6;
 box-shadow: 0 2px 1px #e6e6e6;
 position: fixed;
 top: 0;
 left: 0;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 padding: 5px 15px 0 5px;
 z-index: 900;
}
 
.avatar_navbar
{
 width: 60px;
 height: 60px;
 border: 1px solid white;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 padding: 5px;
 background: #e9e9e9;
 display: inline-block;
 float: left;
}
 
.avatar_navbar img
{
 width: 48px;
 height: 48px;
 -o-object-fit: cover;
 object-fit: cover;
}
 
#fa_menu {
  position: fixed;
  top: 4px;
  left: 65px;
  z-index: 999;
}
#fa_menulist {
  position: fixed;
  left: 75px !important;
  top: 28px;
  border: 1px solid #333;
}
 
#fa_notifications {
  position: fixed;
  top: 25px;
  left: 65px;
  z-index: 998;
}
#fa_toolbar #fa_right #notif_list {
  position: fixed;
  left: 75px !important;
  top: 44px;
  border: 1px solid #333;
}
 
#fa_left {
  position: fixed;
  z-index: 997;
  top: 70px;
  right: 0;
}
 
.bloc_pseudo_search, #fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_toolbar #fa_service
{
 font: 9px montserrat;
 display: inline-block;
 text-transform: uppercase;
 letter-spacing: 2px;
 vertical-align: top;
 box-sizing: border-box;
 margin: 10px;
 color: #6f6f6f;
 background: none !important;
}
 
.bloc_pseudo_search li
{
 list-style-type: none;
}
 
.navbar_arte form
{
 height: 20px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 width: 100%;
 background: white;
 padding: 0;
 margin-top: 8px;
}
 
.navbar_arte form input[type="submit"]
{
 border: none!important;
 background: var(--couleur-bleue)!important;
 color: white !important;
 padding: 0 10px!important;
 margin:0!important;
 border-radius:0!important;
 -webkit-box-shadow:none!important;
 box-shadow:none!important;
}
 
.navbar_arte form input[type="text"]
{
 cursor: text;
 border: none!important;
 width: 100%;
 min-width: 150px;
 padding: 0 8px!important;
 margin:0!important;
 background: rgba(255,255,255,0.05)!important;
 color: lightgray;
 font-size:11px;
 border-radius:0!important;
 -webkit-box-shadow:none!important;
 box-shadow:none!important;
 text-transform: uppercase !important;
 font: 10px calibri !important;
 letter-spacing: 2px !important;
}
 
.navbar_arte form input
{
 outline: none;
 font-size:11px;
}
 
.link_navbar
{
 float: right;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 padding: 25px 15px;
 font: 10px montserrat;
 text-transform: uppercase;
}
 
.link_navbar a
{
 text-decoration: none;
 margin: 0 5px;
 color: var(--couleur-bleue);
 font-weight: 600;
}
 
.link_navbar a img
{
 display: none;
}
 
.link_navbar a:hover
{
 text-decoration: none !important;
 color: var(--couleur-bleue);
}
 
.link_navbar a::before,.link_navbar a::after
{
 display: inline-block;
 opacity: 0;
 -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
 -webkit-transition: opacity 0.2s, -webkit-transform 0.3s;
 transition: opacity 0.2s, -webkit-transform 0.3s;
 -o-transition: transform 0.3s, opacity 0.2s;
 transition: transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s, -webkit-transform 0.3s}
 
.link_navbar a::before
{
 content: '[';
 -webkit-transform: translateX(25px);
 -ms-transform: translateX(25px);
 transform: translateX(25px);
}
 
.link_navbar a::after
{
 content: ' ]';
 -webkit-transform: translateX(-25px);
 -ms-transform: translateX(-25px);
 transform: translateX(-25px);
}
 
.link_navbar a:hover::before,.link_navbar a:hover::after
{
 -webkit-transform: translateX(0);
 -ms-transform: translateX(0);
 transform: translateX(0);
 opacity: 1;
}
 
.link_navbar a[href^="/search"]
{
 display: none;
}
 
.link_navbar li
{
 list-style-type: none;
 display: inline-block;
}
 
.mainmenu[href="/calendar"]{display:none;}
.mainmenu[href="/images"]{display:none;}

//**SWITCHEROO**//
:root {
  --color-text: rgba(255, 255, 255, 0.87);
  --color-bg: #17141b;
  --color-delete: #e74c3c;
  --color-tooltip: #010203;
  --color-squircle: #201f2e;
  --color-accent: #b14255;
  --color-button: #aaa2f2;
  --color-pill: #ffffff;
  --gap-size: 16px;
  --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.43, 0.09, 0.38, 2.56);
}
/* BARRE SWITCHEROO --- */
.switcheroo {
  color: var(--color-text);
  background-color: var(--color-bg);
  font-size: 16px;
}
.switcheroo[position="static"] {
  position: relative;
}
/* si barre EN HAUT + MODIFICATION SI DROITE OU GAUCHE*/
.switcheroo[position="top"] {
  position: fixed;
  top: 11px;
  left: 11px;
  z-index: 901;
}
/* si barre EN BAS */
.switcheroo[position="bottom"] {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
}
/* si barre A L'HORIZONRAL */
.switcheroo[direction="horizontal"] {
  width: 100%;
}
/* si barre A LA VERTICAL */
.switcheroo[direction="vertical"] {
  height: 100%;
}
/* Positionnement des ronds */
.switcheroo__squircles {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  padding: var(--gap-size);
  gap: var(--gap-size);
}
.switcheroo[direction="horizontal"] .switcheroo__squircles {
  flex-direction: row;
}
.switcheroo[direction="vertical"] .switcheroo__squircles {
  flex-direction: column;
}
/* AFFICHAGE DES COMPTES ---*/

/* squircle */
.switcheroo[theme="discord"] .switcheroo__squircle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-squircle);
  margin-bottom: 16px;
}
.switcheroo[theme="discord"] .switcheroo__squircle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  transition: border-radius 128ms var(--ease);
}
.switcheroo[theme="discord"] .switcheroo__squircle:hover {
  border-radius: 36%;
}
.switcheroo[theme="discord"][direction="vertical"] .switcheroo__squircle:before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--color-pill);
  position: absolute;
  border-radius: 4px;
  top: 50%;
  transform: translate(-100%, -50%) scale(0);
  transition: transform 128ms, opacity 64ms;
  pointer-events: none;
  opacity: 0;
}
.switcheroo[theme="discord"][direction="horizontal"] .switcheroo__squircle:before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--color-pill);
  position: absolute;
  border-radius: 4px;
  left: 50%;
  transform: translate(-50%, -100%) scale(0);
  transition: transform 128ms, opacity 64ms;
  pointer-events: none;
  opacity: 0;
}
.switcheroo[theme="discord"] .switcheroo__squircle.active {
  border-radius: 36%;
  cursor: default;
}
.switcheroo[theme="discord"][direction="vertical"] .switcheroo__squircle:hover:before {
  opacity: 1;
  transform: translate(-100%, -50%) scale(0.5);
}
.switcheroo[theme="discord"][direction="horizontal"] .switcheroo__squircle:hover:before {
  opacity: 1;
  transform: translate(-50%, -100%) scale(0.5);
}

.switcheroo[theme="discord"][direction="vertical"] .switcheroo__squircle.active:before {
  opacity: 1;
  transform: translate(-85%, -50%) scale(0.2);
  border-radius: 50%;
}
.switcheroo[theme="discord"][direction="horizontal"] .switcheroo__squircle.active:before {
  opacity: 1;
  transform: translate(-50%, -85%) scale(0.2);
  border-radius: 50%;
}


/* Conteneur du pseudo */
.switcheroo__popper {
  display: none;
}
.switcheroo__squircle:hover:before {
  opacity: 1;
  transform: translate(-100%, -50%) scale(0.5);
}

/* avatar */
.switcheroo[theme="discord"] .switcheroo__avatar {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}
.switcheroo[theme="discord"] .switcheroo__avatar img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* divider */
.switcheroo[theme="discord"][direction="vertical"] .switcheroo__divider {
  width: 100%;
  height: 2px;
  background-color: var(--color-pill);
  border-radius: 1px;
  opacity: 0.06;
  transform: scale(0.8);
}
.switcheroo[theme="discord"][direction="horizontal"] .switcheroo__divider {
  width: 2px;
  background-color: var(--color-pill);
  border-radius: 1px;
  opacity: 0.06;
  transform: scale(0.8);
}
/* delete button */
.switcheroo[theme="discord"] .switcheroo__delete {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 16px;
  line-height: 14px;
  height: 16px;
  top: -2px;
  right: -2px;
  border-radius: 50%;
  background-color: var(--color-delete);
  transform: scale(0);
  opacity: 1;
  transition: transform 128ms var(--ease), opacity 64ms var(--ease);
  cursor: pointer;
  font-size: 13px;
}
.switcheroo[theme="discord"] .switcheroo__squircle:hover .switcheroo__delete {
  opacity: 1;
  transform: scale(1);
}
/* logo */
.switcheroo[theme="discord"] .switcheroo__logo {
}
.switcheroo[theme="discord"] .switcheroo__logo img {
  width: 32px;
}
.switcheroo[theme="discord"] .switcheroo__logo:hover {
  background-color: var(--color-accent);
}
/* buttons */
.switcheroo[theme="discord"] .switcheroo__squircle--button {
  transition: border-radius 128ms var(--ease);
  color: var(--color-button);
}
.switcheroo[theme="discord"] .switcheroo__squircle--button:hover {
  color: #fff;
  background-color: var(--color-button);
}
/* MODAL : FENETRE DE CONNEXION --- */
.switcheroo__form {
  padding: 48px;
}
.switcheroo__form-row {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  margin-bottom: 16px;
}
.switcheroo__form-label {
  margin-bottom: 8px;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--color-text) !important;
}
.switcheroo__form-input {
  padding: 6px !important;
  font-size: 16px !important;
  border-radius: 4px !important;
  width: 100% !important;
  border-bottom: 2px solid var(--color-accent) !important;
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  cursor: text !important;
}
.switcheroo__form-button {
  border-radius: 8px;
  padding: 8px;
  border: none;
  outline: none;
  box-shadow: none;
  text-transform: uppercase;
  font-size: 14px;
  align-self: flex-end;
  color: #fff;
  background-color: var(--color-accent);
}

.monomer-overlay {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: 0.2s opacity ease;
  background: rgba(0, 0, 0, 0.6);
}

.monomer-modal {
  position: fixed;
  z-index: 999;
  top: 50%;
  left: 50%;
  opacity: 0;
  width: 94%;
  padding: 24px 20px;
  transition: 0.2s opacity ease;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: var(--color-squircle);
  color: var(--color-text);
}

.monomer-modal.monomer-open.monomer-anchored {
  top: 20px;
  transform: translate(-50%, 0);
}

.monomer-modal.monomer-open {
  opacity: 1;
}

.monomer-overlay.monomer-open {
  opacity: 1;
}

.monomer-close {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  width: 24px;
  height: 24px;
  position: absolute;
  top: -5px;
  right: -5px;
  padding: 5px;
  cursor: pointer;
  color: #fff;
  border: 0;
  outline: none;
  background: var(--color-delete);
  border-radius: 50%;
  padding: 0;
}
.monomer-close:hover {
  opacity: 0.8;
}

Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1315
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Switcheroo dans la barre de navigation

Message par Aspen_Hayes Jeu 8 Juin 2023 - 21:15

En l'état, le code fonctionne parfaitement donc déjà un grand merci !
Maiiis je fais face à un autre problème.
Spoiler:
Comme on le voit sur l'image, lorsque je connecte le 2nd compte (TEST), il reste à sa place (en dessous du compte principal) et ne prend pas celle qui devrait être en tête de liste dans la barre de navigation, à côté du pseudo et des notifications.
Je ne sais pas s'il est possible de bidouiller quelque chose afin qu'au changement de compte via le switcheroo, c'est le compte connecté qui passe dans la barre de navigation ?
Aspen_Hayes

Aspen_Hayes
Nouveau membre

Messages : 8
Inscrit(e) le : 24/05/2023

https://destrucsenvrac.forumactif.com/
Aspen_Hayes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Switcheroo dans la barre de navigation

Message par Toryudo Ven 9 Juin 2023 - 11:33

Bonjour !

Et c'est parti pour la bidouille. Je n'ai pas touché au code du switcheroo parce que je ne connais pas sa licence, donc ce sera moins propre que du natif, mais ça fonctionne tout de même. Il suffit de rajouter une ligne dans le template overall_footer_end, à la quasi toute fin :
Code:
$('#switcheroo').prepend($('#switcheroo .active'));

Ça se passe ici, je vous laisse la rajouter également, après la fermeture }); du new Switcheroo :
Code:
<script>
(function() {
    new Switcheroo('#switcheroo', {
        logo: '', /* accepte html, permet d'afficher un logo qui retourne à l'accueil du forum */
        enableReorder: true, /* activer le drag&drop pour l'ordre des comptes (true/false) */
        updateAvatar: true, /* activer le clique droit pour charger un nouvel avatar (true/false) */
        customButtons: [], /* boutons personnalisés, explication plus bas */
        confirm: true, /* demande une confirmation avant le changement de compte */
        confirmMsg: 'Confirmer le Switcheroo de personnage ?', /* le message affiché lors de la confirmation */
        deleteIcon: '×', /* accepte html, icone pour supprimer un compte lié */
        addIcon: '+', /* accepte html, icone qui ouvre le formulaire de connexion et d'association */
        errorMsg: 'Une erreur est surviendue lors du Switcheroo.',
    });
    $('#switcheroo').prepend($('#switcheroo .active'));
})();
</script>
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1315
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Switcheroo dans la barre de navigation

Message par Aspen_Hayes Ven 9 Juin 2023 - 11:46

Bonjour,

Merci infiniment pour votre aide, le code fonctionne parfaitement et c'est exactement ce que je voulais. ::fleur::

Je note donc le sujet en résolu et vous souhaite une très belle journée. Switcheroo dans la barre de navigation 1f607
Aspen_Hayes

Aspen_Hayes
Nouveau membre

Messages : 8
Inscrit(e) le : 24/05/2023

https://destrucsenvrac.forumactif.com/
Aspen_Hayes a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum