Version mobile : problème de mise en page

3 participants

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

Résolu Version mobile : problème de mise en page

Message par melou15 Jeu 8 Avr 2021 - 17:28

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 : http://www.caverne-partitions.com

Description du problème

Bonjour,

Comme l'indique cette capture d'écran sur la version mobile de mon forum, les statistiques des sujets (1 réponse etc) mangent sur les titres des sujets.
Comment faire pour régler afin que tout fonctionne bien, comme sur la version mobile du FDF ?
Version mobile : problème de mise en page Img_8310

Merci d'avance pour votre aide Smile
melou15

melou15
Membre habitué

Masculin
Messages : 1355
Inscrit(e) le : 24/01/2008

Voir le profil de l'utilisateur http://www.caverne-partitions.com
melou15 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Version mobile : problème de mise en page

Message par melou15 Ven 9 Avr 2021 - 21:02

Up Smile
melou15

melou15
Membre habitué

Masculin
Messages : 1355
Inscrit(e) le : 24/01/2008

Voir le profil de l'utilisateur http://www.caverne-partitions.com
melou15 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Version mobile : problème de mise en page

Message par melou15 Dim 11 Avr 2021 - 10:58

Up up Smile
melou15

melou15
Membre habitué

Masculin
Messages : 1355
Inscrit(e) le : 24/01/2008

Voir le profil de l'utilisateur http://www.caverne-partitions.com
melou15 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Version mobile : problème de mise en page

Message par Pinguino Lun 12 Avr 2021 - 10:23

Bonjour,

Il y a eu une mise à jour à ce niveau la semaine passée car l'équipe s'est rendue compte que les titres des sujets étaient toujours coupés après 4 ou 5 mots, rendant impossible leur lecture sur la page d'un forum ou d'un sujet.

Pouvez-vous vider votre cache et retester svp ? Si le problème persiste, il faudrait nous partager l'URL précise de la page sur laquelle nous pouvons reproduire ce problème svp.

Merci.
Pinguino

Pinguino
Adminactif
Adminactif

Masculin
Messages : 13121
Inscrit(e) le : 02/05/2004

Voir le profil de l'utilisateur
Pinguino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Version mobile : problème de mise en page

Message par melou15 Lun 12 Avr 2021 - 13:54

Bonjour Pinguino et merci pour la réponse !
Problème toujours d'actualité sur mon mobile et sur tous les forums comme ici : https://www.caverne-partitions.com/f2-informations-generales-fonctionnement

Arrivez-vous à le reproduire ? 
A noter que mon template topics_list_box (version mobile) est modifié : 
Code:
<!-- BEGIN topics_list_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
    <!-- BEGIN multi_selection -->
        <script type="text/javascript">

        function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}()
        {
            alert('MAIN');

            var all_checked = true;

            for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++)
            {
                if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}')
                {
                    all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
                }
            }

            document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
        }

        function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}()
        {
            alert('ALL');

            for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++)
            {
                if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}')
                {
                    document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
                }
            }
        }

        </script>
    <!-- END multi_selection -->

    <div class="forum">
        <h2>{topics_list_box.row.L_TITLE}</h2>
            <!-- BEGIN multi_selection -->
            <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
            <!-- END multi_selection -->
<!-- END header_table -->

<!-- BEGIN header_row -->
        <strong>{topics_list_box.row.L_TITLE}</strong>
<!-- END header_row -->

<!-- BEGIN topic -->

    <!-- BEGIN table_sticky -->
        </div>
        <div class="forum">
            <h2>{topics_list_box.row.topic.table_sticky.L_TITLE}</h2>
                <!-- BEGIN multi_selection -->
                <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
                <!-- END multi_selection -->
    <!-- END table_sticky -->
        <div class="forum-section-wrap">
        <div class="{topics_list_box.row.FOLDER_CLASSNAME} forum-section">
            <a href="{topics_list_box.row.U_VIEW_TOPIC}" title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" >
                <div class="forum-icon"><i class="material-icons"></i><!-- BEGIN avatar --><div class="forum-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</div><!-- END avatar --></div>
                <div class="forum-content">
                    <h3>
                        <!-- BEGIN single_selection -->
                            <span class="radio">
                            <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
                            <span class="radio-check"></span>
                        </span>&nbsp;
                        <!-- END single_selection -->
                        {topics_list_box.row.TOPIC_TYPE}{topics_list_box.row.TOPIC_TITLE}</h3><div class="forum-statistics">{topics_list_box.row.REPLIES} {L_REPLIES}</div>
                    <div class="forum-lastpost">{topics_list_box.row.L_LATEST_POST_FROM_THE}<div class="lastpost-arrow"></div></div>
                </div>
            </a>
        </div>
        <a href="{topics_list_box.row.LAST_POST_IMG}" class="last-post-link">Last post</a>
        </div>
<!-- END topic -->
<!-- BEGIN no_topics -->
        <div class="forum-empty">
            {topics_list_box.row.L_NO_TOPICS}
        </div>
<!-- END no_topics -->

<!-- BEGIN bottom -->
    </div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

Merci d'avance Smile
melou15

melou15
Membre habitué

Masculin
Messages : 1355
Inscrit(e) le : 24/01/2008

Voir le profil de l'utilisateur http://www.caverne-partitions.com
melou15 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Version mobile : problème de mise en page

Message par Pinguino Lun 12 Avr 2021 - 13:57

Oui je reproduis bien. Pouvez-vous tester en forçant les templates par défaut de la version mobile svp ?
Pinguino

Pinguino
Adminactif
Adminactif

Masculin
Messages : 13121
Inscrit(e) le : 02/05/2004

Voir le profil de l'utilisateur
Pinguino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Version mobile : problème de mise en page

Message par Kardo Lun 12 Avr 2021 - 14:29

Bonjour,
Le problème est lié à votre script qui ajoute des couleurs sur l'éditeur (lorsqu'il était appelé sans que l'éditeur ne soit présent sur la page) :
Code:
$(function () {
    $(function () {
        $.sceditor.command.get('color')._menu= function(editor, caller, callback) {
            var colors = {},
                html = $('<div />');

            colors[editor._('Rouge foncé')] = '#660000';
            colors[editor._('Rouge')] = '#ff0000';
            colors[editor._('Orange')] = '#FF9933';
            colors[editor._('Corail')] = '#d14600'; /* nom et couleur perso */
            colors[editor._('Jaune')] = '#FFFF00';
            colors[editor._('Vert')] = '#007d32';
            colors[editor._('Vert clair')] = '#66cc66';
            colors[editor._('Olive')] = '#666633';
            colors[editor._('Bleu')] = '#0398ff';
            colors[editor._('Bleu foncé')] = '#00008c';
            colors[editor._('Indigo')] = '#6600FF';
            colors[editor._('Violet')] = '#b72db2';
            colors[editor._('Rose')] = '#ff66ff';
            colors[editor._('Gris')] = '#778899';
            colors[editor._('Blanc')] = '#EEEEEE';
            colors[editor._('Noir')] = '#000000';


            for(var k in colors)
                html.append('<div><a class="sceditor-fontsize-option"><font color="' + colors[k] + '">' + k + '</font></a></div>');

            html.find('font').click(function(e) {
                callback($(this).attr('color'));
                editor.closeDropDown(true);
                e.preventDefault();
            });

            editor.createDropDown(caller, "color-picker", html);
        };
    })
});

Voici une version corrigée qui devrait résoudre le problème :
Code:
$(function () {
    if ($.sceditor) {
        $.sceditor.command.get('color')._menu = function (editor, caller, callback) {
            var colors = {},
                html = $('<div />');

            colors[editor._('Rouge foncé')] = '#660000';
            colors[editor._('Rouge')] = '#ff0000';
            colors[editor._('Orange')] = '#FF9933';
            colors[editor._('Corail')] = '#d14600'; /* nom et couleur perso */
            colors[editor._('Jaune')] = '#FFFF00';
            colors[editor._('Vert')] = '#007d32';
            colors[editor._('Vert clair')] = '#66cc66';
            colors[editor._('Olive')] = '#666633';
            colors[editor._('Bleu')] = '#0398ff';
            colors[editor._('Bleu foncé')] = '#00008c';
            colors[editor._('Indigo')] = '#6600FF';
            colors[editor._('Violet')] = '#b72db2';
            colors[editor._('Rose')] = '#ff66ff';
            colors[editor._('Gris')] = '#778899';
            colors[editor._('Blanc')] = '#EEEEEE';
            colors[editor._('Noir')] = '#000000';


            for (var k in colors)
                html.append('<div><a class="sceditor-fontsize-option"><font color="' + colors[k] + '">' + k + '</font></a></div>');

            html.find('font').click(function (e) {
                callback($(this).attr('color'));
                editor.closeDropDown(true);
                e.preventDefault();
            });

            editor.createDropDown(caller, "color-picker", html);
        };
    }
});


Kardo

Kardo
Dévactif
Dévactif

Messages : 127
Inscrit(e) le : 06/12/2019

Voir le profil de l'utilisateur https://www.forum.forumactif.com
Kardo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Version mobile : problème de mise en page

Message par melou15 Lun 12 Avr 2021 - 14:38

Pinguino a écrit:Oui je reproduis bien. Pouvez-vous tester en forçant les templates par défaut de la version mobile svp ?

Alors oui, en forçant les templates par défaut ça fonctionne ! Wink Mais j'aimerais bien conserver mes modifications...

Kardo a écrit:Bonjour,
Le problème est lié à votre script qui ajoute des couleurs sur l'éditeur (lorsqu'il était appelé sans que l'éditeur ne soit présent sur la page) :
Code:
$(function () {
    $(function () {
        $.sceditor.command.get('color')._menu= function(editor, caller, callback) {
            var colors = {},
                html = $('<div />');

            colors[editor._('Rouge foncé')] = '#660000';
            colors[editor._('Rouge')] = '#ff0000';
            colors[editor._('Orange')] = '#FF9933';
            colors[editor._('Corail')] = '#d14600'; /* nom et couleur perso */
            colors[editor._('Jaune')] = '#FFFF00';
            colors[editor._('Vert')] = '#007d32';
            colors[editor._('Vert clair')] = '#66cc66';
            colors[editor._('Olive')] = '#666633';
            colors[editor._('Bleu')] = '#0398ff';
            colors[editor._('Bleu foncé')] = '#00008c';
            colors[editor._('Indigo')] = '#6600FF';
            colors[editor._('Violet')] = '#b72db2';
            colors[editor._('Rose')] = '#ff66ff';
            colors[editor._('Gris')] = '#778899';
            colors[editor._('Blanc')] = '#EEEEEE';
            colors[editor._('Noir')] = '#000000';


            for(var k in colors)
                html.append('<div><a class="sceditor-fontsize-option"><font color="' + colors[k] + '">' + k + '</font></a></div>');

            html.find('font').click(function(e) {
                callback($(this).attr('color'));
                editor.closeDropDown(true);
                e.preventDefault();
            });

            editor.createDropDown(caller, "color-picker", html);
        };
    })
});

Voici une version corrigée qui devrait résoudre le problème :
Code:
$(function () {
    if ($.sceditor) {
        $.sceditor.command.get('color')._menu = function (editor, caller, callback) {
            var colors = {},
                html = $('<div />');

            colors[editor._('Rouge foncé')] = '#660000';
            colors[editor._('Rouge')] = '#ff0000';
            colors[editor._('Orange')] = '#FF9933';
            colors[editor._('Corail')] = '#d14600'; /* nom et couleur perso */
            colors[editor._('Jaune')] = '#FFFF00';
            colors[editor._('Vert')] = '#007d32';
            colors[editor._('Vert clair')] = '#66cc66';
            colors[editor._('Olive')] = '#666633';
            colors[editor._('Bleu')] = '#0398ff';
            colors[editor._('Bleu foncé')] = '#00008c';
            colors[editor._('Indigo')] = '#6600FF';
            colors[editor._('Violet')] = '#b72db2';
            colors[editor._('Rose')] = '#ff66ff';
            colors[editor._('Gris')] = '#778899';
            colors[editor._('Blanc')] = '#EEEEEE';
            colors[editor._('Noir')] = '#000000';


            for (var k in colors)
                html.append('<div><a class="sceditor-fontsize-option"><font color="' + colors[k] + '">' + k + '</font></a></div>');

            html.find('font').click(function (e) {
                callback($(this).attr('color'));
                editor.closeDropDown(true);
                e.preventDefault();
            });

            editor.createDropDown(caller, "color-picker", html);
        };
    }
});

Je viens de tester mais ça ne modifie rien Wink
melou15

melou15
Membre habitué

Masculin
Messages : 1355
Inscrit(e) le : 24/01/2008

Voir le profil de l'utilisateur http://www.caverne-partitions.com
melou15 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Version mobile : problème de mise en page

Message par Kardo Lun 12 Avr 2021 - 14:55

Effectivement, ayant vu l'erreur dans la console je pensais que c'était lié à ça...

Essayez en retirant ce script de votre template viewforum_body (en version mobile) :
Code:
<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {
        var desc = $('#page-desc'),
            desc_content = desc.children('.page-desc-content'),
            desc_btn = desc.children('.page-desc-btn');

        if (!desc_content.children('div').is(':empty')) {
            desc.addClass('visible');

            if(desc_content.find('div')[0].scrollHeight > 64) {
                desc_btn.addClass('visible');
            }
        }

        desc_btn.on('click', function() {
            desc.toggleClass('expanded');
        });
    });
    //]]>
</script>


Kardo

Kardo
Dévactif
Dévactif

Messages : 127
Inscrit(e) le : 06/12/2019

Voir le profil de l'utilisateur https://www.forum.forumactif.com
Kardo a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Version mobile : problème de mise en page

Message par melou15 Lun 12 Avr 2021 - 14:58

Ah voilà ça fonctionne ! Grand merci, problème résolu Smile
melou15

melou15
Membre habitué

Masculin
Messages : 1355
Inscrit(e) le : 24/01/2008

Voir le profil de l'utilisateur http://www.caverne-partitions.com
melou15 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