Template:MomoTalk: Difference between revisions

templatize
No edit summary
(templatize)
Line 1:
<includeonly><templatestyles src="MomoTalk/style.css" /><div class="momotalk-container">
WIP. Todo:
* Templatize. Too much work. Maybe just use a bot to autogenerate the table.
* Selfie image class with round borders (need example image).
* Use png image as background. Low priority. Need to get past MW's CSS sanitizer?
* Adjustment to padding, font size, etc.
 
<templatestyles src="MomoTalk/style.css" />
<div class="momotalk-container">
<div class="momotalk-top"><span class="momotalk-logo-text">MomoTalk</span><span class="momotalk-close">✕</span></div>
<table class="momotalk-table">
{{#fornumargs: index | value
<tr><td class="momotalk-profile-picture">[[File:Shiroko.png|50px]]</td><td><div class="momotalk-student-line-container"><div class="momotalk-student-name">Shiroko dddd</div><div class="momotalk-student-line momotalk-dialog-text">Test1</div><div class="momotalk-student-line momotalk-dialog-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></div></td></tr>
|{{#switch:{{#var: value}}
<tr><td class="momotalk-profile-picture">[[File:Shiroko.png|50px]]</td><td><div class="momotalk-student-line-container">[[File:Shiroko_full.png|200px]]</div></td></tr>
|sensei=<tr><td></td><td><div class{{=}}"momotalk-sensei-line momotalk-dialog-text">Test2{{{ text{{#var:index}} }}}</div></td></tr>
|student-text=<tr>{{#if: {{{ image{{#var:index}}| }}} | <td class{{=}}"momotalk-profile-picture">[[File:{{{ image{{#var:index}}| }}}.png|50px]]</td> | <td></td> }}<!--
<tr><td></td><td><div class="momotalk-reply-container"><div class="momotalk-reply-header">Reply</div><hr><div class="momotalk-reply-option">What's up?</div><div class="momotalk-reply-option">Hello?</div></div></td></tr>
--><td>{{#if: {{{ name{{#var:index}}| }}} | <tr><td></td><td><div class{{=}}"momotalk-relationshipstudent-story-containername">{{{ name{{#var:index}}| }}}</div> |}} <div class{{=}}"momotalk-relationshipstudent-storyline-headercontainer">Relationship Event</div><hr><div class{{=}}"momotalk-relationshipstudent-storyline momotalk-optiondialog-text">To Shiroko's{{{ Relationshiptext{{#var:index}} Story}}}</div></div></td></tr>
|reply=<tr><td></td><td><div class="momotalk-reply-container"><div class="momotalk-reply-header">Reply</div><hr><div class="momotalk!-reply-option">What's up?</div><div class="momotalk-reply-option">Hello?</div></div></td></tr>
--><div class="momotalk-reply-option">{{{ option{{#var:index}}_1 }}}</div><!--
-->{{#if: {{{ option{{#var:index}}_2| }}} | <div class="momotalk-reply-option">{{{ option{{#var:index}}_2| }}}</div> |}}<!--
-->{{#if: {{{ option{{#var:index}}_3| }}} | <div class="momotalk-reply-option">{{{ option{{#var:index}}_3| }}}</div> |}}<!--
-->{{#if: {{{ option{{#var:index}}_4| }}} | <div class="momotalk-reply-option">{{{ option{{#var:index}}_4| }}}</div> |}} </div></td></tr>
|relationship=<tr><td></td><td><div class="momotalk-relationship-story-container"><div class="momotalk-relationship-story-header">Relationship Event</div><hr><div class="momotalk-relationship-story-option">To {{{ name{{#var:index}} }}}'s Relationship Story</div></div></td></tr>
}}
}}
</table>
</div></includeonly><noinclude>
</div>
{{MomoTalk
 
|1=student-text
|name1=Shiroko
|image1=Shiroko
|text1=Test1
 
|2=student-text
|text2=Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
|3=sensei
|text3=Test2
 
|4=reply
|option4_1=What's up?
|option4_2=Hello?
 
|5=relationship
|name5=Shiroko
}}
 
</noinclude>