(Created page with "The library relies on these templates: * Template:Library_card * Template:Library_card_mini and their associated CSS stylesheet in /style.css. There is also a Module:Number of works to display the (X works) mention in the cards. Finally there is a template, Library_homepage, that contains the overarching CSS for the div containers that will contain the cards on the library homepage. That's all it does. '''There is also some...") Tag: Visual edit |
No edit summary Tag: Visual edit |
||
| Line 8: | Line 8: | ||
There is also a [[Module:Number of works]] to display the (X works) mention in the cards. | There is also a [[Module:Number of works]] to display the (X works) mention in the cards. | ||
Finally there is a template, [[Template:Library homepage|Library_homepage]], that contains the overarching CSS for the div containers that will contain the cards on the library homepage. That's all it does. | Finally there is a template, [[Template:Library homepage|Library_homepage]], that contains the overarching CSS for the div containers that will contain the cards on the library homepage. That's all it does. This was done so that the flex theming doesn't get called every time you call the template. Is it necessary? I don't know. | ||
'''There is also some CSS in MediaWiki:Citizen.css specifically for the built-in dark mode.''' | '''There is also some CSS in MediaWiki:Citizen.css specifically for the built-in dark mode.''' | ||
| Line 14: | Line 14: | ||
It's otherwise pretty self-explanatory, especially when one looks at the user guide for the new library. Everything works with simple HTML and CSS. | It's otherwise pretty self-explanatory, especially when one looks at the user guide for the new library. Everything works with simple HTML and CSS. | ||
The grayscale and scaling effect is realized in CSS in the library_homepage stylesheet, so you need to upload colorized pictures (we just did it with free AI tools online for older pictures). If you don't specify a picture a placeholder image will be used instead. | |||
--- | |||
The big cards are | |||
In the library page, we have div containers for every heading and subheading. ''.library-container'' is used for the big cards and ''.library-container-mini'' is used for the mini cards. You just open this div tag and put the appropriate templates under it. Each container can only be used for its appropriate card type. | |||
That is because the big cards are simply flexboxes, but the mini cards had to be CSS grids to display properly. | |||
== Big cards == | |||
The images in the big cards have position:relative. This allows us to specify a top and left position in pixels on the template directly (it's a parameter). | |||
It's pretty clever how it works. The card has a fixed size whether on mobile or desktop which makes things easier. There is first ''.library-card-TOC'' (table of contents), which is an <nowiki><h6> tag, the lowliest of all headings. The only thing this does (it's set to a height and width of 0px so that it doesn't actually appear on the page but the HTML still gets parsed, whereas with display:none, the HTML would not get parsed) is make the card {{{name}}}</nowiki> parameter appear in the table of contents that MediaWiki creates, which makes the library browsable. | |||
However, MediaWiki reorders HTML headings itself to create its table of content. That means it doesn't matter that it's an h6, it will still appear as the proper heading or subheading natively. | |||
Next we specify an image file which will link to a '''category'''. The library card can only link to a category. Then we have a container for the content, which creates the white box with the card name and number of works displayed. The reason we have that is because this blank box needs to be filled in with a color, otherwise the picture (which has a z-index of -1 and is scaled at 1.1 so that it properly covers the entire area it was given) will overlap on the box a little bit. | |||
This is also where the night mode CSS comes in. You just specify your background-color as '''var(--color-surface-0)''' and Citizen will automatically parse it. This means also that this specific CSS part needs to be added in Mediawiki:Citizen.css. | |||
The only parameters for the end user are the '''image''' path, card '''name''', '''category''' name, and finally '''top''' and '''left''' offsets (hard-coded in pixel, you can change the unit in the Library_card template but there's no need). | |||
== Mini cards == | |||
The mini card images repeat the same CSS, namely the grayscale filter (but no scale-in effect or box-shadow). They also use many more parameters in their template because you can type in any kind of text you want and add the links yourself. That is to say, the mini card doesn't need to link to a category. | |||
They also use the same <nowiki><h6> trick as the big cards.</nowiki> | |||
They are in a grid display, but the grid changes depending on if you're on mobile or desktop to allow either 1 column or 4 respectively. | |||
Regarding the grid, something weird happens (probably conflicting with another piece of code): it skips one column out of two. Using some math, I simply made every other column in the grid the size of the margin I wanted, which makes it look like there's the right amount of columns and margin. | |||
This means there's actually 8 columns on desktop and 2 on mobile, but we only use half. | |||
Their parameters are also '''image''' path, '''text''' that appears next to the image (can contain links), '''name''' in the table of contents, and '''link''' for when one clicks on the image. There's the same amount of parameters as the bigger cards but it's a bit more complex to use with lots of overlap. However, this was the only solution I found to make mini cards be able to link to any other page we want, category or not. | |||
Revision as of 14:30, 17 September 2023
The library relies on these templates:
and their associated CSS stylesheet in /style.css.
There is also a Module:Number of works to display the (X works) mention in the cards.
Finally there is a template, Library_homepage, that contains the overarching CSS for the div containers that will contain the cards on the library homepage. That's all it does. This was done so that the flex theming doesn't get called every time you call the template. Is it necessary? I don't know.
There is also some CSS in MediaWiki:Citizen.css specifically for the built-in dark mode.
It's otherwise pretty self-explanatory, especially when one looks at the user guide for the new library. Everything works with simple HTML and CSS.
The grayscale and scaling effect is realized in CSS in the library_homepage stylesheet, so you need to upload colorized pictures (we just did it with free AI tools online for older pictures). If you don't specify a picture a placeholder image will be used instead.
---
In the library page, we have div containers for every heading and subheading. .library-container is used for the big cards and .library-container-mini is used for the mini cards. You just open this div tag and put the appropriate templates under it. Each container can only be used for its appropriate card type.
That is because the big cards are simply flexboxes, but the mini cards had to be CSS grids to display properly.
Big cards
The images in the big cards have position:relative. This allows us to specify a top and left position in pixels on the template directly (it's a parameter).
It's pretty clever how it works. The card has a fixed size whether on mobile or desktop which makes things easier. There is first .library-card-TOC (table of contents), which is an <h6> tag, the lowliest of all headings. The only thing this does (it's set to a height and width of 0px so that it doesn't actually appear on the page but the HTML still gets parsed, whereas with display:none, the HTML would not get parsed) is make the card {{{name}}} parameter appear in the table of contents that MediaWiki creates, which makes the library browsable.
However, MediaWiki reorders HTML headings itself to create its table of content. That means it doesn't matter that it's an h6, it will still appear as the proper heading or subheading natively.
Next we specify an image file which will link to a category. The library card can only link to a category. Then we have a container for the content, which creates the white box with the card name and number of works displayed. The reason we have that is because this blank box needs to be filled in with a color, otherwise the picture (which has a z-index of -1 and is scaled at 1.1 so that it properly covers the entire area it was given) will overlap on the box a little bit.
This is also where the night mode CSS comes in. You just specify your background-color as var(--color-surface-0) and Citizen will automatically parse it. This means also that this specific CSS part needs to be added in Mediawiki:Citizen.css.
The only parameters for the end user are the image path, card name, category name, and finally top and left offsets (hard-coded in pixel, you can change the unit in the Library_card template but there's no need).
Mini cards
The mini card images repeat the same CSS, namely the grayscale filter (but no scale-in effect or box-shadow). They also use many more parameters in their template because you can type in any kind of text you want and add the links yourself. That is to say, the mini card doesn't need to link to a category.
They also use the same <h6> trick as the big cards.
They are in a grid display, but the grid changes depending on if you're on mobile or desktop to allow either 1 column or 4 respectively.
Regarding the grid, something weird happens (probably conflicting with another piece of code): it skips one column out of two. Using some math, I simply made every other column in the grid the size of the margin I wanted, which makes it look like there's the right amount of columns and margin.
This means there's actually 8 columns on desktop and 2 on mobile, but we only use half.
Their parameters are also image path, text that appears next to the image (can contain links), name in the table of contents, and link for when one clicks on the image. There's the same amount of parameters as the bigger cards but it's a bit more complex to use with lots of overlap. However, this was the only solution I found to make mini cards be able to link to any other page we want, category or not.