Jump to content

User:DoggoBit/Sandbox/Infobox board: Difference between revisions

From NixOS Wiki
DoggoBit (talk | contribs)
No edit summary
DoggoBit (talk | contribs)
No edit summary
 
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly>{{User:DoggoBit/Sandbox/Infobox
<includeonly>{{User:DoggoBit/Sandbox/Infobox
   |title={{{title|Raspberry Pi 5}}}
  |clip={{{clip|}}}
   |image={{{image|Raspberry_Pi_5,_8_GB_RAM.jpg}}}
   |title={{{title|}}}
   |image={{{image|}}}
   |content={{User:DoggoBit/Sandbox/Infobox board/Content
   |content={{User:DoggoBit/Sandbox/Infobox board/Content
     |manufacturer={{{manufacturer|}}}
     |manufacturer={{{manufacturer|}}}
Line 8: Line 9:
     |soc={{{soc|}}}
     |soc={{{soc|}}}
   }}
   }}
}}</includeonly>
  |footer={{{footer|}}}
<noinclude>
}}</includeonly><noinclude>
{{User:DoggoBit/Sandbox/Infobox board
{{User:DoggoBit/Sandbox/Infobox board
   |title=Raspberry Pi 5
   |title=Raspberry Pi 5
Line 17: Line 18:
   |support-status=Limited community efforts
   |support-status=Limited community efforts
   |soc=BCM2712
   |soc=BCM2712
  |footer=[[NixOS on ARM|<span style="color: white;">Development Board</span>]]
}}
}}
An infobox to be used on board-specific pages, e.g. [[NixOS_on_ARM/Raspberry_Pi_5]].
An infobox to be used on board-specific pages, e.g. [[NixOS_on_ARM/Raspberry_Pi_5]].
Line 28: Line 30:
   |support-status=Limited community efforts
   |support-status=Limited community efforts
   |soc=BCM2712
   |soc=BCM2712
  |footer=[[NixOS on ARM|Development Board]]
}}
}}
</pre>
</pre>
</noinclude>
 
==Implementation details==
 
The ''"logical"'' elements of the box are also captured via CSS classes, so any styles could be incorporated into the website's [[MediaWiki:common.css]]. Each element has two classes: <code>nix-wiki</code> and <code>infobox-something</code>.
 
All CSS properties are implemented via variables, so style inheritance would apply if the styles would be moved into the global CSS. I.e. surrounding the template in a div that overrides any one of the values will propagate the changes. For example:
 
<pre>
<div style="--infobox-color: green;">
  {{Infobox board
    ...
  }}
</div>
</pre>
 
In the meantime, the CSS variables can also be set via MediaWiki variables, so we could easily implement something like:
 
<pre>
{{Infobox board
  |color=green
  ...
}}
</pre>
 
I would ''personally'' love to top-align the content cells, so that we don't get the staggered lines on multi-line cells, but that would be a lot of manual work now, and would result in an overly complicated template. However, it should be a common.css one-liner.

Latest revision as of 00:31, 4 June 2025

Raspberry Pi 5

Manufacturer Raspberry Pi Foundation
Architecture AArch64
Support status Limited community efforts
Technical information
SoC BCM2712

An infobox to be used on board-specific pages, e.g. NixOS_on_ARM/Raspberry_Pi_5.

Usage

{{Infobox board
  |title=Raspberry Pi 5
  |image=Raspberry_Pi_5,_8_GB_RAM.jpg
  |manufacturer=Raspberry Pi Foundation
  |architecture=AArch64
  |support-status=Limited community efforts
  |soc=BCM2712
  |footer=[[NixOS on ARM|Development Board]]
}}

Implementation details

The "logical" elements of the box are also captured via CSS classes, so any styles could be incorporated into the website's MediaWiki:common.css. Each element has two classes: nix-wiki and infobox-something.

All CSS properties are implemented via variables, so style inheritance would apply if the styles would be moved into the global CSS. I.e. surrounding the template in a div that overrides any one of the values will propagate the changes. For example:

<div style="--infobox-color: green;">
  {{Infobox board
    ...
  }}
</div>

In the meantime, the CSS variables can also be set via MediaWiki variables, so we could easily implement something like:

{{Infobox board
  |color=green
  ...
}}

I would personally love to top-align the content cells, so that we don't get the staggered lines on multi-line cells, but that would be a lot of manual work now, and would result in an overly complicated template. However, it should be a common.css one-liner.