Skip to content

Commit 7ec5c8d

Browse files
prakhyatoxprakhyatox
committed
updating description of the selected subject in subject browser
1 parent a8c5de5 commit 7ec5c8d

4 files changed

Lines changed: 53 additions & 38 deletions

File tree

‎.eslintrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ module.exports = {
1515
"no-console": process.env.VITE_NODE_ENV === "production" ? "error" : "off",
1616
"no-debugger": process.env.VITE_NODE_ENV === "production" ? "error" : "off",
1717
"vue/multi-word-component-names": "off",
18+
"quote-props": ["error", "as-needed"],
1819
"vue/order-in-components": [
1920
"error",
2021
{

‎src/components/Icon.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export default {
3636
size: { default: "10", type: String },
3737
fallback: { default: "undefined", type: String },
3838
wrapperClass: { default: "icon-container", type: String },
39-
height: { default: 45, type: String || Number },
39+
height: { default: 45 },
4040
color: { default: null, type: String },
4141
},
4242
data() {
@@ -61,6 +61,7 @@ export default {
6161
cursor: help;
6262
color: #0000008a;
6363
}
64+
6465
.alt-container {
6566
position: absolute;
6667
background: white;

‎src/components/Ontologies/TermDetails.vue‎

Lines changed: 41 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,38 @@
11
<template>
22
<div id="termDetails" class="px-3">
33
<!-- BACK BUTTON -->
4-
<div class="pl-3">
4+
<div class="pl-3 mt-4">
55
<v-chip
6-
:class="`${color}--text ${color}--border mb-3 cursor-pointer white`"
6+
:class="`text-${color} border-${color} border border-solid border-opacity-100 mb-3 cursor-pointer bg-white`"
7+
variant="elevated"
78
@click="$router.push({ path: '/browse/subject' })"
89
>
9-
<v-icon :class="`${color}--text`"> fa-arrow-left </v-icon>
10-
<span :class="`${color}--text ml-3`"> GO BACK TO GRAPH </span>
10+
<v-icon :class="`text-${color}`"> fas fa-arrow-left</v-icon>
11+
<span :class="`text-${color} ml-3`"> GO BACK TO GRAPH </span>
1112
</v-chip>
1213
</div>
1314

1415
<!-- TERM METADATA -->
1516
<v-card class="pt-3 d-flex flex-column justify-center align-center">
16-
<v-card-title id="metadata" class="d-flex flex-column">
17+
<v-card-title
18+
id="metadata"
19+
class="d-flex flex-column justify-center align-center"
20+
>
1721
<div
18-
:class="`${color} text-white`"
22+
:class="`bg-${color} text-white`"
1923
class="d-flex justify-center align-center hits largeHits"
2024
>
2125
{{ selectedTerm.records_count ? selectedTerm.records_count : 0 }}
2226
</div>
23-
<span :class="`${color}--text text-h4 mb-2`">
27+
<span :class="`text-${color} text-h4 mb-2`">
2428
{{ selectedTerm.name }}
2529
</span>
2630
</v-card-title>
2731
<v-card-subtitle class="subTitle">
28-
<div class="text-center">
32+
<div class="text-center" style="white-space: normal">
2933
{{ selectedTerm.description }}
3034
</div>
31-
<v-divider />
35+
<v-divider class="opacity-100" />
3236
<v-container fluid>
3337
<v-row class="py-0 my-0">
3438
<v-col cols="4 my-0 py-0">
@@ -48,7 +52,7 @@
4852
<v-chip
4953
v-for="(ancestor, ancestorKey) in ancestors"
5054
:key="'ancestor_' + ancestorKey"
51-
:class="`${color}--text ${color}--border`"
55+
:class="`text-${color} border-${color}`"
5256
class="bg-white mr-2 mt-1"
5357
@click="goToTerm(ancestor)"
5458
>
@@ -64,10 +68,10 @@
6468
</v-card-subtitle>
6569

6670
<!-- SEARCH OUTPUT -->
67-
<v-card-text id="termSearchResults" class="px-0 pb-0 mt-5">
68-
<v-divider />
71+
<v-card-text id="termSearchResults" class="px-0 pb-0 mt-5 full-width">
72+
<v-divider class="opacity-100" />
6973
<h5
70-
:class="`${color}--text mb-4 text-decoration-underline text-h5 px-4`"
74+
:class="`text-${color} mb-4 text-decoration-underline text-h5 px-4`"
7175
>
7276
Records with this {{ selectedOntology }}:
7377
</h5>
@@ -81,42 +85,44 @@
8185
<v-select
8286
v-model="perPage"
8387
:items="[10, 20, 50, 100]"
84-
style="flex-grow: 0"
8588
class="ml-5"
89+
density="compact"
90+
hide-details
91+
style="flex-grow: 0"
8692
/>
8793
</div>
8894
<div class="pager flex-row d-flex align-center">
8995
Showing {{ min }} to {{ min + perPage - 1 }}
9096
<v-icon
91-
class="ml-5 mr-10"
9297
:disabled="currentPage === 1"
98+
class="ml-5 mr-10"
9399
@click="setPage(-1)"
94100
>
95-
fa-chevron-left
101+
fas fa-chevron-left
96102
</v-icon>
97103
<v-icon :disabled="currentPage === totalPages" @click="setPage(1)">
98-
fa-chevron-right
104+
fas fa-chevron-right
99105
</v-icon>
100106
</div>
101107
</div>
102108
<v-data-table
103-
:items="records"
104109
:headers="headers"
105-
:disable-pagination="true"
106-
:hide-default-footer="true"
107-
text-center
110+
:items="records"
111+
:no-data-text="`Cannot find any record with this ${selectedOntology}`"
108112
class="fixedHeight d-block"
113+
hide-default-footer
114+
items-per-page="-1"
109115
mobile-breakpoint="760"
110-
:no-data-text="`Cannot find any record with this ${selectedOntology}`"
116+
text-center
111117
>
112118
<template #[`item.name`]="{ item }">
113-
<div :class="color + '--text'" class="noBreak">
119+
<div :class="'text-' + color" class="noBreak">
114120
<a
115-
class="d-flex align-center cursor-pointer"
116121
:href="`/${item.id}`"
122+
class="d-flex align-center cursor-pointer"
117123
>
118-
<v-avatar size="30" class="mr-3">
119-
<Icon :item="item.type" :height="30" wrapper-class="" />
124+
<v-avatar class="mr-3" size="30">
125+
<Icon :item="item.type" height="30" wrapper-class="" />
120126
</v-avatar>
121127
{{ item.name }}
122128
</a>
@@ -218,50 +224,56 @@ export default {
218224
.cell {
219225
padding: 10px 20px !important;
220226
}
227+
221228
.fixedHeight {
222229
min-height: 40vh;
223230
max-height: 50vh;
224231
overflow-y: scroll;
225232
}
226-
.inputGroup .v-input {
227-
width: 70px;
228-
}
233+
229234
.largeChips {
230235
height: 50px;
231236
border-radius: 40px;
232237
padding-left: 40px;
233238
padding-right: 40px;
234239
}
240+
235241
.largeHits {
236242
width: 100px;
237243
height: 100px;
238244
font-size: 30px;
239245
border-radius: 50%;
240246
margin-bottom: 10px;
241247
}
248+
242249
.subject_color--border {
243250
border: 1px solid;
244251
border-color: #e67e22 !important;
245252
}
253+
246254
.domain_color--border {
247255
border: 1px solid;
248256
border-color: #712727 !important;
249257
}
258+
250259
@media (max-width: 760px) {
251260
.inputGroup {
252261
flex-direction: column !important;
253262
}
263+
254264
.perPageSelector {
255265
margin-top: 15px;
256266
margin-bottom: 15px;
257267
}
258268
}
269+
259270
@media (min-width: 761px) {
260271
.perPageSelector {
261272
margin-right: 30px;
262273
margin-left: 30px;
263274
}
264275
}
276+
265277
@media (min-width: 1904px) {
266278
.subTitle {
267279
max-width: 50%;

‎src/components/Records/Shared/RecordStatus.vue‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
1+
<template>
22
<div>
33
<div
44
v-if="recordType && !showOnlyStatus"
55
:class="showStatus ? 'circle-container' : 'circle-container-dashed'"
66
>
77
<v-tooltip location="end" offset="25">
88
<template #activator="{ props }">
9-
<v-avatar size="80" :alt="getRecordStatus.title" v-bind="props">
10-
<Icon :item="record.type" wrapper-class="" :height="80" />
9+
<v-avatar :alt="getRecordStatus.title" size="80" v-bind="props">
10+
<Icon :height="80" :item="record.type" wrapper-class="" />
1111
</v-avatar>
1212
</template>
1313
<span v-if="recordType[record.type]">{{
@@ -18,8 +18,8 @@
1818
<v-tooltip v-if="showStatus" location="right">
1919
<template #activator="{ props }">
2020
<span
21-
class="text-white text-h5 circle"
2221
:style="getRecordStatus.backColor"
22+
class="text-white text-h5 circle"
2323
v-bind="props"
2424
><p>{{ getRecordStatus.title }}</p></span
2525
>
@@ -35,8 +35,8 @@
3535
<v-tooltip v-if="showStatus" location="top">
3636
<template #activator="{ props }">
3737
<p
38-
class="text-white text-h5 circle text-center d-flex align-center justify-center mb-0"
3938
:style="getRecordStatus.backColor"
39+
class="text-white text-h5 circle text-center d-flex align-center justify-center mb-0"
4040
v-bind="props"
4141
>
4242
<span>{{ getRecordStatus.title }}</span>
@@ -50,8 +50,7 @@
5050

5151
<script>
5252
import Icon from "@/components/Icon";
53-
import { useTheme } from "vuetify";
54-
// Lighten or darken the color using javascript
53+
import { useTheme } from "vuetify"; // Lighten or darken the color using javascript
5554
import { LightenDarkenColor } from "@/utils/generalUtils";
5655
import customIcons from "@/plugins/icons";
5756
@@ -121,7 +120,7 @@ export default {
121120
};
122121
</script>
123122

124-
<style scoped lang="scss">
123+
<style lang="scss" scoped>
125124
.circle-container {
126125
position: relative;
127126
border: #b3b3b3 dotted 3px;
@@ -171,6 +170,7 @@ export default {
171170
-webkit-border-radius: 50%;
172171
width: 86px;
173172
height: 87px;
173+
174174
.circle {
175175
position: absolute;
176176
left: 26%;
@@ -190,6 +190,7 @@ export default {
190190
border-radius: 50%;
191191
-moz-border-radius: 50%;
192192
-webkit-border-radius: 50%;
193+
193194
.circle {
194195
height: 36px;
195196
width: 36px;

0 commit comments

Comments
 (0)