Skip to content

Commit 6f88d04

Browse files
dannydoordannydoor
committed
Changed top hits section into best hit, simplified code and refined
1 parent 5752e18 commit 6f88d04

4 files changed

Lines changed: 278 additions & 248 deletions

File tree

‎frontend/TopHitEntries.vue‎

Lines changed: 119 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,22 @@
33
v-if="entry"
44
elevation="2"
55
outlined
6-
width="320"
7-
max-width="320"
8-
min-height="360"
6+
:max-width="$vuetify.breakpoint.width < 960 ? 320 : 900"
97
class="hit-card"
108
:style="{'--active-color': entry.color}"
119
>
12-
<v-tooltip bottom nudge-top="18px" :color="entry.color">
13-
<template v-slot:activator="{on}">
14-
<v-card-title class="card-title" v-on="on" @click.stop="$emit('jump')">
15-
<span style="font-weight: 700; text-transform: uppercase;" class="card-title-content">{{db}}</span>
16-
<div class="hit-arrow"></div>
17-
</v-card-title>
18-
</template>
19-
<span>Jump to {{ db.toUpperCase() }}</span>
20-
</v-tooltip>
21-
<template v-if="entry.topHit">
22-
<div class="thumbnail-container" style="margin-left: 16px; margin-right: 16px;" @click="$emit('activate')">
23-
<div v-if="isActive" ref="viewerSlot" class="viewer-slot" @click.stop>
10+
<div class="thumbnail-column">
11+
<v-tooltip bottom nudge-top="18px" :color="entry.color">
12+
<template v-slot:activator="{on}">
13+
<v-card-title class="card-title" v-on="on" @click.stop="$emit('jump')">
14+
<span style="font-weight: 700; text-transform: uppercase;" class="card-title-content">{{db}}</span>
15+
<div class="hit-arrow"></div>
16+
</v-card-title>
17+
</template>
18+
<span>Jump to {{ db.toUpperCase() }}</span>
19+
</v-tooltip>
20+
<div class="thumbnail-container" style="margin: 16px;" @click="$emit('activate')">
21+
<div v-if="isActive" ref="viewerSlot" class="viewer-slot" @click.stop @dblclick="$emit('activate')">
2422
<StructureViewerToolbar
2523
:isFullscreen="false"
2624
:isSpinning="isSpinning"
@@ -39,6 +37,9 @@
3937
<img v-else-if="thumbnailUrl" class="thumbnail-img" :src="thumbnailUrl" alt="" />
4038
<v-skeleton-loader height="240" v-else type="image" />
4139
</div>
40+
</div>
41+
<v-divider v-if="$vuetify.breakpoint.mdAndUp" vertical class="hit-card-divider"></v-divider>
42+
<div class="card-content-container">
4243
<v-card-text>
4344
<div class="card-content-entry" :data-label="searchType === 'interfacesearch' ? 'Query Interface TM-score' : 'Query TM-score'" v-if="entry.qTM">
4445
<span>{{ entry.qTM }}</span>
@@ -47,15 +48,26 @@
4748
<span>{{ entry.tTM }}</span>
4849
</div>
4950
<div class="card-content-entry" :data-label="mode == 1 ? 'Chain Pairing' : 'Target'">
50-
<v-select v-if="mode == 1 && entry.topHit.length > 1"
51-
v-model="selectedObject" :items="entry.topHit"
52-
class="multichain-select"
53-
item-text="title" return-object dense
54-
:item-color="entry.color"
55-
hide-details
56-
style="font-size: 12px; max-width: 187px;"
57-
flat solo single-line
58-
></v-select>
51+
<v-menu v-if="mode == 1 && entry.topHit.length > 1" offset-y left :nudge-bottom="4">
52+
<template v-slot:activator="{on, attrs, value}">
53+
<button type="button" class="pairing-picker"
54+
:class="{'pairing-picker--open': value}"
55+
:title="selectedObject.title"
56+
v-bind="attrs" v-on="on" @click.stop
57+
>
58+
<span>{{ selectedObject.title }}</span>
59+
<v-icon size="18">{{ $MDI.ChevronDown }}</v-icon>
60+
</button>
61+
</template>
62+
<v-list dense>
63+
<v-list-item v-for="pair in entry.topHit" :key="pair.title"
64+
:input-value="pair === selectedObject" :color="entry.color"
65+
@click="selectedObject = pair"
66+
>
67+
<v-list-item-title>{{ pair.title }}</v-list-item-title>
68+
</v-list-item>
69+
</v-list>
70+
</v-menu>
5971
<span v-else>
6072
{{ mode == 1
6173
? selectedObject.title
@@ -95,22 +107,7 @@
95107
</div>
96108
</template>
97109
</v-card-text>
98-
</template>
99-
<template v-else>
100-
<v-card-text style="
101-
display: flex;
102-
align-items: center;
103-
justify-content: center;
104-
font-size: 1rem;
105-
height: 296px;
106-
">
107-
<span
108-
style="
109-
transform: translateY(-24px);
110-
"
111-
>No hit :(</span>
112-
</v-card-text>
113-
</template>
110+
</div>
114111
</v-card>
115112
</template>
116113

@@ -164,6 +161,13 @@ export default {
164161
this.selectedObject = this.entry.topHit[0]
165162
}
166163
},
164+
watch: {
165+
entry(entry) {
166+
if (entry?.topHit && !entry.topHit.includes(this.selectedObject)) {
167+
this.selectedObject = entry.topHit[0]
168+
}
169+
},
170+
},
167171
computed: {
168172
db() {
169173
return this.entry?.db.replaceAll(/_folddisco$/g, '')
@@ -222,10 +226,7 @@ export default {
222226
60% { transform: translateX(0); }
223227
100% { transform: translateX(0); }
224228
}
225-
226-
/* .hit-arrow:hover {
227-
animation: wiggle-and-pause 3.2s infinite;
228-
} */
229+
229230
230231
.card-title {
231232
cursor: pointer;
@@ -297,8 +298,82 @@ export default {
297298
word-wrap: anywhere;
298299
}
299300
301+
.card-content-entry > .pairing-picker {
302+
flex: 0 1 auto;
303+
min-width: 0;
304+
margin-left: auto;
305+
display: inline-flex;
306+
align-items: center;
307+
gap: 2px;
308+
padding: 0;
309+
border: 0;
310+
background: none;
311+
font: inherit;
312+
color: inherit;
313+
cursor: pointer;
314+
}
315+
316+
.pairing-picker > span {
317+
overflow: hidden;
318+
text-overflow: ellipsis;
319+
white-space: nowrap;
320+
}
321+
322+
.pairing-picker:hover > span, .pairing-picker--open > span {
323+
text-decoration-style: solid;
324+
text-decoration-color: var(--active-color);
325+
}
326+
327+
.theme--dark .pairing-picker > span {
328+
text-decoration-color: rgba(255, 255, 255, 0.35);
329+
}
330+
331+
.pairing-picker .v-icon {
332+
color: var(--active-color);
333+
transition: transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
334+
}
335+
336+
.pairing-picker--open .v-icon {
337+
transform: rotate(180deg);
338+
}
339+
340+
.pairing-picker:focus-visible {
341+
outline: 2px solid var(--active-color);
342+
outline-offset: 2px;
343+
border-radius: 2px;
344+
}
345+
300346
.hit-card {
301347
transition: box-shadow 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
348+
display: flex;
349+
flex-direction: row;
350+
align-items: flex-start;
351+
}
352+
353+
.thumbnail-column {
354+
width: 320px;
355+
flex-shrink: 0;
356+
}
357+
358+
.card-content-container {
359+
flex-grow: 1;
360+
}
361+
362+
.hit-card-divider.v-divider--vertical {
363+
align-self: stretch;
364+
height: auto;
365+
min-height: 0;
366+
max-height: none;
367+
margin: 16px 0;
368+
}
369+
370+
@media screen and (max-width: 959px) {
371+
.hit-card {
372+
flex-direction: column;
373+
}
374+
.card-content-container {
375+
flex-grow: 0;
376+
}
302377
}
303378
304379
.hit-card:hover {
@@ -334,10 +409,6 @@ export default {
334409
335410
<style>
336411
337-
.multichain-select > .v-input__control > .v-input__slot {
338-
padding: 0px !important;
339-
}
340-
341412
.hit-card div.ruler {
342413
margin: 10px 0;
343414
}

0 commit comments

Comments
 (0)