Skip to content

Commit

Permalink
Upgrade daisyUI version and update header breaking changes (#38)
Browse files Browse the repository at this point in the history
* Upgrade daisyUI version and update header breaking changes

* Clean lockfile

* Put back color on selected button + margin between buttons

* fix: mobile header [WIP], bring back focus

* Remove background in dropdown responsive and place it in first position

---------

Co-authored-by: Gabriel Dugny <[email protected]>
  • Loading branch information
jennafauconnier and GabDug authored Mar 25, 2024
1 parent f82736e commit d9333bf
Show file tree
Hide file tree
Showing 5 changed files with 62 additions and 103 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
"autoprefixer": "^10.4.16",
"clean-css-cli": "^5.6.2",
"cross-env": "^7.0.3",
"daisyui": "^2.51.6",
"daisyui": "^4.7.2",
"postcss": "^8.4.31",
"postcss-import": "^15.1.0",
"rollup": "^4.7.0",
Expand Down
11 changes: 8 additions & 3 deletions src/firefighter/incidents/menus.py
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,13 @@ def log_out_url(_request: HttpRequest) -> str:

def setup_navbar_menu() -> None:
submenu_items = [
MenuItem(
"Incidents List",
reverse(
"incidents:incident-list",
),
boost=False,
),
MenuItem(
"Declare a critical incident",
reverse("incidents:incident-create"),
Expand All @@ -57,9 +64,7 @@ def setup_navbar_menu() -> None:
Menus.main,
MenuItem(
"Incidents",
reverse(
"incidents:incident-list",
),
None,
icon="menu-app",
children=submenu_items,
),
Expand Down
55 changes: 33 additions & 22 deletions src/firefighter/incidents/templates/layouts/partials/header.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,28 @@
<label tabindex="0" class="btn btn-ghost sm:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
</label>
<ul tabindex="0" class="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-200 dark:bg-black rounded-box w-52 ">
<ul tabindex="0" class="dropdown-content menu mt-3 z-50 p-2 shadow bg-base-200 dark:bg-black rounded-box w-52">
{% for item in menus.main %}
{% if item.children %}
<li tabindex="0">
<a {% if item.boost %}hx-boost="true"{% else %}hx-boost="false"{% endif %} {% if item.url %}href="{{item.url}}"{% endif %} class="justify-between {% if item.selected %}active{% endif %}">
{{item.title}}
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"/></svg>
</a>
<ul class="p-2 bg-base-200 rounded-md">
{% for child in item.children%}
<li><a {% if item.boost %}hx-boost="true"{% else %}hx-boost="false"{% endif %} href="{{child.url}}" class="{% if child.selected %}active{% endif %}">{{child.title}}{% if item.badge %}<span class="badge">{{child.badge}}</span>
{% endif %}</a></li>
{% endfor %}
</ul>
<details>
<summary>
<a {% if item.boost %}hx-boost="true"{% else %}hx-boost="false"{% endif %} {% if item.url %}href="{{item.url}}"{% endif %} class="justify-between {% if item.selected %}active{% endif %}">
{{item.title}}
</a>
</summary>
<ul class="p-2 rounded-md z-[15]">
{% for child in item.children%}
<li><a {% if item.boost %}hx-boost="true"{% else %}hx-boost="false"{% endif %} href="{{child.url}}" class="dropdown dropdown-right {% if child.selected %}active{% endif %}">{{child.title}}{% if item.badge %}<span class="badge">{{child.badge}}</span>
{% endif %}</a></li>
{% endfor %}
</ul>
</details>
</li>
{% else %}
<li><a href="{{item.url}}" class="{% if item.selected %}active{% endif %}">{{item.title}}</a></li>
<li>
<a href="{{item.url}}" class="{% if item.selected %}active {% endif %}">{{item.title}}</a>
</li>
{% endif %}
{% endfor %}
</ul>
Expand All @@ -34,22 +39,28 @@
</a>
</div>
<div class="navbar-center hidden sm:flex">
<ul class="menu menu-horizontal p-0 text-sm rounded-lg md:gap-1">
<ul class="menu menu-horizontal text-sm rounded-lg md:gap-1">
{% for item in menus.main %}
{% if item.children %}
<li tabindex="0">
<a {% if item.boost %}hx-boost="true"{% else %}hx-boost="false"{% endif %} {% if item.url %}href="{{item.url}}"{% endif %} class="rounded-lg {% if item.selected %}active{% endif %}">
{{item.title}}
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"/></svg>
</a>
<ul class="p-2 bg-base-200 gap-y-1 rounded-md">
{% for child in item.children%}
<li><a {% if item.boost %}hx-boost="true"{% else %}hx-boost="false"{% endif %} href="{{child.url}}" class="rounded-lg {% if child.selected %}active{% endif %}">{{child.title}}</a></li>
<li class="dropdown dropdown-hover dropdown-bottom ">
<div tabindex="0" role="button" class="btn btn-ghost">
<a {% if item.boost %}hx-boost="true"{% else %}hx-boost="false"{% endif %} {% if item.url %} href="{{item.url}}"{% endif %} class=" {% if item.selected %}{% endif %}">
{{item.title}}
</a>
</div>
<ul tabindex="0" class="dropdown-content p-2 bg-base-200 rounded-md z-[15] menu ml-0 p-2 shadow bg-base-100 rounded-box w-52">
{% for child in item.children %}
<li class="py-1">
<a {% if item.boost %}hx-boost="true"{% else %}hx-boost="false"{% endif %} href="{{ child.url }}"
class="whitespace-nowrap {% if child.selected %}active {% endif %}">
{{ child.title }}
</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li><a href="{{item.url}}" class="rounded-lg {% if item.selected %}active{% endif %}">{{item.title}}</a></li>
<li><a href="{{ item.url }}" class="btn btn-ghost{% if item.selected %}active{% endif %}">{{ item.title }}</a></li>
{% endif %}
{% endfor %}
</ul>
Expand Down
4 changes: 2 additions & 2 deletions tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@ module.exports = {
themes: [
{
light: {
...require("daisyui/src/colors/themes")[
"[data-theme=light]"
...require("daisyui/src/theming/themes")[
"[light]"
],
"base-100": "#ffffff",
"base-200": "#F9F9F9",
Expand Down
93 changes: 18 additions & 75 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1591,27 +1591,11 @@ [email protected]:
resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==

color-name@^1.0.0, color-name@~1.1.4:
color-name@~1.1.4:
version "1.1.4"
resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==

color-string@^1.9.0:
version "1.9.1"
resolved "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
dependencies:
color-name "^1.0.0"
simple-swizzle "^0.2.2"

color@^4.2:
version "4.2.3"
resolved "https://registry.npmjs.org/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
dependencies:
color-convert "^2.0.1"
color-string "^1.9.0"

colord@^2.9.1, colord@^2.9.3:
version "2.9.3"
resolved "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz"
Expand Down Expand Up @@ -1708,7 +1692,7 @@ css-select@^4.1.3:
domutils "^2.8.0"
nth-check "^2.0.1"

css-selector-tokenizer@^0.8.0:
css-selector-tokenizer@^0.8:
version "0.8.0"
resolved "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz#88267ef6238e64f2215ea2764b3e2cf498b845dd"
integrity sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==
Expand Down Expand Up @@ -1798,15 +1782,20 @@ csso@^4.2.0:
dependencies:
css-tree "^1.1.2"

daisyui@^2.51.6:
version "2.52.0"
resolved "https://registry.npmjs.org/daisyui/-/daisyui-2.52.0.tgz#1e22abd655bf4a5cb466e1a1f264bb597e9ec254"
integrity sha512-LQTA5/IVXAJHBMFoeaEMfd7/akAFPPcdQPR3O9fzzcFiczneJFM73CFPnScmW2sOgn/D83cvkP854ep2T9OfTg==
culori@^3:
version "3.3.0"
resolved "https://registry.yarnpkg.com/culori/-/culori-3.3.0.tgz#e33530adbd124d53bd6550394397e695eaaed739"
integrity sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==

daisyui@^4.7.2:
version "4.7.2"
resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-4.7.2.tgz#d2359d9eb1cac2082302ca55b6b35eca437a011f"
integrity sha512-9UCss12Zmyk/22u+JbkVrHHxOzFOyY17HuqP5LeswI4hclbj6qbjJTovdj2zRy8cCH6/n6Wh0lTLjriGnyGh0g==
dependencies:
color "^4.2"
css-selector-tokenizer "^0.8.0"
postcss-js "^4.0.0"
tailwindcss "^3"
css-selector-tokenizer "^0.8"
culori "^3"
picocolors "^1"
postcss-js "^4"

debug@^4.1.0, debug@^4.1.1, debug@^4.3.4:
version "4.3.4"
Expand Down Expand Up @@ -1947,7 +1936,7 @@ fast-deep-equal@^3.1.1:
resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==

fast-glob@^3.2.12, fast-glob@^3.2.9:
fast-glob@^3.2.9:
version "3.2.12"
resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
Expand Down Expand Up @@ -2275,11 +2264,6 @@ is-arrayish@^0.2.1:
resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==

is-arrayish@^0.3.1:
version "0.3.2"
resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==

is-binary-path@~2.1.0:
version "2.1.0"
resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
Expand Down Expand Up @@ -2357,11 +2341,6 @@ isexe@^2.0.0:
resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==

jiti@^1.18.2:
version "1.18.2"
resolved "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz#80c3ef3d486ebf2450d9335122b32d121f2a83cd"
integrity sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==

jiti@^1.19.1:
version "1.21.0"
resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
Expand Down Expand Up @@ -2767,7 +2746,7 @@ path-type@^4.0.0:
resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==

picocolors@^1.0.0:
picocolors@^1, picocolors@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
Expand Down Expand Up @@ -2847,7 +2826,7 @@ postcss-import@^15.1.0:
read-cache "^1.0.0"
resolve "^1.1.7"

postcss-js@^4.0.0, postcss-js@^4.0.1:
postcss-js@^4, postcss-js@^4.0.1:
version "4.0.1"
resolved "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
Expand Down Expand Up @@ -3398,13 +3377,6 @@ signal-exit@^4.0.1:
resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-4.0.2.tgz#ff55bb1d9ff2114c13b400688fa544ac63c36967"
integrity sha512-MY2/qGx4enyjprQnFaZsHib3Yadh3IXyV2C321GY0pjGfVBu4un0uDJkwgdxqO+Rdx8JMT8IfJIRwbYVz3Ob3Q==

simple-swizzle@^0.2.2:
version "0.2.2"
resolved "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
dependencies:
is-arrayish "^0.3.1"

slash@^3.0.0:
version "3.0.0"
resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
Expand Down Expand Up @@ -3656,35 +3628,6 @@ table@^6.8.1:
string-width "^4.2.3"
strip-ansi "^6.0.1"

tailwindcss@^3:
version "3.3.2"
resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz#2f9e35d715fdf0bbf674d90147a0684d7054a2d3"
integrity sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==
dependencies:
"@alloc/quick-lru" "^5.2.0"
arg "^5.0.2"
chokidar "^3.5.3"
didyoumean "^1.2.2"
dlv "^1.1.3"
fast-glob "^3.2.12"
glob-parent "^6.0.2"
is-glob "^4.0.3"
jiti "^1.18.2"
lilconfig "^2.1.0"
micromatch "^4.0.5"
normalize-path "^3.0.0"
object-hash "^3.0.0"
picocolors "^1.0.0"
postcss "^8.4.23"
postcss-import "^15.1.0"
postcss-js "^4.0.1"
postcss-load-config "^4.0.1"
postcss-nested "^6.0.1"
postcss-selector-parser "^6.0.11"
postcss-value-parser "^4.2.0"
resolve "^1.22.2"
sucrase "^3.32.0"

tailwindcss@^3.3.5:
version "3.3.6"
resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.6.tgz#4dd7986bf4902ad385d90d45fd4b2fa5fab26d5f"
Expand Down

0 comments on commit d9333bf

Please sign in to comment.