Difference between revisions of "MediaWiki:Infografika Festivali"

From Culture.si
(Slovenska varianta infografike festivalov)
 
 
(2 intermediate revisions by 2 users not shown)
Line 12: Line 12:
 
| <span id="year2019" data-year="2019">[[#2019|2019]] <span class="count"></span></span>
 
| <span id="year2019" data-year="2019">[[#2019|2019]] <span class="count"></span></span>
 
| <span id="year2020" data-year="2020">[[#2020|2020]] <span class="count"></span></span>
 
| <span id="year2020" data-year="2020">[[#2020|2020]] <span class="count"></span></span>
 +
| <span id="year2021" data-year="2020">[[#2021|2021]] <span class="count"></span></span>
 +
| <span id="year2022" data-year="2020">[[#2022|2022]] <span class="count"></span></span>
 +
| <span id="year2023" data-year="2020">[[#2023|2023]] <span class="count"></span></span>
 +
| <span id="year2024" data-year="2020">[[#2024|2024]] <span class="count"></span></span>
 
</div>
 
</div>
 
<h3 id="category">Vsi festivali</h3>{{MediaWiki:QSpinner}}<div id="qcontainer" style="display: none">
 
<h3 id="category">Vsi festivali</h3>{{MediaWiki:QSpinner}}<div id="qcontainer" style="display: none">
Line 19: Line 23:
 
<table>
 
<table>
 
<tr>
 
<tr>
<td>{{FestivalsLegend|id=so-all|color=#fff|title=All festivals|cat=|year={{{year}}}}}</td>
+
<td>{{FestivalsLegend|id=so-all|color=#fff|title=Vsi festivali|cat=|year={{{year}}}}}</td>
 
<td>{{FestivalsLegend|id=so2|color=#978b78|cat=Architecture & Design|year={{{year}}}}}</td>
 
<td>{{FestivalsLegend|id=so2|color=#978b78|cat=Architecture & Design|year={{{year}}}}}</td>
 
<td>{{FestivalsLegend|id=so1|color=#995545|cat=Dance & Theatre|year={{{year}}}}}</td>
 
<td>{{FestivalsLegend|id=so1|color=#995545|cat=Dance & Theatre|year={{{year}}}}}</td>
Line 34: Line 38:
 
</tr>
 
</tr>
 
</table></div><div id="description" style="display: none;"></div></div>
 
</table></div><div id="description" style="display: none;"></div></div>
{{#eval:html|<style>
+
{{#eval:html|
div#festivals-infographic { width: 100%; margin:0 auto;}
 
div#catlinks { display: none; }
 
div#ibr-contribute { display: none; }
 
span.underline { font-weight: bold; color: black; }
 
div#short_description {
 
    line-height: 30px;
 
    height: 30px;
 
    text-align: center;
 
    border-top: 1px solid gray;
 
    border-bottom: 1px solid gray;
 
}
 
div.chart {
 
    position:relative;
 
    margin-bottom:50px;
 
}
 
div.chart:after {
 
    content:"";
 
    display:block;
 
    clear:both;
 
}
 
div.col.c01:after {
 
    content:attr(month);
 
    display:block;
 
    height:20px;
 
    width:1px;
 
    border-left:1px solid black;
 
    margin-bottom:10px;
 
    z-index:10;
 
    position:absolute;
 
    bottom:-30px;
 
    margin-left:-1px;
 
    font-size:10px;
 
    text-align:center;
 
}
 
@media (max-width:1023px) {
 
  div.col.c01:after {
 
    transform: rotate(-90deg);
 
    bottom: -100px;
 
    text-align: right;
 
    border-top: 1px solid;
 
    border-left: 0;
 
    transform-origin: 0 0;
 
    padding-right: 10px;
 
    width: 60px !important;
 
  }
 
  div.chart {
 
    margin-bottom:80px;
 
    margin-left:1px;
 
  }
 
}
 
div.col.c01[weeks="5"]:after {
 
    width:76px;
 
}
 
div.col.c01[weeks="4"]:after {
 
    width:61px;
 
}
 
  
div.legend { margin-bottom: 4px;  }
 
div.legend2 { margin-bottom: 6px; }
 
div.legend2 table { margin: 0 auto; }
 
div.legend2 td { text-align: left; padding:0 1em; font-size: 11px; }
 
span.lbox { position: relative; top: 2px; }
 
div.legend span:first-child { border-left: 0; }
 
div#qcontainer { position: relative; padding-top:0px; }
 
div#description { position: absolute; top: 0px; left: 0; width: 330px; max-width:45%;}
 
div#description h3 { padding-top: 0px; }
 
div.col { width: 1.6%; xmin-height: 10px; float: left; }
 
.legend2 a.selflink, .year-links a.selflink {
 
color: black;
 
font-weight:bold;
 
}
 
.box { position: relative; }
 
div.box.selected:after {
 
content:"";
 
position:absolute;
 
top:4px;
 
left:4px;
 
width:5px;
 
height:5px;
 
background:white;
 
}
 
div.box:before {
 
content:"";
 
position:absolute;
 
top:3px;
 
left:3px;
 
width:7px;
 
height:7px;
 
box-shadow:0 0 0 1px white;
 
opacity:0;
 
transition:opacity 0.2s 0.1s;
 
}
 
div.box.hovering:before {
 
transition:opacity 0.2s;
 
opacity:1;
 
}
 
#qcontainer a.selflink:hover { text-decoration:none }
 
</style>
 
 
<script type="text/javascript">
 
<script type="text/javascript">
var festivalsYear={{{year}}};
+
var festivalsYear={{{year}}};
 
</script>
 
</script>
 
<link rel="stylesheet" href="{{SERVER}}/static/css/festivals2012.css?v2" media="screen">
 
<link rel="stylesheet" href="{{SERVER}}/static/css/festivals2012.css?v2" media="screen">
 +
<link rel="stylesheet" href="{{SERVER}}/static/css/festivals_2024.css" media="screen">
 
<script type="text/javascript" src="{{SERVER}}/static/js/underscore-min.js"></script>
 
<script type="text/javascript" src="{{SERVER}}/static/js/underscore-min.js"></script>
  

Latest revision as of 19:44, 14 November 2024