diff --git a/templates/devtest/flex-list.tmpl b/templates/devtest/flex-list.tmpl new file mode 100644 index 0000000000..37f3f04004 --- /dev/null +++ b/templates/devtest/flex-list.tmpl @@ -0,0 +1,88 @@ +{{template "base/head" .}} + +
+
+

Flex List

+
+
+
+ {{svg "octicon-info" 32}} +
+
+
+ Flex Item + + with label + +
+
+ consists of leading/main/trailing part +
+
+ main part contains title and (multiple) body lines +
+
+
+ + + +
+
+ +
+
+ {{svg "octicon-info" 32}} +
+
+
+ Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong title +
+
+ consists of leading/main/trailing part +
+
+ Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content +
+
+
+ +
+
+ +
+
+ {{svg "octicon-repo" 32}} +
+
+ +
+ when inside header, the trailing part will wrap below the title +
+
+
+
+
+
+{{template "base/footer" .}} diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index 9e15e3c1bc..342f8c2e9b 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -130,9 +130,13 @@

Text with SVG

{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)
{{svg "octicon-alert"}} {{svg "octicon-x"}} text
(inline)
+ +
{{svg "octicon-alert"}} flex item with very very very very very very very very long content
+
{{svg "octicon-alert"}} flex every line
{{svg "octicon-alert"}} flex every item
+
{{svg "octicon-alert"}} flex item with very very very very very very very very long content

Button with SVG

@@ -142,6 +146,7 @@ 123 +

Input with SVG

@@ -253,63 +258,5 @@ {{template "shared/combomarkdowneditor" .}} - -
-

Flex List

-
-
-
- {{svg "octicon-info" 32}} -
-
-
- Flex Item - - with label - -
-
- consists of leading/main/trailing part -
-
- main part contains title and (multiple) body lines -
-
-
- - -
-
-
-
- {{svg "octicon-repo" 32}} -
-
- -
- when inside header, the trailing part will wrap below the title -
-
-
-
-
{{template "base/footer" .}} diff --git a/web_src/css/base.css b/web_src/css/base.css index f2b4d3d98c..78609ab0de 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -2311,7 +2311,6 @@ table th[data-sortt-desc] .svg { .flex-text-inline { display: inline-flex; align-items: center; - flex-wrap: wrap; gap: .25rem; vertical-align: middle; } @@ -2339,6 +2338,5 @@ table th[data-sortt-desc] .svg { .flex-text-block { display: flex; align-items: center; - flex-wrap: wrap; gap: .25rem; } diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css index 7982241684..ec22fbba9e 100644 --- a/web_src/css/shared/flex-list.css +++ b/web_src/css/shared/flex-list.css @@ -29,7 +29,7 @@ display: flex; flex-direction: column; flex-grow: 1; - min-width: 0; + flex-basis: 60%; } .flex-item-header { @@ -54,7 +54,6 @@ flex-grow: 0; flex-wrap: wrap; justify-content: end; - flex-shrink: 2; } .flex-item .flex-item-title { @@ -65,8 +64,8 @@ max-width: 100%; color: var(--color-text); font-size: 16px; - min-width: 0; font-weight: var(--font-weight-semibold); + word-break: break-word; } .flex-item .flex-item-title a { @@ -81,6 +80,7 @@ flex-wrap: wrap; gap: .25rem; color: var(--color-text-light-2); + word-break: break-word; } .flex-item .flex-item-body a {