Share your projects

lexoyo

Is there anyone here? Wana share some thoughts or a projects or wishes for 2024? 🙂
Y a-t'il quelqu'un ici? Voulez-vous partager quelques réflexions, projets ou souhaits pour 2024 ? 🙂

Jeaan-phi

"Meilleurs vœux à tous,

Alors, je pense mettre en place une "boîte à outils Widgets Silex v3" dans laquelle on trouverait des codes tout faits pour intégrer certains widgets dans Silex v3. Le but est simple : gagner en productivité en utilisant simplement des copies --> coller des codes dans le HTML head , Custom code à personnaliser selon son environnement , bien évidemment, et le tour est joué."

Widgets tel que:

Menus
Slider manuel, automatique
Popup
Lightshow

Ces quatre widgets sont déjà réalisés et fonctionnels.

Je suis en pleine réflexion avec @lexoyo sur la manière de procéder pour mettre en ligne.

Des besoins spécifiques de widgets ? Postez votre demande en commentaire, et je verrai si je peux vous aider en fonction de mes compétences.

Je regarde également pour proposer des Templates

Nous attendons vos retours 🙂

lexoyo

A ce sujet je suis tombé sur ce site qui liste des templates v2
https://templates.silex.me/

Et ce site aussi
https://nicepage.com/html-templates

Jeaan-phi

lexoyo

Bien sûr c'est quelque chose comme ceci qu'il nous faut,
mais comment faire pour mettre en place l'aperçu responsive en live ?

lexoyo

@Gab @DSW you still here?

@olisim611 ?

lexoyo

ah ca je ne sais pas

Jeaan-phi

lexoyo

Salut @lexoyo , j'essai de trouver une solution pour mettre en place la prévisualisation des templates en live
"responsive"
Je fais mes tests et revient vers toi.

olisim611

Bonjour Lexoyo.

comme tu vois, je ne suis pas régulier ici car je n'utilise pas Silex très souvent.
Ce qui me bloque, c'est pour moi, l'impossibilité de réer un menu de navigation qui ne soit pas un menu hamburger. Je ne trouve pas comment créer un menu comme sur ce site https://www.nectar-io.fr/ qui a été créé avec Silex, d'après la dernière newsletter...
Je n'ai aucune notion de programmation ou de codes de mise en forme. Par exemple, dans les paramètres du menu hamburger, je ne sais pas comment définir une page comme étant la fille d'une autre page, comme dans le site nectar: la page "Expertise" est une page fille de la page "Notre vision".
Merci à vous.
Quand j'utilise Silex maintenant, je l'utilise avec la page https://editor.silex.me/.
Merci de votre aide.
Olivier

lexoyo

Hello @olisim611
Alors editor.silex.me c'est la v2 de silex qui n'est plus maintenue
On passe tous a la v3
Mais si besoin je peux t'aider
Par contre dans ce que tu dis (par exemple la phrase "définir une page comme étant la fille d'une autre page") je comprends que tu t'attends a un outil du type wix alors que silex est beaucoup plus proche de webflow. Dans silex tu manipules des éléments tres simples (conteneurs, texte, liste déroulante, bouton) pas des composants hauts niveau. Meme si tu ne codes pas, meme si tu n'as pas de notions de html/css, au final c'est ce que tu apprends en apprenant silex
Donc si tu as le temps et l'énergie c'est fait pour ca, sinon il vaut mieux utiliser des outils comme wordpress ou autre cms moins souple/puissant mais bcp plus simple
Qu'en dis tu?

lexoyo

Jeaan-phi OK top!
N'hésite pas à lancer une discussion pour gagner du temps / partager les expériences

Jeaan-phi

Salut lexoyo ,
voici un lien sur lequel j'ai réussi à mettre en place une visualisation responsive des futurs templates de silex v3.
Les différents formats sont présents en haut du site avec la prévisualisation live en dessous.
Quand on clic sur la fermeture de la prévisualisation on est redirigé vers la future page de présentation de l'ensemble des templates.

Si cela te convient, je te fournis les codes.
Trop content d'avoir réussi à mettre cela en place 😉

https://responsive-live-silexv3.netlify.app/

lexoyo

ah ouais intéressant!
c'est une app js?
je suis pas sur de comprendre, on peut le mettre dans un site silex qui présente des templates?

Jeaan-phi

lexoyo

Pour le coup, c'est moi qui ne suis pas sûr de comprendre ta réflexion.
Le code n'utilise pas de ressources extérieures ; il est autonome et fonctionne avec les éléments HTML.
Je ne vois pas où est le problème à utiliser cela dans un site Silex pour la présentation des futurs templates.

HTML head

<script>
  document.addEventListener('DOMContentLoaded', function () {
    function init() {
        document.getElementById('previewDesktopBtn').addEventListener('click', function (e) {
            setLivePreviewFrameSize(this);
            setActiveResponsiveButton(this);
            e.preventDefault();
        });

        document.getElementById('previewLaptopBtn').addEventListener('click', function (e) {
            setLivePreviewFrameSize(this);
            setActiveResponsiveButton(this);
            e.preventDefault();
        });

        document.getElementById('previewTabletBtn').addEventListener('click', function (e) {
            setLivePreviewFrameSize(this);
            setActiveResponsiveButton(this);
            e.preventDefault();
        });

        document.getElementById('previewPhoneHorizontalBtn').addEventListener('click', function (e) {
            setLivePreviewFrameSize(this);
            setActiveResponsiveButton(this);
            e.preventDefault();
        });

        document.getElementById('previewPhoneBtn').addEventListener('click', function (e) {
            setLivePreviewFrameSize(this);
            setActiveResponsiveButton(this);
            e.preventDefault();
        });

        detectActiveResponsiveButton();
    }

    if (document.readyState === 'complete') {
        init();
    } else {
        document.addEventListener('readystatechange', function () {
            if (document.readyState === 'complete') {
                init();
            }
        });
    }

    function setActiveResponsiveButton(btn) {
        document.querySelectorAll('.page-preview-header > a').forEach(function (el) {
            el.classList.remove('active');
        });
        btn.classList.add('active');
    }

    function detectActiveResponsiveButton() {
        var d = device || 'desktop';
        document.getElementById('preview' + d.charAt(0).toUpperCase() + d.slice(1) + 'Btn').click();
    }

    function setLivePreviewFrameSize(srcEl) {
        var getScrollbarWidth = function () {
            var s = document.createElement('div');
            s.style.width = '100px';
            s.style.height = '100px';
            s.style.overflow = 'scroll';
            s.style.visibility = 'hidden';
            s.style.position = 'absolute';
            s.style.top = '-99999px';
            document.body.appendChild(s);
            var res = s.offsetWidth - s.clientWidth;
            document.body.removeChild(s);
            return res;
        };
        var attr = srcEl.getAttribute('data-preview-size');
        document.getElementById('livePreviewFrame').style.width = attr.indexOf('%') !== -1 ? attr : (parseInt(attr, 10) + getScrollbarWidth()) + 'px';
    }
});
</script>

Jeaan-phi

Custom code

<div class="page-preview">
    <div class="page-preview-header">
        <a href="#" id="previewDesktopBtn" data-preview-size="100%"><img src="assets/responsive-desktop.png" alt="Responsive Desktop Mode"></a>
        <a href="#" id="previewLaptopBtn" data-preview-size="1040px"><img src="assets/responsive-laptop.png" alt="Responsive Laptop Mode"></a>
        <a href="#" id="previewTabletBtn" data-preview-size="820px"><img src="assets/responsive-tablet.png" alt="Responsive Tablet Mode"></a>
        <a href="#" id="previewPhoneHorizontalBtn" data-preview-size="640px"><img src="assets/responsive-phone-horizontal.png" alt="Responsive Phone Horizontal Mode"></a>
        <a href="#" id="previewPhoneBtn" data-preview-size="440px"><img src="assets/responsive-phone.png" alt="Responsive Phone Mode"></a>
        <a class="close" href="https://www.silex.me/"><img src="assets/icon-close.png" alt="Close"></a>
    </div>
    <div class="page-preview-body">
        <iframe id="livePreviewFrame" src="https://www.jpwebdesign.be" width="1057" height="640" style="width:100%;"></iframe>
    </div>
</div>

lexoyo

Ok je comprends maintenant

Tu peux en faire un widget?