adding columns features
This commit is contained in:
Qwann
parent
f48f6c57a7
commit
0d1cece6db
2 changed files with 305 additions and 0 deletions
|
|
@ -372,3 +372,147 @@ textarea {
|
||||||
.stat-graph {
|
.stat-graph {
|
||||||
height: 100px;
|
height: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Responsive Columns
|
||||||
|
*/
|
||||||
|
|
||||||
|
.column-row {
|
||||||
|
padding: 15px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-xs-1,
|
||||||
|
.column-sm-1,
|
||||||
|
.column-md-1,
|
||||||
|
.column-lg-1,
|
||||||
|
.column-xs-2,
|
||||||
|
.column-sm-2,
|
||||||
|
.column-md-2,
|
||||||
|
.column-lg-2,
|
||||||
|
.column-xs-3,
|
||||||
|
.column-sm-3,
|
||||||
|
.column-md-3,
|
||||||
|
.column-lg-3,
|
||||||
|
.column-xs-4,
|
||||||
|
.column-sm-4,
|
||||||
|
.column-md-4,
|
||||||
|
.column-lg-4,
|
||||||
|
.column-xs-5,
|
||||||
|
.column-sm-5,
|
||||||
|
.column-md-5,
|
||||||
|
.column-lg-5 {
|
||||||
|
-webkit-column-count: 1; /* Chrome, Safari, Opera */
|
||||||
|
-moz-column-count: 1; /* Firefox */
|
||||||
|
column-count: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.column-xs-1 {
|
||||||
|
-webkit-column-count: 1; /* Chrome, Safari, Opera */
|
||||||
|
-moz-column-count: 1; /* Firefox */
|
||||||
|
column-count: 1;
|
||||||
|
}
|
||||||
|
.column-xs-2 {
|
||||||
|
-webkit-column-count: 2; /* Chrome, Safari, Opera */
|
||||||
|
-moz-column-count: 2; /* Firefox */
|
||||||
|
column-count: 2;
|
||||||
|
}
|
||||||
|
.column-xs-3 {
|
||||||
|
-webkit-column-count: 3; /* Chrome, Safari, Opera */
|
||||||
|
-moz-column-count: 3; /* Firefox */
|
||||||
|
column-count: 3;
|
||||||
|
}
|
||||||
|
.column-xs-4 {
|
||||||
|
-webkit-column-count: 4; /* Chrome, Safari, Opera */
|
||||||
|
-moz-column-count: 4; /* Firefox */
|
||||||
|
column-count: 4;
|
||||||
|
}
|
||||||
|
.column-xs-5 {
|
||||||
|
-webkit-column-count: 5; /* Chrome, Safari, Opera */
|
||||||
|
-moz-column-count: 5; /* Firefox */
|
||||||
|
column-count: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.column-sm-1 {
|
||||||
|
-webkit-column-count: 1; /* Chrome, Safari, Opera */
|
||||||
|
-moz-column-count: 1; /* Firefox */
|
||||||
|
column-count: 1;
|
||||||
|
}
|
||||||
|
.column-sm-2 {
|
||||||
|
-webkit-column-count: 2; /* Chrome, Safari, Opera */
|
||||||
|
-moz-column-count: 2; /* Firefox */
|
||||||
|
column-count: 2;
|
||||||
|
}
|
||||||
|
.column-sm-3 {
|
||||||
|
-webkit-column-count: 3; /* Chrome, Safari, Opera */
|
||||||
|
-moz-column-count: 3; /* Firefox */
|
||||||
|
column-count: 3;
|
||||||
|
}
|
||||||
|
.column-sm-4 {
|
||||||
|
-webkit-column-count: 4; /* Chrome, Safari, Opera */
|
||||||
|
-moz-column-count: 4; /* Firefox */
|
||||||
|
column-count: 4;
|
||||||
|
}
|
||||||
|
.column-sm-5 {
|
||||||
|
-webkit-column-count: 5; /* Chrome, Safari, Opera */
|
||||||
|
-moz-column-count: 5; /* Firefox */
|
||||||
|
column-count: 5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.column-md-1 {
|
||||||
|
-webkit-column-count: 1; /* Chrome, Safari, Opera */
|
||||||
|
-moz-column-count: 1; /* Firefox */
|
||||||
|
column-count: 1;
|
||||||
|
}
|
||||||
|
.column-md-2 {
|
||||||
|
-webkit-column-count: 2; /* Chrome, Safari, Opera */
|
||||||
|
-moz-column-count: 2; /* Firefox */
|
||||||
|
column-count: 2;
|
||||||
|
}
|
||||||
|
.column-md-3 {
|
||||||
|
-webkit-column-count: 3; /* Chrome, Safari, Opera */
|
||||||
|
-moz-column-count: 3; /* Firefox */
|
||||||
|
column-count: 3;
|
||||||
|
}
|
||||||
|
.column-md-4 {
|
||||||
|
-webkit-column-count: 4; /* Chrome, Safari, Opera */
|
||||||
|
-moz-column-count: 4; /* Firefox */
|
||||||
|
column-count: 4;
|
||||||
|
}
|
||||||
|
.column-md-5 {
|
||||||
|
-webkit-column-count: 5; /* Chrome, Safari, Opera */
|
||||||
|
-moz-column-count: 5; /* Firefox */
|
||||||
|
column-count: 5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.column-lg-1 {
|
||||||
|
-webkit-column-count: 1; /* Chrome, Safari, Opera */
|
||||||
|
-moz-column-count: 1; /* Firefox */
|
||||||
|
column-count: 1;
|
||||||
|
}
|
||||||
|
.column-lg-2 {
|
||||||
|
-webkit-column-count: 2; /* Chrome, Safari, Opera */
|
||||||
|
-moz-column-count: 2; /* Firefox */
|
||||||
|
column-count: 2;
|
||||||
|
}
|
||||||
|
.column-lg-3 {
|
||||||
|
-webkit-column-count: 3; /* Chrome, Safari, Opera */
|
||||||
|
-moz-column-count: 3; /* Firefox */
|
||||||
|
column-count: 3;
|
||||||
|
}
|
||||||
|
.column-lg-4 {
|
||||||
|
-webkit-column-count: 4; /* Chrome, Safari, Opera */
|
||||||
|
-moz-column-count: 4; /* Firefox */
|
||||||
|
column-count: 4;
|
||||||
|
}
|
||||||
|
.column-lg-5 {
|
||||||
|
-webkit-column-count: 5; /* Chrome, Safari, Opera */
|
||||||
|
-moz-column-count: 5; /* Firefox */
|
||||||
|
column-count: 5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,10 +8,171 @@
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-4 col-md-3 col-content-left">
|
<div class="col-sm-4 col-md-3 col-content-left">
|
||||||
|
<div class="content-left">
|
||||||
|
<div class="content-left-top">
|
||||||
|
<div class="line line-big">Trucs</div>
|
||||||
|
<div class="line line-bigsub">à dire</div>
|
||||||
|
</div>
|
||||||
|
<div class="buttons">
|
||||||
|
<a class="btn btn-primary btn-lg" href="#TODO">Choix 1</a>
|
||||||
|
<a class="btn btn-primary btn-lg" href="#TODO">Choix 2</a>
|
||||||
|
<a class="btn btn-primary btn-lg" href="#TODO">Choix 3</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-8 col-md-9 col-content-right">
|
<div class="col-sm-8 col-md-9 col-content-right">
|
||||||
{% include 'kfet/base_messages.html' %}
|
{% include 'kfet/base_messages.html' %}
|
||||||
|
<div class="content-right">
|
||||||
|
<div class="content-right-block">
|
||||||
|
<h2>Carte</h2>
|
||||||
|
<div class="column-row">
|
||||||
|
<div class="column-sm-1 column-md-2 column-lg-3">
|
||||||
|
Inter quos Paulus eminebat notarius ortus in Hispania, glabro quidam sub vultu latens, odorandi vias periculorum occultas perquam sagax. is in Brittanniam missus ut militares quosdam perduceret ausos conspirasse Magnentio, cum reniti non possent, iussa licentius supergressus fluminis modo fortunis conplurium sese repentinus infudit et ferebatur per strages multiplices ac ruinas, vinculis membra ingenuorum adfligens et quosdam obterens manicis, crimina scilicet multa consarcinando a veritate longe discreta. unde admissum est facinus impium, quod Constanti tempus nota inusserat sempiterna.
|
||||||
|
|
||||||
|
Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.
|
||||||
|
|
||||||
|
Etenim si attendere diligenter, existimare vere de omni hac causa volueritis, sic constituetis, iudices, nec descensurum quemquam ad hanc accusationem fuisse, cui, utrum vellet, liceret, nec, cum descendisset, quicquam habiturum spei fuisse, nisi alicuius intolerabili libidine et nimis acerbo odio niteretur. Sed ego Atratino, humanissimo atque optimo adulescenti meo necessario, ignosco, qui habet excusationem vel pietatis vel necessitatis vel aetatis. Si voluit accusare, pietati tribuo, si iussus est, necessitati, si speravit aliquid, pueritiae. Ceteris non modo nihil ignoscendum, sed etiam acriter est resistendum.
|
||||||
|
|
||||||
|
Post hanc adclinis Libano monti Phoenice, regio plena gratiarum et venustatis, urbibus decorata magnis et pulchris; in quibus amoenitate celebritateque nominum Tyros excellit, Sidon et Berytus isdemque pares Emissa et Damascus saeculis condita priscis.
|
||||||
|
|
||||||
|
Post hanc adclinis Libano monti Phoenice, regio plena gratiarum et venustatis, urbibus decorata magnis et pulchris; in quibus amoenitate celebritateque nominum Tyros excellit, Sidon et Berytus isdemque pares Emissa et Damascus saeculis condita priscis.
|
||||||
|
|
||||||
|
Et Epigonus quidem amictu tenus philosophus, ut apparuit, prece frustra temptata, sulcatis lateribus mortisque metu admoto turpi confessione cogitatorum socium, quae nulla erant, fuisse firmavit cum nec vidisset quicquam nec audisset penitus expers forensium rerum; Eusebius vero obiecta fidentius negans, suspensus in eodem gradu constantiae stetit latrocinium illud esse, non iudicium clamans.
|
||||||
|
|
||||||
|
Sed cautela nimia in peiores haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus, acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.
|
||||||
|
|
||||||
|
Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.
|
||||||
|
|
||||||
|
Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius.
|
||||||
|
|
||||||
|
Hac ex causa conlaticia stipe Valerius humatur ille Publicola et subsidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patris.
|
||||||
|
|
||||||
|
Harum trium sententiarum nulli prorsus assentior. Nec enim illa prima vera est, ut, quem ad modum in se quisque sit, sic in amicum sit animatus. Quam multa enim, quae nostra causa numquam faceremus, facimus causa amicorum! precari ab indigno, supplicare, tum acerbius in aliquem invehi insectarique vehementius, quae in nostris rebus non satis honeste, in amicorum fiunt honestissime; multaeque res sunt in quibus de suis commodis viri boni multa detrahunt detrahique patiuntur, ut iis amici potius quam ipsi fruantur.
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block extra_head %}
|
||||||
|
<script src="{% static 'kfet/js/Chart.bundle.js' %}"></script>
|
||||||
|
<script>
|
||||||
|
jQuery(document).ready(function() {
|
||||||
|
var ctx1 = $("#myChart1");
|
||||||
|
var ctx2 = $("#myChart2");
|
||||||
|
var ctx3 = $("#myChart3");
|
||||||
|
var myChart = new Chart(ctx1, {
|
||||||
|
type: 'bar',
|
||||||
|
data: {
|
||||||
|
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
||||||
|
datasets: [{
|
||||||
|
label: '# of Votes',
|
||||||
|
data: [12, 19, 3, 5, 2, 3],
|
||||||
|
backgroundColor: [
|
||||||
|
'rgba(255, 99, 132, 0.2)',
|
||||||
|
'rgba(54, 162, 235, 0.2)',
|
||||||
|
'rgba(255, 206, 86, 0.2)',
|
||||||
|
'rgba(75, 192, 192, 0.2)',
|
||||||
|
'rgba(153, 102, 255, 0.2)',
|
||||||
|
'rgba(255, 159, 64, 0.2)'
|
||||||
|
],
|
||||||
|
borderColor: [
|
||||||
|
'rgba(255,99,132,1)',
|
||||||
|
'rgba(54, 162, 235, 1)',
|
||||||
|
'rgba(255, 206, 86, 1)',
|
||||||
|
'rgba(75, 192, 192, 1)',
|
||||||
|
'rgba(153, 102, 255, 1)',
|
||||||
|
'rgba(255, 159, 64, 1)'
|
||||||
|
],
|
||||||
|
borderWidth: 1
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
scales: {
|
||||||
|
yAxes: [{
|
||||||
|
ticks: {
|
||||||
|
beginAtZero:true
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
var myChart = new Chart(ctx2, {
|
||||||
|
type: 'bar',
|
||||||
|
data: {
|
||||||
|
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
||||||
|
datasets: [{
|
||||||
|
label: '# of Votes',
|
||||||
|
data: [12, 19, 3, 5, 2, 3],
|
||||||
|
backgroundColor: [
|
||||||
|
'rgba(255, 99, 132, 0.2)',
|
||||||
|
'rgba(54, 162, 235, 0.2)',
|
||||||
|
'rgba(255, 206, 86, 0.2)',
|
||||||
|
'rgba(75, 192, 192, 0.2)',
|
||||||
|
'rgba(153, 102, 255, 0.2)',
|
||||||
|
'rgba(255, 159, 64, 0.2)'
|
||||||
|
],
|
||||||
|
borderColor: [
|
||||||
|
'rgba(255,99,132,1)',
|
||||||
|
'rgba(54, 162, 235, 1)',
|
||||||
|
'rgba(255, 206, 86, 1)',
|
||||||
|
'rgba(75, 192, 192, 1)',
|
||||||
|
'rgba(153, 102, 255, 1)',
|
||||||
|
'rgba(255, 159, 64, 1)'
|
||||||
|
],
|
||||||
|
borderWidth: 1
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
scales: {
|
||||||
|
yAxes: [{
|
||||||
|
ticks: {
|
||||||
|
beginAtZero:true
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
var myChart = new Chart(ctx3, {
|
||||||
|
type: 'bar',
|
||||||
|
data: {
|
||||||
|
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
||||||
|
datasets: [{
|
||||||
|
label: '# of Votes',
|
||||||
|
data: [12, 19, 3, 5, 2, 3],
|
||||||
|
backgroundColor: [
|
||||||
|
'rgba(255, 99, 132, 0.2)',
|
||||||
|
'rgba(54, 162, 235, 0.2)',
|
||||||
|
'rgba(255, 206, 86, 0.2)',
|
||||||
|
'rgba(75, 192, 192, 0.2)',
|
||||||
|
'rgba(153, 102, 255, 0.2)',
|
||||||
|
'rgba(255, 159, 64, 0.2)'
|
||||||
|
],
|
||||||
|
borderColor: [
|
||||||
|
'rgba(255,99,132,1)',
|
||||||
|
'rgba(54, 162, 235, 1)',
|
||||||
|
'rgba(255, 206, 86, 1)',
|
||||||
|
'rgba(75, 192, 192, 1)',
|
||||||
|
'rgba(153, 102, 255, 1)',
|
||||||
|
'rgba(255, 159, 64, 1)'
|
||||||
|
],
|
||||||
|
borderWidth: 1
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
scales: {
|
||||||
|
yAxes: [{
|
||||||
|
ticks: {
|
||||||
|
beginAtZero:true
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue