robur/builder-web
4
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Redesign of Builder web #18

Open
PixieDust wants to merge 16 commits from builder_web_design into main
pull from: builder_web_design
merge into: robur:main
Conversation 2 Commits 16 Files changed 3 +1196 -277
PixieDust commented 2025-02-10 14:25:41 +00:00
Owner
Copy link

This PR redesigns builder web with a new look.
We are now using tailwindcss for the stylesheet (the same css as mollymawk).

Below are some screen grabs of some of the pages:

  • Light Mode
    Screenshot from 2025-02-10 19-28-54

  • Dark Mode
    Screenshot from 2025-02-10 19-28-59

This PR redesigns builder web with a new look. We are now using tailwindcss for the stylesheet (the same css as mollymawk). - [x] Website redesign - [x] Use Robur Logo from https://git.robur.coop/robur/logo/src/branch/main/robur_logo.png - [x] Make dark mode switchable - [x] Read browser mode (dark or light) and assume this on first launch Below are some screen grabs of some of the pages: * Light Mode ![Screenshot from 2025-02-10 19-28-54](/attachments/f65d6805-24fe-4cbf-8c56-da7622dfacc5) * Dark Mode ![Screenshot from 2025-02-10 19-28-59](/attachments/009aa49e-1bd8-47a7-a770-97fd1c623694)
Screenshot from 2025-02-10 19-28-54.png
356 KiB
Screenshot from 2025-02-10 19-28-59.png
355 KiB
PixieDust added 7 commits 2025-02-10 14:25:42 +00:00
PixieDust requested review from hannes 2025-02-10 14:26:09 +00:00
PixieDust requested review from reynir 2025-02-10 14:26:11 +00:00
PixieDust requested review from dinosaure 2025-02-10 14:26:13 +00:00
PixieDust added 1 commit 2025-02-10 18:07:19 +00:00
PixieDust added 1 commit 2025-02-10 18:29:26 +00:00
reynir reviewed 2025-02-11 11:33:29 +00:00
reynir left a comment
Owner
Copy link

Thanks! I quite like a lot of the elements in the redesign and the new color scheme. Let's see if we can keep the good ideas from this PR.

The CSS goes from 720 bytes to 45 kb :/ the front page in production is right now at 28.42 kB (uncompressed), so this would mean the front page would more than double in size. And when I test locally with a populated builder-web instance the front page goes from 17.83 kB to 76.88 kB. I don't mind as such that the css increases in size (if so we should consider having it at its own endpoint with appropriate caching headers). But there is a lot in the css that we don't seem to use at all. Then there is the almost 9000 characters wide line at the end with minized style?! no chance I will maintain that.

I notice there are a lot more class names everywhere. I don't understand why, and they don't have much meaning to me. Can we avoid having so many?

I also notice there is a lot of new <div>s. I don't understand if they are necessary. Can they be avoided?

Finally, the css doesn't work for my devices. Things overlap a lot, even on my 1680x1050 desktop monitor.

Thanks! I quite like a lot of the elements in the redesign and the new color scheme. Let's see if we can keep the good ideas from this PR. The CSS goes from 720 bytes to 45 kb :/ the front page in production is right now at 28.42 kB (uncompressed), so this would mean the front page would more than double in size. And when I test locally with a populated builder-web instance the front page goes from 17.83 kB to 76.88 kB. I don't mind as such that the css increases in size (if so we should consider having it at its own endpoint with appropriate caching headers). But there is a lot in the css that we don't seem to use at all. Then there is the almost 9000 characters wide line at the end with minized style?! no chance I will maintain that. I notice there are a lot more class names everywhere. I don't understand why, and they don't have much meaning to me. Can we avoid having so many? I also notice there is a lot of new `<div>`s. I don't understand if they are necessary. Can they be avoided? Finally, the css doesn't work for my devices. Things overlap a lot, even on my 1680x1050 desktop monitor.
1000005200.png
257 KiB
Screenshot 2025-02-11 at 11-53-49 Job caldav 2025-01-16 03 58 11Z.png
429 KiB
Screenshot 2025-02-11 at 11-31-57 Reproducible OPAM builds.png
252 KiB
1000005200.png Screenshot 2025-02-11 at 11-53-49 Job caldav 2025-01-16 03 58 11Z.png Screenshot 2025-02-11 at 11-31-57 Reproducible OPAM builds.png
lib/views.ml Outdated
@ -285,4 +281,1 @@
let make_header =
[
H.Unsafe.data (Utils.md_to_html data);
reynir commented 2025-02-11 10:51:31 +00:00
Owner
Copy link

Why not keep the markdown?

Why not keep the markdown?
PixieDust commented 2025-02-13 23:35:36 +00:00
Author
Owner
Copy link

This is so that I can style the text in different ways. I use a grid to do this

This is so that I can style the text in different ways. I use a grid to do this
lib/views.ml Outdated
@ -141,3 +95,3 @@
in
let body =
let style_grid_container = H.a_style "\
let _style_grid_container = H.a_style "\
reynir commented 2025-02-11 10:23:30 +00:00
Owner
Copy link

if you're not going to use these why keep them?

if you're not going to use these why keep them?
PixieDust commented 2025-02-11 11:54:20 +00:00
Author
Owner
Copy link

Yes I'll do some code cleaning to remove the things we aren't using

Yes I'll do some code cleaning to remove the things we aren't using
PixieDust marked this conversation as resolved
lib/views.ml Outdated
@ -163,0 +123,4 @@
label ~a:[a_class ["block text-lg font-semibold mb-2 text-right"]] [
txt "Search artifact by SHA256";
];
div ~a:[a_class ["w-full flex space-x-2 justify-end justify-items-center items-center"]] [
reynir commented 2025-02-11 10:28:18 +00:00
Owner
Copy link

Do we need this many css classes? I don't even know what they mean.

Do we need this many css classes? I don't even know what they mean.
lib/views.ml Outdated
@ -163,0 +162,4 @@
function updateTheme() {
const isDark = html.classList.contains('dark');
themeToggle.innerText = isDark ? '☀️' : '🌑';
reynir commented 2025-02-11 10:46:16 +00:00
Owner
Copy link

I think this can also be achieved with css.

I think this can also be achieved with css.
lib/views.ml Outdated
@ -533,3 +604,2 @@
[
H.dt [
H.a ~a:H.[a_href @@ Link.Job_build_artifact.make
H.(dt [
reynir commented 2025-02-11 11:11:18 +00:00
Owner
Copy link

I have intentionally not used local opens as there are just too many things in Tyxml.Html that can shadow things inadverdently.

I have intentionally not used local opens as there are just too many things in Tyxml.Html that can shadow things inadverdently.
👍 1
PixieDust marked this conversation as resolved
PixieDust commented 2025-02-11 11:56:34 +00:00
Author
Owner
Copy link

Thanks! I quite like a lot of the elements in the redesign and the new color scheme. Let's see if we can keep the good ideas from this PR.

The CSS goes from 720 bytes to 45 kb :/ the front page in production is right now at 28.42 kB (uncompressed), so this would mean the front page would more than double in size. And when I test locally with a populated builder-web instance the front page goes from 17.83 kB to 76.88 kB. I don't mind as such that the css increases in size (if so we should consider having it at its own endpoint with appropriate caching headers). But there is a lot in the css that we don't seem to use at all. Then there is the almost 9000 characters wide line at the end with minized style?! no chance I will maintain that.

I notice there are a lot more class names everywhere. I don't understand why, and they don't have much meaning to me. Can we avoid having so many?

I also notice there is a lot of new <div>s. I don't understand if they are necessary. Can they be avoided?

Finally, the css doesn't work for my devices. Things overlap a lot, even on my 1680x1050 desktop monitor.

Thank you. The overlap is caused by the logo having a fixed position. I'll correct this to be fluid with the other content of the page.

For the CSS, I'll try to strip out everything that is not use so we can get the size down by a huge percentage.

> Thanks! I quite like a lot of the elements in the redesign and the new color scheme. Let's see if we can keep the good ideas from this PR. > > The CSS goes from 720 bytes to 45 kb :/ the front page in production is right now at 28.42 kB (uncompressed), so this would mean the front page would more than double in size. And when I test locally with a populated builder-web instance the front page goes from 17.83 kB to 76.88 kB. I don't mind as such that the css increases in size (if so we should consider having it at its own endpoint with appropriate caching headers). But there is a lot in the css that we don't seem to use at all. Then there is the almost 9000 characters wide line at the end with minized style?! no chance I will maintain that. > > I notice there are a lot more class names everywhere. I don't understand why, and they don't have much meaning to me. Can we avoid having so many? > > I also notice there is a lot of new `<div>`s. I don't understand if they are necessary. Can they be avoided? > > Finally, the css doesn't work for my devices. Things overlap a lot, even on my 1680x1050 desktop monitor. Thank you. The overlap is caused by the logo having a fixed position. I'll correct this to be fluid with the other content of the page. For the CSS, I'll try to strip out everything that is not use so we can get the size down by a huge percentage.
reynir commented 2025-02-12 09:18:26 +00:00
Owner
Copy link

The missing READMEs are due to us not installing the README in the package definitions. This is a mistake, but unrelated to this PR. My suspicion is we don't include this step in opam-repository packages.

The missing READMEs are due to us not installing the README in the package definitions. This is a mistake, but unrelated to this PR. My suspicion is we don't include this step in opam-repository packages.
PixieDust added 2 commits 2025-02-12 21:46:12 +00:00
PixieDust added 1 commit 2025-02-12 22:29:49 +00:00
PixieDust added 2 commits 2025-02-13 23:17:28 +00:00
PixieDust added 1 commit 2025-02-13 23:34:32 +00:00
PixieDust added 1 commit 2025-02-15 19:09:51 +00:00
This pull request can be merged automatically.
You are not authorized to merge this pull request.
View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u origin builder_web_design:builder_web_design
git checkout builder_web_design

Merge

Merge the changes and update on Forgejo.

Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.

git checkout main
git merge --no-ff builder_web_design
git checkout builder_web_design
git rebase main
git checkout main
git merge --ff-only builder_web_design
git checkout builder_web_design
git rebase main
git checkout main
git merge --no-ff builder_web_design
git checkout main
git merge --squash builder_web_design
git checkout main
git merge --ff-only builder_web_design
git checkout main
git merge builder_web_design
git push origin main
Sign in to join this conversation.
Reviewers
No reviewers
hannes
reynir
dinosaure
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: robur/builder-web#18
No description provided.
Delete branch "builder_web_design"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?