Continuez avec le développement Open Source

Bonjour à tous, dans cette version 0.3, je me concentre sur deux tâches principales. La première Pull Request que j'ai choisi de traiter consiste à implémenter une barre de navigation réactive pour le projet Dazzle-and-Delight.

Aperçu du projet

Le référentiel Dazzle-and-Delight héberge une plateforme de gestion d'événements basée sur le Web. Cette plateforme permet aux utilisateurs de parcourir des informations sur les événements passés et à venir. Le site Web est construit à l'aide de JavaScript, HTML et CSS et contient environ sept pages qui nécessitent des mises à jour pour garantir que la barre de navigation est entièrement réactive sur différentes tailles d'écran.

Détails du travail

Bien que le projet lui-même soit relativement simple, l'ampleur du travail requis pour cette tâche était plus importante. Plus précisément, j'avais besoin de mettre en œuvre une barre de navigation réactive qui s'adapte aux tailles d'écran plus petites (par exemple, les téléphones mobiles et les tablettes).

Pour résoudre ce problème, j'ai introduit un menu hamburger qui, lorsque vous cliquez dessus, révèle une liste verticale de sections de navigation. Ce menu s'affiche uniquement sur les tailles d'écran d'une largeur de 768 px ou moins. La mise en œuvre a impliqué la mise à jour de 14 fichiers au total.

Pour une meilleure organisation du code et une facilité de débogage, j'ai créé un nouveau fichier, navbar_menu.js, qui gère les écouteurs d'événements pour le bouton de menu :

document.getElementById('menu-bar').addEventListener('click', function () {
  console.log('click');
  document.getElementById('section-list').style.display =
    document.getElementById('section-list').style.display === 'none'
      ? 'block'
      : 'none';
});

document.getElementById('close-menu-btn').addEventListener('click', function () {
  document.getElementById('section-list').style.display = 'none';
});

Mon PR : Rendre la barre de navigation réactive

Étapes de mise en œuvre pour chaque fichier HTML :

Ajouter un élément de section avec le>

Inclure le script au bas de chaque fichier HTML. Ce script gère la fonctionnalité afficher/masquer le menu de navigation verticale lors de l'interaction de l'utilisateur.

Conclusion:

Bien que le projet en lui-même ne soit pas trop complexe, le nombre de fichiers concernés par ce changement représentait un défi considérable. Par rapport aux Pull Requests précédentes de ce cours, cette tâche nécessitait des modifications de fichiers plus importantes. Même si ce n'est peut-être pas la tâche la plus difficile techniquement que j'ai entreprise, le volume de mises à jour effectuées démontre les progrès de mes contributions open source.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!