More languages
More actions
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 does. I don't like having to
Best of all, with the way I did it (really the simplest way), it doesn't add anything to the mobile sidebar. Because it's 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
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" href="/wiki/Special:Upload"><div class="citizen-sidebar-upload 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 and the '.citizen-drawer' to the previous id or class in the DOM. I plan on adding the Library and Essays icons next.
And then just to style the new icon, in Citizen.css:
/*appended upload file icon in sidebar */
.citizen-sidebar-upload{
height:40px;
width:100%;
background-repeat:no-repeat;
background-size:auto;
background-position:center;
opacity:var(--opacity-icon-base);
content:"";
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.
Known problems
Known problems with my additions:
Not compatible with citizen night mode. I'm still unsure how citizen does night mode (I get that for icons it uses an invert(1) filter in CSS but I'm not sure how to tell it to only do that if the user is on night mode that's the thing).