Editing Comrade:CriticalResist/sandbox/Library documentation

Warning: You are not logged in, comrade. Your IP address will be publicly visible if you make any edits. If you log in or create an account, your edits will be instead attributed to your username.

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 mid]]
* [[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. It used to be that each template contained its own style, but I moved everything to Library_homepage.
The card templates control the displaying of both the large and miniature cards.
 
'''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 [[ProleWiki:User guide/Library|user guide]] for the new library. Everything works with simple HTML and CSS.
[[Template:Library homepage|Library_homepage]] contains the overarching CSS for the div containers that will contain the cards on the library homepage. That's all it does.


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. In any case, all cards should have a custom-made picture; the placeholder is really just there in case someone makes a new card but forgets to upload a picture or doesn't know how to.
'''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.


In the library page, we have div containers for every heading and subheading. ''.library-container'' is used for the big and mid 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.
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.


---
---


Card picture sizes (height x length)
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''' cards: 605x405px
The big cards are simply flexboxes displays, but the mini cards had to be CSS grids to display properly.
 
'''mid''' cards: 305x305px
 
'''mini''' cards: 105x205px
 
(all dimensions doubled to look good on smartphone [Retina] displays + added 5 extra pixels in both dimensions to make sure the pictures fit correctly).
 
As much as possible, pictures for the cards should be cropped to this size. This is because HTML loads the full-size picture, which increases page load time and page size. In other words if we have a 1500x3000px image for a card, it will load the entire picture and then scale it down to 305x305 for a mid card, loading possibly megabytes of data when we could just load the smaller, lighter picture by uploading a cropped, resized one from the start.
 
The only solution to load properly-cropped picture is to crop them yourself on your device.


== 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, from Library_homepage.
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 36:
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 all 3 card types (look for img:hover clauses preceded by a class).
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 57:
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).


=== Mid cards ===
== Mini cards ==
Mid cards are a subsection of big cards because they work exactly the same way (same HTML and CSS) except they just look different. They also use the same container div in the library (.library-container).
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.


I had to declare CSS specific to the mid cards though (which are contained in the .library-card-mid div) for it all to work properly. This CSS is still in the [[Template:Essays homepage/style.css]] page. There is only little overlap between the big cards and mid cards in the CSS.
They also use the same <nowiki><h6> trick as the big cards.</nowiki>
 
They also don't take the '''top''' and '''left''' parameters but a '''scale''' parameter that zooms into (if >1) or out (if <1). Can use decimals up to the third place, so 1.344 is a valid scaling in.


Images are centred vertically and horizontally in the mid cards, if the "subject" of the picture (what you want to appear in the middle of the card) is not centred in the original picture, such as this one below, then it will be off-centred on the card and would require manually cropping the picture.
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.
== 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 like the other two cards do.


They also use the same <nowiki><h6> trick as the big cards.</nowiki>
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.


Mini cards are in a flex display (previously grid -- we changed them a bit and grid didn't make sense any more).
This means there's actually 8 columns on desktop and 2 on mobile, but we only use half.


Their parameters are an '''image''' path, '''text''' that appears next to the image (can contain links with [[ ]]), '''name''' in the table of contents, and '''link''' for when one clicks on the image. The parameters are different from the
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.
ProleWiki upholds the abolition of private property, including intellectual property, so feel free to publish any work at will.
Cancel Editing help (opens in new window)
Retrieved from "https://en.prolewiki.org/wiki/Comrade:CriticalResist/sandbox/Library_documentation"
This page has been accessed 614 times.