More actions
The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then publish the changes below to finish undoing the edit.
Latest revision | Your text | ||
Line 3: | Line 3: | ||
* [[Template:Library homepage]] | * [[Template:Library homepage]] | ||
* [[Template:Library card]] | * [[Template:Library card]] | ||
* [[Template:Library card mini]] | * [[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. | There is also a [[Module:Number of works]] to display the ''(X works)'' mention in the cards. | ||
[[Template:Library homepage|Library_homepage]] contains the overarching CSS for the div containers that will contain the cards on the library homepage in /style.css. It also sets up the library_card and library_card_mini css | [[Template:Library homepage|Library_homepage]] contains the overarching CSS for the div containers that will contain the cards on the library homepage in /style.css. It also sets up the library_card and library_card_mini css. | ||
'''There is also some CSS in MediaWiki:Citizen.css specifically for the built-in dark mode.''' It could probably be brought to the Library_homepage 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 for the big cards a placeholder image will be used instead, but it won't be centred properly. To fix this we should just upload a placeholder picture in the correct aspect ratio. Mini cards don't have a default placeholder image. | |||
--- | --- | ||
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 inside it, one after the other. Each container can only be used for its appropriate card type. The CSS of these containers is controlled from the library_homepage template. | |||
'''big | |||
The | The big cards are simply flexboxes displays, but the mini cards had to be CSS grids to display properly. | ||
== Library homepage template == | == Library homepage template == | ||
This template styles the library-container and library-container-mini to be a flexbox and a grid respectively. It also does some mobile styling. | This template styles the library-container and library-container-mini to be a flexbox and a grid respectively. It also does some mobile styling for the mini-card container since we stack them in a single column on mobile (vs 4 for desktop). | ||
It also handles the more "frequently applied" stylings, such as the grayscale filters and zoom in effects. These used to be in every template but I feel it makes load times worse because you need to call the Library_card css file for every single card that appears on the page, right? I can't confirm it but I feel that's how mediawiki would work. So with this "parent" template, the entire CSS gets called only once | It also handles the more "frequently applied" stylings, such as the grayscale filters and zoom in effects. These used to be in every template but I feel it makes load times worse because you need to call the Library_card css file for every single card that appears on the page, right? I can't confirm it but I feel that's how mediawiki would work. So with this "parent" template, the entire CSS gets called only once. | ||
This solution means that you need to call the Library homepage template on any page which is going to contain library cards (realistically we could use them for tons of stuff other than library). If you forget to call this template, you'll know right away because it will look atrocious on the page. | This solution means that you need to call the Library homepage template on any page which is going to contain library cards (realistically we could use them for tons of stuff other than library). If you forget to call this template, you'll know right away because it will look atrocious on the page. | ||
Line 47: | Line 34: | ||
This also means the grayscale effect gets repeated for both the library card and the mini card in the CSS, but it's the same filter for both cards (it goes from 100% grayscale to 3% on hover). This is because I organized the common CSS file with library card styling, mini styling, mobile styling in this order. | This also means the grayscale effect gets repeated for both the library card and the mini card in the CSS, but it's the same filter for both cards (it goes from 100% grayscale to 3% on hover). This is because I organized the common CSS file with library card styling, mini styling, mobile styling in this order. | ||
If you want to change the filters, you need to do it for | If you want to change the filters, you need to do it for both cards (look for img:hover clauses preceded by a class). | ||
Mini cards don't have the scale-in effect applied because they're so small it would barely change anything. | Mini cards don't have the scale-in effect applied because they're so small it would barely change anything. | ||
Line 68: | Line 55: | ||
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 because pixels are the most precise unit). | 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 because pixels are the most precise unit). | ||
== | == 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 | 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 | 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. |