Merge pull request #2009 from RitvikSardana/styling-article-email

fix(styling): styling in article and email
frappe · Oct 3, 2024 · 6cdea66 · 6cdea66
2 parents 6e6171d + 73b7936
commit 6cdea66
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 81 deletions.
diff --git a/desk/src/components/Settings/EmailAdd.vue b/desk/src/components/Settings/EmailAdd.vue
@@ -68,7 +68,7 @@
  :name="field.name"
  :type="field.type"
  />
- <p class="text-xs text-gray-500">{{ field.description }}</p>
+ <p class="text-gray-500 text-p-sm">{{ field.description }}</p>
  </div>
  </div>
  <ErrorMessage v-if="error" class="ml-1" :message="error" />

diff --git a/desk/src/components/Settings/EmailEdit.vue b/desk/src/components/Settings/EmailEdit.vue
@@ -52,7 +52,7 @@
  :name="field.name"
  :type="field.type"
  />
- <p class="text-xs text-gray-500">{{ field.description }}</p>
+ <p class="text-p-sm text-gray-500">{{ field.description }}</p>
  </div>
  </div>
  <ErrorMessage v-if="error" class="ml-1" :message="error" />

diff --git a/desk/src/pages/KnowledgeBaseArticle.vue b/desk/src/pages/KnowledgeBaseArticle.vue
@@ -19,8 +19,9 @@
  </template>
  </PageTitle>
  <div class="overflow-auto">
- <div class="container m-auto my-12">
+ <div class="mx-5 my-12">
  <TextEditor
+ v-if="textEditorContentWithIDs"
  :content="textEditorContentWithIDs"
  :editable="editMode"
  :placeholder="placeholder"
@@ -47,6 +48,9 @@
  />
  </template>
  </TextEditor>
+ <div v-else class="text-gray-500 text-2xl font-semibold mb-5">
+ Article Not Found
+ </div>
  <RouterLink
  v-if="route.meta.public"
  :to="{ name: CUSTOMER_PORTAL_NEW_TICKET }"
@@ -93,7 +97,6 @@ import KnowledgeBaseArticleActionsNew from "./knowledge-base/KnowledgeBaseArticl
 import KnowledgeBaseArticleActionsView from "./knowledge-base/KnowledgeBaseArticleActionsView.vue";
 import KnowledgeBaseArticleTopEdit from "./knowledge-base/KnowledgeBaseArticleTopEdit.vue";
 import KnowledgeBaseArticleTopNew from "./knowledge-base/KnowledgeBaseArticleTopNew.vue";
-import KnowledgeBaseArticleTopPublic from "./knowledge-base/KnowledgeBaseArticleTopPublic.vue";
 import KnowledgeBaseArticleTopView from "./knowledge-base/KnowledgeBaseArticleTopView.vue";
 import { Extension } from "@tiptap/core";
 
@@ -408,7 +411,7 @@ const PreserveIds: Extension = Extension.create({
 });
 
 const textEditorContentWithIDs = computed(() =>
- addLinksToHeadings(article.data?.content)
+ article.data?.content ? addLinksToHeadings(article.data?.content) : null
 );
 
 function addLinksToHeadings(content: string) {

diff --git a/desk/src/pages/TicketNew.vue b/desk/src/pages/TicketNew.vue
@@ -5,81 +5,84 @@
  title="New"
  :current="route.name"
  />
- <div v-if="template.data?.about" class="mx-5 my-3">
- <div class="prose-f" v-html="sanitize(template.data.about)" />
- </div>
- <div class="grid grid-cols-1 gap-4 px-5 sm:grid-cols-3">
- <UniInput
- v-for="field in visibleFields"
- :key="field.fieldname"
- :field="field"
- :value="templateFields[field.fieldname]"
- @change="templateFields[field.fieldname] = $event.value"
- />
- </div>
- <div class="m-5">
- <FormControl
- v-model="subject"
- type="text"
- label="Subject*"
- placeholder="A short description"
- />
- </div>
- <TicketNewArticles
- v-if="isCustomerPortal"
- :search="subject"
- class="mx-5 mb-5"
- />
- <div v-if="isCustomerPortal" class="mx-5 mb-5 h-full">
- <TicketTextEditor
- v-show="subject.length > 2 || description.length > 0"
- ref="editor"
- v-model:attachments="attachments"
- v-model:content="description"
- placeholder="Detailed explanation"
- expand
+ <!-- Container -->
+ <div class="max-w-screen-xl mx-5 flex flex-col gap-5 mb-5">
+ <div v-if="Boolean(template.data?.about)" class="mx-5 my-3">
+ {{ template.data.about }}
+ <div class="prose-f" v-html="sanitize(template.data.about)" />
+ </div>
+ <div
+ class="grid grid-cols-1 gap-4 sm:grid-cols-3"
+ v-if="Boolean(visibleFields)"
  >
- <template #bottom-right>
- <Button
- label="Submit"
- theme="gray"
- variant="solid"
- :disabled="
- $refs.editor.editor.isEmpty || ticket.loading || !subject
- "
- @click="() => ticket.submit()"
- />
- </template>
- </TicketTextEditor>
- <h4
- v-show="subject.length <= 2 && description.length === 0"
- class="flex items-center justify-center text-lg text-gray-500"
- >
- Please enter a subject to continue
- </h4>
- </div>
+ <UniInput
+ v-for="field in visibleFields"
+ :key="field.fieldname"
+ :field="field"
+ :value="templateFields[field.fieldname]"
+ @change="templateFields[field.fieldname] = $event.value"
+ />
+ </div>
+ <div>
+ <FormControl
+ v-model="subject"
+ type="text"
+ label="Subject*"
+ placeholder="A short description"
+ />
+ </div>
+ <TicketNewArticles v-if="isCustomerPortal" :search="subject" />
+ <div v-if="isCustomerPortal">
+ <TicketTextEditor
+ v-show="subject.length > 2 || description.length > 0"
+ ref="editor"
+ v-model:attachments="attachments"
+ v-model:content="description"
+ placeholder="Detailed explanation"
+ expand
+ >
+ <template #bottom-right>
+ <Button
+ label="Submit"
+ theme="gray"
+ variant="solid"
+ :disabled="
+ $refs.editor.editor.isEmpty || ticket.loading || !subject
+ "
+ @click="() => ticket.submit()"
+ />
+ </template>
+ </TicketTextEditor>
+ <h4
+ v-show="subject.length <= 2 && description.length === 0"
+ class="text-lg text-gray-500"
+ >
+ Please enter a subject to continue
+ </h4>
+ </div>
 
- <!-- for agent portal -->
- <div v-else class="mx-5 mb-5 h-full">
- <TicketTextEditor
- ref="editor"
- v-model:attachments="attachments"
- v-model:content="description"
- placeholder="Detailed explanation"
- expand
- >
- <template #bottom-right>
- <Button
- label="Submit"
- theme="gray"
- variant="solid"
- :disabled="
- $refs.editor.editor.isEmpty || ticket.loading || !subject
- "
- @click="() => ticket.submit()"
- />
- </template>
- </TicketTextEditor>
+ <!-- for agent portal -->
+ <div v-else>
+ <TicketTextEditor
+ ref="editor"
+ v-model:attachments="attachments"
+ v-model:content="description"
+ placeholder="Detailed explanation"
+ expand
+ >
+ <template #bottom-right>
+ <Button
+ label="Submit"
+ theme="gray"
+ variant="solid"
+ :disabled="
+ $refs.editor.editor.isEmpty || ticket.loading || !subject
+ "
+ @click="() => ticket.submit()"
+ />
+ </template>
+ </TicketTextEditor>
+ </div>
  </div>
  </div>
 </template>

diff --git a/desk/src/pages/ticket/TicketNewArticles.vue b/desk/src/pages/ticket/TicketNewArticles.vue
@@ -12,7 +12,7 @@
  }"
  target="_blank"
  >
- <span class="text-xs">(View All)</span>
+ <span class="text-xs underline">(View All)</span>
  </RouterLink>
  </div>
  <dl>
@@ -22,7 +22,7 @@
  class="focus:ring-cyan-30 rounded-md border-2 border-hidden p-4 hover:bg-cyan-100 focus:outline-none focus:ring active:bg-cyan-50"
  >
  <RouterLink
- class="group cursor-pointer hover:text-gray-900"
+ class="group cursor-pointer hover:text-gray-900 flex flex-col gap-2"
  :to="{
  name: 'KBArticlePublicNew',
  params: {
@@ -34,7 +34,7 @@
  >
  <dt class="font-semibold">{{ a.subject }} - {{ a.headings }}</dt>
  <!-- eslint-disable-next-line vue/no-v-html -->
- <dd class="font-light" v-html="a.description"></dd>
+ <dd class="font-light text-p-sm" v-html="a.description"></dd>
  </RouterLink>
  </div>
  </dl>