Template:Mobile: Difference between revisions

From 118Wiki
Jump to navigation Jump to search
m (Fixing Template code; Attempting to make it display only on mobile, but be visible on template pages)
(magic word PAGENAME -> FULLPAGENAME in order to include namespace (e.g. user pages))
 
(36 intermediate revisions by one other user not shown)
Line 1: Line 1:
<includeonly><div id="MobileLink" style="display: none; float: left; width: fit-content; padding: 10px; background-color: lemonchiffon; border: 2px solid darkgoldenrod; border-radius: 20px;">
<includeonly>{{#css:
  <!-- This content will be hidden by default -->
.MobileLink { display:none; }
  <!-- Parser function to check if the current page is a template -->
.Keegan-BG { padding:20px; border-radius:40px; margin-right:185px; }
  {{#ifeq: {{NAMESPACE}}|Template||
.Side-TOC { display:block; }
  <style>
 
    @media screen and (max-width: 767px) {
@media only screen and (max-width: 768px) {  
      div {
.MobileLink { display:block; }
        display: block; /* Show the div on devices with a screen width up to 767px */
.Side-TOC  { display:none; }
      }
.Keegan-BG { padding:auto; border-radius:auto; margin-right:auto; }
    }
}
  </style>
}}
  }}
<div class="MobileLink" style="{{#ifeq: {{{template|}}} | true | display: block; | }} margin: 1em auto; padding: 10px; background-color: lemonchiffon; border: 2px solid darkgoldenrod; text-align: center; max-width: 750px;">
'''''This page is not optimized for mobile users!'''''<br/>
'''Page not optimized for mobile!'''<br/>
For a better reading experience on mobile, visit the mobile-optimized version of this page: [[{{#if: {{{1|}}} | {{{1}}}/Mobile | {{PAGENAME}}/Mobile }}]]
For a better experience, visit:<br/>
</div>{{Clear}}</includeonly>
'''[[{{FULLPAGENAME}}/Mobile|{{#if: {{{1|}}} | {{{1}}}/Mobile | {{FULLPAGENAME}}/Mobile }}]]'''
<noinclude>
</div></includeonly>
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 include a single parameter to change the destination of the redlink, like so:
<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.


=== Default Usage: ===
=== Default Usage: ===
Line 21: Line 21:
<pre>{{Mobile}}</pre>
<pre>{{Mobile}}</pre>
'''Generates:'''
'''Generates:'''
{{Mobile|Joe Boggs}}
{{Mobile|Joe Boggs|template=true}}
=== 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.


=== Parameter Usage: ===
'''Note''' - This will change the appearance of the redlink, but not the actual page it links to - as that could produce some broken links/pages!
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}}
 
'''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>
</noinclude>

Latest revision as of 10:25, 17 November 2023

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.

Default Usage:

Let's assume we're using this on a character, named Joe Boggs', wiki page.

{{Mobile}}

Generates:

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.

Note - This will change the appearance of the redlink, but not the actual page it links to - as that could produce some broken links/pages!

{{Mobile|AmityAux}}

Generates:


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.:

{{Mobile|template=true}}
{{Mobile|AmityAux|template=true}}