Commit 2e4d68bd authored by Clément Damiens's avatar Clément Damiens
Browse files

docs docs responsive + globalize design

parent 9f5e5436
......@@ -3,7 +3,7 @@
</div>
<div class="space20"></div>
<p>
Don’t threaten people.
Don’t threaten people.<br/>
This includes threats of violence, and threats to hurt others in any way.
......@@ -78,7 +78,6 @@ If you notice abusive behavior, please report it immediately by emailing reporta
<div class="keywordList col-xs-6 col-xs-offset-3"></div>
<script type="text/javascript">
var keywords = [
{
......
......@@ -4,16 +4,9 @@
<div class="space20"></div>
<div class="keywordList"></div>
<style type="text/css">
.keypan{
min-height: 370px;
border: 1px solid #ddd
}
</style>
<script type="text/javascript">
var keywords = [
{
"icon" : "fa-circle-o",
"title":"Territoire Connecté",
......@@ -106,21 +99,10 @@ var keywords = [
"body":"Vision globale de l’action locale / Action simultanée sur un territoire global et local."
}
];
//var keyword ="../../modules/co2/config/".$domainName."/params.json";
jQuery(document).ready(function()
{
$(".keywordList").html('');
$.each(keywords,function(i,obj) {
icon = (obj.icon) ? obj.icon : "fa-tag" ;
color = (obj.color) ? obj.color : "#E33551" ;
$(".keywordList").append(
'<div class="col-sm-4 col-xs-6"><div class="keypan panel panel-white">'+
'<div class="panel-heading border-light ">'+
'<span class="panel-title homestead"> <i class="fa '+icon+' faa-pulse animated-hover fa-2x"></i> <span style="font-size: 35px; color:'+color+';"> <br/>'+obj.title.toUpperCase()+'</span></span>'+
'</div>'+
'<div class="panel-body">'+obj.body+"</div>"+
"</div></div>");
});
getConceptList(keywords, ".keywordList");
});
</script>
......
<div class="panel-heading border-light center text-dark partition-white radius-10">
<span class="panel-title"> <i class='fa fa-heart text-red faa-pulse animated fa-2x '></i> <span style="font-size: 48px">PHILOSOPHY</span></span>
<div id="header-docs" class="panel-heading border-light center text-dark partition-white radius-10">
<span class="panel-title">
<i class='fa fa-heart text-red faa-pulse animated'></i> PHILOSOPHIE<br>
<span class="sub-title text-red">"Art is the heart of our culture"</span>
</span>
</div>
<div class="space20"></div>
<div class="keywordList"></div>
......@@ -48,17 +51,19 @@ var keywords = [
"<br>et que c'est pas juste un slogan "+
"<br>rien ne l'arretera tant qu'on ne le vivra pas "+
"<br>on continuera à chercher"
},
}/*,
{
"icon" : "fa-heart text-red",
"title":"Art is the heart of our culture",
"body":""
},
},*/
];
jQuery(document).ready(function()
{
$(".keywordList").html('');
getConceptList(keywords, ".keywordList");
/*$(".keywordList").html('');
$.each(keywords,function(i,obj) {
icon = (obj.icon) ? obj.icon : "fa-tag" ;
color = (obj.color) ? obj.color : "#E33551" ;
......@@ -73,7 +78,7 @@ jQuery(document).ready(function()
"</blockquote>"+
"</div>"+
"</div>");
});
});*/
});
</script>
......
<style type="text/css">
.keypane{
height: 325px;
text-align: left
}
.keypane{min-height: 400px;}
</style>
<div class="panel-heading border-light center text-dark partition-white radius-10">
<span class="panel-title homestead"> <i class='text-red fa fa-lightbulb-o faa-pulse animated fa-3x '></i> <span style="font-size: 48px">PROJETS</span></span>
<div id="header-docs" class="panel-heading border-light center text-dark partition-white radius-10">
<span class="panel-title">
<i class='fa fa-lightbulb-o faa-pulse animated'></i> NOS PROJETS<br>
<span class="sub-title">CITATIONS LOREM ISPSUM</span>
</span>
</div>
<div class="space20"></div>
<div class="col-xs-4 keypane">
<div class="keywordList"></div>
<!--<div class="col-xs-4 keypane">
<h1><i class="text-red fa fa-cube"></i> PIXEL HUMAIN </h1>
<div>
Un collectif d'acteurs oeuvrant pour les communs
......@@ -23,9 +22,9 @@
<br>Open Source, Semantique et Interopérable
<br>Le Lien entre le réél et le virtuel
</div>
</div>
</div>-->
<div class="col-xs-4 keypane">
<!--<div class="col-xs-4 keypane">
<h1><img src="<?php echo Yii::app()->theme->baseUrl; ?>/assets/img/CO2r.png" height=50> Communecter </h1>
<div>
Un Réseau Sociétale Libre et Open Source
......@@ -36,95 +35,61 @@
<br>Une boite outil citoyenne pour encourager , faciliter et dynamiser l'implication citoyenne.
<br>le CTK : Citizen Tool Kit , Un socle technique et modulaire pour construire toutes sorte d'outils citoyens et administratifs spécialisés
</div>
</div>
<div class="col-xs-4 keypane">
<h1><i class="text-red fa fa-map-marker"></i> Network <br>Marque Blanche </h1>
<div>
Une Interface et Cartographie
<br>Configurable
<br>Filtrable
<br>R&D : sans base de donnée
<br>Contributive
<br><a class="btn btn-default btn-sm" href="https://www.communecter.org/?network=BretagneTelecom" target="_blank">Exemple : Bretagne Telecom</a>
<br><a class="btn btn-default btn-sm" href="https://chat.lescommuns.org/channel/marqueblanche" target="_blank">En savoir plus </a>
</div>
</div>
<div class="col-xs-4 keypane">
<h1><i class="text-red fa fa-wifi"></i> Smarterre</h1>
<div>
Apporter de la croissance aux organisations locales avec une vision humaine, intégrer un projet de société locale pour les générations futures qui prend en compte l’obsolescence et la finitude des ressources
<br><a class="btn btn-default btn-sm" href="javascript:;" onclick="navInDocs('smarterre', '<?php echo Yii::app()->language ?>' );">En savoir plus </a>
</div>
</div>
<div class="col-xs-4 keypane">
<h1><i class="text-red fa fa-cogs"></i> FABLAB.re</h1>
<div>
Fablab de bidouilleurs réunionais qui auront bientot un bus et un tiers lieux
</div>
</div>
<div class="col-xs-4 keypane">
<h1><i class="text-red fa fa-connectdevelop"></i> Open Système </h1>
<div>
Expérimentation de gouvernance totalement horizontale
<br>Opensource
<br>Conseil Collégiale
<br><a class="btn btn-default btn-sm" href="https://chat.lescommuns.org/channel/marqueblanche" target="_blank">En savoir plus </a>
</div>
</div>
</div>-->
<div class="col-xs-4 keypane">
<h1><i class="text-red fa fa-bus"></i> CO BUS </h1>
<div>
Un bus itinérant Communecté
<br>sponsorisé par l'AFNIC
<br>rempli d'electronique
<br>autonome energiquement
<br>pour agir dans les zones prioritaires et déconnecté
<br><a class="btn btn-default btn-sm" href="https://chat.lescommuns.org/channel/co_bus" target="_blank">En savoir plus </a>
</div>
</div>
<div class="col-xs-4 keypane">
<h1><i class="text-red fa fa-wifi"></i> CO PI </h1>
<div>
CO : Communecter + PI : Raperi Pi
<br>Un serveur Low Tech Communecter
<br>fonctionne offline
<br>sur un modèle distribué, interconnection entre COPI
<br>servant tout les service de CO
<br><a class="btn btn-default btn-sm" href="https://chat.lescommuns.org/channel/copi" target="_blank">En savoir plus </a>
</div>
</div>
<script type="text/javascript">
var keywords = [
{
"icon" : "fa-globe",
"title":"Smarterre",
"body":"Apporter de la croissance aux organisations locales avec une vision humaine, intégrer un projet de société locale pour les générations futures qui prend en compte l’obsolescence et la finitude des ressources<br><a class='btn btn-danger btn-sm' href='javascript:;' onclick='navInDocs(\"smarterre\", \"<?php echo Yii::app()->language ?>\" );'>En savoir plus </a>"
},
{
"icon" : "fa-cogs",
"title":"FABLAB.re",
"body":"Fablab de bidouilleurs réunionais qui auront bientot un bus et un tiers lieux"
},
{
"icon" : "fa-connectdevelop",
"title":"Open Système",
"body":"Expérimentation de gouvernance totalement horizontale<br>Opensource<br>Conseil Collégiale<br><a class='btn btn-danger btn-sm' href='https://chat.lescommuns.org/channel/marqueblanche' target='_blank'>En savoir plus </a>"
},
{
"icon" : "fa-bus",
"title":"CO BUS",
"body":"Un bus itinérant Communecté<br>sponsorisé par l'AFNIC<br>rempli d'electronique<br>autonome energiquement<br>pour agir dans les zones prioritaires et déconnecté<br><a class='btn btn-danger btn-sm' href='https://chat.lescommuns.org/channel/co_bus' target='_blank'>En savoir plus </a>"
},
{
"icon" : "fa-wifi",
"title":"CO PI",
"body":"CO : Communecter + PI : Raperi Pi<br>Un serveur Low Tech Communecter<br>fonctionne offline<br>sur un modèle distribué, interconnection entre COPI<br>servant tout les service de CO<br><a class='btn btn-danger btn-sm' href='https://chat.lescommuns.org/channel/copi' target='_blank'>En savoir plus </a>"
},
{
"icon" : "fa-wifi",
"title":"FAI Libre Reunion",
"body":"Installation d'un FAI libre Réunionais<br>sponsorisé par l'AFNIC"
},
{
"icon" : "fa-book",
"title":"COopedia",
"body":"R&D : Augmenter Wikipedia avec un référencement et une inteorpérabilité avec CO<br> Terrapedia : wikipedia territorial ouvert et contributif"
},
{
"icon" : "fa fa-map-marker",
"title":"Catographie en marque blanche",
"body":"Une Interface et Cartographie<br>Configurable<br>Filtrable<br>R&D : sans base de donnée<br>Contributive<br><a class='btn btn-danger btn-sm' href='https://www.communecter.org/?network=BretagneTelecom' target='_blank'>Exemple : Bretagne Telecom</a>"
},
{
"icon" : "fa-cubes",
"title":"Camp TIC",
"body":"Equipement autonome et connecté pour partager l'activité d'un tiers lieux<br>sponsorisé par l'AFNIC<br>C'est un valise complète<br>Connectique réseau internet<br>Son et Video pour des visios partages<br>des Agenda partagé entre réseau de tiers lieux<br>partage de ressources, de besoins, de service et de compétence"
},
];
jQuery(document).ready(function()
{
getConceptList(keywords, ".keywordList");
});
<div class="col-xs-4 keypane">
<h1><i class="text-red fa fa-cubes"></i> Tiers Lieux <br> Camp TIC</h1>
<div>
Equipement autonome et connecté pour partager l'activité d'un tiers lieux
<br>sponsorisé par l'AFNIC
<br>C'est un valise complète
<br>Connectique réseau internet
<br>Son et Video pour des visios partages
<br>des Agenda partagé entre réseau de tiers lieux
<br>partage de ressources, de besoins, de service et de compétence
</div>
</div>
<div class="col-xs-4 keypane">
<h1><i class="text-red fa fa-wifi"></i> FAI Libre Reunion </h1>
<div>
Installation d'un FAI libre Réunionais
<br>sponsorisé par l'AFNIC
</div>
</div>
<div class="col-xs-4 keypane">
<h1><i class="text-red fa fa-book"></i> COopedia</h1>
<div>
R&D : Augmenter Wikipedia avec un référencement et une inteorpérabilité avec CO
<br> Terrapedia : wikipedia territorial ouvert et contributif
</div>
</div>
\ No newline at end of file
</script>
\ No newline at end of file
......@@ -76,15 +76,71 @@
ul.subMenu{
padding-left: 30px
}
#show-menu-xs{
padding: 7px 15px;
font-size: 20px;
}
.keypan .panel-heading{
margin-top: 20px;
min-height: 70px;
}
.keypan{
border: none;
margin-bottom: 10px;
box-shadow: none;
}
.keypan .panel-body{
min-height: 200px;
}
.keypan hr {
width: 75%;
margin: auto;
}
#header-docs .panel-title{
font-size: 40px;
}
#header-docs .panel-title .sub-title{
font-size: 20px !important;
font-style: italic;
}
@media (max-width: 991px) {
/* .open-type-filter{
display: block;
position: absolute;
right: -33px;
height: 50px;
width: 50px;
border: 1px solid #dadada;
border-radius: 100%;
text-align: right;
padding-right: 8px;
z-index: -1;
font-size: 20px;
}*/
#menu-left{
width: 56%;
left: -56%;
background-color: white;
}
}
@media (min-width: 991px) {
#menu-left {
left:0 !important;
}
}
</style>
<div id="header-doc" class="shadow2">
<button id="show-menu-xs" class="visible-xs tooltips" data-placement="bottom" data-title="Menu"><i class="fa fa-menu"></i></button>
<h2><i class="fa fa-book"></i><?php echo Yii::t("docs", "All you need to know about") ?></h2>
<a href='javascript:;' id="show-menu-xs" class="visible-xs visible-sm pull-left" data-placement="bottom" data-title="Menu"><i class="fa fa-bars"></i></a>
<h2 class="elipsis"><i class="fa fa-book hidden-xs"></i> <?php echo Yii::t("docs", "All <span class='hidden-xs'>you need to know</span> about") ?></h2>
<img src="<?php echo Yii::app()->theme->baseUrl; ?>/assets/img/LOGOS/CO2/logo-head-search.png"
class="logo-menutop main pull-left hidden-xs hidden-sm" height=30>
class="logo-menutop main pull-left" height=30>
<!--<img src="<?php echo Yii::app()->theme->baseUrl; ?>/assets/img/LOGOS/CO2/logo-min.png"
class="logo-menutop main pull-left visible-xs visible-sm" height=30>-->
</div>
<div id="menu-left" class="col-md-3 col-sm-2 hidden-xs shadow2">
<ul class="col-md-12 col-sm-12 col-xs-12 no-padding">
<div id="menu-left" class="col-md-3 col-sm-2 col-xs-12 shadow2">
<ul class="col-md-12 col-sm-12 col-xs-12 no-padding">
<li class="col-xs-12 no-padding">
<a href="javascript:" class="link-docs-menu active down-menu" data-type="welcome" data-dir="<?php echo Yii::app()->language ?>">
<i class="fa fa-angle-down"></i> <?php echo Yii::t("docs","WEL<span class='text-red'>CO</span>ME"); ?>
......@@ -237,7 +293,7 @@
</li>
</ul>
</div>
<div id="container-docs" class="col-sm-offset-2 col-md-offset-3 col-md-9 col-sm-10 col-xs-12 no-padding">
<div id="container-docs" class="col-md-offset-3 col-md-9 col-sm-12 col-xs-12 no-padding">
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
......@@ -258,8 +314,22 @@ jQuery(document).ready(function() {
}
}
if($("#show-menu-xs").is(":visible")){
$("#show-menu-xs").removeClass("show-dir");
$("#menu-left").animate({ left : "-56%" }, 400 );
}
navInDocs($(this).data("type"), $(this).data("dir"), $(this).data("get"));
});
$("#show-menu-xs").click(function(){
if(!$(this).hasClass("show-dir")){
$(this).addClass("show-dir").data("title", "<?php echo Yii::t("common","Close") ?>").find("i").removeClass("fa-chevron-right").addClass("fa-times");
$("#menu-left").animate({ left : "0%" }, 400 );
}else{
$(this).removeClass("show-dir").data("title", "<?php echo Yii::t("common","Open filtering by type") ?>").find("i").removeClass("fa-times").addClass("fa-chevron-right");
$("#menu-left").animate({ left : "-56%" }, 400 );
}
});
});
function navInDocs(page, dir, get){
showLoader('#container-docs');
......@@ -273,4 +343,23 @@ function navInDocs(page, dir, get){
ajaxPost('#container-docs' ,baseUrl+'/'+moduleId+"/default/view/page/"+page+"/dir/docs"+add,
null,function(){},"html");
}
function getConceptList(list, dom){
str="";
$.each(list,function(i,obj) {
icon = (obj.icon) ? obj.icon : "fa-tag" ;
color = (obj.color) ? obj.color : "#E33551" ;
size = (obj.size) ? obj.size : "20" ;
str+=
'<div class="col-md-4 col-sm-6 col-xs-12"><div class="keypan panel panel-white">'+
'<div class="panel-heading border-light ">'+
'<span class="panel-title">'+
'<i class="fa '+icon+' faa-pulse animated-hover fa-2x"></i>'+
' <span style="font-size: '+size+'px; color:'+color+';"> <br/>'+obj.title.toUpperCase()+'</span></span>'+
'</div>'+
'<hr/>'+
'<div class="panel-body">'+obj.body+"</div>"+
"</div></div>";
});
$(dom).html(str);
}
</script>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment