More languages
More actions
(→Code) Tag: Visual edit |
mNo edit summary Tag: Visual edit |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
Using the [[MediaWiki:Common.js|Common.js]] file, it's very easy to add icon hyperlinks to the sidebar on Citizen skin. I had to add it to common and not Citizen.js because once again citizen.js doesn't load my additions into the DOM, but | Using the [[MediaWiki:Common.js|Common.js]] file, it's very easy to add icon hyperlinks to the sidebar on Citizen skin. I had to add it to common and not Citizen.js because once again citizen.js doesn't load my additions into the DOM, but Common somehow does. | ||
Best of all, with the way I did it (really the simplest way), it doesn't add anything to the mobile sidebar. Because | Best of all, with the way I did it (really the simplest way), it doesn't add anything to the mobile sidebar. Because the sidebar is so small on mobile, being at the bottom of the screen, you don't really have the space to add stuff anyway. | ||
Only downside is we can't get rid of these links in the megamenu since they are still required for people who disable javascript and mobile users (which is like 50-75% of all web traffic so cater to them). | Only downside is we can't get rid of these links in the megamenu since they are still required for people who disable javascript and mobile users (which is like 50-75% of all web traffic, so cater to them). | ||
== Code == | == Code == | ||
| Line 18: | Line 18: | ||
// Create the HTML for the "Upload file" icon + link | // Create the HTML for the "Upload file" icon + link | ||
var uploadFileIcon = '<nowiki><a class="citizen-header__item" href="/wiki/Special:Upload"><div class=" | var uploadFileIcon = '<nowiki><a class="citizen-header__item sidebar-upload" href="/wiki/Special:Upload"><div class="citizen-header__button"></div></nowiki><nowiki></a></nowiki>'; | ||
// Insert the icon HTML after the existing icon container element | // Insert the icon HTML after the existing icon container element | ||
| Line 30: | Line 30: | ||
})(jQuery, mediaWiki);</blockquote> | })(jQuery, mediaWiki);</blockquote> | ||
You could easily readapt this code by just changing the var '''uploadFileIcon''', the '''sidebar-upload''' class in the <a> tag (I kept the format as sidebar-X) and the '<nowiki/>'''.citizen-drawer'''<nowiki/>' to the previous class in the DOM. Just one thing: this code above checks that the user is logged in (because anonymous, or non-logged in users, can't upload files anyway). It won't add the icon if you're not logged in. You can simply remove the "if (!mw.user.isAnon())" condition to stop checking for that. | |||
You could easily readapt this code by just changing the var uploadFileIcon and the '.citizen-drawer' to the previous | |||
And then just to style the new icon, in [[MediaWiki:Citizen.css|Citizen.css]]:<blockquote>/*appended upload file icon in sidebar */ | And then just to style the new icon, in [[MediaWiki:Citizen.css|Citizen.css]]:<blockquote>/*appended upload file icon in sidebar */ | ||
. | .sidebar-upload> div, .sidebar-library > div, .sidebar-essays > div{ | ||
height:40px; | height:40px; | ||
| Line 53: | Line 49: | ||
content:""; | content:""; | ||
filter: var(--filter-invert); /* for dark mode */ | |||
} | |||
.sidebar-upload > div{ | |||
background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E upload %3C/title%3E%3Cpath d=%22M17 12v5H3v-5H1v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5z%22/%3E%3Cpath d=%22M10 1 5 7h4v8h2V7h4z%22/%3E%3C/svg%3E"); | background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E upload %3C/title%3E%3Cpath d=%22M17 12v5H3v-5H1v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5z%22/%3E%3Cpath d=%22M10 1 5 7h4v8h2V7h4z%22/%3E%3C/svg%3E"); | ||
}</blockquote>This is copied straight from the style used for the other two icons (search function and megamenu) that Citizen adds. The icon is an encoded svg, I got the code from when we added it to the megamenu by looking at the CSS. | }</blockquote>This is copied straight from the style used for the other two icons (search function and megamenu) that Citizen adds. The icon is an encoded svg, I got the code from when we added it to the megamenu by looking at the CSS. Otherwise you can upload your own svgs to ProleWiki, find the files [https://github.com/wikimedia/mediawiki/tree/master/resources/lib/ooui/themes/wikimediaui/images/icons here] (it's better if we used the ones made expressly for this purpose as they will look better together). | ||
I divided the CSS clauses in two so that we can apply the same style to all sidebar items ''except'' for the background image. | |||
== Known problems == | == Known problems == | ||
Known problems with my additions: | Known problems with my additions: | ||
* If user blocks Javascript, icons won't load. | |||
Latest revision as of 10:40, 9 November 2024
Using the Common.js file, it's very easy to add icon hyperlinks to the sidebar on Citizen skin. I had to add it to common and not Citizen.js because once again citizen.js doesn't load my additions into the DOM, but Common somehow does.
Best of all, with the way I did it (really the simplest way), it doesn't add anything to the mobile sidebar. Because the sidebar is so small on mobile, being at the bottom of the screen, you don't really have the space to add stuff anyway.
Only downside is we can't get rid of these links in the megamenu since they are still required for people who disable javascript and mobile users (which is like 50-75% of all web traffic, so cater to them).
Code[edit | edit source]
This is the JS code for the Upload file icon I added:
/* Append Upload file icon to Citizen sidebar, under megamenu icon */
(function($, mw) {
// Wait for the DOM to be ready
$(document).ready(function() {
if (!mw.user.isAnon()) {
// Create the HTML for the "Upload file" icon + link
var uploadFileIcon = '<a class="citizen-header__item sidebar-upload" href="/wiki/Special:Upload"><div class="citizen-header__button"></div></a>';
// Insert the icon HTML after the existing icon container element
$('.citizen-drawer').after(uploadFileIcon);
}
});
})(jQuery, mediaWiki);
You could easily readapt this code by just changing the var uploadFileIcon, the sidebar-upload class in the <a> tag (I kept the format as sidebar-X) and the '.citizen-drawer' to the previous class in the DOM. Just one thing: this code above checks that the user is logged in (because anonymous, or non-logged in users, can't upload files anyway). It won't add the icon if you're not logged in. You can simply remove the "if (!mw.user.isAnon())" condition to stop checking for that.
And then just to style the new icon, in Citizen.css:
/*appended upload file icon in sidebar */
.sidebar-upload> div, .sidebar-library > div, .sidebar-essays > div{
height:40px;
width:100%;
background-repeat:no-repeat;
background-size:auto;
background-position:center;
opacity:var(--opacity-icon-base);
content:"";
filter: var(--filter-invert); /* for dark mode */
}
.sidebar-upload > div{
background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E upload %3C/title%3E%3Cpath d=%22M17 12v5H3v-5H1v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5z%22/%3E%3Cpath d=%22M10 1 5 7h4v8h2V7h4z%22/%3E%3C/svg%3E");
}
This is copied straight from the style used for the other two icons (search function and megamenu) that Citizen adds. The icon is an encoded svg, I got the code from when we added it to the megamenu by looking at the CSS. Otherwise you can upload your own svgs to ProleWiki, find the files here (it's better if we used the ones made expressly for this purpose as they will look better together).
I divided the CSS clauses in two so that we can apply the same style to all sidebar items except for the background image.
Known problems[edit | edit source]
Known problems with my additions:
- If user blocks Javascript, icons won't load.