From 7cd69cb9ee131281f5c094055a9cf56518d1ef27 Mon Sep 17 00:00:00 2001
From: Muhammad Arsalan <muhammad@ebi.ac.uk>
Date: Wed, 11 Oct 2023 13:49:28 +0100
Subject: [PATCH] :art: UI improvements
---
components/detailPage/Intro.vue | 6 +-
components/search/ResultsList.vue | 213 +++++++++++++++---------------
2 files changed, 112 insertions(+), 107 deletions(-)
diff --git a/components/detailPage/Intro.vue b/components/detailPage/Intro.vue
index 57cc636..42aea44 100644
--- a/components/detailPage/Intro.vue
+++ b/components/detailPage/Intro.vue
@@ -29,8 +29,8 @@
{{ entity.chebi_accession }} - <span v-html="entity.name"></span>
</h2>
<v-row class="">
- <v-col cols="12" md="4">
- <div v-if="entity.svg" class="image-container">
+ <v-col md="4" v-if="entity.svg">
+ <div class="image-container">
<client-only>
<vue-image-zoomer :regular="`${mediaBaseURL}${entity.svg}`" />
</client-only>
@@ -46,7 +46,7 @@
><br />
</div>
</v-col>
- <v-col cols="12" md="8">
+ <v-col :md="entity.svg ? 8 : 12">
<v-table hover density="comfortable">
<tbody>
<tr>
diff --git a/components/search/ResultsList.vue b/components/search/ResultsList.vue
index 49955af..5335953 100644
--- a/components/search/ResultsList.vue
+++ b/components/search/ResultsList.vue
@@ -10,13 +10,13 @@
xs="12"
>
<v-hover v-slot="{ isHovering, props }">
- <v-card
- v-bind="props"
- :elevation="isHovering ? 24 : 6"
- style="height: 100%; display: flex; flex-direction: column"
- >
- <v-card-title v-if="result._source.name.length > 65">
- <NuxtLink :href="'/CHEBI:' + result._id" class="vf-link">
+ <NuxtLink :href="'/CHEBI:' + result._id" class="vf-link">
+ <v-card
+ v-bind="props"
+ :elevation="isHovering ? 24 : 6"
+ style="height: 100%; display: flex; flex-direction: column"
+ >
+ <v-card-title v-if="result._source.name.length > 65">
<v-tooltip :text="result._source.ascii_name">
<template v-slot:activator="{ props }">
<h4
@@ -26,118 +26,120 @@
></h4>
</template>
</v-tooltip>
- </NuxtLink>
- </v-card-title>
- <v-card-title v-else>
- <NuxtLink :href="'/CHEBI:' + result._id" class="vf-link">
+ </v-card-title>
+ <v-card-title v-else>
<h4
class="headline text-overflow-adjust"
v-html="result._source.name"
></h4>
- </NuxtLink>
- </v-card-title>
- <!-- Card body display if SVG structure exists -->
- <v-row style="flex: 1" v-if="result._source.default_structure">
- <v-col
- cols="4"
- style="
- display: flex;
- justify-content: center;
- align-items: center;
- padding-right: 0px;
- "
- >
- <v-img
- :src="
- mediaBaseUrl + result._source.default_structure + '.svg'
+ </v-card-title>
+ <!-- Card body display if SVG structure exists -->
+ <v-row style="flex: 1" v-if="result._source.default_structure">
+ <v-col
+ cols="4"
+ style="
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding-right: 0px;
"
- ></v-img>
- </v-col>
- <v-col cols="8">
- <v-card-text>
- <div class="text-overflow-adjust">
- <b>CHEBI:{{ result._id }} </b><br />
- </div>
- <div class="text-overflow-adjust">
- <b>Stars:</b>
- <SharedDisplayStars
- :stars="result._source.stars"
- :show-tooltip="false"
- />
- </div>
- <div>
- <div
- class="text-overflow-adjust"
- v-if="result._source.formula"
- >
- <b>Formula: </b>{{ result._source.formula }}<br />
+ >
+ <v-img
+ :src="
+ mediaBaseUrl + result._source.default_structure + '.svg'
+ "
+ ></v-img>
+ </v-col>
+ <v-col cols="8">
+ <v-card-text>
+ <div class="text-overflow-adjust">
+ <b>CHEBI:{{ result._id }} </b><br />
</div>
- <div
- class="text-overflow-adjust"
- v-if="result._source.mass"
- >
- <b>Mass: </b>{{ result._source.mass }}<br />
+ <div class="text-overflow-adjust">
+ <b>Stars:</b>
+ <SharedDisplayStars
+ :stars="result._source.stars"
+ :show-tooltip="false"
+ />
</div>
- <div
- class="text-overflow-adjust"
- v-if="result._source.charge"
- >
- <b>Charge: </b>{{ result._source.charge }}<br />
+ <div>
+ <div
+ class="text-overflow-adjust"
+ v-if="result._source.formula"
+ >
+ <b>Formula: </b>{{ result._source.formula }}<br />
+ </div>
+ <div
+ class="text-overflow-adjust"
+ v-if="result._source.mass"
+ >
+ <b>Mass: </b>{{ result._source.mass }}<br />
+ </div>
+ <div
+ class="text-overflow-adjust"
+ v-if="result._source.charge"
+ >
+ <b>Charge: </b>{{ result._source.charge }}<br />
+ </div>
</div>
- </div>
- </v-card-text>
- </v-col>
- </v-row>
+ </v-card-text>
+ </v-col>
+ </v-row>
- <!-- Card body display if structure does not exist (show definition instead) -->
- <v-row style="flex: 1" v-else>
- <v-col
- cols="12"
- style="
- display: flex;
- justify-content: center;
- align-items: center;
- padding-right: 0px;
- "
- >
- <v-card-text>
- <div class="text-overflow-adjust">
- <b>CHEBI:{{ result._id }} </b><br />
- </div>
- <div class="text-overflow-adjust">
- <b>Stars:</b>
- <SharedDisplayStars
- :stars="result._source.stars"
- :show-tooltip="false"
- />
- </div>
- <div>
- <div
- class="text-overflow-adjust"
- v-if="result._source.formula"
- >
- <b>Formula: </b>{{ result._source.formula }}<br />
+ <!-- Card body display if structure does not exist (show definition instead) -->
+ <v-row style="flex: 1" v-else>
+ <v-col
+ cols="12"
+ style="
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding-right: 0px;
+ "
+ >
+ <v-card-text>
+ <div class="text-overflow-adjust">
+ <b>CHEBI:{{ result._id }} </b><br />
</div>
- <div
- class="text-overflow-adjust"
- v-if="result._source.mass"
- >
- <b>Mass: </b>{{ result._source.mass }}<br />
+ <div class="text-overflow-adjust">
+ <b>Stars:</b>
+ <SharedDisplayStars
+ :stars="result._source.stars"
+ :show-tooltip="false"
+ />
+ </div>
+ <div>
+ <div
+ class="text-overflow-adjust"
+ v-if="result._source.formula"
+ >
+ <b>Formula: </b>{{ result._source.formula }}<br />
+ </div>
+ <div
+ class="text-overflow-adjust"
+ v-if="result._source.mass"
+ >
+ <b>Mass: </b>{{ result._source.mass }}<br />
+ </div>
+ <div
+ class="text-overflow-adjust"
+ v-if="result._source.charge"
+ >
+ <b>Charge: </b>{{ result._source.charge }}<br />
+ </div>
</div>
<div
class="text-overflow-adjust"
- v-if="result._source.charge"
+ style="-webkit-line-clamp: 3"
+ v-if="result._source.definition"
>
- <b>Charge: </b>{{ result._source.charge }}<br />
+ <b>Definition: </b>{{ result._source.definition }}
</div>
- </div>
- <div class="" v-if="result._source.definition">
- <b>Definition: </b>{{ result._source.definition }}
- </div>
- </v-card-text>
- </v-col>
- </v-row>
- </v-card>
+ </v-card-text>
+ </v-col>
+ </v-row>
+ </v-card>
+ </NuxtLink>
</v-hover>
</v-col>
</v-row>
@@ -175,4 +177,7 @@ defineProps<{
-webkit-box-orient: vertical;
white-space: normal;
}
+.vf-link:hover{
+ text-decoration: none;
+}
</style>
--
GitLab