🎨 Amélioration des références
mama
parent
4f71ae70d9
commit
e638ec0b80
|
|
@ -1,44 +1,56 @@
|
|||
.references {
|
||||
font-size: 85%;
|
||||
list-style: none;
|
||||
padding-left: 1em;
|
||||
color: #333350;
|
||||
font-size: 100%;
|
||||
list-style: none;
|
||||
padding-left: 1em;
|
||||
color: #333350;
|
||||
}
|
||||
.references a {
|
||||
color: inherit;
|
||||
/*text-decoration: none;*/
|
||||
color: inherit;
|
||||
width: 40%;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.references li {
|
||||
margin-bottom: .15em;
|
||||
margin-bottom: 0.6em;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#noOfficialReferences {
|
||||
text-align: left;
|
||||
font-style: italic;
|
||||
}
|
||||
.references .meta {
|
||||
text-align: right;
|
||||
width: 16em;
|
||||
margin-right: 1.5em;
|
||||
display: inline-block;
|
||||
font-size: 75%;
|
||||
}
|
||||
.references .url {
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background: #333350;
|
||||
border-radius: .4em;
|
||||
font-style: italic;
|
||||
padding: .05em .6em;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background: #333350;
|
||||
border-radius: 0.4em;
|
||||
font-style: italic;
|
||||
padding: 0.05em 0.6em;
|
||||
font-size: 95%;
|
||||
}
|
||||
.references .imageWrapper {
|
||||
width: 8em;
|
||||
display: inline-block;
|
||||
}
|
||||
.references img {
|
||||
vertical-align: sub;
|
||||
height: 1.2em;
|
||||
border-radius: .3em;
|
||||
margin-left: .6em;
|
||||
vertical-align: sub;
|
||||
max-height: 3em;
|
||||
max-width: 5em;
|
||||
border-radius: 0.3em;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
li#complementary {
|
||||
margin-top: 1.2em;
|
||||
}
|
||||
li#complementary a {
|
||||
font-style: italic;
|
||||
border-bottom: 1px solid #ddd;
|
||||
text-decoration: none;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#complementary i {
|
||||
margin-right: .6em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,73 +2,73 @@ import React from "react"
|
|||
import R from "ramda"
|
||||
import "./References.css"
|
||||
import references from "Règles/ressources/références/références.yaml"
|
||||
import {capitalise0} from '../../utils'
|
||||
import { capitalise0 } from "../../utils"
|
||||
|
||||
export default class References extends React.Component {
|
||||
state = {
|
||||
showComplementary: false
|
||||
}
|
||||
render() {
|
||||
let { refs } = this.props,
|
||||
{ complementary, official=[] } = R.groupBy(
|
||||
([name, link]) => (this.findRefKey(link) ? "official" : "complementary")
|
||||
)(R.toPairs(refs)),
|
||||
showComplementary = this.state.showComplementary,
|
||||
showComplementaryButton = !this.state.showComplementary && complementary
|
||||
state = {
|
||||
showComplementary: false
|
||||
}
|
||||
render() {
|
||||
let { refs } = this.props,
|
||||
{ complementary, official = [] } = R.groupBy(
|
||||
([name, link]) => (this.findRefKey(link) ? "official" : "complementary")
|
||||
)(R.toPairs(refs)),
|
||||
showComplementary = this.state.showComplementary,
|
||||
showComplementaryButton = !this.state.showComplementary && complementary
|
||||
|
||||
return (
|
||||
<ul className="references">
|
||||
{[
|
||||
...official.map(this.renderRef),
|
||||
official.length == 0 ? <li id="noOfficialReferences">Pas de sources officielles</li> : null,
|
||||
...(showComplementaryButton
|
||||
? [
|
||||
<li id="complementary" key="compl">
|
||||
<span className="meta" />
|
||||
<a
|
||||
href="#/"
|
||||
onClick={() => this.setState({ showComplementary: true })}
|
||||
>
|
||||
sources complémentaires
|
||||
</a>
|
||||
</li>
|
||||
]
|
||||
: []),
|
||||
...(showComplementary ? complementary.map(this.renderRef) : [])
|
||||
]}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
renderRef = ([name, link]) => {
|
||||
let refKey = this.findRefKey(link),
|
||||
refData = (refKey && references[refKey]) || {},
|
||||
domain = this.cleanDomain(link)
|
||||
return (
|
||||
<ul className="references">
|
||||
{[
|
||||
...official.map(this.renderRef),
|
||||
official.length == 0 ? (
|
||||
<li id="noOfficialReferences">Pas de sources officielles</li>
|
||||
) : null,
|
||||
...(showComplementaryButton
|
||||
? [
|
||||
<li id="complementary" key="compl">
|
||||
<a
|
||||
href="#/"
|
||||
onClick={() => this.setState({ showComplementary: true })}
|
||||
>
|
||||
<i className="fa fa-eye" aria-hidden="true" />
|
||||
afficher les sources complémentaires
|
||||
</a>
|
||||
</li>
|
||||
]
|
||||
: []),
|
||||
...(showComplementary ? complementary.map(this.renderRef) : [])
|
||||
]}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
renderRef = ([name, link]) => {
|
||||
let refKey = this.findRefKey(link),
|
||||
refData = (refKey && references[refKey]) || {},
|
||||
domain = this.cleanDomain(link)
|
||||
|
||||
return (
|
||||
<li key={name}>
|
||||
<span className="meta">
|
||||
<span className="url">
|
||||
{domain}
|
||||
{refData.image && (
|
||||
<img
|
||||
src={require("Règles/ressources/références/" + refData.image)}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
</span>
|
||||
<a href={link} target="_blank">
|
||||
{capitalise0(name)}
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
findRefKey(link) {
|
||||
return Object.keys(references).find(r => link.indexOf(r) > -1)
|
||||
}
|
||||
cleanDomain(link) {
|
||||
return (link.indexOf("://") > -1
|
||||
? link.split("/")[2]
|
||||
: link.split("/")[0]
|
||||
).replace("www.", "")
|
||||
}
|
||||
return (
|
||||
<li key={name}>
|
||||
<span className="imageWrapper">
|
||||
{refData.image && (
|
||||
<img
|
||||
src={require("Règles/ressources/références/" + refData.image)}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
<a href={link} target="_blank">
|
||||
{capitalise0(name)}
|
||||
</a>
|
||||
<span className="url">{domain}</span>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
findRefKey(link) {
|
||||
return Object.keys(references).find(r => link.indexOf(r) > -1)
|
||||
}
|
||||
cleanDomain(link) {
|
||||
return (link.indexOf("://") > -1
|
||||
? link.split("/")[2]
|
||||
: link.split("/")[0]
|
||||
).replace("www.", "")
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue