From dc48e3517a06092ad3f6f9e9e4d443079c83b498 Mon Sep 17 00:00:00 2001
From: David <dmendez@ebi.ac.uk>
Date: Tue, 3 Aug 2021 09:31:56 -0500
Subject: [PATCH] Eubopen Compoud: improve style of calculated properties
---
.../chemical_probe/CalculatedProperties.vue | 64 +++++++------------
.../CellularAssayTargetEngagement.vue | 2 +-
.../chemical_probe/CrystalStructures.vue | 2 +-
.../chemical_probe/ProbeProfile.vue | 2 +-
4 files changed, 26 insertions(+), 44 deletions(-)
diff --git a/components/report_cards/chemical_probe/CalculatedProperties.vue b/components/report_cards/chemical_probe/CalculatedProperties.vue
index 9a80468..e4a5b64 100644
--- a/components/report_cards/chemical_probe/CalculatedProperties.vue
+++ b/components/report_cards/chemical_probe/CalculatedProperties.vue
@@ -1,47 +1,31 @@
<template>
<v-card>
<v-card-text>
- <v-row>
- <v-col cols="12" md="6">
+ <v-row dense no-gutters>
+ <v-col
+ v-for="item in properties"
+ :key="item.propLabel"
+ cols="12"
+ sm="6"
+ lg="4"
+ xl="3"
+ >
<v-list dense>
- <template v-for="item in properties1">
- <v-list-item :key="item.propLabel">
- <v-list-item-content>
- <v-list-item-title>
- <div class="d-flex justify-space-between">
- <div>
- <b>{{ item.propLabel }}:</b>
- </div>
- <div>
- {{ item.propValue }}
- </div>
+ <v-list-item :key="item.propLabel">
+ <v-list-item-content>
+ <v-list-item-title>
+ <div class="d-flex justify-space-between">
+ <div>
+ <b>{{ item.propLabel }}:</b>
</div>
- </v-list-item-title>
- </v-list-item-content>
- </v-list-item>
- <v-divider :key="`${item.propLabel}-divider`" />
- </template>
- </v-list>
- </v-col>
- <v-col cols="12" md="6">
- <v-list dense>
- <template v-for="item in properties2">
- <v-list-item :key="item.propLabel">
- <v-list-item-content>
- <v-list-item-title>
- <div class="d-flex justify-space-between">
- <div>
- <b>{{ item.propLabel }}:</b>
- </div>
- <div>
- {{ item.propValue }}
- </div>
+ <div>
+ {{ item.propValue }}
</div>
- </v-list-item-title>
- </v-list-item-content>
- </v-list-item>
- <v-divider :key="`${item.propLabel}-divider`" />
- </template>
+ </div>
+ </v-list-item-title>
+ </v-list-item-content>
+ </v-list-item>
+ <v-divider :key="`${item.propLabel}-divider`" />
</v-list>
</v-col>
</v-row>
@@ -53,7 +37,7 @@
export default {
data() {
return {
- properties1: [
+ properties: [
{
propLabel: 'Mol. Weight',
propValue: '494.3',
@@ -94,8 +78,6 @@ export default {
propLabel: 'HBA (Lipinski)',
propValue: '4',
},
- ],
- properties2: [
{
propLabel: 'HBD (Lipinski)',
propValue: '1',
diff --git a/components/report_cards/chemical_probe/CellularAssayTargetEngagement.vue b/components/report_cards/chemical_probe/CellularAssayTargetEngagement.vue
index d507559..e8ba17f 100644
--- a/components/report_cards/chemical_probe/CellularAssayTargetEngagement.vue
+++ b/components/report_cards/chemical_probe/CellularAssayTargetEngagement.vue
@@ -1,5 +1,5 @@
<template>
- <v-card>
+ <v-card class="yellow lighten-4">
<v-card-text>
<p class="text-justify">
In a NanoBRET cellular target engagement assay, PFI-6 displays potent
diff --git a/components/report_cards/chemical_probe/CrystalStructures.vue b/components/report_cards/chemical_probe/CrystalStructures.vue
index 1ee4313..45bb815 100644
--- a/components/report_cards/chemical_probe/CrystalStructures.vue
+++ b/components/report_cards/chemical_probe/CrystalStructures.vue
@@ -1,5 +1,5 @@
<template>
- <v-card>
+ <v-card class="yellow lighten-4">
<v-card-text>
<v-img
src="https://ars.els-cdn.com/content/image/1-s2.0-S0076687916300532-f12-03-9780128053478.jpg"
diff --git a/components/report_cards/chemical_probe/ProbeProfile.vue b/components/report_cards/chemical_probe/ProbeProfile.vue
index 9a97c5a..78cd86a 100644
--- a/components/report_cards/chemical_probe/ProbeProfile.vue
+++ b/components/report_cards/chemical_probe/ProbeProfile.vue
@@ -1,5 +1,5 @@
<template>
- <v-card>
+ <v-card class="yellow lighten-4">
<v-card-text>
<EntityRelations />
</v-card-text>
--
GitLab