Icons instead of bulky text for "Edit source" and "Report a bug"

janajaeger commented 2 years ago

Create icons for Edit source and report a bug links. Use with alt and title attributes.

janajaeger commented 2 years ago

Here's one with a literal bug. Not sure whether that "translates" well. Icons are roughly 20x20 px. Would recommend to tune down the green a bit or switch to some dark grey instead. What do you guys think?

reportbug_editsouce_literalbug

tomschr commented 2 years ago

The overall idea is great, I think. From my point of view, I would suggest these changes:

Make the icons a bit bigger.
Make them more grey so it doesn't interfere much during reading.
Change color when hovering over the icons.
Not sure, if black background works. Maybe make them with transparent/white background?

fsundermeyer commented 2 years ago

Fully support what Toms says. If you would choose a white/transparent background and invert the icon on hover, that would be ideal IMHO (together with an increased size)

janajaeger commented 2 years ago

Just tested a few combos for the bug report thing. I like 1 and 3, 2 is too meeh. IMHO. What do you guys prefer?

Combo 1: reportbug1

Combo 2: reportbug2

Combo 3: reportbug3

tomschr commented 2 years ago

Thank you very much for your efforts! Much appreciated. :+1:

I'm not an UX expert. IMHO, I prefer option 2 for the following reasons:

The other options are a bit too "bulky" for my taste.
Option 2 is a bit more subtle.
Option 2 doesn't distract too much from the title (which should be the main focus).

Maybe we can change the size a bit. Just my two cents. :wink:

janajaeger commented 2 years ago

Those would be the optimized SVGs. Now the challenge is to properly include them: edit_source_test

<svg xmlns="http://www.w3.org/2000/svg" width="23.067348" height="26.213722" viewBox="0 0 6.1032359 6.9357145" version="1.1"><path fill="none" stroke="#c0c2c4" stroke-width="0.264583px" d="m 0.1327732,0.13229144 5.8381716,1.076e-5 -3.6e-6,4.7625 -3.7041668,1.21e-5 -1.0583335,1.6009044 -1.07e-5,-1.6009045 -1.05833339,5.9e-6 z M 3.9857659,1.7577095 4.8046844,2.5766279 3.985766,3.3955459 M 2.2976362,1.7577096 1.4787181,2.5766278 2.297636,3.3955459 M 3.6535249,1.5529801 2.6298773,3.6002755" /></svg>

report_bug_test

<svg xmlns="http://www.w3.org/2000/svg" width="23.07" height="26.21" viewBox="0 0 6.1 6.94" version="1.1"><path fill="none" stroke="#c0c2c4" stroke-width="0.264581" d="m 3.04305,3.18412 5e-4,0.25999 M 3.04101,2.12253 3.04255,2.92414 M 3.03946,1.32091 4.64727,3.70101 1.46248,3.70713 Z M 0.155698,0.134866 5.98364,0.123661 5.99281,4.89001 2.26639,4.89718 1.18621,6.50249 1.18313,4.89926 0.164862,4.90122 Z" /></svg>

janajaeger commented 2 years ago

If adding this to the CSS/SASS file doesn't work, what about:

adding the svg images to the static directory
adding code to the xslt stylesheet that creates the a href code for both and links to the image

tomschr commented 1 year ago

This was implemented in #497.

openSUSE / suse-xsl

Icons instead of bulky text for "Edit source" and "Report a bug" #472