Aide pour retoucher un tpl module connexion [Réglé]
smaj Membre non connecté
-
Booster Roquette
- Voir le profil du membre smaj
- Inscrit le : 17/01/2016
- Groupes :
Je travail sur le module connect à partir du git ainsi que le thème phpboost et je cherche à arranger à ma sauce le module.
Mon but est qu'il n'affiche que le strict minimu puis je clic dessus je doit pouvoir me connecter directement que ce soit pc ou tablette.
J'ai réussit à atteindre ce que je voulais mais j'ai du mal avec le code ce qui fait que c'est pas terrible.
Néanmoins ça fonction quand même mais faudrait que ce soit mieux écrit j'ai un espèce de résidu sore qui reste en haut.
Code TPL :
# IF C_USER_NOTCONNECTED #
<script>
<!--
function check_connect()
{
if( document.getElementById('login').value == "" )
{
alert("{L_REQUIRE_PSEUDO}");
return false;
}
if( document.getElementById('password').value == "" )
{
alert("{L_REQUIRE_PASSWORD}");
return false;
}
}
-->
</script>
# ENDIF #
<script>
<!--
function open_submenu(myid)
{
jQuery('#' + myid).toggleClass('active');
}
-->
</script>
<div id="command-bar">
# IF C_USER_NOTCONNECTED #
<div id="connect-menu">
<div class="horizontal-fieldset">
<ul class="connect-content">
<span class="connect-welcome"><a>{L_CONNECT}</a></span>
<li class="connect-menu-container" >
<i class="fa fa-sign-in"></i>
<ul class="connect-connected" style="padding: 40px ;">
<form action="{U_CONNECT}" method="post" onsubmit="return check_connect();">
<li><input type="text" id="login" name="login" title="{L_PSEUDO}" placeholder="{L_PSEUDO}" class="connect-form"></li><p> </p>
<li><input type="password" id="password" name="password" class="connect-form" title="{L_PASSWORD}" placeholder="{L_PASSWORD}"></li><p> </p>
<li><input checked="checked" id="autoconnect" type="checkbox" name="autoconnect" title="{L_AUTOCONNECT}">{L_AUTOCONNECT}</li><p> </p>
<li><input type="hidden" name="redirect" value="{SITE_REWRITED_SCRIPT}"></li>
<li><input type="hidden" name="token" value="{TOKEN}"></li>
<li><button type="submit" id="btn-connect" name="authenticate" value="internal" class="submit">{L_CONNECT}</button></li><p> </p>
</form>
# IF C_USER_REGISTER #
<form action="${relative_url(UserUrlBuilder::registration())}" method="post">
<li><button type="submit" id="btn-register" name="register" value="true" class="submit">{L_REGISTER}</button></li><p> </p>
<li><input type="hidden" name="token" value="{TOKEN}"></li>
</form>
# ENDIF #
<li><a class="forgot-pass small" href="${relative_url(UserUrlBuilder::forget_password())}">{L_FORGOT_PASS}?</a></li>
</ul>
</ul>
<a href="" class="js-menu-button" onclick="open_submenu('connect-menu');return false;" title="{L_CONNECT}"><i class="fa fa-sign-in"></i> {L_CONNECT}</a>
</div>
</div>
# ELSE #
<div id="connect-menu">
<div class="horizontal-fieldset">
<span class="connect-welcome hidden-large-screens">${LangLoader::get_message('welcome', 'user-common')}, <a href="{U_USER_PROFILE}" class="{USER_LEVEL_CLASS}" # IF C_USER_GROUP_COLOR # style="color:{USER_GROUP_COLOR}" # ENDIF #>{PSEUDO}</a></span>
<a href="" class="js-menu-button" onclick="open_submenu('connect-menu');return false;" title="{L_PROFIL}">{L_PROFIL} <i class="fa fa-bars # IF NUMBER_TOTAL_ALERT # blink alert# ENDIF #"></i></a>
<ul class="connect-content">
<li class="connect-welcome">${LangLoader::get_message('welcome', 'user-common')}, <a href="{U_USER_PROFILE}" class="{USER_LEVEL_CLASS}" # IF C_USER_GROUP_COLOR # style="color:{USER_GROUP_COLOR}" # ENDIF #>{PSEUDO}</a>
</li>
<li class="connect-menu-container">
<i class="fa fa-connect# IF NUMBER_TOTAL_ALERT # blink alert# ENDIF #"></i>
<ul class="connect-connected">
<span class="connect-avatar">
<img src="{U_AVATAR_IMG}" alt="avatar" title="Avatar" />
</span>
<li>
<a href="${relative_url(UserUrlBuilder::home_profile())}" class="small"><i class="fa fa-user"></i> {L_PRIVATE_PROFIL}</a>
</li>
<li>
<a href="{U_USER_PM}" class="small"><i class="fa fa-envelope# IF C_HAS_PM # blink alert# ENDIF #"></i> {L_NBR_PM}</a>
</li>
# IF C_ADMIN_AUTH #
<li>
<a href="${relative_url(UserUrlBuilder::administration())}" class="small"><i class="fa fa-wrench# IF C_UNREAD_ALERT # blink alert# ENDIF #"></i> {L_ADMIN_PANEL}# IF C_UNREAD_ALERT # ({NUMBER_UNREAD_ALERTS})# ENDIF #</a>
</li>
# ENDIF #
# IF C_MODERATOR_AUTH #
<li>
<a href="${relative_url(UserUrlBuilder::moderation_panel())}" class="small"><i class="fa fa-legal"></i> {L_MODO_PANEL}</a>
</li>
# ENDIF #
<li>
<a href="${relative_url(UserUrlBuilder::contribution_panel())}" class="small"><i class="fa fa-file-text# IF C_UNREAD_CONTRIBUTION # blink alert# ENDIF #"></i> {L_CONTRIBUTION_PANEL}# IF C_KNOWN_NUMBER_OF_UNREAD_CONTRIBUTION # ({NUMBER_UNREAD_CONTRIBUTIONS})# ENDIF #</a>
</li>
</ul>
</li>
<li class="connect-disconnect">
<a href="${relative_url(UserUrlBuilder::disconnect())}" class="small" title="{L_DISCONNECT}"><i class="fa fa-sign-out"></i> <span class="hidden-large-screens"><span>{L_DISCONNECT}</span></a>
</li>
</ul>
</div>
</div>
# ENDIF #
</div>
Édité par smaj Le 16/09/2016 à 11h58
Swan Membre non connecté
-
Booster Mortier
- Voir le profil du membre Swan
- Inscrit le : 31/05/2013
- Site internet
Bonsoir,
>Le Tpl à lui seul ne suffit pas. Il te faut faire le placement en CSS dans le connect-mini.css que tu copieras du dossier "connect/templates/connect-mini.css/ "vers le dossier de ton thème : "../ templates/ JeSuisLeTheme/modules/connect" .. et mlodifie les placement dans les div adéquat.
Swan.
smaj Membre non connecté
-
Booster Roquette
- Voir le profil du membre smaj
- Inscrit le : 17/01/2016
- Groupes :
J'était resté sur celle qui cache le contenu sur les tablettes et iphone en fait.
Je repasserai par ici et je posterai le résultat des modifications dès que ce sera écrit de façon plus acceptable.
smaj Membre non connecté
-
Booster Roquette
- Voir le profil du membre smaj
- Inscrit le : 17/01/2016
- Groupes :
Code BBCODE :
<button type="submit" id="btn-connect" name="authenticate" value="internal" class="submit" title="{L_CONNECT}">
<span>
<span class="hidden-large-screens">{L_CONNECT} </span><i class="fa fa-sign-in"></i>
</span>
</button>
Je voudrai obtenir un truc qui ressemblerai à ça (dans l'idée) :
Code BBCODE :
<a class="forgot-pass small" href="${relative_url(UserUrlBuilder::forget_password())}" title="{L_FORGOT_PASS}">
<span class="connect-disconnect">
<span class="hidden-large-screens">{L_FORGOT_PASS} </span><i class="fa fa-question-circle"></i>
</span>
</a>Ensuite j'aurai une autre question. Comment faire pour que ceci soit caché par defaut mais qui s’afficherait lorsqu'on cliquerait sur un lien :
Code BBCODE :
<input type="text" id="login" name="login" title="{L_PSEUDO}" placeholder="{L_PSEUDO}" class="connect-form">
<input type="password" id="password" name="password" class="connect-form" title="{L_PASSWORD}" placeholder="{L_PASSWORD}">
<input checked="checked" id="autoconnect" type="checkbox" name="autoconnect" title="{L_AUTOCONNECT}"><span class="hidden-large-screens">{L_AUTOCONNECT}</span>
<input type="hidden" name="redirect" value="{SITE_REWRITED_SCRIPT}">
<input type="hidden" name="token" value="{TOKEN}">
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
Pour l'element caché qui s'affiche au clic, il te faut gérer cela en javascript.
L'élement cliquable possède une id CSS permettant au JS de détecter le clic.
Le code JS te permettra de rendre le second élement visible grace à son id CSS aussi.
C'est exactement le fonctionnement de la seconde barre du BBCode.
smaj Membre non connecté
-
Booster Roquette
- Voir le profil du membre smaj
- Inscrit le : 17/01/2016
- Groupes :
Swan Membre non connecté
-
Booster Mortier
- Voir le profil du membre Swan
- Inscrit le : 31/05/2013
- Site internet
Sur la musique de "il est ou le bonheur . de C.Mae
Il est où le screen, il est où?
Il est où?
Il est où le screen, il est où?
Il est où?
Réponse sur la musique de Vianney:
Mais t’es pas là, mais t’es où? (Pas là, pas là)
Mais t’es pas là, mais t’es où? (Pas là, pas là)
Mais t’es pas là, mais t’es où? (Pas là, pas là)
Mais t’es où, pas là? (Pas là, pas là)
Swan.
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
smaj Membre non connecté
-
Booster Roquette
- Voir le profil du membre smaj
- Inscrit le : 17/01/2016
- Groupes :
Les voili les sreens ...
Voilà ça c'est presque l'aspect que je veux au final sur le site pour les écrans larges.
Pour la version petit écrans je garde la formule d'origine qui convient très bien avec quelques retouches perso.
Mon idée c'est que la zone "Connexion" autrement dit L_CONNECT devrait être cliquable pour ensuite afficher ceci: (l'alignement n'est pas tout à fait au point mais c'est juste pour montrer ce que je faire)
Et pour valider la connexion l'idée serait de garder le "connect-menu-container" et finir d'ajuster l'affichage
Actuellement le mieux que j'ai trouvé à faire c''est ça:
En passant ...
Citation:
Il est où le screen, il est où?
Tien bah en v'la!! :X
Les champs re--deviennent blanc au passage du curseur , c'est pas encore tout à fait au point mais faute d'arriver à faire exactement ce que je voulais le fait de jongler avec les couleur me semble être une bonne alternative ...
Il reste à aligner le tout sur la droite la couleur des boutons et peut-être créer un autre bouton pour le lien vers le mot de passe perdu. et j'ai ajouté les valeurs pour l'affichage du texte en fonction de l'écran
Code TPL :
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
Code HTML :
avec le code javacript suivi
Code JAVASCRIPT :
<script> <!-- function open_submenu(myid) { jQuery('#' + myid).toggleClass('active'); } --> </script>
Cela ajoute la classe "active" sur ton élement avec l'id "myid". Du coup, un petit display:block; sur la classe "active".
smaj Membre non connecté
-
Booster Roquette
- Voir le profil du membre smaj
- Inscrit le : 17/01/2016
- Groupes :
J'ai finalement tout simplifié de la sorte :
Code TPL :
# IF C_USER_NOTCONNECTED #
<script>
<!--
function check_connect()
{
if( document.getElementById('login').value == "" )
{
alert("{L_REQUIRE_PSEUDO}");
return false;
}
if( document.getElementById('password').value == "" )
{
alert("{L_REQUIRE_PASSWORD}");
return false;
}
}
-->
</script>
# ENDIF #
<script>
<!--
function open_submenu(myid)
{
jQuery('#' + myid).toggleClass('active');
}
-->
</script>
<div id="command-bar">
# IF C_USER_NOTCONNECTED #
<div id="connect-menu" class="disconnected">
<div class="horizontal-fieldset">
<a href="" class="js-menu-button" onclick="open_submenu('connect-menu');return false;" title="{L_CONNECT}"><i class="fa fa-sign-in"></i> {L_CONNECT}</a>
<div class="connect-content">
<form action="{U_CONNECT}" method="post" onsubmit="return check_connect();">
<input type="text" id="login" name="login" title="{L_PSEUDO}" placeholder="{L_PSEUDO}" class="connect-form">
<input type="password" id="password" name="password" class="connect-form" title="{L_PASSWORD}" placeholder="{L_PASSWORD}">
<input checked="checked" id="autoconnect" type="checkbox" name="autoconnect" title="{L_AUTOCONNECT}"><span class="hidden-large-screens">{L_AUTOCONNECT}</span>
<input type="hidden" name="redirect" value="{SITE_REWRITED_SCRIPT}">
<input type="hidden" name="token" value="{TOKEN}">
<button type="submit" id="btn-connect" name="authenticate" value="internal" class="submit" title="{L_CONNECT}">
<span>
<span class="hidden-large-screens">{L_CONNECT} </span><i class="fa fa-sign-in"></i>
</span>
</button>
</form>
# IF C_USER_REGISTER #
<form action="${relative_url(UserUrlBuilder::registration())}" method="post">
<button type="submit" id="btn-register" name="register" value="true" class="submit" title="{L_REGISTER}">
<span>
<span class="hidden-large-screens">{L_REGISTER} </span><i class="fa fa-ticket"></i>
</span>
</button>
<input type="hidden" name="token" value="{TOKEN}">
<input type="hidden" name="token" value="{TOKEN}">
</form>
<div class="social-connect-container">
# IF C_FB_AUTH_ENABLED #
<a class="social-connect fb" href="${relative_url(UserUrlBuilder::connect('fb'))}" title="${LangLoader::get_message('facebook-connect', 'user-common')}"><i class="fa fa-facebook"></i><span>${LangLoader::get_message('facebook-connect', 'user-common')}</span></a>
# ENDIF #
# IF C_GOOGLE_AUTH_ENABLED #
<a class="social-connect google" href="${relative_url(UserUrlBuilder::connect('google'))}" title="${LangLoader::get_message('google-connect', 'user-common')}"><i class="fa fa-google-plus"></i><span>${LangLoader::get_message('google-connect', 'user-common')}</span></a>
# ENDIF #
</div>
# ENDIF #
<span class="hidden-small-screens">
<button type="submit" id="btn-forgot-pass" class="submit" title="{L_FORGOT_PASS} ? ">
<span>
<span class="hidden-smal-screens"></span><i class="fa fa-question-circle"></i>
</span>
</button>
</span>
<a class="forgot-pass small" href="${relative_url(UserUrlBuilder::forget_password())}" title="{L_FORGOT_PASS}">
<span class="hidden-large-screens">{L_FORGOT_PASS} ?</span>
</a>
</div>
</div>
</div>
# ELSE #
<div id="connect-menu">
<div class="horizontal-fieldset">
<span class="connect-welcome hidden-large-screens">${LangLoader::get_message('welcome', 'user-common')}, <a href="{U_USER_PROFILE}" class="{USER_LEVEL_CLASS}" # IF C_USER_GROUP_COLOR # style="color:{USER_GROUP_COLOR}" # ENDIF #>{PSEUDO}</a></span>
<a href="" class="js-menu-button" onclick="open_submenu('connect-menu');return false;" title="{L_PROFIL}">{L_PROFIL} <i class="fa fa-bars # IF NUMBER_TOTAL_ALERT # blink alert# ENDIF #"></i></a>
<ul class="connect-content">
<li class="connect-welcome">${LangLoader::get_message('welcome', 'user-common')}, <a href="{U_USER_PROFILE}" class="{USER_LEVEL_CLASS}" # IF C_USER_GROUP_COLOR # style="color:{USER_GROUP_COLOR}" # ENDIF #>{PSEUDO}</a>
</li>
<li class="connect-menu-container">
<i class="fa fa-connect# IF NUMBER_TOTAL_ALERT # blink alert# ENDIF #"></i>
<ul class="connect-connected">
<span class="connect-avatar">
<img src="{U_AVATAR_IMG}" alt="avatar" title="Avatar" />
</span>
<li>
<a href="${relative_url(UserUrlBuilder::home_profile())}" class="small"><i class="fa fa-user"></i> {L_PRIVATE_PROFIL}</a>
</li>
<li>
<a href="{U_USER_PM}" class="small"><i class="fa fa-envelope# IF C_HAS_PM # blink alert# ENDIF #"></i> {L_NBR_PM}</a>
</li>
# IF C_ADMIN_AUTH #
<li>
<a href="${relative_url(UserUrlBuilder::administration())}" class="small"><i class="fa fa-wrench# IF C_UNREAD_ALERT # blink alert# ENDIF #"></i> {L_ADMIN_PANEL}# IF C_UNREAD_ALERT # ({NUMBER_UNREAD_ALERTS})# ENDIF #</a>
</li>
# ENDIF #
# IF C_MODERATOR_AUTH #
<li>
<a href="${relative_url(UserUrlBuilder::moderation_panel())}" class="small"><i class="fa fa-legal"></i> {L_MODO_PANEL}</a>
</li>
# ENDIF #
<li>
<a href="${relative_url(UserUrlBuilder::contribution_panel())}" class="small"><i class="fa fa-file-text# IF C_UNREAD_CONTRIBUTION # blink alert# ENDIF #"></i> {L_CONTRIBUTION_PANEL}# IF C_KNOWN_NUMBER_OF_UNREAD_CONTRIBUTION # ({NUMBER_UNREAD_CONTRIBUTIONS})# ENDIF #</a>
</li>
</ul>
</li>
<li class="connect-disconnect">
<a href="${relative_url(UserUrlBuilder::disconnect())}" class="small" title="{L_DISCONNECT}"><i class="fa fa-sign-out"></i> <span class="hidden-large-screens"><span>{L_DISCONNECT}</span></a>
</li>
</ul>
</div>
</div>
# ENDIF #
</div>
Ensuite j'ai ajuste un peu la feuille de style (couleurs alignements sur la droite etc ..). et je lui ajouté mon nouveau bouton.
Code CSS :
#connect-menu button#btn-forgot-pass { background-color: #BA4B49; border-color: #BA4B49; color: #81A4C8; } #connect-menu button#btn-forgot-pass:hover { background-color: #BA5B59; border-color: #BA4B49; }
Et comme n'utilise pas la connection F et G j'ai enclavé la DIV de la sorte sinon ça laisse un espace entre les boutons et c'est moche:
Code TPL :
# IF C_FB_AUTH_ENABLED #<div class="social-connect-container"> <a class="social-connect fb" href="${relative_url(UserUrlBuilder::connect('fb'))}" title="${LangLoader::get_message('facebook-connect', 'user-common')}"><i class="fa fa-facebook"></i><span>${LangLoader::get_message('facebook-connect', 'user-common')}</span></a> # ENDIF # # IF C_GOOGLE_AUTH_ENABLED # <a class="social-connect google" href="${relative_url(UserUrlBuilder::connect('google'))}" title="${LangLoader::get_message('google-connect', 'user-common')}"><i class="fa fa-google-plus"></i><span>${LangLoader::get_message('google-connect', 'user-common')}</span></a> </div># ENDIF #
Voilà l' idée était de faire en sorte que la barre soit à la fois visible et discrète.
Édité par smaj Le 05/10/2016 à 13h50
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie