Update bootstrap 4.6.0 to 5.3.0 #340

dmsimard · 2021-11-20T21:52:05Z

No description provided.

dmsimard · 2021-11-20T21:54:03Z

This is just updating the CSS files and looking at the result. There are a few broken bits here and there like the color of the status, the theme switcher, etc.

I've recorded a short gif:

dmsimard · 2022-03-19T00:55:54Z

Moving this out of 1.5.8, it should be bundled with the update of django: #360

dmsimard · 2022-09-06T17:35:59Z

This is a bit of a pain. I thought it would be fine to land in 1.6.0 but it requires more work than expected so I am leaving it out of scope for now, we can do it in a later dot release to avoid delaying 1.6.0 further.

dmsimard · 2022-10-08T18:53:41Z

Searched a bit and there's some upgrade resources here:

dmsimard · 2023-06-25T01:10:52Z

Bootstrap is up to 5.3 now: https://blog.getbootstrap.com/2023/05/30/bootstrap-5-3-0/

I may take this opportunity to revisit and clean up the templates but this is on my radar.

dmsimard · 2023-06-25T01:33:17Z

Some notes about upgrading bootstrap from 4 to 5:

There's a built-in dark theme now: https://blog.getbootstrap.com/2023/05/30/bootstrap-5-3-0/#dark-mode
jQuery is no longer necessary: https://getbootstrap.com/docs/5.3/getting-started/javascript/#optionally-using-jquery

dmsimard · 2023-06-26T04:12:01Z

At first glance there is a lot of work to do. I expected to need to refresh every page and template.

I have made progress with the navbar and theme switcher:

The good news is that we only need the base bootstrap css now, there is no longer a need for the individual bootswatch templates.

The search accordions no longer work. I will look at that next.

dmsimard · 2023-07-01T05:17:10Z

I spent some time on the accordion for the playbook search. Lots of cleanup and I put it into it's own partial.
It took a while but it should be simple enough to re-use the same pattern for the hosts and tasks search accordions.

Here's a quick video showing the comparison between the current implementation and the work in progress:

Peek.2023-07-01.01-12.mp4

dmsimard · 2023-07-01T19:40:03Z

Spent (probably too much) time theming the accordion, what it looks like in light and dark:

Peek.2023-07-01.15-37.mp4

Peek.2023-07-01.15-38.mp4

dmsimard · 2023-07-02T02:17:48Z

Here's a first commit that demonstrates a first chunk of the progress.

I have done some more improvements on the playbooks page and I still need to fix the CLI options modal.

It looks like this:

softwarefactory-project-zuul · 2023-07-02T02:33:25Z

Build failed.
https://ansible.softwarefactory-project.io/zuul/buildset/906dd402f16146a5b0b4d8e5cffb7a1b

✔️ ara-tox-py3 SUCCESS in 3m 18s
✔️ ara-tox-linters SUCCESS in 3m 24s
❌ ara-basic-ansible-core-devel FAILURE in 5m 30s (non-voting)
❌ ara-basic-ansible-8 FAILURE in 5m 37s
❌ ara-basic-ansible-core-2.15 FAILURE in 5m 23s
❌ ara-basic-ansible-core-2.14 FAILURE in 5m 26s
❌ ara-basic-ansible-2.9 FAILURE in 5m 40s
✔️ ara-container-images SUCCESS in 12m 44s

dmsimard · 2023-07-02T07:02:22Z

I've fixed the about modal as well as the CLI configuration modal and I gave it a bit of love so they're slightly less barebones. We can improve it further later, it is mostly out of scope for now.

More comparison gifs!

About

CLI (light)

CLI (dark)

dmsimard · 2023-07-02T20:03:47Z

A drive-by improvement to the report and CLI buttons, they are larger and easier to click:

dmsimard · 2023-07-02T21:49:41Z

I've fixed and cleaned up the hosts page:

dmsimard · 2023-07-03T00:22:58Z

I've fixed and cleaned up the Tasks page:

softwarefactory-project-zuul · 2023-07-03T00:52:12Z

Build failed.
https://ansible.softwarefactory-project.io/zuul/buildset/3350e556abca4b23b7b4bbc8267ae70f

✔️ ara-tox-py3 SUCCESS in 3m 47s
✔️ ara-tox-linters SUCCESS in 3m 44s
❌ ara-basic-ansible-core-devel FAILURE in 5m 34s (non-voting)
❌ ara-basic-ansible-8 FAILURE in 5m 46s
❌ ara-basic-ansible-core-2.15 FAILURE in 6m 27s
❌ ara-basic-ansible-core-2.14 FAILURE in 8m 21s
❌ ara-basic-ansible-2.9 FAILURE in 5m 48s
✔️ ara-container-images SUCCESS in 13m 19s

dmsimard · 2023-07-04T02:22:12Z

I've fixed and cleaned up the playbook report page, some comparison gifs:

Aside from the other little things to fix (in the commit TODOs), there remains more or less 4 pages to refresh:

host facts / results
task result detail
file view
record view

hille721 · 2023-07-06T15:17:56Z

the GIFs looking really promising. Thanks for this hard work!
Let me know when you are done from your side then I can check it in more detail and can give a review.

dmsimard · 2023-07-06T17:40:08Z

the GIFs looking really promising. Thanks for this hard work!
Let me know when you are done from your side then I can check it in more detail and can give a review.

Much appreciated, thank you @hille721 !

I am expecting to be able to make some more progress this week.
With a bit of luck, I could have something that is ready for a first real review sometime next week.

In any case, once I feel it is ready, I will put it up on something like dev.demo.recordsansible.org so it is easy to compare side-by-side with the live demo running the same data.

dmsimard · 2023-07-08T18:36:00Z

I've fixed and updated the task result detail page:

I also fixed the pygments css theming for viewing files but I haven't yet figured out the right way to re-write the line highlighting that was done with jquery (that we no longer have):

ara/ara/ui/templates/file.html

Lines 22 to 34 in 578ef81

 <script> 

 $(document).ready(function () { 

 // Highlight the anchor line in file views 

 var hash = $(location).attr('hash'); 

 $(hash).closest('span').addClass('hll'); 

 // Refresh the highlighted line when clicking on a new line in file views 

 $('a').click(function () { 

 $("span.hll").removeClass('hll'); 

 var hash = $(this).attr('href'); 

 $(hash).closest('span').addClass('hll'); 

 }); 

 }); 

 </script>

dmsimard · 2023-07-08T23:10:18Z

I think I've got something working for the file line highlighting. I dislike javascript and better ideas are welcomed but this appears to do the job without jquery:

<!-- Line highlighting -->
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    if (window.location.hash.length) {
      // Recover the line number in the URL anchor and highlight it
      var anchor = window.location.hash;
      var span = document.querySelector(anchor);
      span.classList.add("hll");
    }

    document.addEventListener("click", function(e) {
      // When a link is clicked
      if(e.target.tagName == "A") {
        // Remove the previously highlighted line if there is one
        if (window.location.hash.length) {
          var anchor = window.location.hash;
          var span = document.querySelector(anchor);
          span.classList.remove("hll")
        }

        // Highlight the new one
        var anchor = e.target.getAttribute("href");
        var span = document.querySelector(anchor);
        span.classList.add("hll");
      }
    });
  });
</script>

New:

Old:

softwarefactory-project-zuul · 2023-07-08T23:32:43Z

Build succeeded.
https://ansible.softwarefactory-project.io/zuul/buildset/9ac8434454ab4835b6929b43d531fc2a

✔️ ara-tox-py3 SUCCESS in 3m 29s
✔️ ara-tox-linters SUCCESS in 3m 06s
✔️ ara-basic-ansible-core-devel SUCCESS in 6m 17s (non-voting)
✔️ ara-basic-ansible-8 SUCCESS in 5m 50s
✔️ ara-basic-ansible-core-2.15 SUCCESS in 6m 15s
✔️ ara-basic-ansible-core-2.14 SUCCESS in 6m 13s
✔️ ara-basic-ansible-2.9 SUCCESS in 6m 17s
✔️ ara-container-images SUCCESS in 10m 18s

softwarefactory-project-zuul · 2023-07-27T16:27:18Z

Build succeeded.
https://ansible.softwarefactory-project.io/zuul/buildset/8aeefd7b4f36408ab4166a580cba4efa

✔️ ara-tox-py3 SUCCESS in 3m 18s
✔️ ara-tox-linters SUCCESS in 3m 50s
✔️ ara-basic-ansible-core-devel SUCCESS in 5m 56s (non-voting)
✔️ ara-basic-ansible-8 SUCCESS in 5m 52s
✔️ ara-basic-ansible-core-2.15 SUCCESS in 5m 37s
✔️ ara-basic-ansible-core-2.14 SUCCESS in 6m 03s
✔️ ara-basic-ansible-2.9 SUCCESS in 5m 53s
✔️ ara-container-images SUCCESS in 10m 55s

dmsimard · 2023-07-27T16:32:01Z

@hille721 I believe to have fixed the two mobile responsiveness oddities you've picked up on, thanks !

dmsimard · 2023-07-27T16:33:00Z

I've set up a temporary demo which is set up from this branch: https://dev.demo.recordsansible.org

It is using the exact same data as https://demo.recordsansible.org in order to make it easy to compare between the two.

dmsimard · 2023-07-27T16:47:26Z

There's a mobile responsiveness issue when viewing files:

dmsimard · 2023-07-27T18:36:21Z

By the way: I don't know where this is going yet but I am attempting trying to clean up and simplify bits of django templating. It's been pretty experimental and I'm not really happy with how it's looking right now so there is more work to do.

For example, there's new partial templates (meant to be included) under the search and tables directories.

It's out of scope of the bootstrap update and the UI refresh but they both touch pretty much every template so it's an opportunity to work through that at the same time.

The templating has grown organically over the years. We didn't necessarily make re-usable/standardized components that could be logically re-grouped and easily included in larger blocks of templating to simplify things where it makes sense.

With the power of experience and hindsight, we can do better :p

ianw · 2023-07-28T00:14:09Z

One thing I noticed is that I run a 1200 x 1920 right-portrait monitor and the content is too wide, but also I don't have a horizontal scroll bar either.

dmsimard · 2023-07-28T01:01:39Z

Hi @ianw, thanks for looking !

One thing I noticed is that I run a 1200 x 1920 right-portrait monitor and the content is too wide, but also I don't have a horizontal scroll bar either.

I've noticed this behavior in the previous version of bootstrap as well but I haven't researched it.

Just to confirm, can you still scroll horizontally even though there's no horizontal scroll bar ?
I can do it locally by resizing my window small enough that the table no longer fits, clicking anywhere on the table and then using horizontal arrows on my keyboard or my mouse's horizontal scroll wheel.

It looks like this:

I don't know what's the right fix but it's not the best UX for sure.

dmsimard · 2023-07-28T01:11:16Z

@ianw btw I also tried to make sure that the static generation still works properly, here's one from this PR from Zuul: https://b860d1e0b452f4998247-bef371a08164594183d849ff8c4e5a1f.ssl.cf1.rackcdn.com/340/7e2734008a4327dae7b3131c4a45f3a147f91c24/check/ara-basic-ansible-core-2.15/3f70c2e/server/static/index.html

Let me know if anything stands out to you :)

ianw · 2023-07-28T02:56:47Z

Just to confirm, can you still scroll horizontally even though there's no horizontal scroll bar ? I can do it locally by resizing my window small enough that the table no longer fits, clicking anywhere on the table and then using horizontal arrows on my keyboard or my mouse's horizontal scroll wheel.

Yes, if I click to select the page, I can use left/right to move but the page still doesn't show any sort of horizontal scroll-bar to indicate the length.

ianw · 2023-07-28T03:03:44Z

@ianw btw I also tried to make sure that the static generation still works properly, here's one from this PR from Zuul: https://b860d1e0b452f4998247-bef371a08164594183d849ff8c4e5a1f.ssl.cf1.rackcdn.com/340/7e2734008a4327dae7b3131c4a45f3a147f91c24/check/ara-basic-ansible-core-2.15/3f70c2e/server/static/index.html

Let me know if anything stands out to you :)

Thanks for considering this

I would say there seems to be a lot of whitespace, and the columns perhaps showing too much of what I don't want to know, causing hiding of what I do. Perhaps the labels could be folded into a row, and the task name could be on a row so you can see the whole thing too. I definitely like the full dates (rather than "X hours ago") because often you need to line up timestamps with system logs, etc -- but the format for that and the duration may be a bit verbose and could drop zeros maybe?

dmsimard · 2023-07-29T17:44:53Z

Yes, if I click to select the page, I can use left/right to move but the page still doesn't show any sort of horizontal scroll-bar to indicate the length.

@ianw I've created an issue to capture this: #498

I'm leaving it out of scope of this particular PR, especially since the previous version of bootstrap has the same behavior.
It would be great to improve it sometime.

softwarefactory-project-zuul · 2023-07-29T17:51:24Z

Build succeeded.
https://ansible.softwarefactory-project.io/zuul/buildset/6bf643c22c5148628eafd072f3e3c31f

✔️ ara-tox-py3 SUCCESS in 3m 13s
✔️ ara-tox-linters SUCCESS in 3m 11s
✔️ ara-basic-ansible-core-devel SUCCESS in 6m 37s (non-voting)
✔️ ara-basic-ansible-8 SUCCESS in 5m 37s
✔️ ara-basic-ansible-core-2.15 SUCCESS in 5m 31s
✔️ ara-basic-ansible-core-2.14 SUCCESS in 7m 08s
✔️ ara-basic-ansible-2.9 SUCCESS in 5m 48s
✔️ ara-container-images SUCCESS in 12m 09s

dmsimard · 2023-07-29T17:55:06Z

I would say there seems to be a lot of whitespace, and the columns perhaps showing too much of what I don't want to know, causing hiding of what I do. Perhaps the labels could be folded into a row, and the task name could be on a row so you can see the whole thing too. I definitely like the full dates (rather than "X hours ago") because often you need to line up timestamps with system logs, etc -- but the format for that and the duration may be a bit verbose and could drop zeros maybe?

I agree that labels are problematic when there's a couple of them or they are too long. I've known about this but don't believe it was recorded in an issue so I've gone ahead and created one for it: #499

For dates it's tricky. The verbose format relieves the confusion from american date formatting versus the rest of the world and I think that's a good thing -- in other words, is this december 7th or july 12th: 12/7/2023 ? Perhaps the timezone could be put in a tooltip which would free up 6 characters worth of width.

For durations we could do something as well. I'll see if I can think of something.

Thanks for the feedback @ianw :)

dmsimard · 2023-07-29T18:08:13Z

My last commit to the PR fixes the tags tooltip and includes a minor fix for the ara_record page.

With this, I think I am done with more or less a first full pass throughout the entire UI.
Need to review some more and then work out how to clean up the django templating like I intended to do.

softwarefactory-project-zuul · 2023-07-29T21:28:42Z

Build failed.
https://ansible.softwarefactory-project.io/zuul/buildset/bb2dd974d4cb4147ba60769a69e8cc81

✔️ ara-tox-py3 SUCCESS in 3m 15s
❌ ara-tox-linters FAILURE in 3m 08s
✔️ ara-basic-ansible-core-devel SUCCESS in 5m 21s (non-voting)
✔️ ara-basic-ansible-8 SUCCESS in 6m 12s
✔️ ara-basic-ansible-core-2.15 SUCCESS in 5m 25s
✔️ ara-basic-ansible-core-2.14 SUCCESS in 7m 41s
✔️ ara-basic-ansible-2.9 SUCCESS in 5m 30s
✔️ ara-container-images SUCCESS in 12m 33s

dmsimard · 2023-07-29T21:32:45Z

I fixed the file responsiveness issue I commented on 2 days ago: #340 (comment)

To be clear, this isn't a bootstrap regression. It was also an issue before but hey, it's fixed now:

ara-file.mp4

softwarefactory-project-zuul · 2023-07-29T21:53:07Z

Build succeeded.
https://ansible.softwarefactory-project.io/zuul/buildset/d4be146994e74baaaf69915ca23350db

✔️ ara-tox-py3 SUCCESS in 3m 26s
✔️ ara-tox-linters SUCCESS in 3m 16s
✔️ ara-basic-ansible-core-devel SUCCESS in 5m 28s (non-voting)
✔️ ara-basic-ansible-8 SUCCESS in 6m 12s
✔️ ara-basic-ansible-core-2.15 SUCCESS in 5m 45s
✔️ ara-basic-ansible-core-2.14 SUCCESS in 5m 51s
✔️ ara-basic-ansible-2.9 SUCCESS in 6m 01s
✔️ ara-container-images SUCCESS in 12m 01s

dmsimard · 2023-07-31T01:01:35Z

For posterity I've recorded a small video of the mobile UI:

ara-mobile-resized-v2.mp4

dmsimard · 2023-08-27T19:45:46Z

I ran djlint which is a linter for django template things, maybe we can add it to the linter CI job but in the meantime:

> djlint ara/ui/templates/ --profile=django

Linting 40/40 files ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 00:00    


ara/ui/templates/base.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
H031 4:0 Consider adding meta keywords. <html lang="en" data
T003 10:30 Endblock should have name. Ex: {% endblock body %}. {% endblock %}
H006 33:6 Img tag should have height and width attributes. <img src="{% static_
T003 94:4 Endblock should have name. Ex: {% endblock body %}. {% endblock %}

ara/ui/templates/distributed_index.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
H014 2:9 Found extra blank lines. trip_db %}
T003 5:45 Endblock should have name. Ex: {% endblock body %}. {% endblock %}
H021 22:16 Inline styles should be avoided. <tr style=
T003 41:0 Endblock should have name. Ex: {% endblock body %}. {% endblock %}

ara/ui/templates/file.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
T003 5:73 Endblock should have name. Ex: {% endblock body %}. {% endblock %}
H025 11:2 Tag seems to be an orphan. <div>
T003 51:0 Endblock should have name. Ex: {% endblock body %}. {% endblock %}

ara/ui/templates/host.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
T003 4:152 Endblock should have name. Ex: {% endblock body %}. {% endblock %}
T003 23:0 Endblock should have name. Ex: {% endblock body %}. {% endblock %}

ara/ui/templates/host_index.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
T003 2:113 Endblock should have name. Ex: {% endblock body %}. {% endblock %}
T003 23:0 Endblock should have name. Ex: {% endblock body %}. {% endblock %}

ara/ui/templates/index.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
T003 2:117 Endblock should have name. Ex: {% endblock body %}. {% endblock %}
T003 23:0 Endblock should have name. Ex: {% endblock body %}. {% endblock %}

ara/ui/templates/partials/pagination.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
H023 14:114 Do not use entity references. &laquo;
H023 18:96 Do not use entity references. &laquo;
H025 24:4 Tag seems to be an orphan. <li class="page-item
H023 27:108 Do not use entity references. &raquo;
H023 31:94 Do not use entity references. &raquo;

ara/ui/templates/partials/playbook_card.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
H021 12:14 Inline styles should be avoided. <h3 style=
H021 21:2 Inline styles should be avoided. <div class="card-bod
H021 72:18 Inline styles should be avoided. <div class="modal-bo
T001 77:28 Variables should be wrapped in a whitespace. {{ playbook.started 
H021 115:8 Inline styles should be avoided. <span class="btn btn

ara/ui/templates/partials/playbook_files.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
H021 15:4 Inline styles should be avoided. <div id="collapse_fi

ara/ui/templates/partials/playbook_hosts.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
H021 15:4 Inline styles should be avoided. <div id="collapse_ho

ara/ui/templates/partials/playbook_records.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
H021 15:4 Inline styles should be avoided. <div id="collapse_re

ara/ui/templates/partials/playbook_results.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
H021 27:16 Inline styles should be avoided. <tr style=
T002 97:250 Double quotes should be used in tags. {% include 'partials
H025 119:4 Tag seems to be an orphan. </form>

ara/ui/templates/partials/result_status_icon.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
H025 2:2 Tag seems to be an orphan. <a role="button" cla
H025 4:2 Tag seems to be an orphan. <a role="button" cla
H025 6:2 Tag seems to be an orphan. <a role="button" cla
H025 8:2 Tag seems to be an orphan. <a role="button" cla
H025 10:2 Tag seems to be an orphan. <a role="button" cla

ara/ui/templates/partials/search/hosts.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
T002 81:18 Double quotes should be used in tags. {% include "partials
T002 87:18 Double quotes should be used in tags. {% include "partials
T002 93:18 Double quotes should be used in tags. {% include "partials
T002 99:18 Double quotes should be used in tags. {% include "partials
T002 105:18 Double quotes should be used in tags. {% include "partials

ara/ui/templates/partials/tables/host_facts.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
H021 15:4 Inline styles should be avoided. <div id="collapse_ho
H021 22:14 Inline styles should be avoided. <th style=
H021 23:14 Inline styles should be avoided. <th style=
H021 33:16 Inline styles should be avoided. <td data-label="Valu

ara/ui/templates/partials/tables/host_results.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
H021 21:14 Inline styles should be avoided. <td class="bg-transp
H021 62:16 Inline styles should be avoided. <tr style=
T002 129:250 Double quotes should be used in tags. {% include 'partials

ara/ui/templates/partials/tables/hosts.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
H021 9:6 Inline styles should be avoided. <tr style=

ara/ui/templates/partials/tables/playbooks.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
H021 9:6 Inline styles should be avoided. <tr style=
H021 60:16 Inline styles should be avoided. <div class="modal-bo
T001 65:26 Variables should be wrapped in a whitespace. {{ playbook.started 

ara/ui/templates/partials/tables/tasks.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
H021 9:6 Inline styles should be avoided. <tr style=
T002 88:233 Double quotes should be used in tags. {% include 'partials

ara/ui/templates/playbook.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
T003 5:230 Endblock should have name. Ex: {% endblock body %}. {% endblock %}
T003 33:0 Endblock should have name. Ex: {% endblock body %}. {% endblock %}

ara/ui/templates/record.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
T003 4:88 Endblock should have name. Ex: {% endblock body %}. {% endblock %}
H025 10:2 Tag seems to be an orphan. <div>
T003 19:0 Endblock should have name. Ex: {% endblock body %}. {% endblock %}

ara/ui/templates/result.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
T003 7:145 Endblock should have name. Ex: {% endblock body %}. {% endblock %}
H021 94:10 Inline styles should be avoided. <table class="table 
H021 97:14 Inline styles should be avoided. <th style=
H021 98:14 Inline styles should be avoided. <th style=
T003 125:0 Endblock should have name. Ex: {% endblock body %}. {% endblock %}

ara/ui/templates/task_index.html
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
T003 2:113 Endblock should have name. Ex: {% endblock body %}. {% endblock %}
T003 28:0 Endblock should have name. Ex: {% endblock body %}. {% endblock %}

Linted 40 files, found 68 errors.

dmsimard · 2023-08-27T21:09:05Z

I've finished a last round of review, cleanup and fixing. I think this is good to go but I need to fix the commit history a bit.

Forposterity, all the work split into milestones were pushed to another branch: https://github.com/dmsimard/ara/tree/update-static-assets-archive

softwarefactory-project-zuul · 2023-08-27T21:19:10Z

Build succeeded.
https://ansible.softwarefactory-project.io/zuul/buildset/065503e2e9b74a3cb16ac59214df05ff

✔️ ara-tox-py3 SUCCESS in 3m 32s
✔️ ara-tox-linters SUCCESS in 3m 29s
✔️ ara-basic-ansible-core-devel SUCCESS in 6m 06s (non-voting)
✔️ ara-basic-ansible-8 SUCCESS in 6m 55s
✔️ ara-basic-ansible-core-2.15 SUCCESS in 5m 54s
✔️ ara-basic-ansible-core-2.14 SUCCESS in 6m 47s
✔️ ara-basic-ansible-2.9 SUCCESS in 6m 04s
✔️ ara-container-images SUCCESS in 10m 16s

This is a squashed commit that encompasses all the work that has gone into updating to bootstrap 5 and django templating cleanup. About boostrap and CSS: - Update bootstrap CSS from 4.6.0 to 5.3.0 and fix broken layout and components as a result of the update - Removed separate light/dark themes via bootstrap-darkly and bootstrap-flatly: bootstrap 5.3 features a new built-in dark theme - Re-worked the dark/light theme selection to match the new bootstrap built-in dark theme including pygments highlighting for pretty-printed output - Removed jquery, it is no longer required with bootstrap - Re-worked implementation of file line highlighting since it relied on jquery - Fixed tooltip implementation (i.e, for task tags) since the implementation in bootstrap had changed About site-wide minor cleanups and improvements: - Font size made generally larger and more consistent - Improved the about and CLI argument modals - Improved display for the report and CLI argument buttons - Improved the playbook report header card - Adjusted search accordions to match new bootstrap theme - Improved size and consistency of many card headers - Improvements to responsiveness of layout at smaller (e.g, mobile) resolutions About django templating: - Large chunks of templating were moved out to partials/tables and partials/search in order to improve readability. - Round of template cleanups and fixes as reported by djlint

softwarefactory-project-zuul · 2023-08-27T21:43:21Z

Build succeeded.
https://ansible.softwarefactory-project.io/zuul/buildset/89fff7e0ac26440f9c1928a7c3490c89

✔️ ara-tox-py3 SUCCESS in 3m 42s
✔️ ara-tox-linters SUCCESS in 3m 51s
✔️ ara-basic-ansible-core-devel SUCCESS in 6m 18s (non-voting)
✔️ ara-basic-ansible-8 SUCCESS in 5m 51s
✔️ ara-basic-ansible-core-2.15 SUCCESS in 6m 01s
✔️ ara-basic-ansible-core-2.14 SUCCESS in 6m 01s
✔️ ara-basic-ansible-2.9 SUCCESS in 6m 07s
✔️ ara-container-images SUCCESS in 11m 13s

dmsimard · 2023-08-27T21:47:40Z

This is good enough and we can iterate on this if there are issues.

This PR has been in progress since Nov 20, 2021 and it's finally merging !

dmsimard mentioned this pull request Nov 20, 2021

ui: upgrade from bootstrap 4 to bootstrap 5 #339

Open

dmsimard marked this pull request as draft November 20, 2021 21:55

dmsimard added this to the 1.5.8 milestone Jan 3, 2022

dmsimard removed this from the 1.5.8 milestone Mar 19, 2022

dmsimard changed the title ~~WIP: Update bootstrap 4.6.0 to 5.1.3~~ WIP: Update bootstrap 4.6.0 to ~~5.1.3~~ 5.3.0 Jun 25, 2023

dmsimard changed the title ~~WIP: Update bootstrap 4.6.0 to ~~5.1.3~~ 5.3.0~~ WIP: Update bootstrap 4.6.0 to 5.3.0 Jun 25, 2023

dmsimard force-pushed the update-static-assets branch from 4a3b703 to 5dd57f4 Compare July 2, 2023 02:15

dmsimard force-pushed the update-static-assets branch from 5dd57f4 to 3ab8bbd Compare July 2, 2023 02:19

dmsimard force-pushed the update-static-assets branch from 6663747 to 265ac04 Compare July 29, 2023 21:31

dmsimard force-pushed the update-static-assets branch from 265ac04 to abc56a7 Compare July 29, 2023 21:39

dmsimard force-pushed the update-static-assets branch from b9e8397 to 52ecd45 Compare August 27, 2023 21:30

dmsimard marked this pull request as ready for review August 27, 2023 21:30

dmsimard changed the title ~~WIP: Update bootstrap 4.6.0 to 5.3.0~~ Update bootstrap 4.6.0 to 5.3.0 Aug 27, 2023

dmsimard merged commit 30ff2ab into ansible-community:master Aug 27, 2023
1 check passed

Update bootstrap 4.6.0 to 5.3.0 #340

Update bootstrap 4.6.0 to 5.3.0 #340

Conversation

dmsimard commented Nov 20, 2021

dmsimard commented Nov 20, 2021

dmsimard commented Mar 19, 2022

dmsimard commented Sep 6, 2022

dmsimard commented Oct 8, 2022 • edited

dmsimard commented Jun 25, 2023

dmsimard commented Jun 25, 2023

dmsimard commented Jun 26, 2023

dmsimard commented Jul 1, 2023

dmsimard commented Jul 1, 2023

dmsimard commented Jul 2, 2023

softwarefactory-project-zuul bot commented Jul 2, 2023

dmsimard commented Jul 2, 2023

About

CLI (light)

CLI (dark)

dmsimard commented Jul 2, 2023

dmsimard commented Jul 2, 2023

dmsimard commented Jul 3, 2023

softwarefactory-project-zuul bot commented Jul 3, 2023

dmsimard commented Jul 4, 2023

hille721 commented Jul 6, 2023

dmsimard commented Jul 6, 2023

dmsimard commented Jul 8, 2023

dmsimard commented Jul 8, 2023

softwarefactory-project-zuul bot commented Jul 8, 2023

softwarefactory-project-zuul bot commented Jul 27, 2023

dmsimard commented Jul 27, 2023 • edited

dmsimard commented Jul 27, 2023

dmsimard commented Jul 27, 2023

dmsimard commented Jul 27, 2023

ianw commented Jul 28, 2023

dmsimard commented Jul 28, 2023

dmsimard commented Jul 28, 2023

ianw commented Jul 28, 2023

ianw commented Jul 28, 2023 • edited

dmsimard commented Jul 29, 2023

softwarefactory-project-zuul bot commented Jul 29, 2023

dmsimard commented Jul 29, 2023

dmsimard commented Jul 29, 2023

softwarefactory-project-zuul bot commented Jul 29, 2023

dmsimard commented Jul 29, 2023

softwarefactory-project-zuul bot commented Jul 29, 2023

dmsimard commented Jul 31, 2023

dmsimard commented Aug 27, 2023

dmsimard commented Aug 27, 2023

softwarefactory-project-zuul bot commented Aug 27, 2023

softwarefactory-project-zuul bot commented Aug 27, 2023

dmsimard commented Aug 27, 2023

dmsimard commented Oct 8, 2022 •

edited

dmsimard commented Jul 27, 2023 •

edited

ianw commented Jul 28, 2023 •

edited