Merge pull request #830 from IATI/report-page

Restoring some previous styles
IATI · Dec 17, 2024 · fb77507 · fb77507
2 parents 1e9919d + 600f480
commit fb77507
Show file tree

Hide file tree

Showing 11 changed files with 27 additions and 16 deletions.
diff --git a/src/components/AppAccordion.vue b/src/components/AppAccordion.vue
@@ -12,7 +12,11 @@
 
 <template>
   <div v-auto-animate class="w-full">
-    <button class="relative flex w-full items-center space-x-3" :aria-expanded="isOpen" @click="toggleAccordion()">
+    <button
+      class="relative flex w-full items-center space-x-3 p-0 border-none"
+      :aria-expanded="isOpen"
+      @click="toggleAccordion()"
+    >
       <slot name="title" />
 
       <svg

diff --git a/src/components/AppAlert.vue b/src/components/AppAlert.vue
@@ -12,5 +12,5 @@
 </script>
 
 <template>
-  <div class="border-l-[6px] bg-slate-100 p-3" :class="borderColour"><slot /></div>
+  <div class="border-solid border-0 border-l-[6px] bg-slate-100 p-3" :class="borderColour"><slot /></div>
 </template>
diff --git a/src/components/organisation/DocumentList.vue b/src/components/organisation/DocumentList.vue
@@ -2,7 +2,7 @@
   import { getSortDirection, getSortValue, sortDocuments, sortOptions } from "../../utils";
   import DocumentListItem from "./DocumentListItem.vue";
 
-  const headerClassNames = "hidden border-y border-solid border-gray-300 p-2.5 font-bold sm:block";
+  const headerClassNames = "hidden border-0 border-y border-solid border-gray-300 p-2.5 font-bold sm:block";
   const props = defineProps({
     documents: { type: Object, default: () => {} },
     sortvariable: { type: String, default: "" },

diff --git a/src/components/organisation/DocumentListItem.vue b/src/components/organisation/DocumentListItem.vue
@@ -34,7 +34,7 @@
 
 <template>
   <div
-    class="flex flex-col gap-0 border-t border-solid border-gray-300 odd:bg-white even:bg-slate-100 sm:grid sm:grid-cols-5 sm:border-0"
+    class="flex flex-col gap-0 border border-b-0 border-solid border-gray-300 odd:bg-white even:bg-slate-100 sm:grid sm:grid-cols-5 sm:border-0"
     :class="{
       'hover:bg-gray-200': !hasProperLink(props.document),
       'cursor-pointer': !hasProperLink(props.document),

diff --git a/src/components/report/ActivityErrors.vue b/src/components/report/ActivityErrors.vue
@@ -68,7 +68,7 @@
       </div>
     </template>
     <template #content>
-      <div class="border border-gray-200 p-4">
+      <div class="border border-solid border-gray-200 p-4">
         <FeedbackGroup v-for="activity in pageData" :key="activity.identifier" :activity="activity" />
         <AppPagination v-if="filteredData.length > 10" @next="onNext" @previous="onPrevious">
           <span class="text-sm">Page {{ page }} of {{ Math.ceil(filteredData.length / PAGE_LIMIT) }}</span>

diff --git a/src/components/report/DocumentInfo.vue b/src/components/report/DocumentInfo.vue
@@ -42,7 +42,12 @@
   <div>
     <span>IATI version: {{ props.report.iatiVersion }}</span>
     <span> | Type: {{ props.report.fileType }}</span>
-    <span> | <button @click="downloadCSV()">Download Validation Report CSV</button></span>
+    <span>
+      |
+      <button class="bg-transparent border-none underline p-0 m-0" @click="downloadCSV()">
+        Download Validation Report CSV
+      </button>
+    </span>
   </div>
   <h2 :class="validationStatusClass">{{ validationStatus.caption }}</h2>
 </template>
diff --git a/src/components/report/FileErrors.vue b/src/components/report/FileErrors.vue
@@ -33,7 +33,7 @@
       </div>
     </template>
     <template #content>
-      <div class="border border-gray-200 p-4">
+      <div class="border border-solid border-gray-200 p-4">
         <AppAlert v-if="!messages.length" variant="success">
           <span>
             Congratulations! This IATI {{ props.fileType }} file has successfully passed IATI XML schema validation!

diff --git a/src/components/report/ReportDocumentStatus.vue b/src/components/report/ReportDocumentStatus.vue
@@ -41,10 +41,10 @@
 <template>
   <div
     v-if="props.document"
-    class="flex flex-col gap-0 border-t border-solid border-gray-300 odd:bg-white even:bg-slate-100 sm:grid sm:grid-cols-5 sm:border-0"
+    class="flex flex-col gap-0 border border-solid border-gray-300 odd:bg-white even:bg-slate-100 sm:grid sm:grid-cols-5 sm:border-0"
   >
     <div class="py-2 pb-2 first:pl-3.5" :class="textClasses">
-      <p class="text-base font-bold sm:hidden">File Name</p>
+      <div class="text-base font-bold sm:hidden">File Name</div>
       <a
         v-if="hasProperLink(props.document)"
         :href="props.document.url"
@@ -55,11 +55,11 @@
       <span v-else>{{ fileName }}</span>
     </div>
     <div class="pl-3.5 pt-0 pb-2 sm:py-2" :class="textClasses">
-      <p class="text-base font-bold sm:hidden">Identified in Registry</p>
+      <div class="text-base font-bold sm:hidden">Identified in Registry</div>
       <span>{{ formatDate(props.document.modified || props.document.first_seen) }}</span>
     </div>
     <div class="pt-0 pb-2 pl-3.5 sm:py-2" :class="textClasses">
-      <p class="text-base font-bold sm:hidden">Validated</p>
+      <div class="text-base font-bold sm:hidden">Validated</div>
       <span v-if="validationDate">{{ validationDate }}</span>
       <span v-else>{{ getDocumentDownloadStatus(props.document) }}</span>
     </div>
@@ -68,7 +68,7 @@
       <span :class="validationStatusClass" class="text-base">{{ validationStatus.caption }}</span>
     </div>
     <div class="pt-0 pb-2 pl-3.5 sm:py-2" :class="textClasses">
-      <p class="text-base font-bold sm:hidden">Availability in Datastore</p>
+      <div class="text-base font-bold sm:hidden">Availability in Datastore</div>
       {{ datastoreAvailability }}
     </div>
   </div>

diff --git a/src/pages/OrganisationPage.vue b/src/pages/OrganisationPage.vue
@@ -137,7 +137,9 @@
         </span>
         <span v-if="!reportsLoading">
           |
-          <button @click="downloadCSV()">Download Validation Report CSV</button>
+          <button class="bg-transparent border-none underline p-0 m-0" @click="downloadCSV()">
+            Download Validation Report CSV
+          </button>
         </span>
       </div>
       <div v-if="documents && documents.length" class="flex flex-col sm:mt-0 sm:flex-row">

diff --git a/src/pages/ReportPage.vue b/src/pages/ReportPage.vue
@@ -34,7 +34,7 @@
     !isTestFile ? getDocumentURL(route.params?.name) : null,
     () => fetchDocument(route.params.name),
   );
-  const headerClassNames = "hidden border-b border-solid border-gray-300 p-2.5 font-bold sm:block";
+  const headerClassNames = "hidden border-0 border-y border-solid border-gray-300 p-2.5 font-bold sm:block";
 
   const { data: organisation, error: organisationError } = useSWRV(
     () => document.value && getOrganisationURL(document.value.publisher, "id"),

diff --git a/src/pages/ValidationResult.vue b/src/pages/ValidationResult.vue
@@ -87,7 +87,7 @@
     }
   };
 
-  const headerClassNames = "hidden border-b border-solid border-gray-300 p-2.5 font-bold sm:block";
+  const headerClassNames = "hidden border-0 border-b border-solid border-gray-300 p-2.5 font-bold sm:block";
   const textClasses =
     "overflow-hidden text-ellipsis whitespace-nowrap hover:overflow-visible hover:whitespace-normal text-tiny";
 </script>
@@ -146,7 +146,7 @@
     </div>
   </div>
 
-  <div v-if="workspaceData.length" class="flex gap-2">
+  <div v-if="workspaceData.length" class="flex gap-2 mt-2">
     <button class="iati-button" @click="onAddMoreFiles">Add more files</button>
     <button class="iati-button" @click="onClearWorkspace">Clear workspace</button>
   </div>