Difference between revisions of "Template:EventStoryHeader"

From Dragalia Lost Wiki
Jump to navigation Jump to search
>Discoomastar
>Boblers
(added missing div closer)
 
(16 intermediate revisions by 3 users not shown)
Line 9: Line 9:
 
{{{Summary|}}}
 
{{{Summary|}}}
 
{{{Dialogue|}}}
 
{{{Dialogue|}}}
--><div class="panel" style="margin:auto;min-width:250px;max-width:800px">
+
-->{{#widget:Template/EventStoryHeader/css}}<div class="panel" style="margin:auto;min-width:250px;max-width:800px">
 
<div class="panel-heading">
 
<div class="panel-heading">
 
{{#if: {{{EventType|}}} |
 
{{#if: {{{EventType|}}} |
 
<div style="font-size:small"><div>{{{EventType|}}} Event: [[{{{EventName|}}}]]</div></div>
 
<div style="font-size:small"><div>{{{EventType|}}} Event: [[{{{EventName|}}}]]</div></div>
 
}}
 
}}
<div style="position: relative; top: 0px; left: 0px; display:inline-block;">{{#css:
+
<div style="position: relative; top: 0px; left: 0px; display:inline-block;"><div class="ESH-thumbnail">[[File:{{{ThumbnailImage|}}}.png|link=]]</div>
.ESH-thumbnail {
 
position: relative;
 
top: 0px;
 
left: 0px;
 
}
 
.ESH-thumbnail img {
 
max-width:70vw;
 
height:auto;
 
}
 
}}<div class="ESH-thumbnail">[[File:{{{ThumbnailImage|}}}.png|link=]]</div>
 
 
<div style="position: absolute;width:100%;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 99;color: #fff;text-shadow: -1px -1px 1px #000000, 1px -1px 1px #000000, -1px 1px 1px #000000, 1px 1px 1px #000000;font-size:.8em;">
 
<div style="position: absolute;width:100%;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 99;color: #fff;text-shadow: -1px -1px 1px #000000, 1px -1px 1px #000000, -1px 1px 1px #000000, 1px 1px 1px #000000;font-size:.8em;">
 
<div style="font-size:small">{{{SectionName|}}}</div>
 
<div style="font-size:small">{{{SectionName|}}}</div>
Line 55: Line 45:
 
<div style="padding:1em;">
 
<div style="padding:1em;">
 
<p style="margin:15px auto;border-bottom:1px solid;margin-bottom:15px;font-size:1.2em;font-variant-caps: small-caps;font-weight:bold">Dialogue</p>
 
<p style="margin:15px auto;border-bottom:1px solid;margin-bottom:15px;font-size:1.2em;font-variant-caps: small-caps;font-weight:bold">Dialogue</p>
{{#css:
+
<div class="event-dialogue"><div>{{{Dialogue|}}}
  
.event-dialogue > div > p {
 
    display: flex;
 
    margin-bottom: 1em;
 
    margin-top: 1.5em;
 
}
 
 
 
.event-dialogue > div > p > span,
 
.event-dialogue > div > p > a {
 
    margin-right: 1em;
 
    margin-top: -.5em;
 
    flex-shrink: 0;
 
}
 
 
}}<div class="event-dialogue"><div>{{{Dialogue|}}}
 
 
</div><!--
 
</div><!--
This extra div is apparently needed for stuff to work right. Just leave it.
+
This extra div is apparently needed for stuff to work right. Just leave it. Also, the above line break is needed to make sure the last line doesn't wrap improperly.
 
--></div>
 
--></div>
 +
</div>
 
</div>
 
</div>
 
}}[[Category:Event Story]]</includeonly><noinclude>[[Category:Templates]]</noinclude>
 
}}[[Category:Event Story]]</includeonly><noinclude>[[Category:Templates]]</noinclude>

Latest revision as of 21:29, 30 June 2020