mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2026-05-16 07:46:35 +00:00
79c47c2e50
Followup to https://codeberg.org/forgejo/forgejo/pulls/9636, https://codeberg.org/forgejo/forgejo/pulls/8859#issuecomment-6651595. 1. Due to lack of `min-width`, currently the new consistent dialogs can get disproportionally small to the screen. This PR adds a min-width of 400px. No deep consideration went into choosing this particular width. * To make the test not depend on modals we have in the UI with some arbitrary widths a devtest page was added instead 2. Use more horizontal space on narrow screens Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10246 Reviewed-by: Gusted <gusted@noreply.codeberg.org>
41 lines
1.3 KiB
Go HTML Template
41 lines
1.3 KiB
Go HTML Template
{{template "base/head" .}}
|
|
|
|
<div class="page-content devtest ui container">
|
|
<h1>Modals</h1>
|
|
|
|
<div class="button-sequence">
|
|
<button class="secondary button show-modal" data-modal="#short-modal">Short</button>
|
|
<button class="secondary button show-modal" data-modal="#medium-modal">Medium</button>
|
|
<button class="secondary button show-modal" data-modal="#long-modal">Long</button>
|
|
</div>
|
|
|
|
<dialog id="short-modal">
|
|
<article>
|
|
<header>Short modal</header>
|
|
<div class="content">🐈</div>
|
|
<footer class="actions">
|
|
<button class="secondary button cancel">{{ctx.Locale.Tr "settings.cancel"}}</button>
|
|
</footer>
|
|
</article>
|
|
</dialog>
|
|
<dialog id="medium-modal">
|
|
<article>
|
|
<header>Medium modal</header>
|
|
<div class="content">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
|
|
<footer class="actions">
|
|
<button class="secondary button cancel">{{ctx.Locale.Tr "settings.cancel"}}</button>
|
|
</footer>
|
|
</article>
|
|
</dialog>
|
|
<dialog id="long-modal">
|
|
<article>
|
|
<header>Long modal</header>
|
|
<div class="content">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
|
|
<footer class="actions">
|
|
<button class="secondary button cancel">{{ctx.Locale.Tr "settings.cancel"}}</button>
|
|
</footer>
|
|
</article>
|
|
</dialog>
|
|
</div>
|
|
|
|
{{template "base/footer" .}}
|