Commit 245b517f authored by Thomas Citharel's avatar Thomas Citharel 🌲

Remove nav

parent 8b01144d
Le code de la nav est sous double licence,
Creative Commons BY-SA http://creativecommons.org/licenses/by-sa/2.0/
et GNU Free Documentation License http://www.gnu.org/copyleft/fdl.html
Bootstrap est sous licence MIT : https://github.com/twbs/bootstrap
jQuery est sous licence MIT : http://jquery.com/download/
Font-awesome est sous licence SIL OFL 1.1 : http://fortawesome.github.io/Font-Awesome/license/
fquery et fbootstrap sont juste des variantes des fichiers officiels
sur lesquel ont été remplacés :
'jQuery' → 'fQuery'
'$(' → 'f$('
'$.' → 'f$.'
[![](https://framagit.org/assets/favicon-075eba76312e8421991a0c1f89a89ee81678bcde72319dd3e8047e2a47cd3a42.ico)](https://framagit.org)
![English:](https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Flag_of_the_United_Kingdom.svg/20px-Flag_of_the_United_Kingdom.svg.png) **Framasoft uses GitLab** for the development of its free softwares. Our Github repositories are only mirrors.
If you want to work with us, **fork us on [framagit.org](https://framagit.org)**. (no registration needed, you can sign in with your Github account)
![Français :](https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Flag_of_France.svg/20px-Flag_of_France.svg.png) **Framasoft utilise GitLab** pour le développement de ses logiciels libres. Nos dépôts Github ne sont que des miroirs.
Si vous souhaitez travailler avec nous, **forkez-nous sur [framagit.org](https://framagit.org)**. (l'inscription n'est pas nécessaire, vous pouvez vous connecter avec votre compte Github)
* * *
Framanav
========
Barre de navigation commune aux sites du réseau
Installation
--------------------
1) Voir à la fin du fichier `nav.js` pour connaître les paramètres personnalisables à définir selon le site
2) Se placer en ligne de commande dans le dossier du *site* et importer les fichiers du dépôt
```bash
cd /home/site/www
git clone https://framagit.org/framasoft/framanav.git nav
```
3) a) Ajouter le script `nav.js` sous le `<body>` du site, là où la nav est requise :
```HTML
<script src="/nav/nav.js" type="text/javascript"></script>
```
Dans certain cas, le CMS utilisé compresse à la volée le javascript, il faut alors utiliser ce code là :
```HTML
<script type="text/javascript">
var script = document.createElement('script');
script.type = "text/javascript";
script.src="/nav/nav.js";
document.getElementsByTagName('head')[0].appendChild(script);
</script>
```
On peut zapper l'étape 2 en utilisant la nav d'un autre site configurée pour autoriser les requêtes Ajax cross-domain.
```HTML
<script src="https://framasoft.org/nav/nav.js" type="text/javascript"></script>
```
b) Ajouter jquery.min.js et bootstrap.min.js avant si nécessaire pour le bon fonctionnement du site
```HTML
<script src="/nav/lib/jquery/jquery.min.js" type="text/javascript"></script>
<script src="/nav/lib/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
```
pour utiliser ces versions de jQuery ou Bootstrap avec la nav, mettre dans le fichier de config :
```JavaScript
l$ = {
js: { j$: 'html', b$: 'html' }
}
```
Si jQuery existe déjà sur le site dans une version antérieure à la 1.9.1 et qu'il y a de nombreuses incompatibilités,
mettre dans le fichier de config :
```JavaScript
l$ = {
js: { j$: 'noConflict' }
}
```
Note : A priori, il ne devrait plus être nécessaire de préciser ces variables si la fonction `i$jQuery` joue bien son rôle de détection.
Note2 : pour désactiver les messages d'alerte, les fenêtre modale et le macaron :
```JavaScript
l$ = {
mute: true
}
```
Tester/Configurer
--------------------
### Config.js
Par défaut, la nav charge la config globale `c$` à la fin du fichier `nav.js` puis importe les ajustements selon le site sur lequel on se trouve `l$` dans le fichier `config.js`.
Il est possible de tester le bon fonctionnement d'une nouvelle config en production (notamment si on ajoute/modifie lourdement des scripts ou fonctions personnalisés) sans aucune incidence sur l'expérience des utilisateurs.
En ajoutant « Framatech » à l'UserAgent de son navigateur, la nav charge la section `agent` du fichier `config.js`.
La fonction i$() sert à détecter sur quelle page, domaine, sous-domaine, etc on se trouve pour affiner la config.
La fonction i$Lang('en') sert à détecter si la page qu'on visite est en anglais
(l'internationnalisation de la nav se fait en fonction de la langue officielle de la page pas en fonction des paramètre de navigation).
### Tests
De même, lorsqu'on modifie le cœur de la nav, une série de pages d'exemple dans le dossier `test` permettent de vérifier grossièrement que rien ne sera cassé.
### Débuggage
Dans la console doit apparaître sur chaque site : `✔ config.js`, `✔ jQuery`, `✔ Bootstrap` et éventuellement `✔ video.js`.
À la ligne config, il y a un `☀` si la nav est appelé juste après le body (chargement rapide) ou un `☁` sinon (chargement plus lent).
Ensuite, se suivent 3 numéros de version : celui de la nav, celui de jQuery fourni par la nav et celui de jQuery trouvé dans le code html de la page.
La ligne jQuery, indique le mode utilisé (noConflict ou pas), la version utilisée, et le mode de chargement (direct en HTML ou via une requête AJAX).
La ligne Bootstrap indique le mode chargement.
Il est possible d'obtenir des informations détaillées en consultant manuellement le contenu des variables :
* n${} = variables globales de la nav
* d${} = données localisées (texte, liens, icônes, couleurs, etc)
* h${} = code html utile généré
* c${} = config complète du site
* l${} = config ajustée du site par rapport à la config globale
Mises à jour planifiées
--------------------
Editer le crontab de l'utilisateur :
```bash
(sudo) crontab -u site -e
```
Et ajouter une ligne à la fin
```
00 4 * * * /home/site/www/nav/update.sh
```
Note : comme on utilise salt pour déployer les mises à jour, normalement ce n'est plus nécessaire.
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
*, *:before, *:after {
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}
#msg {
top:48px;
}
console.log('Framatech');
\ No newline at end of file
This diff is collapsed.
.ui-header {
margin-top:42px;
}
.ui-content header {
margin-bottom:40px;
}
*, *:before, *:after {
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}
#msg {
top:48px;
}
.leaflet-top {
top: 42px;
}
.storage-edit-enabled .storage-main-edit-toolbox {
top:42px;
}
.storage-edit-enabled .leaflet-top {
top: 90px;
}
.storage-edit-enabled #storage-ui-container {
top: 88px;
}
#storage-alert-container {
top: 42px;
}
#storage-tooltip-container {
top: 102px;
}
*, *:before, *:after {
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}
#discourse-modal.in {
display: block !important;
visibility: visible !important;
}
#draft-status {
height: 25px;
}
#reply-control .wmd-controls .d-editor,
#reply-control .wmd-controls .d-editor-container,
#reply-control .wmd-controls .d-editor-textarea-wrapper,
#reply-control .wmd-controls .d-editor-preview-wrapper,
#reply-control .wmd-controls .d-editor-input,
#reply-control .wmd-controls .d-editor-preview,
#reply-control .d-editor-button-bar {
box-sizing: border-box !important;
}
/* Accueil */
.home #menu{
display:none;
}
.home .row.col-xs-12{
margin-left:0;
}
.home #menu a {
min-height:76px;
text-decoration:none
}
.home #menu .fa-stack{
float:left;
margin-right:15px;
font-size:28px
}
.home #menu a .h4{
line-height:30px
}
.home .faq,
.home .formContact{
max-width:570px;margin:0 auto
}
.home form .alert {
margin-top:20px;
}
/* FAQ */
.foire-aux-questions h2 {
font-size: 24px;
line-height: 1.1;
margin-top:30px;
padding-left:15px
}
.foire-aux-questions .list-group-item-heading{
cursor:pointer;
padding:15px 15px;
margin:0px;
font-size: 18px;
line-height: 1.1;
}
.foire-aux-questions .list-group-item-text{
padding: 0px;
margin: 0px 15px;
padding-top: 15px;
border-top: 1px solid #ccc;
}
.foire-aux-questions .list-group-item{
padding:0;
}
.foire-aux-questions .list-group-item-heading a{
position:relative;
top:-70px;
visibility:hidden;
}
#content .entry-content li {
margin-bottom:7px;
}
This diff is collapsed.
// Tutoriel
d$.f.date.modal = {
title: '',
file: '',
link: '',
or: ''
}
if( i$Lang('fr') ) {
d$.f.date.modal.title = 'Planifier un rendez-vous rapidement avec Framadate';
d$.f.date.modal.file = 'tutoframadate.html';
d$.f.date.modal.link = 'lire le tutoriel détaillé ?';
d$.f.date.modal.or = 'ou';
}
if( i$Lang('en') ) {
d$.f.date.modal.title = 'How to quickly schedule a meeting with Framadate';
d$.f.date.modal.file = 'tutoframadateENG.html';
d$.f.date.modal.link = 'read the how-to?';
d$.f.date.modal.or = 'or';
}
if( d$.f.date.modal.file != '' ) {
f$('a[href*="aqg259dth55iuhwm"]:contains("exemple")').before('<a href="javascript:void(0)" data-toggle="modal" data-target="#modal-Tuto">'+d$.f.date.modal.link+'</a> '+d$.f.date.modal.or+' ');
f$('main .col-md-4:has(.glyphicon-question-sign)').append(
h$Modal('Tuto', d$.f.date.modal.title, '', '<button class="btn" id="modal-close" data-dismiss="modal">'+d$.t.close+'</button>')
);
f$('#modal-Tuto .modal-dialog').addClass('modal-lg');
f$('#modal-Tuto .modal-body').load('_tutoriel/'+d$.f.date.modal.file+' .row', function() {
f$( "#modal-Tuto .modal-body img" ).attr( "src", function( i, val ) {
return '_tutoriel/'+ val;
});
f$( "#modal-Tuto .modal-body .row" ).after('<hr role="presentation" />');
});
}
// Bouton edit
var f$_btn_edit = f$('#poll_form a.btn[href$="edit"]').parent().html();
f$('#message-container a[href$="edit"]').after(function(){
return '<div class="input-group input-group-sm">'+
'<div class="input-group-btn">'+
f$_btn_edit+
'</div>'+
'<input class="form-control" readonly="readonly" value="'+f$(this).attr('href')+'" type="text" aria-hidden="true">'+
'</div>'
}).remove();
f$('head').append('<style>.yes .btn,.yes .btn:hover { color: #677835 !important;}.ifneedbe .btn,.ifneedbe .btn:hover { color: #C48A1B !important;}.no .btn,.no .btn:hover{color: #AD220F !important;}.ifneedbe input[type="radio"]:checked + label,.yes input[type="radio"]:checked + label { color: #fff !important;}.no .btn.startunchecked {color:#AD220F !important;}.no input[type="radio"]:checked + label:not(.startunchecked){color:#fff !important}</style>');
*, *:before, *:after {
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}
#editorcontainerbox {
top:42px !important;
}
#embed,#connectivity,#settings,#importexport,#users {
top:78px !important;
}
.stickyChat {
top:79px !important;
}
.toolbar ul li select {
height:20px !important;
}
#helpbubbleslink > .buttonicon {
font-size: 18px !important;
}
.toolbar ul li a .buttonicon {
top: -2px !important;
}
.popup label {
margin-bottom:0px;
font-weight:normal;
}
.popup input[type="text"] {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
.popup h1, .popup h2 {
margin-top:0px;
margin-bottom:0px;
}
#mindmaps *, #mindmaps *:before, #mindmaps *:after {
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}
*, *:before, *:after {
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}
#framanav ul li {
list-style:none !important;
}
#nav-alert.alert {
margin-bottom:0;
}
#nav-alert.alert p {
margin:0;
}
.bigbutton {
line-height:10px !important;
}
#navbar {
top: 42px;
}
.btn {
padding: 0;
}
* {
box-sizing: content-box;
}
ol, ul {
margin-bottom: 0;
}
nav .list-unstyled ol,
nav .list-unstyled ul {
margin-bottom: 10px;
}
#framafooter * {
box-sizing: border-box;
}
#footer .nav > li > a {
position: static;
display: inline;
padding: 0;
}
.logo {
background-image: url('https://lut.im/rYkYji53/AEdWGgfD');
background-position: 0% 0%;
width: 42px;
height: 40px;
margin-right: 5px;
}
#search-form {
padding-bottom: 0;
padding-right: 4px;
}
#framafooter {
display:none;
}
/************************* *
* En dehors de Mattermost *
* *********************** */
.outMM { background: #eee !important; }
.outMM h1 {
font-family: "DejaVu Sans",Verdana,Geneva,sans-serif !important;
font-size: 48px;
font-weight: bold;
}
.outMM .lead { font-style:italic; }
.outMM .container-fluid {
/* = .container.ombre */
margin-top: 30px;
margin-bottom: 30px;
padding: 20px 30px;
/* = .ombre */
background-color: #FFF;
box-shadow: -4px 6px 9px rgba(50, 50, 50, 0.5);
/* = replace Mattermost style */
height:auto !important;
/* = .container de BS */
margin-right: auto;
margin-left: auto;
}
.outMM .container-fluid[style] {
margin-top: 72px !important;
}
@media (min-width: 768px) {
.outMM .container-fluid {
width: 750px;
}
}
@media (min-width: 992px) {
.outMM .container-fluid {
width: 970px;
}
}
@media (min-width: 1200px) {
.outMM .container-fluid {
width: 1170px;
}
}
.outMM img.ombre {
box-shadow: 0px 2px 6px rgba(50, 50, 50, 0.4);
margin: 10px;
padding: 0px;
width: 80%;
}
#tuto-faq p[role="presentation"] .glyphicon,
#le-logiciel p[role="presentation"] .glyphicon,
#jardin p[role="presentation"] .glyphicon {
font-size:50px;
}
.carousel { margin:1em auto 4em; max-width:1060px; }
.carousel-inner {
padding-bottom:75px;
box-shadow:0px 6px 9px rgba(50, 50, 50, 0.5);
}
.carousel-control.right, .carousel-control.left {
background-image:none !important;
color:#eee !important;
}
#play-pause {
position: absolute;
margin-top: -100px;
margin-left: 30px;
left: 0%;
}
#play-pause a {
cursor: pointer;
font-size: 30px;
z-index: 1000 !important;
background: #f3f3f3 !important;
border-radius: 30px;
color: #767676 !important;
width: 40px;
height: 40px;
padding-left: 2px;
padding-top: 2px;
position:absolute !important;
opacity: 1;
text-shadow: none;
box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.5);
}
#play-pause a:hover { color: #555 !important; }
.carousel a { border-bottom: none !important; }
.carousel-caption {
background: #f3f3f3 !important;
bottom: -75px !important;
color: #333 !important;
left:0 !important;
right:0 !important;
position: absolute !important;
height: 78px !important;
text-shadow: none;
border-top: 1px solid #ddd;
}
.carousel-caption .h3 {
margin-top:10px;
}
.carousel img {
width: 100%;
margin: 0;
}
/* Fix Mattermost */
.outMM .btn {
border-radius: 4px;
-moz-transition: none;
-o-transition: none;
-webkit-transition: none;
transition: none;
}
.outMM .signup-team__container {
padding:0px;
max-width:auto;
}
.outMM .signup-team__container .btn {
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;