From b1bb3642e52ae1401bb06de130b17db48cff379e Mon Sep 17 00:00:00 2001 From: silverwind <me@silverwind.io> Date: Thu, 2 May 2024 15:42:33 +0200 Subject: [PATCH] Improve context popup rendering (#30824) 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. --- web_src/js/components/.eslintrc.yaml | 1 + 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>