Browse Source

Refonte du layout : largeur augmentée à 1440px max + responsive.

Pour les navigateurs modernes, layout à base de grille CSS en 2 ou 3 colonnes selon les écrans.
Breakpoints a 720px/960px/1200px avec variations de font-size sur ces breakpoints
Pour les vieux navigateurs, c'est toujours 3 colonnes en float, à l'ancienne.
Suppression de l'option écran étroit/large qui n'a plus d'intérêt.
dev/responsive
Charles Razack 3 years ago committed by Cerdic
parent
commit
5c457aa53d
  1. 2
      ecrire/inc/presentation_mini.php
  2. 15
      prive/formulaires/configurer_preferences.html
  3. 9
      prive/formulaires/configurer_preferences.php
  4. 3
      prive/squelettes/body.html
  5. 305
      prive/themes/spip/layout.css
  6. 16
      prive/themes/spip/typo.css.html

2
ecrire/inc/presentation_mini.php

@ -62,7 +62,7 @@ function fin_gauche() { return "</div></div><br class = 'nettoyeur' />"; }
*/
function creer_colonne_droite() {
static $deja_colonne_droite;
if ($GLOBALS['spip_ecran'] != 'large' or $deja_colonne_droite) {
if ($deja_colonne_droite) {
return '';
}
$deja_colonne_droite = true;

15
prive/formulaires/configurer_preferences.html

@ -8,21 +8,6 @@
parametre : url d'action ]
#ACTION_FORMULAIRE
<div class="editer-groupe">
#SET{name,spip_ecran}#SET{erreurs,#ENV{erreurs/#GET{name}}}#SET{obli,''}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label><:label_taille_ecran:></label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<div class="choix">
<input type='radio' class='radio' name='#GET{name}' id='[(#GET{name})]_etroit'[(#ENV{#GET{name}}|=={large}|non)checked="checked" ]value="etroit"
onchange="if (this.checked) jQuery('body').addClass('etroit').removeClass('large'); else jQuery('body').removeClass('etroit').addClass('large');"/>
<label for="[(#GET{name})]_etroit"><:info_petit_ecran:></label>
</div>
<div class="choix">
<input type='radio' class='radio' name='#GET{name}' id='[(#GET{name})]_large'[(#ENV{#GET{name}}|=={large}|oui)checked="checked" ]value="large"
onchange="if (this.checked) jQuery('body').addClass('large').removeClass('etroit'); else jQuery('body').removeClass('large').addClass('etroit');"/>
<label for="[(#GET{name})]_large"><:info_grand_ecran:></label>
</div>
</div>
#SET{name,display_navigation}#SET{erreurs,#ENV{erreurs/#GET{name}}}#SET{obli,''}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label><:label_texte_et_icones_navigation:></label>[

9
prive/formulaires/configurer_preferences.php

@ -40,7 +40,6 @@ function formulaires_configurer_preferences_charger_dist() {
$valeurs['display_outils'] = isset($GLOBALS['visiteur_session']['prefs']['display_outils']) ? $GLOBALS['visiteur_session']['prefs']['display_outils'] : 'oui';
$valeurs['display'] = (isset($GLOBALS['visiteur_session']['prefs']['display']) and $GLOBALS['visiteur_session']['prefs']['display'] > 0) ? $GLOBALS['visiteur_session']['prefs']['display'] : 2;
$valeurs['couleur'] = (isset($GLOBALS['visiteur_session']['prefs']['couleur']) and $GLOBALS['visiteur_session']['prefs']['couleur'] > 0) ? $GLOBALS['visiteur_session']['prefs']['couleur'] : 1;
$valeurs['spip_ecran'] = $GLOBALS['spip_ecran'];
$couleurs = charger_fonction('couleurs', 'inc');
$les_couleurs = $couleurs(array(), true);
@ -88,13 +87,5 @@ function formulaires_configurer_preferences_traiter_dist() {
auteur_modifier($GLOBALS['visiteur_session']['id_auteur'], $c);
}
if ($spip_ecran = _request('spip_ecran')) {
// Poser un cookie,
// car ce reglage depend plus du navigateur que de l'utilisateur
$GLOBALS['spip_ecran'] = $spip_ecran;
include_spip('inc/cookie');
spip_setcookie('spip_ecran', $_COOKIE['spip_ecran'] = $spip_ecran, time() + 365 * 24 * 3600);
}
return array('message_ok' => _T('config_info_enregistree'), 'editable' => true);
}

3
prive/squelettes/body.html

@ -16,9 +16,8 @@
<div id="conteneur" class="[(#LARGEUR_ECRAN)]">
<div id="navigation" class='lat' role='contentinfo'>
<INCLURE{fond=prive/squelettes/navigation/#ENV{type-page},ajax=navigation,env}>
[(#EVAL{$GLOBALS}|table_valeur{spip_ecran}|=={large}|oui)
</div>
<div id="extra" class='lat' role='complementary'>]
<div id="extra" class='lat' role='complementary'>
<INCLURE{fond=prive/squelettes/extra/#ENV{type-page},ajax=extra,env}>
</div>
<div id="contenu" role='main'>

305
prive/themes/spip/layout.css

@ -1,51 +1,264 @@
/* Layout */
body {min-width: 780px;}
body.large {min-width: 974px;}
/* ecran etroit*/
#haut {text-align:center;margin-top:10px;}
.largeur { width: 780px; margin: auto; text-align:left;padding:0; }
#conteneur,.table_page { clear: both; margin-right: auto; margin-left: auto; text-align: left; width: 780px; margin-top:0.5em;}
#navigation { float: left; width: 200px; min-height: 100px; overflow-wrap: break-word; }
#extra { float: left; clear:left; width: 200px; overflow-wrap: break-word; }
#contenu { float: right ; margin-left: 30px; width: 550px; min-height:400px}
/**
* ======
* Layout
* ======
*
* Organisation :
*
* 1. Layout général de la page
* 2. Contenus textes limités en largeur
* 3. Divers
* 4. Grenier
*
* Breakpoints : 780px / 1200px
*
* Markup :
*
* body
* |--#bando_haut
* | |--#bando_xxx (x4)
* | |--.largeur
* |--#page
* | |--.largeur
* | | |--#haut
* | | |--#chemin
* | |--#conteneur(.pleine_largeur)
* | |--#navigation
* | |--#extra
* | |--#contenu
* |--#pied
* |--.largeur
*/
/**
* ============================
* 1. Layout général de la page
* ============================
*/
.largeur,
.table_page,
.messages-alertes {
max-width: 1440px;
}
.largeur {
margin: auto;
text-align: left;
padding: 0 10px;
}
#page {
margin: auto;
text-align: center;
}
#haut {
text-align: center;
margin-top: 10px;
}
#contenu {}
#navigation {
overflow-wrap: break-word;
}
#extra {
overflow-wrap: break-word;
}
#pied {}
div.messages-alertes {text-align: right;background: #fff;padding: 5px;width: 770px;clear: both; margin-right: auto; margin-left: auto;}
/* ecran large*/
.large .largeur {width:974px;}
.large #conteneur,.large .table_page { width: 974px; }
.large div.messages-alertes {width: 964px;}
.large #navigation { }
.large #extra { float: right; clear:none; width: 200px; }
.large #contenu { float: left; margin-left: 17px; width: 540px; }
/* les formulaires sont en 600px en config large */
body.large.edition #contenu,
.articles_edit.large #contenu,
.mots_edit.large #contenu,
.breves_edit.large #contenu,
.rubriques_edit.large #contenu {width:600px;}
body.large.edition #extra,
.articles_edit.large #extra,
.mots_edit.large #extra,
.breves_edit.large #extra,
.rubriques_edit.large #extra {width:140px;}
/* une seule colonne centrale */
.pleine_largeur #navigation,.pleine_largeur #extra,
body.large .pleine_largeur #navigation,body.large .pleine_largeur #extra {display:none;}
.pleine_largeur #contenu,
body.large .pleine_largeur #contenu {margin-left:0;width:100%;}
/**
* Écrans moyens : on passe en 2 colonnes.
* Fallback vieux navigateurs : direct en 3 colonnes et basta.
*/
@media (min-width: 720px) {
.largeur {
padding-left: 10px;
padding-right: 10px;
}
/* Navigateurs napthaline */
#conteneur {
text-align: center;
}
#contenu {
text-align: left;
display: inline-block;
width: 61%;
margin-left: auto;
margin-right: auto;
min-height: 50vh;
}
#navigation {
text-align: left;
width: 18%;
float: left;
}
#extra {
text-align: left;
width: 18%;
float: right;
}
/* Les pages qui demandent à être en pleine largeur (sans #nav ni #extra) */
.pleine_largeur #contenu {
width: 100%;
}
.pleine_largeur #navigation,
.pleine_largeur #extra {
display: none;
}
/* Navigateurs récents */
@supports (display: grid) {
/* Les pages "normales" */
#conteneur:not(.pleine_largeur) {
text-align: left;
display: grid;
grid-column-gap: 2%;
/*grid-template-columns:
min-content
minmax(auto, calc(100% - (8em + 8vw)));*/
grid-template-rows: auto 1fr; /* la 1ère ligne doit se collapser */
grid-template-columns:
25% /* navigation & extra */
73%; /* contenu */
grid-template-areas:
"navigation contenu "
"extra contenu ";
-webkit-box-pack: center;
justify-content: center;
}
#contenu {
grid-area: contenu;
width: initial;
margin: 0;
}
#navigation {
grid-area: navigation;
width: initial;
margin-right: 0;
}
#extra {
grid-area: extra;
width: initial;
}
}
}
@media (min-width: 960px) {
.largeur {
padding: 0 20px;
}
@supports (display: grid) {
#conteneur:not(.pleine_largeur) {
grid-template-columns:
25% /* navigation & extra */
73%; /* contenu */
}
}
}
/**
* Sur écrans larges : 3 colonnes.
*/
@media (min-width: 1200px) {
@supports (display: grid) {
#conteneur:not(.pleine_largeur) {
grid-column-gap: 3%;
grid-template-columns:
20% /* navigation */
56% /* contenu */
18%; /* extra */
grid-template-areas:
"navigation contenu extra"
"navigation contenu extra";
}
}
}
/* petit ecrans : flex pour reordonner */
@media (max-width: 719.999px) {
@supports (display: flex) {
#conteneur {
display: flex;
flex-direction: column;
}
#navigation {
order:1;
}
#contenu {
order:2;
}
#extra {
order:3;
}
}
}
/**
* =====================================
* 2. Contenus textes limités en largeur
* =====================================
* On essaie d'obtenir environ 60 charactères max par ligne.
*/
.pleine_largeur .formulaire_spip {
max-width: 60em;
margin-left: auto;
margin-right: auto;
}
/**
* =========
* 3. Divers
* =========
*/
.centered {
margin: 0 auto;
text-align: center;
}
div.messages-alertes {
text-align: right;
background: #fff;
padding: 5px;
clear: both;
margin-right: auto;
margin-left: auto;
}
/**
* ==========
* 4. Grenier
* ==========
*/
.table_page {
margin: auto;
text-align: left;
clear: both;
margin-right: auto;
margin-left: auto;
margin-top: 0.5em;
}
div.table_page {
margin-top: 1em;
}
/*fix all layout problems of IE6 and IE7*/
.lte7 .cadre,
.lte7 .fiche_objet, /*title not visible*/
.lte7 .ajax-action, /*containers of expandible boxes go mad*/
.lte7 .tabs-container, /*containers of expandible boxes go mad*/
.lte7 .fiche_objet,
/*title not visible*/
.lte7 .ajax-action,
/*containers of expandible boxes go mad*/
.lte7 .tabs-container,
/*containers of expandible boxes go mad*/
.lte7 #portfolio,
.lte7 #documents {zoom:1}
div.table_page { margin-top: 1em; }
.centered { margin: 0 auto; text-align: center; }
#page { margin: auto; text-align: center; }
.table_page{ margin: auto; text-align: left; }
.lte7 #documents {
zoom: 1
}

16
prive/themes/spip/typo.css.html

@ -37,7 +37,21 @@
*/
html { font-size: 100.01%; } /* Cf.: http://www.pompage.net/pompe/definir-des-tailles-de-polices-en-CSS/ */
body { background: #GET{background-color}; font: #GET{font-size}/#GET{line-height}[ (#GET{font-family})]; color: #GET{color}; }
body {
background: #GET{background-color};
font: #GET{font-size}/#GET{line-height}[ (#GET{font-family})];
color: #GET{color};
}
@media (min-width: 960px) {
body {
font: [(#GET{font-size}|mult{14}|div{13}|round{4})em]/#GET{line-height}[ (#GET{font-family})];
}
}
@media (min-width: 1200px) {
body {
font: [(#GET{font-size}|mult{15}|div{13}|round{4})em]/#GET{line-height}[ (#GET{font-family})];
}
}
/* Titraille / Intertitres */
h1,h2,h3,h4,h5,h6,

Loading…
Cancel
Save