diff options
| author | Giteabot <teabot@gitea.io> | 2024-05-02 21:47:32 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-05-02 13:47:32 +0000 |
| commit | 3f0dc694009b872cbcba2900615e02c7ca0615f3 (patch) | |
| tree | 3e74452b4146f3b0b6fe688ddb1619bc2d7da422 | |
| parent | 606b12caf04b91a5fa57f1d8ab6f216ad1a3eb14 (diff) | |
| download | gitea-3f0dc694009b872cbcba2900615e02c7ca0615f3.tar.gz gitea-3f0dc694009b872cbcba2900615e02c7ca0615f3.zip | |
Improve context popup rendering (#30824) (#30829)
Backport #30824 by @silverwind
Before, lot of empty space when no labels or body:
<img width="281" alt="Screenshot 2024-05-02 at 13 51 29"
src="https://github.com/go-gitea/gitea/assets/115237/8a980ccd-d53c-43a3-a059-dc8c614621e1">
After, empty space collapsed:
<img width="306" alt="Screenshot 2024-05-02 at 13 51 16"
src="https://github.com/go-gitea/gitea/assets/115237/8d9c154d-5de1-43d0-8536-afd9194d99b3">
All `<p>` (unsuitable) and `<small>` (discouraged in favor of css) tags
are removed.
Co-authored-by: silverwind <me@silverwind.io>
| -rw-r--r-- | web_src/js/components/.eslintrc.yaml | 1 | ||||
| -rw-r--r-- | web_src/js/components/ContextPopup.vue | 22 |
2 files changed, 15 insertions, 8 deletions
diff --git a/web_src/js/components/.eslintrc.yaml b/web_src/js/components/.eslintrc.yaml index 0d233442bc..a79e96f330 100644 --- a/web_src/js/components/.eslintrc.yaml +++ b/web_src/js/components/.eslintrc.yaml @@ -18,4 +18,5 @@ rules: vue/attributes-order: [0] vue/html-closing-bracket-spacing: [2, {startTag: never, endTag: never, selfClosingTag: never}] vue/max-attributes-per-line: [0] + vue/singleline-html-element-content-newline: [0] vue-scoped-css/enforce-style-type: [0] diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue index e4e8bce184..8f389ea003 100644 --- a/web_src/js/components/ContextPopup.vue +++ b/web_src/js/components/ContextPopup.vue @@ -91,16 +91,22 @@ export default { <template> <div ref="root"> <div v-if="loading" class="tw-h-12 tw-w-12 is-loading"/> - <div v-if="!loading && issue !== null"> - <p><small>{{ issue.repository.full_name }} on {{ createdAt }}</small></p> - <p><svg-icon :name="icon" :class="['text', color]"/> <strong>{{ issue.title }}</strong> #{{ issue.number }}</p> - <p>{{ body }}</p> + <div v-if="!loading && issue !== null" class="tw-flex tw-flex-col tw-gap-2"> + <div class="tw-text-12">{{ issue.repository.full_name }} on {{ createdAt }}</div> + <div class="flex-text-block"> + <svg-icon :name="icon" :class="['text', color]"/> + <span class="issue-title tw-font-semibold tw-break-anywhere"> + {{ issue.title }} + <span class="index">#{{ issue.number }}</span> + </span> + </div> + <div v-if="body">{{ body }}</div> <!-- eslint-disable-next-line vue/no-v-html --> - <div v-html="renderedLabels"/> + <div v-if="issue.labels.length" v-html="renderedLabels"/> </div> - <div v-if="!loading && issue === null"> - <p><small>{{ i18nErrorOccurred }}</small></p> - <p>{{ i18nErrorMessage }}</p> + <div class="tw-flex tw-flex-col tw-gap-2" v-if="!loading && issue === null"> + <div class="tw-text-12">{{ i18nErrorOccurred }}</div> + <div>{{ i18nErrorMessage }}</div> </div> </div> </template> |