github-mirror/gitea
2
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2024-11-22 11:33:33 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
0f397ae09b
gitea/templates/devtest/flex-list.tmpl

116 lines
3.6 KiB
Handlebars
Raw Normal View History

Improve some flex layouts (#26649) Fix #26617 1. Separate the "flex-list" examples into a dedicated template, and add some more examples 2. Use `flex-basis` instead of `flex-shrink` for `flex-item-trailing`, to avoid wrapping the texts too aggressively 3. Some `flex-wrap: wrap;` are removed
2023-08-22 12:57:02 +08:00
{{template "base/head" .}}
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
Improve flex list item padding (#26779) Replace #26761 It's better to keep children elements simple, and let parent containers layout the necessary padding/margin. The old `not(:last-child)` and `.flex-item + .flex-item` are not easy to maintain (for example, what if the developer would like to use a "tiny height" item?) The old approach also makes some UI look strange because the first item doesn't have proper padding-top. In this PR, we just simply use `.flex-item { padding: ... }`: * Developers could manually set the item height they want easily * It's easier to make it work with various containers -- with padding (`ui segment`) and without padding (`div`) And added more samples/examples. ![image](https://github.com/go-gitea/gitea/assets/2114189/719ea712-0241-4426-b67f-5723993c4ed7) Co-authored-by: Giteabot <teabot@gitea.io>
2023-08-30 07:13:30 +08:00
<div class="page-content devtest">
<div class="ui container">
Minor dashboard tweaks, fix flex-list margins (#26829) Some small dashboard tweaks: - Remove margin-bottom from divider so first item does not appear to have un-equal margins - Restore previous icon color - Add slight margin-right to icon Before: <img width="783" alt="Screenshot 2023-08-31 at 00 10 28" src="https://github.com/go-gitea/gitea/assets/115237/b75f70d7-8704-4afb-866d-fea0484c52d4"> After: <img width="783" alt="Screenshot 2023-08-31 at 00 10 08" src="https://github.com/go-gitea/gitea/assets/115237/50ed0c47-6f7c-449e-a054-13091369d43f"> --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-09-01 05:28:45 +08:00
<h1>Flex List (standalone)</h1>
<div class="divider"></div>
Improve some flex layouts (#26649) Fix #26617 1. Separate the "flex-list" examples into a dedicated template, and add some more examples 2. Use `flex-basis` instead of `flex-shrink` for `flex-item-trailing`, to avoid wrapping the texts too aggressively 3. Some `flex-wrap: wrap;` are removed
2023-08-22 12:57:02 +08:00
<div class="flex-list">
<div class="flex-item">
<div class="flex-item-leading">
{{svg "octicon-info" 32}}
</div>
<div class="flex-item-main">
<div class="flex-item-title">
Flex Item
<span class="ui basic label">
with label
</span>
</div>
<div class="flex-item-body">
consists of leading/main/trailing part
</div>
<div class="flex-item-body">
main part contains title and (multiple) body lines
</div>
</div>
<div class="flex-item-trailing">
<button class="ui tiny red button">
Add svg linter and fix incorrect svgs (#30086) Fixes https://github.com/go-gitea/gitea/issues/30082. Adds a new linter that searches for non-existant SVG images in templates. Output before the fix was: ``` $ make lint-templates SVG "octicon-warning" not found, used in templates/devtest/flex-list.tmpl SVG "octicon-warning" not found, used in templates/devtest/flex-list.tmpl SVG "octicon-markup" not found, used in templates/repo/diff/comment_form.tmpl make: *** [Makefile:438: lint-templates] Error 1 ``` <img width="306" alt="Screenshot 2024-03-25 at 23 31 05" src="https://github.com/go-gitea/gitea/assets/115237/1052d1a9-bfec-4d5a-9cae-f895f78f7c93">
2024-03-26 19:19:15 +08:00
{{svg "octicon-alert" 14}} CJK文本测试
Improve some flex layouts (#26649) Fix #26617 1. Separate the "flex-list" examples into a dedicated template, and add some more examples 2. Use `flex-basis` instead of `flex-shrink` for `flex-item-trailing`, to avoid wrapping the texts too aggressively 3. Some `flex-wrap: wrap;` are removed
2023-08-22 12:57:02 +08:00
</button>
Change green buttons to primary color (#27099) I think it's better if the primary actions have primary color instead of green which fits better into the overall single-color UI design. This PR currently replaces every green button with primary: <img width="141" alt="Screenshot 2023-09-16 at 14 07 59" src="https://github.com/go-gitea/gitea/assets/115237/843c1e50-4fb2-4ec6-84ba-0efb9472dcbe"> <img width="161" alt="Screenshot 2023-09-16 at 14 07 51" src="https://github.com/go-gitea/gitea/assets/115237/9442195a-a3b2-4a42-b262-8377d6f5c0d1"> Modal actions now use uncolored/primary instead of previous green/red colors. I also removed the box-shadow on all basic buttons: <img width="259" alt="Screenshot 2023-09-16 at 14 16 39" src="https://github.com/go-gitea/gitea/assets/115237/5beea529-127a-44b0-8d4c-afa7b034a490"> <img width="261" alt="Screenshot 2023-09-16 at 14 17 42" src="https://github.com/go-gitea/gitea/assets/115237/4757f7b2-4d46-49bc-a797-38bb28437b88"> The change currently includes the "Merge PR" button, for which we might want to make an exception to match the icon color there: <img width="442" alt="Screenshot 2023-09-16 at 14 33 53" src="https://github.com/go-gitea/gitea/assets/115237/993ac1a5-c94d-4895-b76c-0d872181a70b">
2023-09-19 06:05:31 +08:00
<button class="ui tiny primary button">
Improve some flex layouts (#26649) Fix #26617 1. Separate the "flex-list" examples into a dedicated template, and add some more examples 2. Use `flex-basis` instead of `flex-shrink` for `flex-item-trailing`, to avoid wrapping the texts too aggressively 3. Some `flex-wrap: wrap;` are removed
2023-08-22 12:57:02 +08:00
{{svg "octicon-info" 14}} Button
</button>
Change green buttons to primary color (#27099) I think it's better if the primary actions have primary color instead of green which fits better into the overall single-color UI design. This PR currently replaces every green button with primary: <img width="141" alt="Screenshot 2023-09-16 at 14 07 59" src="https://github.com/go-gitea/gitea/assets/115237/843c1e50-4fb2-4ec6-84ba-0efb9472dcbe"> <img width="161" alt="Screenshot 2023-09-16 at 14 07 51" src="https://github.com/go-gitea/gitea/assets/115237/9442195a-a3b2-4a42-b262-8377d6f5c0d1"> Modal actions now use uncolored/primary instead of previous green/red colors. I also removed the box-shadow on all basic buttons: <img width="259" alt="Screenshot 2023-09-16 at 14 16 39" src="https://github.com/go-gitea/gitea/assets/115237/5beea529-127a-44b0-8d4c-afa7b034a490"> <img width="261" alt="Screenshot 2023-09-16 at 14 17 42" src="https://github.com/go-gitea/gitea/assets/115237/4757f7b2-4d46-49bc-a797-38bb28437b88"> The change currently includes the "Merge PR" button, for which we might want to make an exception to match the icon color there: <img width="442" alt="Screenshot 2023-09-16 at 14 33 53" src="https://github.com/go-gitea/gitea/assets/115237/993ac1a5-c94d-4895-b76c-0d872181a70b">
2023-09-19 06:05:31 +08:00
<button class="ui tiny primary button">
Improve some flex layouts (#26649) Fix #26617 1. Separate the "flex-list" examples into a dedicated template, and add some more examples 2. Use `flex-basis` instead of `flex-shrink` for `flex-item-trailing`, to avoid wrapping the texts too aggressively 3. Some `flex-wrap: wrap;` are removed
2023-08-22 12:57:02 +08:00
Button with long text
</button>
</div>
</div>
<div class="flex-item">
<div class="flex-item-leading">
{{svg "octicon-info" 32}}
</div>
<div class="flex-item-main">
<div class="flex-item-title">
Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong title
</div>
<div class="flex-item-body">
consists of leading/main/trailing part
</div>
<div class="flex-item-body">
Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content
More improvements for the "flex list" and the dashboard list (#26675) Follow #26649 and #25790 and add one more example (text truncate) in the devtest page
2023-08-23 12:23:30 +08:00
<span class="text truncate">Truncate very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content</span>
Improve some flex layouts (#26649) Fix #26617 1. Separate the "flex-list" examples into a dedicated template, and add some more examples 2. Use `flex-basis` instead of `flex-shrink` for `flex-item-trailing`, to avoid wrapping the texts too aggressively 3. Some `flex-wrap: wrap;` are removed
2023-08-22 12:57:02 +08:00
</div>
</div>
<div class="flex-item-trailing">
<button class="ui tiny red button">
Add svg linter and fix incorrect svgs (#30086) Fixes https://github.com/go-gitea/gitea/issues/30082. Adds a new linter that searches for non-existant SVG images in templates. Output before the fix was: ``` $ make lint-templates SVG "octicon-warning" not found, used in templates/devtest/flex-list.tmpl SVG "octicon-warning" not found, used in templates/devtest/flex-list.tmpl SVG "octicon-markup" not found, used in templates/repo/diff/comment_form.tmpl make: *** [Makefile:438: lint-templates] Error 1 ``` <img width="306" alt="Screenshot 2024-03-25 at 23 31 05" src="https://github.com/go-gitea/gitea/assets/115237/1052d1a9-bfec-4d5a-9cae-f895f78f7c93">
2024-03-26 19:19:15 +08:00
{{svg "octicon-alert" 12}} CJK文本测试 <!-- single CJK text test, it shouldn't be horizontal -->
Improve some flex layouts (#26649) Fix #26617 1. Separate the "flex-list" examples into a dedicated template, and add some more examples 2. Use `flex-basis` instead of `flex-shrink` for `flex-item-trailing`, to avoid wrapping the texts too aggressively 3. Some `flex-wrap: wrap;` are removed
2023-08-22 12:57:02 +08:00
</button>
</div>
</div>
<div class="flex-item">
<div class="flex-item-leading">
{{svg "octicon-repo" 32}}
</div>
<div class="flex-item-main">
<div class="flex-item-header">
<div class="flex-item-title">
<a class="text primary" href="{{$.Link}}">
gitea-org / gitea
</a>
Always use `ctx.Locale.Tr` inside templates (#27231)
2023-09-25 16:56:50 +08:00
<span data-tooltip-content="{{ctx.Locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span>
Improve some flex layouts (#26649) Fix #26617 1. Separate the "flex-list" examples into a dedicated template, and add some more examples 2. Use `flex-basis` instead of `flex-shrink` for `flex-item-trailing`, to avoid wrapping the texts too aggressively 3. Some `flex-wrap: wrap;` are removed
2023-08-22 12:57:02 +08:00
</div>
<div class="flex-item-trailing">
<a class="muted" href="{{$.Link}}">
Migrate margin and padding helpers to tailwind (#30043) This will conclude the refactor of 1:1 class replacements to tailwind, except `gt-hidden`. Commands ran: ```bash perl -p -i -e 's#gt-(p|m)([lrtbxy])?-0#tw-$1$2-0#g' {web_src/js,templates,routers,services}/**/* perl -p -i -e 's#gt-(p|m)([lrtbxy])?-1#tw-$1$2-0.5#g' {web_src/js,templates,routers,services}/**/* perl -p -i -e 's#gt-(p|m)([lrtbxy])?-2#tw-$1$2-1#g' {web_src/js,templates,routers,services}/**/* perl -p -i -e 's#gt-(p|m)([lrtbxy])?-3#tw-$1$2-2#g' {web_src/js,templates,routers,services}/**/* perl -p -i -e 's#gt-(p|m)([lrtbxy])?-4#tw-$1$2-4#g' {web_src/js,templates,routers,services}/**/* perl -p -i -e 's#gt-(p|m)([lrtbxy])?-5#tw-$1$2-8#g' {web_src/js,templates,routers,services}/**/* ```
2024-03-25 00:42:49 +08:00
<span class="flex-text-inline"><i class="color-icon tw-mr-2 tw-bg-blue"></i>Go</span>
Improve some flex layouts (#26649) Fix #26617 1. Separate the "flex-list" examples into a dedicated template, and add some more examples 2. Use `flex-basis` instead of `flex-shrink` for `flex-item-trailing`, to avoid wrapping the texts too aggressively 3. Some `flex-wrap: wrap;` are removed
2023-08-22 12:57:02 +08:00
</a>
<a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-star" 16}}45000</a>
<a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-git-branch" 16}}1234</a>
</div>
</div>
<div class="flex-item-body">
when inside header, the trailing part will wrap below the title
</div>
</div>
</div>
</div>
Improve flex list item padding (#26779) Replace #26761 It's better to keep children elements simple, and let parent containers layout the necessary padding/margin. The old `not(:last-child)` and `.flex-item + .flex-item` are not easy to maintain (for example, what if the developer would like to use a "tiny height" item?) The old approach also makes some UI look strange because the first item doesn't have proper padding-top. In this PR, we just simply use `.flex-item { padding: ... }`: * Developers could manually set the item height they want easily * It's easier to make it work with various containers -- with padding (`ui segment`) and without padding (`div`) And added more samples/examples. ![image](https://github.com/go-gitea/gitea/assets/2114189/719ea712-0241-4426-b67f-5723993c4ed7) Co-authored-by: Giteabot <teabot@gitea.io>
2023-08-30 07:13:30 +08:00
Minor dashboard tweaks, fix flex-list margins (#26829) Some small dashboard tweaks: - Remove margin-bottom from divider so first item does not appear to have un-equal margins - Restore previous icon color - Add slight margin-right to icon Before: <img width="783" alt="Screenshot 2023-08-31 at 00 10 28" src="https://github.com/go-gitea/gitea/assets/115237/b75f70d7-8704-4afb-866d-fea0484c52d4"> After: <img width="783" alt="Screenshot 2023-08-31 at 00 10 08" src="https://github.com/go-gitea/gitea/assets/115237/50ed0c47-6f7c-449e-a054-13091369d43f"> --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-09-01 05:28:45 +08:00
<div class="divider"></div>
Improve flex list item padding (#26779) Replace #26761 It's better to keep children elements simple, and let parent containers layout the necessary padding/margin. The old `not(:last-child)` and `.flex-item + .flex-item` are not easy to maintain (for example, what if the developer would like to use a "tiny height" item?) The old approach also makes some UI look strange because the first item doesn't have proper padding-top. In this PR, we just simply use `.flex-item { padding: ... }`: * Developers could manually set the item height they want easily * It's easier to make it work with various containers -- with padding (`ui segment`) and without padding (`div`) And added more samples/examples. ![image](https://github.com/go-gitea/gitea/assets/2114189/719ea712-0241-4426-b67f-5723993c4ed7) Co-authored-by: Giteabot <teabot@gitea.io>
2023-08-30 07:13:30 +08:00
<h1>Flex List (with "ui segment")</h1>
<div class="ui attached segment">
<div class="flex-list">
<div class="flex-item">item 1</div>
<div class="flex-item">item 2</div>
</div>
</div>
<div class="ui attached segment">
<h1>Flex List (with "ui segment")</h1>
<div class="flex-list">
<div class="flex-item">item 1</div>
<div class="flex-item">item 2</div>
</div>
</div>
Minor dashboard tweaks, fix flex-list margins (#26829) Some small dashboard tweaks: - Remove margin-bottom from divider so first item does not appear to have un-equal margins - Restore previous icon color - Add slight margin-right to icon Before: <img width="783" alt="Screenshot 2023-08-31 at 00 10 28" src="https://github.com/go-gitea/gitea/assets/115237/b75f70d7-8704-4afb-866d-fea0484c52d4"> After: <img width="783" alt="Screenshot 2023-08-31 at 00 10 08" src="https://github.com/go-gitea/gitea/assets/115237/50ed0c47-6f7c-449e-a054-13091369d43f"> --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-09-01 05:28:45 +08:00
<h1>If parent provides the padding/margin space:</h1>
Migrate margin and padding helpers to tailwind (#30043) This will conclude the refactor of 1:1 class replacements to tailwind, except `gt-hidden`. Commands ran: ```bash perl -p -i -e 's#gt-(p|m)([lrtbxy])?-0#tw-$1$2-0#g' {web_src/js,templates,routers,services}/**/* perl -p -i -e 's#gt-(p|m)([lrtbxy])?-1#tw-$1$2-0.5#g' {web_src/js,templates,routers,services}/**/* perl -p -i -e 's#gt-(p|m)([lrtbxy])?-2#tw-$1$2-1#g' {web_src/js,templates,routers,services}/**/* perl -p -i -e 's#gt-(p|m)([lrtbxy])?-3#tw-$1$2-2#g' {web_src/js,templates,routers,services}/**/* perl -p -i -e 's#gt-(p|m)([lrtbxy])?-4#tw-$1$2-4#g' {web_src/js,templates,routers,services}/**/* perl -p -i -e 's#gt-(p|m)([lrtbxy])?-5#tw-$1$2-8#g' {web_src/js,templates,routers,services}/**/* ```
2024-03-25 00:42:49 +08:00
<div class="tw-border tw-border-secondary tw-py-4">
Minor dashboard tweaks, fix flex-list margins (#26829) Some small dashboard tweaks: - Remove margin-bottom from divider so first item does not appear to have un-equal margins - Restore previous icon color - Add slight margin-right to icon Before: <img width="783" alt="Screenshot 2023-08-31 at 00 10 28" src="https://github.com/go-gitea/gitea/assets/115237/b75f70d7-8704-4afb-866d-fea0484c52d4"> After: <img width="783" alt="Screenshot 2023-08-31 at 00 10 08" src="https://github.com/go-gitea/gitea/assets/115237/50ed0c47-6f7c-449e-a054-13091369d43f"> --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-09-01 05:28:45 +08:00
<div class="flex-list flex-space-fitted">
<div class="flex-item">item 1 (no padding top)</div>
<div class="flex-item">item 2 (no padding bottom)</div>
</div>
</div>
Improve some flex layouts (#26649) Fix #26617 1. Separate the "flex-list" examples into a dedicated template, and add some more examples 2. Use `flex-basis` instead of `flex-shrink` for `flex-item-trailing`, to avoid wrapping the texts too aggressively 3. Some `flex-wrap: wrap;` are removed
2023-08-22 12:57:02 +08:00
</div>
</div>
{{template "base/footer" .}}
Reference in New Issue Copy Permalink