search

epfl-si / jahiap

4 stars 1 forks source link

Rendre le header responsive #280

Closed ebreton closed 7 years ago

ebreton commented 7 years ago

Hello Aline,

Je fais suite au point sur le Header :

Le 2 nov. 2017 à 10:11, Aline Keller aline.keller@gmail.com a écrit :

Rendre le header EPFL responsive => pour ça, j'aurais besoin du lien qui est appelé pour afficher la bannière sur le site http://bootstrap.epfl.ch, le code affiché n'est pas le même que celui du header qu'on a intégré dans le theme.

La documentation pour utiliser la version responsive est ici: http://static.epfl.ch/latest/doc/styleguide/installation.html

Si tu bloques sur un point ou sur un autre. N'hésite pas à poser une question ici en citant @williambelle qui fait partie du DevRun et maintient cette version responsive du header

LuluTchab commented 7 years ago

Autre issue liée à ceci, merci de lire le commentaire d'Hicham suivi du mien: https://github.com/epfl-idevelop/jahiap/issues/279#event-1329367278

alinekeller commented 7 years ago

@ebreton @williambelle

Je n'arrive malheureusement pas à afficher le header responsive. Actuellement, le header "non-responsive" est appelé au moyen des fonctions suivantes:

J'ai retiré ces deux fonctions et ajouté les liens définis dans la doc ( et ) mais rien ne s'affiche.

J'ai sûrement manqué une information, mais je ne trouve pas quoi.

Merci d'avance pour le coup de main.

williambelle commented 7 years ago

Y-a-t'il un endroit ou je peux voir le bandeau responsive déployé pour comprendre le problème ?

La version minimale :

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" class="no-js">
<head>
  <title>Current page title | Website name</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" data-header-version="0.26.0" />
  <link rel="stylesheet" href="https://static.epfl.ch/v0.26.0/styles/epfl-built.css">
</head>
<body>
  <div id="page" class="site site-wrapper">
    <header id="epfl-header" class="site-header epfl" data-ajax-header="https://static.epfl.ch/v0.26.0/includes/epfl-header.en.html">
    </header>
  </div>
  <script src="https://static.epfl.ch/v0.26.0/scripts/epfl-jquery-built.js"></script>
</body>
</html>
alinekeller commented 7 years ago

@williambelle Merci pour la réponse ! Il me manquait le fichier JS, je pense que le problème venait de là. Par contre j'ai un autre soucis à présent: le logo EPFL ne s'affiche qu'après qu'on a cliqué sur un des trois liens "You are", "By school" ou "About"… C'est bizarre. J'ai uploadé le theme avec le header mis à jour ici: http://clients.alinekeller.ch/epfl/

Voici le code de mes fichiers:

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1" data-header-version="0.26.0">
<link rel="profile" href="http://gmpg.org/xfn/11">

<script type="text/javascript" src="//www.epfl.ch/js/jquery-epfl.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script> 
<script type="text/javascript" src="//www.epfl.ch/js/globalnav.js"></script>

<link rel="stylesheet" href="https://static.epfl.ch/v0.26.0/styles/epfl-built.css">

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="site">
  <div class="header-top wrap">
    <header id="epfl-header" class="site-header epfl" data-ajax-header="https://static.epfl.ch/v0.26.0/includes/epfl-header.en.html"></header>
  </div><!-- .header-top -->

footer.php

<script src="https://static.epfl.ch/v0.26.0/scripts/epfl-jquery-built.js"></script>
<?php wp_footer(); ?>
</body>
williambelle commented 7 years ago

Le logo ne s'affiche pas à cause de .site-header { background: #fff; } dans style.scss:559. Il faudrait le mettre comme .site-header { background: none; }

alinekeller commented 7 years ago

Parfait merci :)

LuluTchab commented 7 years ago

Corrigé pour que ça prenne la langue actuelle affichée (via fonction de PolyLang). Si pas de multilangue, c'est anglais qui est pris par défaut. Et si c'est une langue autre que 'fr' ou 'en', c'est 'en' qui est pris par défaut. Changé aussi les liens pour pointer sur "latest" au lieu d'un no de version donné.. sinon, à chaque changement du header, faudra remodifier les thèmes de tous les WP...

LuluTchab commented 7 years ago

@Escapevelocitycham : Ce problème concerne tous les sites donc il suffit de regarder sur un de ceux qui a été redéployé.

Ex: http://test-web-wordpress.epfl.ch/v1-testwp/lanes http://test-web-wordpress.epfl.ch/v1-testwp/events

Escapevelocitycham commented 7 years ago

Good job ... OK pour moi !