Template:Product: Difference between revisions

Latest revision as of 20:33, 23 December 2023

Usage

Please use this string:

{{Product|image=###image class=img-fluid(default)|as-is(without resizing)###description=###|category1=###|category2=### |documentation={{DocBox|system={Android,Linux,Yocto,Hardware}|content=###}} |cpu=### |ram=### |display=### |gfx=### |storage=### |rtc=### |i2c=### |spi=### |net=### |temp=Commercial\Extended |usb=### |audio=### |uart=### |dim=### |wire=###}}

Product

[[File:{{{image}}}|class=img-fluid mb-3|Product]]

{{{description}}}

{{{documentation}}}

Specs summary

CPU	{{{cpu}}}
Memory	{{{ram}}}
GPU	{{{gfx}}}
Display	{{{display}}}
Storage	{{{storage}}}
Network	{{{net}}}
RTC	{{{rtc}}}
I2C	{{{i2c}}}
One-Wire	{{{wire}}}
SPI	{{{spi}}}
CAN bus	{{{can}}}
UARTs	{{{uart}}}
USB	{{{usb}}}
Audio	{{{audio}}}
Temperature Range	{{{temp}}}
Dimensions	{{{dim}}}

To the top

[[Category:{{{category1}}}]] [[Category:{{{category2}}}]]

@@ Line 1: / Line 1: @@
-<noinclude>{{TemplateGen|params=<nowiki>image=###description=###|category1=###|category2=###</nowiki><br/><nowiki>|documentation={{DocBox|system={Android,Linux,Yocto,Hardware}|content=###}}</nowiki><br/><nowiki>|cpu=###|mpu=###|gfx=###|ram=###|lcd=###|hdmi=###|rtc=###|i2c=###|spi=###|sd_mmc=###|nand=###|power=###|temp=###|usb=###|ethernet=###|audio=###|wireless=###|canbus=###|bluetooth=###|touch=###|serial=###</nowiki>}}</noinclude>
+<noinclude>{{TemplateGen|params=<nowiki>image=###image class=img-fluid(default)|as-is(without resizing)###description=###|category1=###|category2=###</nowiki><br/><nowiki>|documentation={{DocBox|system={Android,Linux,Yocto,Hardware}|content=###}}</nowiki><br/><nowiki>|cpu=###</nowiki><br/><nowiki>|ram=###</nowiki><br/><nowiki>|display=###</nowiki><br/><nowiki>|gfx=###</nowiki><br/><nowiki>|storage=###</nowiki><br/><nowiki>|rtc=###</nowiki><br/><nowiki>|i2c=###</nowiki><br/><nowiki>|spi=###</nowiki><br/><nowiki>|net=###</nowiki><br/><nowiki>|temp=Commercial\Extended </nowiki><br/><nowiki>|usb=###</nowiki><br/><nowiki>|audio=###</nowiki><br/><nowiki>|uart=###</nowiki><br/><nowiki>|dim=###</nowiki><br/><nowiki>|wire=###</nowiki>}}</noinclude>__notoc__<!--Description-->
-__notoc__
+<div class="mt-3 card bg-light border-0">
-<!--Description-->
+<div class="card-header bg-main text-white">
-<div style=" width:100%;">
+<div class="lead font-weight-bold">{{PAGENAME}}</div>
-{|
-|-
-{| style="padding:15px; background-color: #0066c7; color: white; width:100%; font-size:25px;  border-top-left-radius:5px; border-top-right-radius:5px; "
-|{{PAGENAME}}
-|}
-|-
-|
-{|style="background-color: #F0F0FF; width:100%; "
-|style="width:250px; padding:5px 25px 5px 25px;"|[[File:{{{image}}}|height=100px|{{PAGENAME}}]]
-|style="padding:20px 30px 0px 0px; vertical-align:top;"|{{{description}}}
-|}
-|}
 </div>
-<!--
+<div class="card-body row p-3">
-<!--Documentation-->
+<div class="product-header text-center col-md-5 col-lg-5 col-xl-4">[[File:{{{image}}}|class={{{image class|img-fluid}}} mb-3|{{PAGENAME}}]]</div>
-<div style="overflow:hidden;">
+<div class="col-md-7 col-lg-7 col-xl-8 d-flex flex-column justify-content-between pb-3" style="font-size:17px;line-height:1.3em">
-{{{documentation}}}
+{{{description}}}
+{{#if: {{{spec link|}}}
+  |<div>[{{{spec link|}}} <span class="mw-ui-button mw-ui-progressive mt-3">Product Specifications</span>]</div>
+}}
 </div>
+</div>
+</div><!-- SEO -->{{#seo:
-<table class="wikitable" style="background-color: #F0F0FF; margin: 0 auto; width:30%;">
+  |description={{#sub:{{{seo description|{{{description|}}}}}}|0|{{#expr:180 - ( 0{{#len:{{#explode:{{#sub:{{{seo description|{{{description|}}}}}}|0|180}}| |-1}}}} + 1 ) }} }}...
-<!--
+  |modified_time={{REVISIONYEAR}}-{{REVISIONMONTH}}-{{REVISIONDAY2}}
-{{#if:{{{cpu}}}|style="width:150px;"{{!}}CPU{{!}}{{!}}{{{cpu}}}|}}
+}}<!--Documentation--><div class="card-deck flex-column flex-lg-row">{{{documentation}}}
-{{#if:{{{cpu}}}|{{!}}-|}}
+<div class="mt-3 card specs bg-light border-0">
-|{{#if:{{{mpu}}}|MPU{{!}}{{!}}{{{mpu}}}|}}
+<div class="card-header bg-blue text-white"  style="font-size: 12pt;">
-{{#if:{{{mpu}}}|{{!}}-|}}
+<div class="font-weight-bold">Specs summary</div>
-|{{#if:{{{gfx}}}|GFX{{!}}{{!}}{{{gfx}}}|}}
+</div>
-{{#if:{{{gfx}}}|{{!}}-|}}
+<div class="card-body row px-3 py-0 align-items-start">
-|{{#if:{{{ram}}}|RAM{{!}}{{!}}{{{ram}}}|}}
+<table id="specs" class="table bg-light py-0" style="font-size:90%"><!--
-{{#if:{{{ram}}}|{{!}}-|}}
+-->{{#if:{{{cpu}}}|<tr><td style="width:90px">'''CPU'''</td><td>{{{cpu}}}</td></tr>}}<!--
-|{{#if:{{{lcd}}}|LCD{{!}}{{!}}{{{lcd}}}|}}
+-->{{#if:{{{ram}}}|<tr><td>'''Memory'''</td><td>{{{ram}}}</td></tr>|}}<!--
-{{#if:{{{lcd}}}|{{!}}-|}}
+-->{{#if:{{{gfx}}}|<tr><td>'''GPU'''</td><td>{{{gfx}}}</td></tr>|}}<!--
--->
+-->{{#if:{{{display}}}|<tr><td>'''Display'''</td><td>{{{display}}}</td></tr>|}}<!--
-{{#if:{{{rtc}}}|<tr><td>RTC</td><td>{{{rtc}}}</td></tr>|}}
+-->{{#if:{{{storage}}}|<tr><td>'''Storage'''</td><td>{{{storage}}}</td></tr>|}}<!--
-{{#if:{{{i2c}}}|<tr><td>I2C</td><td>{{{i2c}}}</td></tr>|}}
+-->{{#if:{{{net}}}|<tr><td>'''Network'''</td><td>{{{net}}}</td></tr>|}}<!--
-{{#if:{{{spi}}}|<tr><td>SPI</td><td>{{{spi}}}</td></tr>|}}
+-->{{#if:{{{rtc}}}|<tr><td>'''RTC'''</td><td>{{{rtc}}}</td></tr>|}}<!--
-<!--
+-->{{#if:{{{i2c}}}|<tr><td>'''I2C'''</td><td>{{{i2c}}}</td></tr>|}}<!--
-{{#if:{{{sd_mmc}}}|SD/MMC{{!}}{{!}}{{{sd_mmc}}}|}}
+-->{{#if:{{{wire}}}|<tr><td>'''One-Wire'''</td><td>{{{wire}}}</td></tr>|}}<!--
-{{#if:{{{sd_mmc}}}|{{!}}-|}}
+-->{{#if:{{{spi}}}|<tr><td>'''SPI'''</td><td>{{{spi}}}</td></tr>|}}<!--
-|{{#if:{{{nand}}}|NAND Flash{{!}}{{!}}{{{nand}}}|}}
+-->{{#if:{{{can}}}|<tr><td>'''CAN bus'''</td><td>{{{can}}}</td></tr>|}}<!--
-{{#if:{{{nand}}}|{{!}}-|}}
+-->{{#if:{{{uart}}}|<tr><td>'''UARTs'''</td><td>{{{uart}}}</td></tr>|}}<!--
-|{{#if:{{{power}}}|Typical power consumtpion{{!}}{{!}}{{{power}}}|}}
+-->{{#if:{{{usb}}}|<tr><td>'''USB'''</td><td>{{{usb}}}</td></tr>|}}<!--
-{{#if:{{{power}}}|{{!}}-|}}
+-->{{#if:{{{audio}}}|<tr><td>'''Audio'''</td><td>{{{audio}}}</td></tr>|}}<!--
-|{{#if:{{{temp}}}|Temp Range{{!}}{{!}}{{{temp}}}|}}
+-->{{#if:{{{temp}}}|<tr><td>'''Temperature Range'''</td><td>{{{temp}}}</td></tr>|}}<!--
-{{#if:{{{temp}}}|{{!}}-|}}
+-->{{#if:{{{dim}}}|<tr><td>'''Dimensions'''</td><td>{{{dim}}}</td></tr>|}}
-|{{#if:{{{usb}}}|USB{{!}}{{!}}{{{usb}}}|}}
-{{#if:{{{usb}}}|{{!}}-|}}
-|{{#if:{{{ethernet}}}|Ethernet{{!}}{{!}}{{{ethernet}}}|}}
-{{#if:{{{ethernet}}}|{{!}}-|}}
-|{{#if:{{{audio}}}|Audio codec{{!}}{{!}}{{{audio}}}|}}
-{{#if:{{{audio}}}|{{!}}-|}}
-|{{#if:{{{wireless}}}|Wireless{{!}}{{!}}{{{wireless}}}|}}
-{{#if:{{{wireless}}}|{{!}}-|}}
-|{{#if:{{{canbus}}}|Can-Bus controller{{!}}{{!}}{{{canbus}}}|}}
-{{#if:{{{canbus}}}|{{!}}-|}}
-|{{#if:{{{bluetooth}}}|Bluetooth{{!}}{{!}}{{{bluetooth}}}|}}
-{{#if:{{{bluetooth}}}|{{!}}-|}}
-|{{#if:{{{touch}}}|Touch panel controller{{!}}{{!}}{{{touch}}}|}}
-{{#if:{{{touch}}}|{{!}}-|}}
-|{{#if:{{{serial}}}|Serial Interfaces{{!}}{{!}}{{{serial}}}|}}
-{{#if:{{{serial}}}|{{!}}-|}}
--->
 </table>
+</div>
+</div>
+</div>
+</div>
+<div class="text-right d-inline-block d-md-none">
+[[#top|<span class="mw-ui-button mw-ui-progressive my-3">To the top</span>]]
+</div>
 <!--Categories-->
 {{#if:{{{category1}}}|[[Category:{{{category1}}}]]|}}
 {{#if:{{{category2}}}|[[Category:{{{category2}}}]]|}}