TheaterEncyclopedie:VormgevingBS4/Werk

Uit TheaterEncyclopedie
Ga naar: navigatie, zoeken

Het Sjabloon: WerkBS4 plaatst een infobox op een pagina en zorgt voor semantische annotaties. Het sjabloon werkt samen met het Formulier:Werk.


Het sjabloon: werk maakt gebruik van de volgende subsjablonen:

Voor uitleg hoe dit sjabloon: werk te gebruiken zie Sjabloon: Box

Toegevoegde CSS

Een widget aangemaakt {{#widget:CSS-box}} waarin alle benodigde css voor de infoboxen is opgenomen. Dit widget is boven alle voorbeeldpagina's Bootstrap 4 geplaatst die gebruik maken van een infobox. 

/* Toevoeging/correctie om de rating-sterren op een rij weer te geven - ipv onder elkaar */
span.box-rating > span > img {display:inline-flex;}

/* Opmaak voor de striped tabel in de alle infoboxen */
.box-table-sm {color: black;}
.box-rij {color: #337ab7; line-height: 15px;}
.box-label {color: black; width: 40%; }
.box-label {color: black; width: 40%; }
.box-info { width: 60%; color: #337ab7; }
.box-info a:link, .box-info a:visited {color: #337ab7;}
.box-info a:hover {text-decoration: none; color: black;}
.box-info a.new:hover {text-decoration: none; color: #ba0000;}

/* Opmaak voor titeltekst in de header van alle infoboxen */
h3.card-header {min-height: 50px;position: relative;}

/* Opmaak voor content van de footer van alle infoboxen */
.box-footer .shariff { width: 280px;}
.box-footer button.oo-ui-inputWidget-input {width: 110px; margin-left: 4px;}
.box-footer span.oo-ui-iconElement-icon {display:none;}

/* Opmaak voor overzicht titel 2 in infobox Werk */
.box-footer ul.smw-format {border:none; background-color: white;}


HTML Sjabloon: Werk (met subsjablonen)

<includeonly>{{Box/top}}
<h3 class="card-title m-0" style="margin: 0px;">{{#if:{{{Paginatitel|}}}|{{{Paginatitel|}}}|{{PAGENAME}} }}</h3>{{Sjabloon: Werkpagina waardering header BS4}}
{{Box/body}}
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4 pb-2">
{{Box/foto| {{{afbeelding|}}} | Unknown.png | {{{onderschrift afbeelding|}}} }}
</div><!-- End of Kolom1 -->

<div class="col-xs-12 col-md-8" style="padding: 1em;"><!--
--><table class="table table-striped table-sm box-table-sm"><!--
-->{{Box/rij|Titel|Titel|{{{titel|}}}}}<!--
-->{{Box/rij|Ondertitel|Ondertitel|{{{ondertitel|}}}}}<!--
-->{{Box/rij|Gebaseerd op|IsGebaseerdOp|{{{gebaseerdop|}}}}}<!--
-->{{Box/rij|Oorspronkelijke titel|Oorspronkelijke titel|{{{oorspronkelijketitel|}}}}}<!--
-->{{Box/rij|Vertaling van|IsVertalingVan|{{{vertalingvan|}}}}}<!--
-->{{Box/rij|Geïnspireerd op|IsGeinspireerdOp|{{{geinspireerdop|}}}}}<!--
-->{{Box/rij|Bewerking van|IsBewerkingVan|{{{bewerkingvan|}}}}}<!--
-->{{#if:{{{overigeinspiratie|}}}|<tr class="box-rij"><!--
--><th class="box-label">'''Overige inspiratiebronnen'''</th><!--
--><td class="box-info">{{{overigeinspiratie|}}}</td></tr>|}}<!--
-->{{Box/rij|Auteur|IsGemaaktDoor|{{{auteur|}}}}}<!--
-->{{Box/rij|Libretto (met teksten van)|IsGeschrevenDoor|{{{teksten|}}}}}<!--
-->{{Box/rij|Liedteksten|MetLiedtekstenVan|{{{liedteksten|}}}}}<!--
-->{{Box/rij|Componist|IsGecomponeerdDoor|{{{componist|}}}}}<!--
-->{{Box/rij|Muziek|MetMuziekVan|{{{muziek|}}}}}<!--
-->{{Box/rij|Choreograaf|InChoreografieVan|{{{choreograaf|}}}}}<!--
-->{{Box/datum|Gepubliceerd op|IsGepubliceerdOp|{{{publicatiedatum|}}}}}<!--
-->{{Box/rij|Gepubliceerd te|IsGepubliceerdTe|{{{publicatieplaats|}}}}}<!--
-->{{Box/datum|Wereldpremière op|WereldpremiereOp|{{{premieredatum|}}}}}<!--
-->{{Box/rij|Wereldpremière te|WereldpremiereTe|{{{premiereplaats|}}}}}<!--
-->{{Box/rij|Opmerkingen|Opmerkingen|{{{opmerkingen|}}}}}</table>{{#set:Adlib={{{adlib|}}}}}</div><!-- End of Kolom2-->
{{#set:Gallery redirect={{FULLPAGENAME}}}}{{#set:Gallery caption={{FULLPAGENAME}}}}
</div><!-- End of Row -->

{{Box/footer}}
{{#shariffLike:}}</div><span style="display:inline-block; width=15%;">{{#formlink:form=Beoordeling|link text=Aanvullen|link type=button|query string=Beoordeling[Beoordeelde_pagina]={{urlencode:{{PAGENAME}}}}&Beoordeling[Beoordelingscategorie]={{urlencode:Beoordeling werkpagina}}|tooltip="Plaats een aanvullen of geef je waardering"|returnto={{PAGENAME}} }}</span>
{{Box/end}}
<div class="row"><!-- REACTIES -->
<div class="col-xs-12 col-md-12 mb-4">
<div id="accordion-1">
<div class="card">
<div class="card-header" id="heading-1">
<h5 class="mb-0">Bekijk alle<div class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">reacties</div>op deze pagina!</h5>
</div>
<div id="collapse-1" class="collapse" aria-labelledby="heading-1" data-parent="#accordion-1">
<div class="card-body">
{{Werkpagina_reactielijst}}
</div><!-- end of card-body -->
</div><!-- end of collapse -->
</div><!-- end of card -->
</div><!-- end of accordion -->
</div><!-- end of columns -->
</div><!-- end of row -->
{{#if:{{{synopsis|}}}|<div class="row"><div class="col-xs-12 col-md-12"><!-- Synopsis -->
== Synopsis ==
{{{synopsis|}}}
</div></div>|}}
{{#ifeq:{{{theaterwerk|}}}|Ja|[[Categorie:Theaterwerk]]}}{{#ifeq:{{{repertoirestuk|}}}|Ja|[[Categorie:Repertoirestuk]]}}{{#ifexpr:{{#ifeq:{{{repertoirestuk}}}|Nee|1|0}} and {{#ifeq:{{{theaterwerk}}}|Nee|1|0}}|[[Categorie:Werk]]}}
</includeonly>

HTML Sjabloon: Werk (volledig)

Sjabloon: Box/top

{{#tweekihide:firstHeading}}<div class="row row-fluid clearfix mb-4">
<div class="col-xs-12 col-md-12">
<div class="card">
<div class="card-header d-flex justify-content-between">

Inhoud Header

<h3 class="card-title m-0" style="margin: 0px;">{{#if:{{{Paginatitel|}}}|{{{Paginatitel|}}}|{{PAGENAME}} }}</h3>{{Sjabloon: Werkpagina waardering header BS4}}

Sjabloon: Werkpagina waardering header BS4

<span class=""><span class="box-rating pr-4 pr-md-2">{{#rating:
{{#replace:{{#ask: [[Reactie:+]] [[Categorie:Beoordeling_werkpagina]] [[BeoordeeldePagina::{{PAGENAME}}]]
| ?BeoordelingInSterren
| format=average
}}|,|.}}
}}</span><span class="flex-xs-row">(Aantal:{{#ask: [[Categorie:Beoordeling_werkpagina]] [[BeoordeeldePagina::{{PAGENAME}}]]
| ?BeoordelingInSterren
| format=count
}})</span></span>

Sjabloon: Box/body

</div><!-- Eof card-header -->
<div class="card-body">

Inhoud Body

<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4 pb-2">
{{Box/foto| {{{afbeelding|}}} | Unknown.png | {{{onderschrift afbeelding|}}} }}
</div><!-- End of Kolom1 -->

<div class="col-xs-12 col-md-8" style="padding: 1em;"><!--
--><table class="table table-striped table-sm box-table-sm"><!--
-->{{Box/rij|Titel|Titel|{{{titel|}}}}}<!--
-->{{Box/rij|Ondertitel|Ondertitel|{{{ondertitel|}}}}}<!--
-->{{Box/rij|Gebaseerd op|IsGebaseerdOp|{{{gebaseerdop|}}}}}<!--
-->{{Box/rij|Oorspronkelijke titel|Oorspronkelijke titel|{{{oorspronkelijketitel|}}}}}<!--
-->{{Box/rij|Vertaling van|IsVertalingVan|{{{vertalingvan|}}}}}<!--
-->{{Box/rij|Geïnspireerd op|IsGeinspireerdOp|{{{geinspireerdop|}}}}}<!--
-->{{Box/rij|Bewerking van|IsBewerkingVan|{{{bewerkingvan|}}}}}<!--
-->{{#if:{{{overigeinspiratie|}}}|<tr class="box-rij"><!--
--><th class="box-label">'''Overige inspiratiebronnen'''</th><!--
--><td class="box-info">{{{overigeinspiratie|}}}</td></tr>|}}<!--
-->{{Box/rij|Auteur|IsGemaaktDoor|{{{auteur|}}}}}<!--
-->{{Box/rij|Libretto (met teksten van)|IsGeschrevenDoor|{{{teksten|}}}}}<!--
-->{{Box/rij|Liedteksten|MetLiedtekstenVan|{{{liedteksten|}}}}}<!--
-->{{Box/rij|Componist|IsGecomponeerdDoor|{{{componist|}}}}}<!--
-->{{Box/rij|Muziek|MetMuziekVan|{{{muziek|}}}}}<!--
-->{{Box/rij|Choreograaf|InChoreografieVan|{{{choreograaf|}}}}}<!--
-->{{Box/datum|Gepubliceerd op|IsGepubliceerdOp|{{{publicatiedatum|}}}}}<!--
-->{{Box/rij|Gepubliceerd te|IsGepubliceerdTe|{{{publicatieplaats|}}}}}<!--
-->{{Box/datum|Wereldpremière op|WereldpremiereOp|{{{premieredatum|}}}}}<!--
-->{{Box/rij|Wereldpremière te|WereldpremiereTe|{{{premiereplaats|}}}}}<!--
-->{{Box/rij|Opmerkingen|Opmerkingen|{{{opmerkingen|}}}}}</table>{{#set:Adlib={{{adlib|}}}}}</div><!-- End of Kolom2-->
{{#set:Gallery redirect={{FULLPAGENAME}}}}{{#set:Gallery caption={{FULLPAGENAME}}}}
</div><!-- End of Row -->

Sjabloon: Box/footer

</div><!-- EOF card-body -->
<div class="card-footer d-flex justify-content-between pr-2">

Inhoud footer

{{#shariffLike:}}{{#formlink:form=Beoordeling|link text=Aanvullen|link type=button|query string=Beoordeling[Beoordeelde_pagina]={{urlencode:{{PAGENAME}}}}&Beoordeling[Beoordelingscategorie]={{urlencode:Beoordeling werkpagina}}|tooltip="Plaats een aanvullen of geef je waardering"|returnto={{PAGENAME}} }}

Sjabloon: Box/end

</div><!-- Eof card-footer -->
</div><!-- Eof card -->
</div><!-- Eof Col -->
</div><!-- Eof Row -->

Categorie toewijzing en nog heel veel?

<div class="row"><!-- REACTIES -->
<div class="col-xs-12 col-md-12">
<div id="accordion-1">
<div class="card">
<div class="card-header" id="heading-1">
<h5 class="mb-0">Bekijk alle<div class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">reacties</div>op deze pagina!</h5>
</div>
<div id="collapse-1" class="collapse" aria-labelledby="heading-1" data-parent="#accordion-1">
<div class="card-body">
{{Werkpagina_reactielijst}}
</div><!-- end of card-body -->
</div><!-- end of collapse -->
</div><!-- end of card -->
</div><!-- end of accordion -->
</div><!-- end of columns -->
</div><!-- end of row -->
{{#if:{{{synopsis|}}}|<div class="row"><div class="col-xs-12 col-md-12"><!-- Synopsis -->
== Synopsis ==
{{{synopsis|}}}
</div></div>|}}
{{#ifeq:{{{theaterwerk|}}}|Ja|[[Categorie:Theaterwerk]]}}{{#ifeq:{{{repertoirestuk|}}}|Ja|[[Categorie:Repertoirestuk]]}}{{#ifexpr:{{#ifeq:{{{repertoirestuk}}}|Nee|1|0}} and {{#ifeq:{{{theaterwerk}}}|Nee|1|0}}|[[Categorie:Werk]]}}
</includeonly>

Sjabloon: Werkpagina_reactielijst

Deze sjabloon maakt gebruik van: 

<includeonly>{{#ask: [[Categorie:Beoordeling_werkpagina]] [[BeoordeeldePagina::{{PAGENAME}}]]
| mainlabel= Bekijk reactie
| ?=#
| ?BeoordelingsTekst = Reactie
| ?BeoordelingInSterren = Aantal sterren
| format = template
| template = Werkpagina reactielijst/rij
| introtemplate= Werkpagina reactielijst/kop
| outrotemplate= Werkpagina reactielijst/footer
}}</includeonly>
Overgenomen van "https://theaterencyclopedie.nl/w/index.php?title=TheaterEncyclopedie:VormgevingBS4/Werk&oldid=2734239"