Skip to content
Snippets Groups Projects
Commit 7cd69cb9 authored by Muhammad Arsalan's avatar Muhammad Arsalan
Browse files

:art: UI improvements

parent 2db6803b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
components/detailPage/Intro.vue
+ 3
− 3
View file @ 7cd69cb9
......@@ -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>
......
components/search/ResultsList.vue
+ 109
− 104
View file @ 7cd69cb9
......@@ -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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment