mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2026-04-15 22:14:04 -04:00
de3f376882
* convert the dropdown (overflow menu) to the JS-less one
* the "link" still relies on JS to make a POST, changing this is not in scope of this PR
* fixed the weird behavior where opener changes it's color when hovering over the "link"
* the bug where the script that refreshes the list once in a while closes an open dropdown is not fixed and is not in scope of this PR
* use border in the opener
* it might not look as sleek but it is easier to see and better for the user to be able to understand that this is an active intractable element
* global dropdown improvements
* add rounding rules for dropdowns with only one item - the first such case
* add testing for rounding rules
* added a devtest page to play with the dropdown component on
Preview
B: https://codeberg.org/forgejo/forgejo/attachments/1462cdda-71f5-45d0-a206-33bb17740cb8
A: https://codeberg.org/forgejo/forgejo/attachments/d3c265cb-6b77-40c8-9944-d9327f3bec65
B: https://codeberg.org/forgejo/forgejo/attachments/17f17c29-4dcd-4015-b5b9-6d438bd2eb0b
A: https://codeberg.org/forgejo/forgejo/attachments/d94e196c-725e-47de-b4de-ed97b148ceb6
B: https://codeberg.org/forgejo/forgejo/attachments/1813ded9-f619-47d9-bf15-ad4bcd3535ab
A: https://codeberg.org/forgejo/forgejo/attachments/09042e58-331e-414d-ac8f-0f1091033b7f
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10133
Reviewed-by: Otto <otto@codeberg.org>
74 lines
1.5 KiB
Go HTML Template
74 lines
1.5 KiB
Go HTML Template
{{template "base/head" .}}
|
|
|
|
<div class="page-content devtest ui container">
|
|
<h1>Dropdown</h1>
|
|
a.k.a. overflow menu, ellipsis menu
|
|
|
|
<div class="button-sequence">
|
|
<details class="dropdown" id="dropdown-1">
|
|
<summary class="Options">
|
|
Options {{svg "octicon-triangle-down" 14}}
|
|
</summary>
|
|
<div class="content">
|
|
<ul>
|
|
<li>
|
|
<a id="dd1_g1_i1" href="#noscroll">Item 1</a>
|
|
</li>
|
|
<li>
|
|
<a id="dd1_g1_i2" href="#noscroll">Item 2</a>
|
|
</li>
|
|
<li>
|
|
<a id="dd1_g1_i3" href="#noscroll">Item 3</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="dropdown" id="dropdown-2">
|
|
<summary class="Options">
|
|
Options {{svg "octicon-triangle-down" 14}}
|
|
</summary>
|
|
<div class="content">
|
|
<ul>
|
|
<li>
|
|
<a id="dd2_g1_i1" href="#noscroll">Item 1</a>
|
|
</li>
|
|
<li>
|
|
<a id="dd2_g1_i2" href="#noscroll">Item 2</a>
|
|
</li>
|
|
<li>
|
|
<a id="dd2_g1_i3" href="#noscroll">Item 3</a>
|
|
</li>
|
|
</ul>
|
|
<hr>
|
|
<ul>
|
|
<li>
|
|
<a id="dd2_g2_i1" href="#noscroll">Item 4</a>
|
|
</li>
|
|
<li>
|
|
<a id="dd2_g2_i2" href="#noscroll">Item 5</a>
|
|
</li>
|
|
<li>
|
|
<a id="dd2_g2_i3" href="#noscroll">Item 6</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="dropdown" id="dropdown-3">
|
|
<summary class="Options">
|
|
Options {{svg "octicon-triangle-down" 14}}
|
|
</summary>
|
|
<div class="content">
|
|
<ul>
|
|
<li>
|
|
<a id="dd3_g1_i1" href="#noscroll">Only item</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{{template "base/footer" .}}
|