Template:Mobile: Difference between revisions

m
Attempting new method (thanks Jovenan!)
m (Adjusting display of instructions)
m (Attempting new method (thanks Jovenan!))
Line 1: Line 1:
<includeonly><div id="MobileLink" style="padding: 5px 10px; background-color: lemonchiffon; text-align: center; font-size:smaller; display: table; width: fit-content; border-radius: 0 0 10px 10px; border: 1px solid darkgoldenrod; position: absolute;">
<includeonly>
'''Mobile Optimized Page:'''<br/>
{{#css:
'''[[{{#if: {{{1|}}} | {{{1}}}/Mobile | {{PAGENAME}}/Mobile }}]]'''
.MobileLink {
</div></includeonly>
  display:none;
}
 
@media only screen and (max-width: 600px) {
  .MobileLink {
    display:block;
  }
}}
<div class="MobileLink" style="{{#ifeq: {{{template|}}} | true | display: block; | display: none; }} margin: 1em auto; padding: 10px; background-color: lemonchiffon; border: 2px solid darkgoldenrod; text-align: center;">
'''This page is not optimized for mobile users!'''<br/>
For a better reading experience on mobile, visit the mobile-optimized version of this page: '''[[{{#if: {{{1|}}} | {{{1}}}/Mobile | {{PAGENAME}}/Mobile }}]]'''
</div>{{Clear}}</includeonly>
<noinclude>Simply insert this Template onto a page (wherever you want it) and it will generate a warning for mobile users + a redlink to create a mobile-optimized page. If you want, you can also include a single parameter to change the destination of the redlink.
<noinclude>Simply insert this Template onto a page (wherever you want it) and it will generate a warning for mobile users + a redlink to create a mobile-optimized page. If you want, you can also include a single parameter to change the destination of the redlink.
<div style="display:inline-block; width: 40%; min-width: 400px; margin-right: 20px; min-height: 20em; vertical-align: top;">
 
=== Default Usage: ===
=== Default Usage: ===
Let's assume we're using this on a character, named '''Joe Boggs'''', wiki page.
Let's assume we're using this on a character, named '''Joe Boggs'''', wiki page.
<pre>{{Mobile}}</pre>
<pre>{{Mobile}}</pre>
'''Generates:'''
'''Generates:'''
{{Mobile|Joe Boggs|template=true}}
{{Mobile|Joe Boggs}}
{{Mobile|Joe Boggs}}
</div>
 
<div style="display:inline-block; width: 40%; min-width: 400px; min-height: 20em; vertical-align: top;">
=== Parameter Usage: ===
=== Parameter Usage: ===
Let's assume we're using this on a page with a '''complicated name''' (e.g. Amity Auxiliary Craft) and we want to simplify it.
Let's assume we're using this on a page with a '''complicated name''' (e.g. Amity Auxiliary Craft) and we want to simplify if.
<pre>{{Mobile|AmityAux}}</pre>
<pre>{{Mobile|AmityAux}}</pre>
'''Generates:'''
'''Generates:'''
{{Mobile|AmityAux}}
{{Mobile|AmityAux|template=true}}
</div></noinclude>
 
'''Note''' - This template should only appear on mobile devices (small screens); If you want to force it to appear, add a parameter called "template" and set it to "true", e.g.:
<pre>{{Mobile|template=true}}</pre>
<pre>{{Mobile|AmityAux|template=true}}</pre>
</noinclude>