fedwiki/wiki

Visibility of References (plugin-references)

i2p-lbt opened this issue · 7 comments

It took me a while to find out that references are references, after I first wondered about how pages are composed. Turned out I wasn't able to see the slightly blue background, which would have helped me quite a lot in identifying these are specific elements of the page. I was looking at a (tiny) bit of an angle at the display which made all the difference here. As this the first time that I notice this making a difference, I assume it might be helpful to highlight these a bit more distinctively.

I played around with some settings and after all want to suggest to highlight the external links created by the references-plugin in the same way external pages are highlighted. Is that a sound idea in the sense of conformity?

I used the same box-shadow but had to make the border a bit smaller and found an indentation of the paragraph further helpful. The CSS code I used was this (instead of the background-color: #F0F8FF; that was there):

.reference {
    box-shadow: 0px 0px 10px 0px rgba(0, 180, 220, 0.5) inset;
    margin-left: 15px;
    padding: 7px;
}

The paragraph within gets an inline style set by the reference-plugin in line 15. This needs another setting in addition with the above, otherwise the top looks "ugly". Either change it to the following there (if inline is actually desired - plugin-architecture or something?) or move it to the css as well while at it with something like this:

 .reference p {
    margin-top: 3px;
    margin-bottom: 3px;    
}

The latter is not tested, but .reference pshould address the paragraph within the reference-div, right? I would have made this and created a pull-request after testing, but I wasn't able to find any source for the CSS file, yet. Is that maybe generated on-the-fly or something?

Find the css in the wiki-client repo.
https://github.com/fedwiki/wiki-client/blob/master/client/style.css

Consider including a screenshot. On a mac this is cmd-ctl-shift-4 to capture, then ctl-v to paste into a github comment.

Grr, this Javascript. Thx and sorry for that. I did search for "css" as well as ".profile" in the wiki-client repo on GitHub, but neither of those searches returns the CSS itself for me. Might also be a Javascript thing ... I get hits in all (?) files referencing it, just not the file itself. My bad I guess.

I'll return to this after I have checked out the repos on the command-line. Will also provide screenshots of before/after change, just need to figure out where to upload them best (as drag'n'drop via Javascript won't work for me).

I am working on developer oriented documentation.
http://dev.asia.wiki.org/view/hacking-federated-wiki

Here come the screenshots.

Before Change

and

After Change

The latter is the results of fedwiki/wiki-plugin-reference#5 and fedwiki/wiki-client#140 combined (they are depending on each other). It is better visible on my monitor (as said, I am not known to have a condition here). With the intent it catches the eye, so if you do not want links to external pages to be highlighted as external pages while visiting them, then maybe take the intent but stick with the background? To me it seemed wishful to make these the same as I was at it and had learned about the page-borders.

@i2p-lbt Thank you for the changes to the style for the reference plug-in. I have made a minor change, replacing the use of box-shadow with a border-left.

screen shot 2015-11-16 at 14 18 49

These changes are included in wiki-client@0.6.1 and wiki-plugin-reference@0.2.3

That's actually even better I guess, thx. And most welcome.