Bug 34423 - (proof-of-concept) Bugzilla could look better with a new skin
Summary: (proof-of-concept) Bugzilla could look better with a new skin
Status: Pushed to main
Alias: None
Product: Koha
Classification: Unclassified
Component: bugs.koha-community.org (show other bugs)
Version: unspecified
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Jake Deery
QA Contact: Testopia
URL:
Keywords: additional_work_needed
Depends on:
Blocks:
 
Reported: 2023-07-26 16:36 UTC by Jake Deery
Modified: 2024-07-08 18:20 UTC (History)
6 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Jake Deery 2023-07-26 16:36:44 UTC
Hello,

I've been experimenting with Bguzilla5 for a few projects, and have got stuck in with the skinning system. As a side project, and side product of this, I've put together a Koha 22.11-inspired skin, the CSS of which can be found at the Gitlab URL below:

https://gitlab.com/jahdobble/koha-bz-new-skin 

I've also put together a few screenshots, so one might look on what it may look like:

https://gitlab.com/jahdobble/koha-bz-new-skin/-/tree/main/screenshots

I give these files with an Apache 2 licence, but if this needs changing to match Koha's licence, I can do this easily.

Please do offer feedback, and submit patches. This proof of concept is free to be either adopted, adapted, or ignored entirely.

Many thanks,
Jake Deery
Comment 1 Katrin Fischer 2023-12-23 13:30:46 UTC
Hi Jake, I missed to tell you earlier: but I quite like it. 
I especially like the switch in fonts to non-serif for the labels etc.
Is this something we could put on the roadmap?
https://wiki.koha-community.org/wiki/Road_map_24.05
Comment 2 Chris Cormack 2024-01-08 22:55:25 UTC
This has been applied, I like it :)
Comment 3 Chris Cormack 2024-01-08 23:01:54 UTC
Sorry I forgot to mention you will need to go to https://bugs.koha-community.org/bugzilla3/userprefs.cgi and set your skin to KohaV2 to see the new skin.

Few little things to work out on smaller screens but people can test it now. I've symlinked in the repo so if you update it lemme know and ill do a git pull and you can see the changes in bugzilla
Comment 4 Martin Renvoize 2024-01-09 06:34:12 UTC
This is looking great, nice one.
Comment 5 Katrin Fischer 2024-01-09 08:37:53 UTC
Started to use the new skin to help find any small glitches, I quite like the feel of it!

1) When the bug comment is saved, it shows in a fixed width font, but when writing the note, it doesn't. My first feeling would be that they should match up and until bugzilla supports basic formatting like lists etc. it would be nicer to have the fixed-width font on editing too.

2) The input fields for "Documentation contact" and "Documentation submission" are a bit too wide, creating a horizontal scroll bar on the bug edit page.

3) The breaking point for smaller screens is a bit too early an the navigation immediately takes up a lot of space and is all centered. I think a like "half-screen" view needs a little bit more attention.

4) the comment sections are much wider than before, with a lot of "white space" after the text. I think keeping it at an easy to read length is good, but we should "shrink" the white background back to size. (hope that one makes sense)
Comment 6 Paul Derscheid 2024-01-09 10:00:47 UTC
Wow, that's so awesome. Let's get this moving ASAP! :D
Comment 7 Jake Deery 2024-01-09 17:05:59 UTC
Hello all,

Thanks for all the feedback. I've pushed another commit today, hoping to address:

* Width issues on mobile
* Inconsistent fonts (i.e. the editor being sans-serif, while the comments being monospace)
* Adding more breakpoints to make the transition through screen-sizes more managable

It's not a final draft; much more work is needed. But hopefully we all agree we're moving in the right direction. :-)

P.S. the test site is back, at https://bugzilla.llownd.net/bugzilla5
Comment 8 Katrin Fischer 2024-01-13 15:21:35 UTC
Hi Jake,

Thanks for your work! I have set my account to use the new skin, to do some more testing. I have one thing that disturbs my workflow a bit:

I often copy the title to a bug to my todo lists or into our wiki, as it will also take the bug link that way.
Now when I copy, the bug number and description are on separate lines:

Bug 34423
- (proof-of-concept) Bugzilla could look better with a new skin 

Before it was one line. Visually we are also missing a bit of space after the - in the bugzilla GUI.

I know it's a small thing, but it would be really helpful to have it fixed.
Comment 9 Victor Grousset/tuxayo 2024-01-14 20:39:07 UTC
Looking great! thanks Jake :)

(In reply to Katrin Fischer from comment #8)
> more testing. I have one thing that disturbs my workflow a bit:
> 
> I often copy the title to a bug to my todo lists or into our wiki, as it
> will also take the bug link that way.
> Now when I copy, the bug number and description are on separate lines:
> 
> Bug 34423
> - (proof-of-concept) Bugzilla could look better with a new skin 
> 
> Before it was one line. Visually we are also missing a bit of space after
> the - in the bugzilla GUI.
> 
> I know it's a small thing, but it would be really helpful to have it fixed.

I noticed the same thing while copying titles in the wiki ^^

---

I noticed something about visited links no longer having a different look. I opened a ticket here with more details https://gitlab.com/Pilvedore/koha-bz-new-skin/-/issues/1
Comment 10 Katrin Fischer 2024-01-28 13:23:51 UTC
Hi Jake,
what would be the best way to proceed here? Do you prefer issues filed on gitlab?
Comment 11 Katrin Fischer 2024-04-01 12:30:36 UTC
(In reply to Katrin Fischer from comment #10)
> Hi Jake,
> what would be the best way to proceed here? Do you prefer issues filed on
> gitlab?

*ping* :)

Got another one:

When there is a 'mid-air' collision, the buttons at the bottom show with bullet points in front of them.
Comment 12 Jake Deery 2024-04-02 12:49:52 UTC
Hello everyone! Sorry, I haven't had time to look at this recently. I've made a series of small changes around WACG, mostly around spacing, adding a new breakpoint for people on devices with 'medium-width' displays, and colour. I've also addressed:

1) Setting the font family on textarea inputs to monospaced
2) Setting responsive width limits on show_bug.cgi to stop overflowing inputs
3) Adding a specific break-point for the header, so nav can flow on two lines on medium-width devices
4) Fixing the bug summary line so it copies & pastes much more seamlessly 

I've been unable to get a reasonable identifier for those mid-air collision bullet-points, so rather than possibly break other parts of Bugzilla, I've added a margin to the bottom of the buttons so they aren't touching.

---

Chris, could we get a pull of the repo on the production server, so folk can begin testing the recent changes? Cheers!

And, thanks everyone for testing!!
Comment 13 Chris Cormack 2024-04-02 19:45:28 UTC
Done
Comment 14 Katrin Fischer 2024-04-02 21:01:25 UTC
Thanks Jake!

> 4) Fixing the bug summary line so it copies & pastes much more seamlessly 

Not sure if something went wrong or if it still needs a little work, but I still have the copy & paste issues with smaller window sizes:

Bug 34423
- (proof-of-concept) Bugzilla could look better with a new skin (edit) 

Working on the laptop I most of the time only use half the screen for bugzilla, so I think that's part of the issue.
Comment 15 Victor Grousset/tuxayo 2024-04-02 23:38:25 UTC
@Chris : something wrong happened with deployment, the bug summary line and not-monospace font issue are still there but are fixed in Jake's test instance: https://bugzilla.llownd.net/bugzilla5/show_bug.cgi?id=1
Comment 16 Katrin Fischer 2024-04-03 07:59:11 UTC
Could it be a different branch or some uncommitted changes? Some additional step missing to activate the changes?
Comment 17 Jake Deery 2024-04-03 08:17:24 UTC
When I look at the raw CSS files on this server, they match what is on my box: https://bugs.koha-community.org/bugzilla3/skins/contrib/KohaV2/global.css 

Could be the cache? On my bugzilla box, I have a cronjob running every 60 seconds:
find /srv/www/bugzilla.llownd.net/bugzilla5/data/assets -name '*.css' -delete -print
find /srv/www/bugzilla.llownd.net/bugzilla5/data/assets -name '*.js' -delete -print

Maybe a similar task needs running on this server? Of course, check there is nothing essential in that directory first!

Thanks.
Comment 18 Chris Cormack 2024-04-03 20:24:58 UTC
Hnmm yep should be all the same

chrisc@bugs:~/git/koha-bz-new-skin$ git pull
Already up to date.

All the cache has been recently regenerated
/home/chrisc/bugzilla/data/assets# ls -l
total 564
-rw-r--r-- 1 www-data www-data   7188 Apr  3 20:20 068fbf28a45907d22559d2f18e9ad427.css
-rw-r--r-- 1 www-data www-data   4437 Apr  3 20:20 09183300347452246bc79833bf05c8d7.js
-rw-r--r-- 1 www-data www-data  41393 Apr  3 20:20 0e60506fcac2922d10d46589e488aadf.css
-rw-r--r-- 1 www-data www-data  12185 Apr  3 20:20 14dc9f799a0a806eeb6c22ce8c06029f.css
-rw-r--r-- 1 www-data www-data  43974 Apr  3 20:20 1b4e898422a669ab82b604a2c23edce5.js
-rw-r--r-- 1 www-data www-data   2220 Apr  3 20:20 206bb8e5b8584223b92afae06825d2fa.js
-rw-r--r-- 1 www-data www-data   7788 Apr  3 20:20 29f04fcbf22cac0aee8418f77a932db2.js
-rw-r--r-- 1 www-data www-data  34795 Apr  3 20:20 2e6e421b95bc76c273c65f113df06e10.js
-rw-r--r-- 1 www-data www-data  13853 Apr  3 20:20 3cf88792325e4ad5452dbb4678dab74a.css
-rw-r--r-- 1 www-data www-data  20680 Apr  3 20:20 4771f85fa07673965f2fb48ee7890999.css
-rw-r--r-- 1 www-data www-data  32490 Apr  3 20:20 78b05fb7e0c02dc46b22b57371396dc9.js
-rw-r--r-- 1 www-data www-data 126953 Apr  3 20:20 7aea391f77d255cdd754e18ddbf1133b.js
-rw-r--r-- 1 www-data www-data  37317 Apr  3 20:20 97bc1cb9bcf1bc3a46be479a4fac73c1.js
-rw-r--r-- 1 www-data www-data  13146 Apr  3 20:20 9a1eac68bcb6da87dff82c4694ac9657.js
-rw-r--r-- 1 www-data www-data  26038 Apr  3 20:20 a20619e3724298545775187a20becc70.css
-rw-r--r-- 1 www-data www-data   4796 Apr  3 20:20 a7b424fa476ffa0a75b33046277d60f9.js
-rw-r--r-- 1 www-data www-data   7204 Apr  3 20:20 a96c7c46c532e011e0d274f885cd3c54.css
-rw-r--r-- 1 www-data www-data  27007 Apr  3 20:20 b23fb94f692daff240a2533ba14f3475.js
-rw-r--r-- 1 www-data www-data  32865 Apr  3 20:20 d35b2bb4a51536ba7d6ddaa30b08e17e.css
-rw-r--r-- 1 www-data www-data      0 Apr  3 20:20 d41d8cd98f00b204e9800998ecf8427e.js
-rw-r--r-- 1 www-data www-data  32547 Apr  3 20:20 e99587309f7dfa5ed1b8537099ec4ec9.js
-rw-r--r-- 1 www-data www-data    963 Apr  3 20:20 f95ec5672c38d4e576a4ce2c0be59932.css
Comment 19 Katrin Fischer 2024-04-05 09:10:50 UTC
It looks like local cache can be pretty stubborn too. I do see the changes now - thanks!

Something new I just noticed:
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=36507

Could we get rid of the horizontal scoll bar on comment#8?
Comment 20 Victor Grousset/tuxayo 2024-04-11 15:33:38 UTC
> It looks like local cache can be pretty stubborn too. I do see the changes now - thanks!

huh me to!


Great, I can daily drive this now for deeper testing :)
Comment 21 Victor Grousset/tuxayo 2024-04-17 18:10:51 UTC
Found another issue: width of quotes in comments is narrower and end of lines are required horizontal scroll.

1. With default theme, go to bug 35106 comment 11
2. you see:
   «I've signed off as it does what it says in the test plan, but just have one»
3. same with new skin:
   «I've signed off as it does what it says in the test plan»