Skip to content

Commit

Permalink
better looking :)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Asenar
Asenar committed Apr 8, 2017
1 parent fd6d38a commit 4f3adcb
Show file tree
Hide file tree
Showing 6 changed files with 132 additions and 90 deletions.
51 changes: 38 additions & 13 deletions css/accueil.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,19 +146,6 @@ a.more:after, .button.more:after{
overflow: hidden; /* clearfix */
}

form{
display: block;
max-width: 280px;
overflow: hidden;
}

form h4{
margin-left: 50%;
margin-top: 1em;
margin-bottom: .5em;
width: 50%;
text-align: center;
}

label{
font-size: .875em;
Expand Down Expand Up @@ -311,3 +298,41 @@ label{

.m-display-block{ display: block; }
}


.option-bulle {
}
#alert0{
font-weight:bold;
color : #A2A9AE; /* gris */
}
#alert1{
font-weight:bold;
color : #D50303; /* rouge */
}
#alert2{
font-weight:bold;
color : #F5A725; /* jaune */
}
#alert3{
font-weight:bold;
color : #129AF0; /* bleu */
}
#alert4{
font-weight:bold;
color : #468847; /* vert */
}
#alert5{
font-weight:bold;
color : #468847; /* INSOUMIS AUSSI :D */
}
#alert6{
}

figure {
background-color : #eee;
padding : 8px;
}
figcaption {
font-size:small;
}
42 changes: 37 additions & 5 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ html{

body{
font-family: Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 1.4;
margin: 0;
color: #16212c;
Expand Down Expand Up @@ -244,10 +243,43 @@ footer {
#proprietaires{
}

#decodex-insoumis-window {
text-align : center;
}

.table-popup-insoumis {
border-collapse: collapse;
border : 1px solid black;
/*border-collapse: collapse;*/
/* border : 1px solid black;*/
margin : auto;
width : auto;
}
.table-popup-insoumis td,
.table-popup-insoumis th{
background-color : #eee;
padding : 6px 3px;
vertical-align : middle;
/*border : 1px solid black;*/
}

.table-popup-insoumis th {
text-align : right;
padding : 7px;
}
.table-popup-insoumis td {
text-align : left;
}
.table-popup-insoumis #les-decodeurs {
text-align : center;
}
.table-popup-insoumis #les-decodeurs #description {
display : block;
font-weight : bold;
font-size : 14px;
}
.ligne-owner-msg td{
vertical-align : bottom;
}
.table-popup-insoumis td{
border : 1px solid black;
.ligne-owner-msg #owner-msg{
margin : 0;
padding-top : 6px;
}
Binary file modified img/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
90 changes: 32 additions & 58 deletions install.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ <h1>Décodex Insoumis</h1>
</header>
<div class="center">
<div class="main">
<h2>Merci d’avoir installé le Décodex&nbsp; Insoumis !</h2>
<h2 style="color:green">Merci d’avoir installé le Décodex&nbsp; Insoumis !</h2>
<h3>Comment ça marche&nbsp;?</h3>
<p>
Le Décodex insoumis est un outil réalisé par l’équipe des Insoumis Numériques. Il vous permet d’afficher des informations sur les sites que vous visitez en parallèle de votre navigation par deux moyens :
Expand All @@ -29,84 +29,58 @@ <h3>Comment ça marche&nbsp;?</h3>
<li>
Des informations détaillées qui <strong>apparaîtront en haut à droite de votre écran</strong> lorsque vous consulterez les sites (pop-up). Elles s’afficheront de la manière suivante :
<figure class="notifications">
<figcaption class="xs-display-none m-display-block">Notifications</figcaption>
<img style="max-width: 360px;" src="img/[email protected]" alt="">
<figcaption>Quelques exemples d'infobulles</figcaption>
</figure>
</li>
<li>
Des informations à votre disposition <strong>en un clic à tout moment, via l’icône des Insoumis en haut à droite de votre navigateur</strong> :
<figure class="extension">
<figcaption class="xs-display-none m-display-block">Fenêtre</figcaption>
<img style="max-width: 260px;" src="img/[email protected]" alt="aperçu de l'extension">
<figcaption>La fenêtre d'information détaillée</figcaption>
</figure>
</li>
</ul>
<h3>Réglages avancés</h3>
<p>
Par défaut, le Décodex Insoumis affiche les informations détaillées pour chaque site dont nous avons connaissance. Mais vous pouvez vous-même paramétrer le Décodex Insoumis selon vos attentes. Pour chaque catégorie, vous pouvez choisir si vous souhaitez avoir des informations détaillées ou non.<br>
<br><b>Réglez ci-dessous le Décodex selon vos préférences</b>
</p>
<form action="#">
<h4>Afficher l'infobulle (pop-up)</h4>
<div class="form-group">
<div class="col-half">
<label for="check-alert0" class="inconnu">Média non noté</label>
</div>
<div class="col-half">
<input type="checkbox" id="check-alert0">
</div>
</div>
<div class="form-group">
<div class="col-half">
<label for="check-alert1" class="carrement-soumis">Médias carrément soumis</label>
</div>
<div class="col-half">
<input type="checkbox" id="check-alert1">
</div>
</div>
<div class="form-group">
<div class="col-half">
<label for="check-alert2" class="plutot-soumis">Médias plutôt soumis</label>
</div>
<div class="col-half">
<input type="checkbox" id="check-alert2">
</div>
</div>
<div class="form-group">
<div class="col-half">
<label for="check-alert3" class="plutot-insoumis">Médias plutôt Insoumis</label>
</div>
<div class="col-half">
<input type="checkbox" id="check-alert3">
</div>
</div>
<div class="form-group">
<div class="col-half">
<label for="check-alert4" class="media-insoumis">Médias insoumis</label>
</div>
<div class="col-half">
<input type="checkbox" id="check-alert4">
</div>
</div>
<div class="form-group">
<div class="col-half">
<label for="check-alert5" class="france-insoumise">Site partisan de la France Insoumise (du coup on vous laisse juge)</label>
</div>
<div class="col-half">
<input type="checkbox" id="check-alert5">
</div>
</div>
</form>
<h4>Réglez ici vos préférences pour l'affichage de l'infobulle</h4>

<div id="alert0" class="option-bulle">
<label for="check-alert0"> <input id="check-alert0" type="checkbox"> Aucune information </label>
</div>
<div id="alert1" class="option-bulle">
<label for="check-alert1"> <input id="check-alert1" type="checkbox"> Liens capitalistiques fort </label>
</div>
<div id="alert2" class="option-bulle">
<label for="check-alert2"> <input id="check-alert2" type="checkbox"> Liens étatiques forts </label>
</div>
<div id="alert4" class="option-bulle">
<label for="check-alert4"> <input id="check-alert4" type="checkbox"> Média indépendant: Bravo ! </label>
</div>
<div id="alert5" class="option-bulle">
<label for="check-alert5"> <input id="check-alert5" type="checkbox"> France Insoumise (pas d'ambiguité !) </label>
</div>
</div>

<p class="font-small">
Vous pourrez retrouver à tout moment les informations disponibles sur une source en cliquant sur l’icône desInsoumiss en haut à droite de votre navigateur, puis sur l'icône en forme d'engrenage.
</p>
<div class="relative">
<p>
<strong>Vous consultez un site qui n’est pas dans notre base de données&nbsp;? <span class="colored">NE PANIQUEZ PAS !</span,Il vous suffit de chercher par vous même les informations de ce média. En général, Wikipedia est une source assez fiable sur ce genre de chose&nbsp;!</strong>
<strong>Vous consultez un site qui n’est pas dans notre
base de données&nbsp;?</strong>
<div style="text-align:center">
<span class="colored"><strong>NE PANIQUEZ PAS !</strong></span><br/>
</div>
Il vous suffit de chercher par vous même les informations de ce média.
</strong>
</p>
<figure class="verifier">

<!--<figure class="verifier">
<img style="max-width: 360px;" src="img/[email protected]" alt="">
</figure>
</figure>-->
</div>
</div>
</div>
Expand Down
21 changes: 13 additions & 8 deletions popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,20 @@ <h1>Décodex Insoumis</h1>
</header>
<div class="content" id="decodex-insoumis-window">
<h2 id="site-name"></h2>
<p id="notule"></p>
<table class="table-popup-insoumis">
<tr><td colspan="2">
<p id="les-decodeurs"><span id="comment"></span><span id="description"></span>.</p>
<tr class="les-decodeurs"><td colspan="2">
<p id="les-decodeurs">
<span id="comment"></span>:
<span id="description"></span></p>
</td></tr>
<tr><td colspan="2">
<tr class="ligne-owner-msg"><td colspan="2">
<p id="owner-msg"></p>
</td></tr>
<tr id="proprietaire0"> <td class="nom"></td> <td class="detail"></td> </tr>
<tr id="proprietaire1"> <td class="nom"></td> <td class="detail"></td> </tr>
<tr id="proprietaire2"> <td class="nom"></td> <td class="detail"></td> </tr>
<tr id="proprietaire0" class="ligne-proprietaire"> <th class="nom"></th> <td class="detail"></td> </tr>
<tr id="proprietaire1" class="ligne-proprietaire"> <th class="nom"></th> <td class="detail"></td> </tr>
<tr id="proprietaire2" class="ligne-proprietaire"> <th class="nom"></th> <td class="detail"></td> </tr>
</table>
<p id="notule"></p>
<p id="our-opinion" class="our-opinion"></p>
<!-- @TODO: le design. Faire plus tableau ? -->
<!-- <div id="fortunes"><span class="label">Fortunes : </span><span class="content"></span></div> -->
Expand All @@ -35,7 +37,10 @@ <h2 id="site-name"></h2>
<!--<div id="interests"><span class="label">Intérêts : </span><span class="content"></span></div> -->
<!--<div id="conflicts"><span class="label">Exemples de conflit d'intérêts : </span><span class="content"></span></div>-->
<!--<div id="subsidies"><span class="label">Subventions (en euros en 2015) : </span><span class="content"></span></div>-->
<div id="sources"><span class="label">Nos sources : </span><span class="content"></span></div>
<div id="sources">
<span class="label">Nos sources : </span>
<span class="content"></span>
</div>
<a id="more-info-insoumis" target="_blank" class="button more" href="https://laec.fr/section/8/la-revolution-citoyenne-dans-les-medias" >En savoir plus</a>
</div>

Expand Down
18 changes: 12 additions & 6 deletions popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ function main() {
document.querySelector("#proprietaire"+i).style = "display:none";
} else {
document.querySelector("#proprietaire"+i).style = "";
document.querySelector("#proprietaire"+i+" td.nom").innerText = background.proprietaires[i]
document.querySelector("#proprietaire"+i+" .nom").innerText = background.proprietaires[i]
}

if (!background.fortunes[i]) {
Expand All @@ -178,12 +178,18 @@ function main() {
//document.querySelector("#conflicts span.content").innerText = background.conflits;
//document.querySelector("#subsidies span.content").innerText = background.subventions;

var par = document.querySelector("#sources span.content"); par.innerText = "";
for(var i in background.sources) {
var obj = background.sources[i];
createLink(par,obj.url,obj.title);
var par = document.querySelector("#sources .content"); par.innerText = "";
if (background.sources.length == 0) {
var par = document.querySelector("#sources").style.display = "none";
}

else {
var par = document.querySelector("#sources").style.display = "block";
for(var i in background.sources) {
var obj = background.sources[i];
createLink(par,obj.url,obj.title);
}
}

// background.sources.forEach(function(obj, i){
//});

Expand Down

0 comments on commit 4f3adcb

Please sign in to comment.