Browse Source

On teste les formus en reprenant ceux de forums

gestion_archives
Matthieu Marcillaud 3 years ago
parent
commit
8a7cad306f
27 changed files with 5873 additions and 14 deletions
  1. +21
    -7
      content/article.html
  2. +2337
    -0
      css/font-awesome.css
  3. +4
    -0
      css/font-awesome.min.css
  4. BIN
      fonts/FontAwesome.otf
  5. BIN
      fonts/fontawesome-webfont.eot
  6. +2671
    -0
      fonts/fontawesome-webfont.svg
  7. BIN
      fonts/fontawesome-webfont.ttf
  8. BIN
      fonts/fontawesome-webfont.woff
  9. BIN
      fonts/fontawesome-webfont.woff2
  10. +28
    -0
      formulaires/recherche_ajax.html
  11. +45
    -0
      formulaires/recherche_ajax.php
  12. +54
    -5
      galactic_contrib_fonctions.php
  13. +12
    -0
      inclure/forum.html
  14. +53
    -0
      inclure/forums/bloc-discussions.html
  15. +8
    -0
      inclure/forums/bref/commentaires.html
  16. +36
    -0
      inclure/forums/bref/moderation.html
  17. +39
    -0
      inclure/forums/liste-discussions.html
  18. +19
    -0
      inclure/forums/presentation-message.html
  19. +16
    -0
      inclure/forums/presentation-reponse.html
  20. +19
    -0
      inclure/forums/publication-auteur.html
  21. +3
    -0
      inclure/head-theme.html
  22. +52
    -1
      lang/galactic_contrib_fr.php
  23. +11
    -0
      scss/galactic_theme.scss
  24. +148
    -0
      scss/theme/formulaires.scss
  25. +217
    -0
      scss/theme/forums.scss
  26. +70
    -0
      scss/theme/onglets.scss
  27. +10
    -1
      scss/utils/_couleurs.scss

+ 21
- 7
content/article.html View File

@ -33,14 +33,14 @@
<div class="js-tabs tabs__standard">
<ul class="js-tablist tabs__standard_ul tabs__list" data-hx="h2">
<li class="js-tablist__item tabs__standard__li tabs__item">
<a href="#article__documentation" id="label_article__documentation" class="js-tablist__link tabs__link tabs__standard__a"><:galactic_contrib:article_documentation:></a>
<a href="#documentation" id="tab_documentation" class="js-tablist__link tabs__link tabs__standard__a"><:galactic_contrib:article_documentation:></a>
</li>
<li class="js-tablist__item tabs__standard__li tabs__item">
<a href="#article__forum" id="label_article__forum" class="js-tablist__link tabs__link tabs__standard__a"><:galactic_contrib:article_forum:></a>
<a href="#discussions" id="tab_discussions" class="js-tablist__link tabs__link tabs__standard__a"><:galactic_contrib:article_forum:></a>
</li>
</ul>
]
<div class="js-tabcontent tabs__standard__tabcontent tabs__content" id="article__documentation">
<div class="js-tabcontent tabs__standard__tabcontent tabs__content" id="documentation">
<div class="surlignable">
[<div class="#EDIT{descriptif} descriptif">(#DESCRIPTIF|PtoBR)</div>]
[<div class="#EDIT{chapo} chapo" itemprop="description">(#CHAPO|image_reduire{#CONFIG{documentation/taille_redimensionnement_image,440}, 0})</div>]
@ -64,17 +64,31 @@
</abbr>
})</p>]
</div>
[(#SET{repondre_url,repondre_url=#PARAMETRES_FORUM|url_reponse_forum})]
[(#PARAMETRES_FORUM|oui)
<div class="js-tabcontent tabs__standard__tabcontent tabs__content" id="article__forum">
<div class="js-tabcontent tabs__standard__tabcontent tabs__content" id="discussions">
<div class="article__forum">
<INCLURE{fond=inclure/forum}{id_article} />
#FORMULAIRE_FORUM{#SELF}
<INCLURE{fond=inclure/forum,
id_article,
repondre_url=#GET{repondre_url},
repondre_titre=<:repondre_article:>,
env} />
</div>
</div>]
[(#PARAMETRES_FORUM|oui)
</div>
<script type="application/javascript">
(function($){
$(function(){
var hash = window.location.hash.substr(1);
if (hash == 'discussions') {
$('#tab_discussions').click();
}
});
})(jQuery);
</script>
]
</article>

+ 2337
- 0
css/font-awesome.css
File diff suppressed because it is too large
View File


+ 4
- 0
css/font-awesome.min.css
File diff suppressed because it is too large
View File


BIN
fonts/FontAwesome.otf View File


BIN
fonts/fontawesome-webfont.eot View File


+ 2671
- 0
fonts/fontawesome-webfont.svg
File diff suppressed because it is too large
View File


BIN
fonts/fontawesome-webfont.ttf View File


BIN
fonts/fontawesome-webfont.woff View File


BIN
fonts/fontawesome-webfont.woff2 View File


+ 28
- 0
formulaires/recherche_ajax.html View File

@ -0,0 +1,28 @@
<div class="formulaire_spip formulaire_recherche formulaire_recherche_ajax[ (#ENV{class})]">
<form action="[(#ENV{action})]" method="get">
[(#ENV{action}|form_hidden)]
[<input type="hidden" name="lang" value="(#ENV{lang})"/>]
<label for="#ENV{_id_champ}" class="visuallyhidden">
<:info_rechercher_02:>
</label>
[(#SET{titre,#ENV{placeholder,<:info_rechercher:>}})]
[(#CHEMIN{images/icone-loupe.svg}|file_get_contents|replace{'<svg ','<svg height="16" '})]
<div class="search">
<input type="search" placeholder="[(#GET{titre}|attribut_html)]" name="recherche" id="#ENV{_id_champ}" [ value="(#ENV{recherche})" ] accesskey="4" autocapitalize="off" autocorrect="off"/>
</div>
<a class="close ajax" href="[(#ENV{action}|parametre_url{'recherche',''})]" title="Annuler la recherche">
<span class="fa fa-close"></span>
</a>
<div class="submit">
<input type="submit" value="&gt;&gt;" title="[(#GET{titre}|attribut_html)]" onclick="return recherche_submit_#ENV{_id_champ}.apply(this);" />
<a class="none visuallyhidden refresh[ (#ENV{class})]" href="[(#ENV{action}|parametre_url{'recherche',''})]">[(#GET{titre})]</a>
</div>
</form>
</div>
<script type="text/javascript">/*<![CDATA[*/
function recherche_submit_#ENV{_id_champ}() {
var a = $(this).siblings('a.refresh');
var href = parametre_url(a.attr('href'), 'recherche', $(this).parents('form').find('input[type=search]').val());
a.attr('href', href).followLink();
return false;
}/*]]>*/</script>

+ 45
- 0
formulaires/recherche_ajax.php View File

@ -0,0 +1,45 @@
<?php
/***************************************************************************\
* SPIP, Systeme de publication pour l'internet *
* *
* Copyright (c) 2001-2016 *
* Arnaud Martin, Antoine Pitrou, Philippe Riviere, Emmanuel Saint-James *
* *
* Ce programme est un logiciel libre distribue sous licence GNU/GPL. *
* Pour plus de details voir le fichier COPYING.txt ou l'aide en ligne. *
\***************************************************************************/
if (!defined('_ECRIRE_INC_VERSION')) {
return;
}
/**
* chargement des valeurs par defaut des champs du `#FORMULAIRE_RECHERCHE_AJAX{#SELF}`
*
* on peut lui passer l'url de destination en premier argument
* on peut passer une deuxième chaine qui va différencier le formulaire pour pouvoir en utiliser plusieurs sur une même page
*
* @param string $lien URL amène le formulaire validé
* @param string $placeholder Pour indiquer un titre spécifique au placeholder
* @return array
*/
function formulaires_recherche_ajax_charger_dist($lien = '', $placeholder = '') {
if ($GLOBALS['spip_lang'] != $GLOBALS['meta']['langue_site']) {
$lang = $GLOBALS['spip_lang'];
} else {
$lang = '';
}
$class = 'ajax';
$action = ($lien ? $lien : generer_url_public('recherche')); # action specifique, ne passe pas par Verifier, ni Traiter
return
array(
'action' => $action,
'recherche' => _request('recherche'),
'lang' => $lang,
'class' => $class,
'placeholder' => $placeholder,
'_id_champ' => $class ? substr(md5($action . $class), 0, 4) : 'recherche'
);
}

+ 54
- 5
galactic_contrib_fonctions.php View File

@ -1,10 +1,59 @@
<?php
// Retire les liens en syntaxe Trac: [URL titre] ---> titre
function tracbrut($texte)
{
if (preg_match_all('/[[][^ ]* *([^]]*)]/', $texte, $m, PREG_SET_ORDER))
foreach($m as $r)
function tracbrut($texte) {
if (preg_match_all('/[[][^ ]* *([^]]*)]/', $texte, $m, PREG_SET_ORDER)) {
foreach ($m as $r) {
$texte = str_replace($r[0], $r[1], $texte);
}
}
return $texte ? $texte : 'Log';
}
}
/**
* Pluriels, singulier ou zéro...
*
* Les items sont à indiquer comme pour la fonction _T() sous la forme :
* "module:chaine"
*
* Cherchera chaine_zero, chaine_un, chaine_nb en fonction de $nb.
*
* @example
* ```
* [(#NB|contrib_pluraliser{forum:sujets})]
* [(#NB|contrib_pluraliser{#LISTE{forum:sujets_zero,forum:sujets_un,forum:sujets_nb}})]
* ```
*
* @param int $nb : le nombre
* @param string|array $chaine
* - string : radical de l'item de langue, sera complété par _zero, _un, _nb
* - array : couples {0 => module:chaine_zero, 1 => module:chaine_un, 2 => module:chaine_nb}
*
* @param array $vars : Les autres variables nécessaires aux chaines de langues (facultatif)
* @return string : la chaine de langue finale en utilisant la fonction _T()
*/
function contrib_pluraliser($nb, $chaine, $vars = array()) {
$nb = intval($nb);
if (!is_array($vars)) {
$vars = array();
}
if (!is_array($chaine)) {
$chaine = array(
$chaine . '_zero',
$chaine . '_un',
$chaine . '_nb',
);
}
$vars['nb'] = $nb;
if ($nb > 1) {
return _T($chaine[2], $vars);
} elseif ($nb == 1) {
return _T($chaine[1], $vars);
} else {
return _T($chaine[0], $vars);
}
}

+ 12
- 0
inclure/forum.html View File

@ -0,0 +1,12 @@
<div class="comments">
<a href="#comments" id="comments"></a>
<a href="#forum" id="forum"></a>
[<script type="text/javascript">/*<!\[CDATA\[*/(#INCLURE{javascript/thread-move.js}|compacte{js})/*\]\]>*/</script>]
<INCLURE{fond=inclure/forums/bloc-discussions, env, ajax}>
[(#ENV{repondre_url}|oui)
[<div class="comment-form">
[<h2 class="h2">(#ENV*{repondre_titre,<:repondre_article:>}|trim)</h2>]
(#FORMULAIRE_FORUM{#SELF,#ENV{objet},#ENV{id_objet}})
</div>]
[(#PARAMETRES_FORUM|oui)<INCLURE{fond=comments-feed,env} />]
]</div>

+ 53
- 0
inclure/forums/bloc-discussions.html View File

@ -0,0 +1,53 @@
[(#REM)
On présente différents onglets d’affichage des messages, par date, par note, ...
On permet de définir aussi la durée (depuis 3 mois, depuis toujours...)
Par défaut, la durée est sur 5 ans, ce qui accélère l’affichage (la requête) par rapport à «depuis toujours».
]
<div class="comments-posts"></div>[(#REM) fake pour retour JS de Comments ]
[(#SET{self,#SELF|parametre_url{debut_forums,''}})]
<div class="alignement_avec_liste">
<div class="onglets">
<div class="onglets__groupe">
<a href="[(#GET{self}|parametre_url{max,''})]" class="ajax[ (#ENV{max}|non)on]" title="[(#VAL{5}|singulier_ou_pluriel{galactic_contrib:annees_depuis_un,galactic_contrib:annees_depuis_nb})]" rel="nofollow">
[(#VAL{5}|singulier_ou_pluriel{galactic_contrib:annees_un,galactic_contrib:annees_nb})]
</a>
<a href="[(#GET{self}|parametre_url{max,1y})]" class="ajax[ (#ENV{max}|=={1y}|oui)on]" title="[(#VAL{1}|singulier_ou_pluriel{galactic_contrib:annees_depuis_un,galactic_contrib:annees_depuis_nb})]" rel="nofollow">
[(#VAL{1}|singulier_ou_pluriel{galactic_contrib:annees_un,galactic_contrib:annees_nb})]
</a>
<a href="[(#GET{self}|parametre_url{max,3m})]" class="ajax[ (#ENV{max}|=={3m}|oui)on]" title="[(#VAL{3}|singulier_ou_pluriel{galactic_contrib:mois_depuis_un,galactic_contrib:mois_depuis_nb}|attribut_html)]" rel="nofollow">
[(#VAL{3}|singulier_ou_pluriel{galactic_contrib:mois_un,galactic_contrib:mois_nb})]
</a>
<a href="[(#GET{self}|parametre_url{max,+})]" class="ajax[ (#ENV{max}|=={+}|oui)on]" title="<:galactic_contrib:depuis_origine|attribut_html:>" rel="nofollow">
<:galactic_contrib:sans_limite:>
</a>
</div>
<div class="onglets__groupe">
<a href="[(#GET{self}|parametre_url{ordre,''})]" class="ajax[ (#ENV{ordre}|non)on]" title="<:galactic_contrib:classer_par_date|attribut_html:>" rel="nofollow">
<:galactic_contrib:par_date:>
</a>
</div>
</div>
[(#FORMULAIRE_RECHERCHE_AJAX{#SELF,<:galactic_contrib:info_filtrer:>})]
</div>[(#REM) .alignement_avec_liste ]
#SET{date_min,#NULL}
#SET{age,1825}
[(#ENV{max}|=={1y}|oui)#SET{age,365}]
[(#ENV{max}|=={3m}|oui)#SET{age,90}]
[(#ENV{max}|=={+}|oui)#SET{age,#NULL}]
#SET{par,date_thread} [(#REM) ou date_heure ]
<INCLURE{fond=inclure/forums/liste-discussions, dernier_message=1,
id_article, id_rubrique, recherche,
age=#GET{age}, date_thread=#GET{date_min},
par=#GET{par},
ajax, env} />

+ 8
- 0
inclure/forums/bref/commentaires.html View File

@ -0,0 +1,8 @@
#SET{nb_reponses,#ENV{nb_reponses,0}}
<div class="nb_comments comments_#GET{nb_reponses}" title="[(#GET{nb_reponses}|contrib_pluraliser{galactic_contrib:info_reponses}|attribut_html)]">
[(#GET{nb_reponses}|oui)#GET{nb_reponses}]
#SET{icone,fa-comment}
[(#GET{nb_reponses}|=={1}|oui)#SET{icone,fa-comment-o}]
[(#GET{nb_reponses}|>{1}|oui)#SET{icone,fa-comments-o}]
<span class="fa[ (#GET{icone})]" aria-hidden="true"></span>
</div>

+ 36
- 0
inclure/forums/bref/moderation.html View File

@ -0,0 +1,36 @@
<BOUCLE_moderateur(CONDITION)
{si #ENV{id_forum}}
{si #ENV{objet}}
{si #ENV{id_objet}}
>
<?php
if (
!empty($GLOBALS['visiteur_session']['id_auteur'])
and $GLOBALS['visiteur_session']['statut']=='0minirezo'
and include_spip('inc/autoriser')
and autoriser('modererforum','#ENV{objet}','#ENV{id_objet}')
) {
include_spip('inc/actions');
$action_off = generer_action_auteur('instituer_forum','#ID_FORUM-off',self());
$action_spam = generer_action_auteur('instituer_forum','#ID_FORUM-spam',self());
echo '<div class="moderations">';
echo bouton_action(
'<i class="fa fa-fire" aria-hidden="true"></i> <span class="sr-only">' . _T('forum:icone_bruler_message') . '</span>',
$action_spam,
'moderation-spam ajax',
_T('galactic_forum:confirmer_spam_message'),
_T('forum:icone_bruler_message')
);
echo bouton_action(
'<i class="fa fa-trash-o" aria-hidden="true"></i> <span class="sr-only">' . _T('forum:icone_supprimer_message') . '</span>',
$action_off,
'moderation-off ajax',
_T('galactic_forum:confirmer_suppression_message'),
_T('forum:icone_supprimer_message')
);
echo '</div>';
unset($action_off, $action_spam);
}
?>
</BOUCLE_moderateur>

+ 39
- 0
inclure/forums/liste-discussions.html View File

@ -0,0 +1,39 @@
<B_forums>
<div class="Sujets">
#ANCRE_PAGINATION
<h3 class="menu-titre invisible"><:galactic_contrib:dernieres_discussions_par_date></h3>
[<p class="nb_resultats">(#GRAND_TOTAL|contrib_pluraliser{galactic_contrib:discussions})</p>]
<ul class="listeSujets comments-ul comments-items">
<BOUCLE_forums(FORUMS)
{id_article ?}
{articles.id_rubrique?}
{id_auteur?}
{id_mot?}
{age ?<=#ENV{age}}
{date_heure ?> #ENV{date_heure}}
{date_thread ?> #ENV{date_thread}}
{recherche?}
{par #ENV{par,date_heure}}{inverse #ENV{inverse,1}}
{!par date_heure}
{pagination 10}
>
<li class="item comment-li comment-item">
<INCLURE{fond=inclure/forums/presentation-message, id_forum} />
<B_dernier_message>
<ul class="listeReponses comment-ul comment-items">
<BOUCLE_dernier_message(FORUMS){plat}{id_thread}{id_parent!=0}{par date}>
<li class="item comment-li comment-item">
<INCLURE{fond=inclure/forums/presentation-reponse, id_forum} />
</li>
</BOUCLE_dernier_message>
</ul>
</B_dernier_message>
</li>
</BOUCLE_forums>
</ul>
[<div class="pagination">(#PAGINATION)</div>]
</div>
</B_forums>
[<p class="nb_resultats">(#GRAND_TOTAL|contrib_pluraliser{galactic_contrib:discussions})</p>]
<//B_forums>

+ 19
- 0
inclure/forums/presentation-message.html View File

@ -0,0 +1,19 @@
<BOUCLE_forum(FORUMS){id_forum}>
#SET{nb_reponses,0}
<BOUCLE_compte(FORUMS){id_thread}{plat}{id_parent!=0} />#SET{nb_reponses,#TOTAL_BOUCLE}<//B_compte>
<div id="forum#ID_FORUM" class="comment ligneSujet[ (#GET{nb_reponses}|>={1}|non)noreponse]">
<div class="ligneSujet__enbref">
<INCLURE{fond=inclure/forums/bref/commentaires, nb_reponses=#GET{nb_reponses}} />
<INCLURE{fond=inclure/forums/bref/moderation, id_forum, objet, id_objet} />
</div>
<div class="ligneSujet__description">
<INCLURE{fond=inclure/forums/publication-auteur, id_auteur, id_forum, nom, date, lien_lang=#LANG, lien_lang_dir=#LANG_DIR} />
[<div class="texte #EDIT{texte}">(#TEXTE)</div>]
</div>
</div>
</BOUCLE_forum>

+ 16
- 0
inclure/forums/presentation-reponse.html View File

@ -0,0 +1,16 @@
<BOUCLE_forum(FORUMS){id_forum}>
<div id="forum#ID_FORUM" class="ligneSujet comment">
<div class="ligneSujet__enbref">
<div class="link">
<a href="#URL_FORUM" title="<:galactic_contrib:message_suivant_dans_discussion|attribut_html:>">
<span class="fa fa-reply[ (#LANG_DIR|=={rtl}|?{fa-flip-vertical,fa-rotate-180})]" aria-hidden="true" ></span>
</a>
</div>
<INCLURE{fond=inclure/forums/bref/moderation, id_forum, objet, id_objet} />
</div>
<div class="ligneSujet__description">
<INCLURE{fond=inclure/forums/publication-auteur, id_auteur, id_forum, nom, date, lien_lang=#LANG, lien_lang_dir=#LANG_DIR} />
[<div class="texte #EDIT{texte}">(#TEXTE)</div>]
</div>
</div>
</BOUCLE_forum>

+ 19
- 0
inclure/forums/publication-auteur.html View File

@ -0,0 +1,19 @@
<div class="publication">
<div class="publication__logo">
[(#LOGO_AUTEUR|image_reduire{20,20}|sinon{#LOGO_ARTICLE|image_reduire{20,20}|image_alpha{50}})]
</div>
<div class="publication__auteur">
<BOUCLE_auteur(AUTEURS){tout}{id_auteur}>
[(#REM) on force l'affichage de la page appelee dans la langue et la dir de l'environnement global d'origine ]
[<a href="[(#URL_AUTEUR|parametre_url{lang,#ENV{lien_lang,''}}|parametre_url{dir,#ENV{lien_lang_dir,''}})]">(#NOM)</a>]
</BOUCLE_auteur>
[<strong class="non_auteur">(#NOM)</strong> ]
<//B_auteur>
</div>
<div class="publication_date">
<a href="#URL_FORUM{#ID_FORUM}" class="permalink" title="<:galactic_contrib:permalink|attribut_html:>">
<span class="fa fa-link" aria-hidden="true"></span>
<time class="published" datetime="[(#DATE|date_iso)]" title="[(#DATE|affdate_heure|attribut_html)]">[(#DATE|date_relative)]</time>
</a>
</div>
</div>

+ 3
- 0
inclure/head-theme.html View File

@ -1,3 +1,6 @@
[(#REM) Feuille de style CSS pour les icones ]
[<link rel="stylesheet" href="(#CHEMIN{css/font-awesome.min.css}|direction_css|timestamp)" type="text/css" media="all" />]
[(#REM) Feuille de style CSS pour la coloration ]
[<link rel="stylesheet" href="(#CHEMIN{css/geshi.css}|timestamp)" type="text/css" media="all" />]


+ 52
- 1
lang/galactic_contrib_fr.php View File

@ -6,5 +6,56 @@ if (!defined('_ECRIRE_INC_VERSION')) {
}
$GLOBALS[$GLOBALS['idx_lang']] = array(
// A
'annees_un' => '1 an',
'annees_nb' => '@nb@ ans',
'annees_depuis_un' => 'Depuis 1 an',
'annees_depuis_nb' => 'Depuis @nb@ ans',
'aucune_reponse' => 'Pas de réponse',
// C
'classer_par_date' => 'Classer par date',
'classer_par_note' => 'Classer par note',
// D
'depuis_origine' => 'Depuis toujours',
'dernieres_discussions_par_date' => 'Discussions par date d’activité',
'discussions_zero' => 'Aucune discussion',
'discussions_un' => 'Une discussion',
'discussions_nb' => '@nb@ discussions',
// I
'info_filtrer' => 'Filtrer',
'info_reponses_zero' => '0 réponse',
'info_reponses_un' => '1 réponse',
'info_reponses_nb' => '@nb@ réponses',
'info_votes_zero' => '0 vote',
'info_votes_un' => '1 vote',
'info_votes_nb' => '@nb@ votes',
'info_votes_plus_zero' => '0 vote positif',
'info_votes_plus_un' => '1 vote positif',
'info_votes_plus_nb' => '@nb@ votes positifs',
'info_votes_moins_zero' => '0 vote négatif',
'info_votes_moins_un' => '1 vote négatif',
'info_votes_moins_nb' => '@nb@ votes négatifs',
// M
'message_dans_discussion' => 'Message dans la discussion',
'message_suivant_dans_discussion' => 'Message suivant dans la discussion',
'mois_un' => '1 mois',
'mois_nb' => '@nb@ mois',
'mois_depuis_un' => 'Depuis 1 mois',
'mois_depuis_nb' => 'Depuis @nb@ mois',
// P
'par_date' => 'Par date',
'par_note' => 'Par note',
'permalink' => 'Lien permanent',
// R
'rechercher' => 'Rechercher',
// S
'sans_limite' => 'Sans limite',
);

+ 11
- 0
scss/galactic_theme.scss View File

@ -85,3 +85,14 @@
.user__links {
margin-top: .5em;
}
.menu--surweb {
p {
margin: 0;
}
}
@import "scss/theme/onglets";
@import "scss/theme/formulaires";
@import "scss/theme/forums";

+ 148
- 0
scss/theme/formulaires.scss View File

@ -0,0 +1,148 @@
/* Colorer pour rendre visible tous les formulaires */
.formulaire_spip:not(.formulaire_recherche) {
background: $couleur-gris5;
padding:1em;
}
/* Comprimer le formulaire de login */
.formulaire_login {
position:relative;
#pass_securise { float:right; }
.editer_password .details { margin-bottom:0; }
.editer_session { margin-bottom:0; }
fieldset { margin:0; }
.boutons { margin-top:0; padding:0; position:absolute; bottom:1em; right:1em; }
}
.formulaire_oubli {
padding:0 1em;
fieldset { margin:0; }
.boutons { padding:0; }
}
.formulaire_forum {
margin-top:1em;
.texte {
font-size:.9em;
}
.explication {
font-size:.8em;
}
.titre_groupe {
font-weight: normal;
display:inline-block;
}
.choix_mots {
margin-left:1em;
margin-bottom:1em;
columns:3;
@include media($bp-medium) {
columns:2;
}
@include media($bp-small) {
columns:1;
}
}
.editer_notification {
border: 1px solid #ddd;
border-radius: 5px;
background: rgba(255,255,255,.3);
padding-left: 1em;
margin-bottom: 0;
.choix label {
font-size: .9em;
}
}
fieldset.qui {
margin-top:0;
}
fieldset.commentaire {
margin-bottom: 0;
margin-top:0;
}
fieldset + fieldset.commentaire {
margin-top:1.5em;
}
}
.formulaire_spip {
fieldset.previsu {
background:white;
padding:1em 1em 0 1em;
border:3px solid #ecc218;
& > legend {
margin-top:-1.2em;
}
.comment-meta {
overflow: auto;
border-bottom: 3px solid $couleur-gris5;
padding-bottom: .5em;
.spip_logo {
float:right;
height:auto !important;
max-width:20px !important;
}
}
}
}
.formulaire_recherche_ajax {
form {
position: relative;
width: 100%;
}
svg {
display:block;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: em(12px);
width: em(12px);
height: em(12px);
* {
stroke: $couleur-nav;
}
}
div.search {
width: 100%;
}
a.close {
position:absolute;
top: 50%;
transform: translateY(-50%);
right:0;
padding: em(6px) em(12px);
color:$couleur-gris4b;
&:hover {
color: $couleur-lien;
}
}
div.submit {
display: none;
}
input[type="search"] {
border: 1px solid $couleur-gris4b;;
height: em(36px);
width: 100%;
padding-left: em(34px);
padding-right: 15%;
&:focus {
border: 1px solid $couleur-nav;
}
}
}
.formulaire_ecrire_auteur {
padding:1em 2em;
legend {
text-transform: none;
}
fieldset:last-of-type {
margin-bottom:0;
}
.boutons {
margin-top:0;
}
.previsu .comment-meta { margin-bottom:.5em; }
}

+ 217
- 0
scss/theme/forums.scss View File

@ -0,0 +1,217 @@
$largeur-enbref: 72px;
$largeur-enbref-bordure: 72px - 4px;
.article__forum {
padding-top:3em;
background-color:white;
@include media($bp-medium-up) {
padding-left: calc(5.5555% - #{$largeur-enbref});
}
@include media($bp-large-up) {
padding-left: calc(16.6666% - #{$largeur-enbref});
}
}
.listeSujets, .listeReponses {
list-style-type:none;
margin-left:0;
margin-top:2em;
margin-bottom:4em;
/* Comments déplace la réponse du formulaire */
.reponse_formulaire {
padding: 0.5em;
margin-left: calc(#{$largeur-enbref} + 1em); /* ~ largeur de .ligneSujet__enbref */
@include media($bp-small) {
margin-left:0;
}
border: 1px solid;
font-weight: normal;
min-height: em(24px);
margin-bottom: 1em;
margin-top: 1em;
}
.reponse_formulaire_ok {
color: #264409;
border-color: #C6D880;
background-color: #E6EFC2;
}
.reponse_formulaire_erreur {
color: #8A1F11;
border-color: #FBC2C4;
background-color: #FBE3E4;
}
}
.alignement_avec_liste, .nb_resultats {
padding-left: $largeur-enbref; /* ~ largeur de .ligneSujet__enbref */
@include media($bp-small) {
padding-left:0;
}
}
.nb_resultats {
margin-top:-1em;
margin-bottom:3em;
font-size:.9em;
color:transparentize($couleur-texte, 20%);
margin-left:1em;
}
.ligneSujet {
display:flex;
.ligneSujet__enbref {
font-size: .9em;
text-align:right;
width: $largeur-enbref;
@include vendor-prefix('flex', 0 0 $largeur-enbref);/* 999 votes */
padding-right:1em;
margin-right:1em;
border-right:4px solid $couleur-gris5;
@include media($bp-xxsmall) {
display:none; /* TEMPORAIRE // TODO */
}
.categorie {
margin-top:.1em;
}
.nb_comments {
display: block;
.fa {
color: $couleur-gris4;
}
&.comments_0 .fa {
color: $couleur-nocomment;
}
}
}
.ligneSujet__enbref {
.nb_comments { margin-bottom:1em; }
.resolu { font-size:2em; }
.moderations {
margin-top:1em;
.bouton_action_post {
display:block;
border:none;
font-size:2em;
margin-right:.1em;
line-height:1;
button {
border:none;
background:transparent;
padding:0;
color:$couleur-bouton;
transition:color 0.3s;
}
&:not(:last-child) {
margin-bottom:.2em;
}
&.moderation-off button {
&:hover, &:focus {
color:$couleur-moderation-off !important;
background-color:transparent !important;
}
}
&.moderation-spam button {
&:hover, &:focus {
color:$couleur-moderation-spam !important;
background-color:transparent !important;
}
}
}
}
}
.ligneSujet__description {
@include vendor-prefix('flex-grow', 1);
overflow-wrap: break-word;
min-width: 0;
padding-bottom: 2em;
.titre {
margin-bottom: .3em;
}
}
&:not(.complet) {
.ligneSujet__description {
p { margin-bottom:0; }
}
}
&.complet .titre {
margin:0 0 1em;
}
.publication {
background: transparentize($couleur-gris5, 70%);
padding:.2em .3em;
margin: 0 0 .4em 0;
border-bottom: 2px solid $couleur-gris5;
display:flex;
@include vendor-prefix('flex-direction', 'row');
@include vendor-prefix('flex-wrap', 'wrap');
font-size: .9em;
.publication__logo {
width: 20px;
@include vendor-prefix('flex', '0 0 20px');
img { vertical-align: top; margin-top:1px; }
}
.publication__auteur {
margin-left:.5em;
@include vendor-prefix('flex-grow', 1);
}
.publication_date {
width:12em;
@include vendor-prefix('flex', '0 0 12em');
text-align:right;
margin-left: auto;
abbr.published { border-bottom:0; }
a.permalink {
color:$couleur-texte;
.fa {
color: $couleur-bouton-sombre;
margin-right:.5em;
transition: color 0.3s;
}
&:hover .fa {
color: $couleur-lien-hover;
}
}
@include media($bp-xxsmall) {
width:auto;
@include vendor-prefix('flex', '0 0 100%');
}
}
}
.texte p:last-child {
margin-bottom:0;
}
/* message qui est une réponse, dans une liste d’intros */
.reponse {
display:flex;
@include vendor-prefix('flex-direction', 'row');
.link {
width: 2em;
@include vendor-prefix('flex', 0 0 2em);
a {
padding:.3em;
}
}
.message_reponse {
@include vendor-prefix('flex-grow', 1);
}
}
}
.listeReponses {
margin-top:0;
}
.comments .comment-form{
margin-left:$largeur-enbref;
}

+ 70
- 0
scss/theme/onglets.scss View File

@ -0,0 +1,70 @@
.onglets {
display:flex;
@include vendor-prefix('flex-wrap', 'wrap');
@include vendor-prefix('justify-content', 'space-between');
font-size:.9em;
list-style-type:none;
.onglets__groupe {
display: flex;
@include vendor-prefix('flex-wrap', 'wrap');
margin-bottom: 0.5em;
}
.onglets__groupe:not(.onglets__groupe--principal) {
font-size:.9em;
}
a {
text-align:center;
padding: .3em .6em;
line-height: 1;
margin-bottom:.3em;
background-color: $couleur-gris5;
&:not(:last-child) {
margin-right:4px;
}
&.on {
/*background-color: $couleur-lien-hover;*/
/*color:white;*/
border-bottom: 4px solid $couleur-onglet-hover;
font-weight: bold;
}
&:hover, &:focus {
background-color: $couleur-lien;
color:white;
text-decoration:none;
}
.label, .badge {
background-color: $couleur-lien;
transition: background-color 0.3s, color 0.3s;
}
&.on, &:hover, &:focus {
.fa {
color: white !important;
transition: color 0.3s;
}
.label, .badge {
background:white;
color: $couleur-lien !important;
.fa { color: $couleur-lien !important; }
}
}
.fa.sans_reponse { color: $couleur-nocomment; margin-right:.2em; }
}
a.on .badge,
a.on .label {
background:white
}
.onglets__groupe--principal, .js-tablist {
width: 100%;
a {
border:0;
padding: .4em .7em;
}
a.on {
background-color: $couleur-lien-hover;
color:white;
}
}
}

+ 10
- 1
scss/utils/_couleurs.scss View File

@ -5,6 +5,7 @@ $couleur-gris1: #333333;
$couleur-gris2: #424242;
$couleur-gris3: #444444;
$couleur-gris4: #838383;
$couleur-gris4b : #cacaca;
$couleur-gris5: #f0edf0;
$couleur-gris6: #f8f6f8;
@ -26,4 +27,12 @@ $couleur-texte-gris: lighten($couleur-gris3, 6%);
$couleur-lien: #27A3C3;
$couleur-lien-hover: darken($couleur-lien, 10%);
$couleur-fond-boussole: #333;
$couleur-fond-boussole: #333;
/** Autres couleurs */
$couleur-moderation-off: #d10007;
$couleur-moderation-spam: #ff6a00;
$couleur-bouton : #e8e5e8;
$couleur-bouton-sombre : #dddadd;
$couleur-nocomment: #ba2842;
$couleur-onglet-hover: $couleur-nav-fleche-hover;

Loading…
Cancel
Save