search

qbittorrent / qBittorrent-website

qBittorrent website
https://www.qbittorrent.org
186 stars 106 forks source link

New download button, svg icons and banners and a go to top button #218

Open Bluewave2 opened 1 year ago

Bluewave2 commented 1 year ago

Greetings,

My old PR was outdated so decided to start fresh with a new branch, I did things better this time with a css only download button.

Here's a live preview: https://bluewave2.github.io/ Edit: Dark mode removed from this PR

Screenshot is older, check live website for latest look

firefox_vmjUnktG6y

Dark mode preview (removed from this PR):

 ![MDVfUuM3Cg](https://github.com/qbittorrent/qBittorrent-website/assets/83724034/0c6700bf-db2e-4408-b054-7c95bbc91529)
Poopooracoocoo commented 1 year ago

Great work!!! Thanks for contributing! :D

I love that you've made the banner an SVG! Are there any other fonts you could use for the banner? Something like Inter might be nicer. As I had mentioned in #164, the banner looks off-centre because the little dragon in the egg isn't there. Could you move the qBittorrent logos to the right a bit?

I'm not super keen on the hover effect of the download button. I think simply changing the opacity would be nicer as well as increasing the shadow. I'd change the neutral shadow to 30%, the hover shadow to 60%, and the active shadow to 90%.

Bluewave2 commented 1 year ago

Great work!!! Thanks for contributing! :D

I love that you've made the banner an SVG! Are there any other fonts you could use for the banner? Something like Inter might be nicer. As I had mentioned in #164, the banner looks off-centre because the little dragon in the egg isn't there. Could you move the qBittorrent logos to the right a bit?

I'm not super keen on the hover effect of the download button. I think simply changing the opacity would be nicer as well as increasing the shadow. I'd change the neutral shadow to 30%, the hover shadow to 60%, and the active shadow to 90%.

Thanks @Poopooracoocoo ,I re-centered the banner , changed the font to Inter Medium (looks great now) and followed your advice for the button effects, what do you think?

If qBittorrent currently doesn't use such dark icon anywhere, then maybe good if first website redesign should keep using default icons and afterwards add dark theme.

You can rebase, squash commits, ammend and seperate dark website to seperate commit in same pull request?

I followed your advice and removed dark mode from this PR via a commit since I lack the git knowledge (wasn't a lot of code), I will finish this first then try to get dark mode added later.

Poopooracoocoo commented 1 year ago

The banner doesn't seem to be using Inter Medium and looks like its using a fallback. Everything is pretty great apart from that issue! Thank you!

Something to consider is removing the TLbanner. You could do that in a separate PR.

Bluewave2 commented 1 year ago

The banner doesn't seem to be using Inter Medium and looks like its using a fallback. Everything is pretty great apart from that issue! Thank you!

Something to consider is removing the TLbanner. You could do that in a separate PR.

image

Should be right , looks exactly how I made it or am I missing something? and yeah I agree, but first this :)

Poopooracoocoo commented 1 year ago

Checked on another device and the banner looks great. Just a weird once-off issue! Nevermind me!

Bluewave2 commented 1 year ago

@Bluewave2

I lack the git knowledge

Here's how to use GitHub Desktop to rebase: https://docs.github.com/en/desktop/contributing-and-collaborating-using-github-desktop/keeping-your-local-repository-in-sync-with-github/syncing-your-branch-in-github-desktop

So after syncing your forked master branch to be upto date with latest official original master, you open GitHub Desktop, select your own branch that's part of this. Some use sync master and sync to branch, which isn't good if want to ammend and squash your commits.

Here's how to squash your commits with GitHub Desktop software: https://docs.github.com/en/desktop/contributing-and-collaborating-using-github-desktop/managing-commits/squashing-commits-in-github-desktop

So you select your pull request related branch, fetch, then press clock icon, drag and drop, then right-click to select ammend and then on top right side you select to push. Afterwards opening your pull request with Webbrowser, you see what has changed. Afterwards you can use webbrowser to add extra commits until more familiar to use correct Git commands or GitHub Desktop features.

You could always create a private repository to test some features and how to edit pull requests and commits. Sometimes it makes code reviewing or ammending easier if you include less outdated commits or if just want to have a cleaner look.

Thank you, I'll read up on it when I have the time, I'm using MINGW64 git bash already just got to put some time into learning more

Poopooracoocoo commented 1 year ago

So I'm seeing the issue with the ugly fallback font again. Using Chrome 117 in an incognito window. image. Maybe you can draw the text using paths and then have it fall back to text or something. Honestly I don't know anything about SVGs so I could be making words up

Bluewave2 commented 12 months ago

So I'm seeing the issue with the ugly fallback font again. Using Chrome 117 in an incognito window. image. Maybe you can draw the text using paths and then have it fall back to text or something. Honestly I don't know anything about SVGs so I could be making words up

Yeah that would fix it, I'll do it when I have time