Skin talk:Medik

Jump to navigation Jump to search

About this board

Great looking skin, one small issue

3
Summary by Slepi

This is Bootstrap's default, can be overridden by MediaWiki:Medik.css.

Noloader (talkcontribs)

Hi Everyone,

I'm testing skins for Mediawiki 1.35.2. Medik looks great.

There's one small issue using a template. The text of the template is blocked left, and not centered:

Kghbln (talkcontribs)

Hmm, probably caused by some CSS from Bootstrap 4? Did you try to override via MediaWiki:Medik.css?

Slepi (talkcontribs)

Hi @Noloader, the skin itself does not change the table caption alignment, so by default it's aligned to the left (as the Bootstrap library defines). If you want it to be centered, you can insert this code:

table caption {
    text-align: center;
}

to your MediaWiki:Medik.css. Let me know if that helps! -- Petr

Deprecated: SkinMedik overrides setupSkinUserCss which was deprecated in MediaWiki 1.32

3
Summary by Slepi

Should be fixed since skin version 3.2.1 as issue #34

Noloader (talkcontribs)

Hi Everyone,

We recently updated to Mediawiki 1.36. I'm testing some of our installed skins under it.

Use of Erudite is causing these warnings to be printed on the top of each page:

Deprecated: SkinMedik overrides setupSkinUserCss which was deprecated in MediaWiki 1.32. [Called from OutputPage::getRlClient in /var/www/html/w/includes/OutputPage.php at line 3017] in /var/www/html/w/includes/debug/MWDebug.php on line 376

and:

Deprecated: Use of Skin::setupSkinUserCss was deprecated in MediaWiki 1.32. [Called from SkinMedik::setupSkinUserCss in /var/www/html/w/skins/medik/includes/SkinMedik.php at line 46] in /var/www/html/w/includes/debug/MWDebug.php on line 376

and:

Deprecated: Use of BaseTemplate::getFooterIcons was deprecated in MediaWiki 1.35. [Called from MedikTemplate::getFooterBlock in /var/www/html/w/skins/medik/includes/MedikTemplate.php at line 682] in /var/www/html/w/includes/debug/MWDebug.php on line 376

I have no idea why we are running debug code on a production server. I guess that's a separate issue for the Mediawiki folks.

My apologies if this is not a Erudite issue.

Our mediawiki information can be found here.

Slepi (talkcontribs)

Hello @Noloader, thank you for catching these! I'll try to fix them as soon as possible. I only need to test that on older MediaWiki versions.

Noloader (talkcontribs)

Thanks Slepi.

This is still a problem in Mediawiki 1.36.1.

Editing/Actions and Tools merged into one dropdown

9
Summary last edited by Slepi 19:01, 18 April 2021 3 months ago

Tracked on bitbucket.org with issue 28. Available in version 3.2.0 or later.

Kghbln (talkcontribs)

Even after using this skin now for three months I cannot get used to both Editing/Actions and Tools merged into one single dropdown menu. Note that I otherwise really like it (see my post below) :)

It will be great to have e.g. a parameter that allows to define if these two should be merged or not. Sometimes this merged menu gets longer than the screen meaning e.g. if you have e.g. both SMW, CiteThatPage and possibly other extensions installed that provide a tool link you have to scroll down to actually be able to pick the desired menu item. This is not so good I believe.

Slepi (talkcontribs)

Good point, thanks! I've added that to my list. (Please, be patient, since I work as a physician && support for distance learning at the medical faculty, I'm quite overwhelmed in these times.) But definitely, I will implement your idea, it's a good one! Thanks!

Kghbln (talkcontribs)

Thanks for your feedback. No worries, take your time. I will be patient. Truly intense times at the moment. I very much appreciate the work people like you are doing!

Slepi (talkcontribs)
Kghbln (talkcontribs)

Affirmative! That's it!

Slepi (talkcontribs)

Hi @Kghbln, I'm sorry for waiting so long, but after five months I finally got to it and it doesn't look bad. Please try to checkout master and let me know, please! Thanks a lot :-)

Kghbln (talkcontribs)

Really cool. I just tested and it is almost perfect. On small mobile screens though the drop-down menu however continues to open as on regular screens, i.e. it shows outside the viewable area on the right. Perhaps it is possible to make it align right and show to the left?

Slepi (talkcontribs)

@Kghbln Thank you for testing, it's really helpful! I've changed that as you proposed - now the menu is aligned to the right.

Kghbln (talkcontribs)

Looks good to me. Great and thank you! As far as I am concerned you could tag this improvement. :)

More options for the $wgMedikContentWidth setting

11
Summary by Slepi

Available in version 3.1.1 or later.

Kghbln (talkcontribs)

Currently there are the following two options (sidebar left/main content/area right):

  • default: 2/9/1
  • full: 2/10/0

I personally am a fan of balance and consistency and would be happy to see something like:

  • narrow: 2/8/2
  • wide: 1/10/1

I see use for both options though I slightly prefer narrow. I can imagine that it will not be easy to implement further options here.

Slepi (talkcontribs)

Hmm... interesting idea! I think I could implement this, especially the narrowversion could be fine.

I'm not sure about the wide version as 1 on the left would make the sidebar really narrow (i.e. good only for 1-word items without a logo). Maybe I'll make some screenshots first and let you know.

Thanks again!

(Note: default/full only applies to >1200px, medium screens are always 3-9-0 and small mobile screens 0-12-0.)

Kghbln (talkcontribs)

It will be cool if it is not too much work, especially narrow. I thinks this would really look much better. Also it avoids the content area to be too wide and improves readability of content.

When it comes to wide I guess it could still work with a 135px logo. When it comes to words I also use soft hyphens to get things going if they are too wide.

Thanks for your note. This is fine. I spent 99.5 % of my browsing time on wide screens which explains why most suggestions come from this direction.

Slepi (talkcontribs)

Hi, @Kghbln, please try the narrow option with the updated code now!

(As for the wide option, I still need to figure it out - so that the logo is smaller and some other minor changes... hmm, anyway, I'll certainly get back soon.)

Thanks!

Kghbln (talkcontribs)

Wow, this was fast. I am amazed! Just checked out master. Works perfect! This is really cool! I am already 100% happy. :)

As soon as wide is available I will give it a try too. Actually the wiki that had problems with the ads indirectly asked if something like this was possible.

EDIT: I just switched my personal wiki to Medik as the default!

Slepi (talkcontribs)

Hi, @Kghbln, please check out master branch again and try the wide option!

I've made the logo in the sidebar smaller and changed the sizes of the columns: for medium screens it's 2/10/0 and for x-large screens it's 1/10/1 now.

After you test that, I'll update the skin version to 3.1.0. :-)

Thanks a lot!

Kghbln (talkcontribs)

@Slepi: This is really cool!!! I just tested the wide option. First I was wondering why you chose 4em as the width and height of the logo but when I came up with the idea of testing it with my laptop. :) A sensible choice. I guess here we will perhaps have edge cases for some widths but still it works. I did not find any issues. No problem to make the 3.1.0 release!! :)

Slepi (talkcontribs)

Hello, @Kghbln, thanks for testing! Yeah... well, I use 11.6"-13.3" laptops most of my life, there comes my bias. :-) I have tried to fix that, the logo will be larger now with maximum at 10×10em (which is the default of MediaWiki anyway). Please, try to update and let me know if that's better.

Kghbln (talkcontribs)

@Slepi: I think that the automatic resizing of the logo is better. Still there are some edge-cases between 1200 and 1340 where the logo is a bit wider than the sidebar column however we are talking about 7% of all users world-wide. Hmm, I think you should be affected with 13.3"... My laptop is at 1366 - lucky me. Still I do not really like to use laptops and avoid them if possible - I am a bit quaint here.

Slepi (talkcontribs)

Thanks for feedback again. And sorry, my mistake - I used wrong sample logo with transparent margins, that's why I haven't realized that edge case. I replaced my sample with AW-Wiki's logo and now I'm trying to fix the logo size with more flexible CSS clamp() (see here) and it looks better for me, although I'm not sure about the consistent behaviour of this, so we'll see.

Kghbln (talkcontribs)

Wow, did not know yet that clamp existed. This is one to remember. Indeed this fixed the issue with the edge cases between 1200 and 1340 I mentioned before. Utterly cool!

Make padding of the main content area consistent

3
Summary by Slepi

Tracked as issue #31 and resolved.

Kghbln (talkcontribs)

Currently the skin uses the following CSS to set the padding of the main content area which causes an inconsistency which is not too nice.

.pl-md-5,
.px-md-5 {
    padding-left: 3rem !important;
}

While the inconsistency is not apparent on larges screen, it actually on medium size screens such as the ones on tablets. Thus I suggest to also set "padding-right" to "3rem !important":

.pl-md-5,
.px-md-5 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
}

Small size screens to not have the issue at all.

Slepi (talkcontribs)

@Kghbln Good point, thanks! It seems that this CSS class comes from Bootstrap, so changing .pl-md-5 to .px-md-5 should do the trick. Thanks for reporting this! I've updated the source code - please try to update and let me know.

Kghbln (talkcontribs)

This indeed fixed the issue. Great. This was really super fast!

Script injection in main content area fails?

10
Summary by Kghbln

Make sure that your CSS is sane in case something does not show up as expected or at all without other reason.

Kghbln (talkcontribs)

I am trying to add Google Adsense to "MediaWiki:Sitenotice" via a Widget and a second time using the "BeforePageDisplay" hook at the bottom of the main content area (class="col-12 col-md-9 col-xl-10 py-md-3 pl-md-5"). This works on Monobook however on Medik the two scrips seem to load according to the browser console however the Ads are not showing. Could you think of a reason for this? The respective wiki is AW-Wiki.

Note that in contrast the Google Adsense added to the Sidebar with the "SkinBuildSidebar" hook works as expected.

Slepi (talkcontribs)

Hmm, well, after some time I'm still not sure! I see that on AW-Wiki, the ads iframes are loaded both in the sidebar and in the sitenotice area, but they're empty for some reason. The sidebar's ad is sometimes visible, but not always. I'll have to explore it... maybe it's some problem in the widget's code (or something interferes with Google's scripts?).

Kghbln (talkcontribs)

Thanks a lot Slepi for having a look at this! I also wonder why this happens. For the sidebar I have not yet seen an issue but indeed for the two ads (sidenotice and content area). It will be really cool if the cause could be identified and ideally be fixed.

Slepi (talkcontribs)

I'm still not able to resolve this issue. :-( The sidebar's ad displays correctly, but the sitenotice is always empty (no matter what browser I use and no matter what script I re-run to parse the inserting element) without any error in the console. I will keep this open, only I want to make you sure that I didn't forget - even in these tought times. :-) Thanks for your patience!

Kghbln (talkcontribs)

Indeed this is really strange. Thanks a ton for continuing to look into this. If you add ?debug=true to the URL like e.g. https://www.aw-wiki.de/index.php/Hauptseite?debug=true and open the browser-console you can see a scary long list of script errors. Perhaps one of them? Unfortunately I am not a developer so I cannot make anything out of what I am seeing there.

Slepi (talkcontribs)

Yeah... the stragest thing is that it works in other skins! Those error messages are not very useful, thery way too general for me. I suspect some script blocks that execution, but still I can't figure out the error here.

One small thing is the width and height of the element, this should be:

style="display: inline-block; width: 928px; height: 90px;"

instead of:

style="display: inline-block; width: 928; height: 90"

so that the element is displayed correctly in Bootstrap-based skin, but still - it's empty, without an ad.

Still trying...

Kghbln (talkcontribs)

Thank you for continuing to have a look at this. These errors messages could have been a ray of hope for debugging but sometimes... I understand. :) Hopefully you will have the decisive idea.

Thanks also for the pointer to the missing units for the CSS. Just fixed. :)

Kghbln (talkcontribs)

@Slepi: You know what? Adding the units to the dimensions in the style statement fixed the issue! The ads are now displaying. Same for the ads at the very bottom. The code was added via configuration but had the same issue. After adding px this on was resolved. Both ads are served asynchronously.

The ad in the sidebar is served synchronously and specified the dimensions via explicit parameters height and width which the asynchronous code does not have. This is why this one was showing.

Obviously the other skins are not that picky here though admittedly it is perfect that Medik is enforcing valid CSS statements.

Thanks a lot for being a great help here!!! This is very much appreciated!!!

Slepi (talkcontribs)

@Kghbln Wow, really? I'm so glad it helped (although I didn't expect it at all, I thought it was a side accidental finding). :-) Thank you for such good news!

Kghbln (talkcontribs)

Really! It is amazing but true! This is indeed good news!

How to change color "mw-desktop-sitename"

2
Summary by Kghbln

See the CSS provided in the answer.

212.216.193.212 (talkcontribs)

I was able to change the color of the NAVBAR but I would like to change the color of the text but I don't know what to change

Kghbln (talkcontribs)

I believe something like this on "MediaWiki:Medik.css" should do it:

#p-banner,
#p-banner:hover,
#p-banner:visited,
.mw-hamb {
    color: red;
}

Change the color as required.

Summary by Slepi

Problem found in the site's MediaWiki:Common.css.

Hb1290 (talkcontribs)

Love this skin. We've been using it on our wiki for a few months now. But there's just one little issue. With this skin, the icons for Ombox, Imbox, Tmbox, etc. templates don't show up. Only Ambox templates still have their images. While playing with inspect element I found that the element is still there, but it's just being displayed at 0px wide. I eventually found that the issue seems to be an accidental use of "display:Inline" instead of "display:inline-block" somewhere, somehow meaning that image sizes are not being passed from the wikitext in these templates. I've checked all the style sheets and come to the conclusion that the issue is on the skin end and is likely connected to the element "mbox-image".

Slepi (talkcontribs)

Hi @Hb1290, thanks for your message. Unfortunately, I'm not familiar with the templates you are talking about, I don't touch them with this skin as we don't use them in our project. Maybe Bootstrap styles those elements, who knows. Could you please provide me a link with some reproducible example? I'll try to fix it. Thanks!

Hb1290 (talkcontribs)
Slepi (talkcontribs)

Hello @Hb1290, thanks! I'll try to find some solution.

Slepi (talkcontribs)

Hello @Hb1290, I've probably found the problem: it's not the skin itself, it's the site's code here: https://closinglogosgroup.miraheze.org/wiki/MediaWiki:Common.css

/* Cell sizes for ambox/tmbox/imbox/cmbox/ombox/fmbox/dmbox message boxes */
th.mbox-text, td.mbox-text {     /* The message body cell(s) */
    border: none;
    padding: 0.25em 0.9em;       /* 0.9em left/right */
    width: 100%;    /* Make all mboxes the same width regardless of text length */
}

Just remove the line with width: 100%;. (As you make the text 100% wide, there's no place for the image left.)

If you want the whole box to be 100% of width, move it rather here:

table.ombox-speedy {
    border: 2px solid #b32424;    /* Red */
    background: #fee;             /* Pink */
}

Just add a new line after line 278 with width: 100%;.

Try that and let me know, please!

Hb1290 (talkcontribs)

Thank You! That did the trick!

Feature request: Wiki short name for mobile

5
Summary by Slepi

Resolved in version 3.0.11 or later.

Kghbln (talkcontribs)

Currently it is only possible to either hide the wikis name or not. I guess it will be a great improvement if it were possible to set an alternative short name shown on mobile view only.

On Semantic MediaWiki - Sandbox the text is definitively too long for the mobile view thus being able to set "SMW - Sandbox" for mobile view will be great. Other skins like Pivot and Foreground have a feature like this.

If I set $wgMedikUseLogoWithoutText = true; the wiki's name is both hidden from classic and mobile view which is not really preferred.

Thank you for considering and keep up your work on this cool skin.

Slepi (talkcontribs)

Hi @Kghbln, that's nice idea, thanks! I'll try to do that. Should this be a short name only for mobile?

(Note: $wgMedikUseLogoWithoutText = true; was meant rather when the logo also contains the wiki's name.)

Kghbln (talkcontribs)

This will be really cool. This should be for mobile only. On wider screens the wiki's name in regular length shows and is cool.

Thanks also for your info on $wgMedikUseLogoWithoutText = true;. Indeed I just tried it to see if it could make sense.

Slepi (talkcontribs)

@Kghbln Uh, I've tried to implement this somehow. Please try version 3.0.11 and set $wgMedikMobileSitename = 'ShortWiki'; in your LocalSettings.php. Thanks for the idea! ;-)

Kghbln (talkcontribs)

Perfect!!! Just tried this. Works like charm! Much appreciated and many kudos!!

Problem with visual editor

10
Summary last edited by Slepi 11:52, 11 December 2020 7 months ago

Should be fixed at version 3.0.9.

2.86.194.251 (talkcontribs)

I'm using MediaWiki 1.35, VisualEditor 0.1.2 and Medik 3.0.8. When I'm editing a table with visual editor the row selector on the left side of the table is not showing. Could you help me with this issue?

Jtm-lis (talkcontribs)

Can you either take a screenshot of the issue, or copy the code to a pastebin and share the link here? At first glance this sounds like a Visual Editor issue, I am not sure but I think the support would be on the talk, maybe someone else can confirm that for me. --~~~~

Kghbln (talkcontribs)
2.86.194.251 (talkcontribs)

I created two screenshots. The first is with the Medik skin and the second is with the Vector skin. As we can see there is a row selector when I'm using the vector skin. But when I'm using the Medik skin the row selector is disappeared.

Medik https: //ibb.co/smQrKWF

Vector https: //ibb.co/fGwT6W8

Jtm-lis (talkcontribs)

I can't assist, I hope someone can take this issue over.

Kghbln (talkcontribs)

Hopefully. Still the creator of this skin has not commented yet. So there is still a chance. Touching wood.

Slepi (talkcontribs)

Thanks for your info! It seems like a CSS bug in Medik skin and I'll certainly have a look at it. Thanks for you help here @Jtm-lis & @Kghbln! Petr

Kghbln (talkcontribs)

Thank you for creating an issue item for this.

Jtm-lis (talkcontribs)

@Slepi awesome great to have some news !

Slepi (talkcontribs)

Hi, I've provided at least a quick fix for this. Not very fancy and I'll still have to explore what's changed in the VisualEditor though.