Chemical Probe: start to add mockup page

components/report_cards/chemical_probe/ChemicalProbeReportCard.vue

+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="9">
+        <h1 class="primary--text">PFI-6: A Chemical Probe for human MLLT1/3</h1>
+        <v-divider />
+        <br />
+        <v-row>
+          <v-col cols="12">
+            <h2 class="primary--text">Summary</h2>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col cols="12"> <Summary /> </v-col>
+        </v-row>
+        <v-row>
+          <v-col cols="12">
+            <h2 class="primary--text">
+              Chemical Probe & Negative Control Structures and Use
+            </h2>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col cols="12"> <ControlStructuresAndUse /> </v-col>
+        </v-row>
+      </v-col>
+      <v-col cols="3"> Index </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import Summary from '~/components/report_cards/chemical_probe/Summary.vue'
+import ControlStructuresAndUse from '~/components/report_cards/chemical_probe/ControlStructuresAndUse.vue'
+export default {
+  components: {
+    Summary,
+    ControlStructuresAndUse,
+  },
+}
+</script>
+
+<style></style>

components/report_cards/chemical_probe/ControlStructuresAndUse.vue

+<template>
+  <v-card>
+    <v-card-text>
+      <v-row>
+        <v-col cols="6">
+          <v-card tile elevation="0">
+            <v-card-title>PFI-6 Chemical Probe</v-card-title>
+          </v-card>
+        </v-col>
+        <v-col cols="6">
+          <v-card tile elevation="0">
+            <v-card-title>PFI-6N Negative Control</v-card-title>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style></style>

components/report_cards/chemical_probe/Summary.vue

+<template>
+  <v-card>
+    <v-card-subtitle>Overview</v-card-subtitle>
+    <v-divider />
+    <v-card-text>
+      The small YEATS protein domain is found in four human proteins, including
+      MLLT1 and MLLT3, and is an epigenetic reader of acetyl-lysine histone
+      marks. MLLT1 has been found to be a driver of acute myeloid leukaemia. A
+      collaboration between Pfizer and the SGC has resulted in the discovery of
+      PFI-6, a potent disrupter of protein:protein interactions involving the
+      YEATS domains of MLLT1/3.
+    </v-card-text>
+    <v-divider />
+    <v-card-subtitle>Details</v-card-subtitle>
+    <v-divider />
+    <v-card-text>
+      <v-row class="details-row" dense>
+        <v-col cols="12">
+          <b>Chemical Probe Name:</b>
+          PFI-6
+        </v-col>
+      </v-row>
+      <v-divider />
+      <v-row class="details-row" dense>
+        <v-col cols="12">
+          <b>Negative control compound:</b>
+          PFI-6N
+        </v-col>
+      </v-row>
+      <v-divider />
+      <v-row class="details-row" dense>
+        <v-col cols="12">
+          <b>Target(s) (synonyms):</b>
+          MLLT1/MLLT3 (ENL;LTG19;YEATS1 / AF- 9;YEATS3)
+        </v-col>
+      </v-row>
+      <v-divider />
+      <v-row class="details-row" dense>
+        <v-col cols="12">
+          <b>Recommended in vitro assay concentration:</b>
+          <p>
+            10 µM for PFI-6 and PFI-6N; use with negative control and orthogonal
+            probe for best interpretation of data
+          </p>
+        </v-col>
+      </v-row>
+      <v-divider />
+      <v-row class="details-row" dense>
+        <v-col cols="12">
+          <b>Web link for more details:</b>
+          <a href="https://www.thesgc.org/chemical-probes/PFI-6" target="_blank"
+            >https://www.thesgc.org/chemical-probes/PFI-6</a
+          >
+        </v-col>
+      </v-row>
+      <v-divider />
+
+      <v-row class="details-row" dense>
+        <v-col cols="12">
+          <b>Protein Target Classification:</b>
+          <br />
+          <br />
+          <p>
+            <v-chip outlined color="secondary" label>
+              Unclassified protein
+            </v-chip>
+            >
+            <v-chip outlined color="secondary" label>
+              Epigenetic regulator
+            </v-chip>
+            >
+            <v-chip outlined color="secondary" label> Reader </v-chip>
+            >
+            <v-chip outlined color="secondary" label> Bromodomain </v-chip>
+          </p>
+        </v-col>
+      </v-row>
+      <v-divider />
+
+      <v-row class="details-row" dense>
+        <v-col cols="12">
+          <b>Publications:</b>
+          None at the time of writing
+        </v-col>
+      </v-row>
+      <v-divider />
+
+      <v-row class="details-row" dense>
+        <v-col cols="12">
+          <b>Orthogonal chemical probes:</b>
+          NVS-MLLT-1
+        </v-col>
+      </v-row>
+      <v-divider />
+
+      <v-row class="details-row" dense>
+        <v-col cols="12">
+          <b>Cellular assay(s) for target-engagement:</b>
+          NanoBRET FRAP
+        </v-col>
+      </v-row>
+      <v-divider />
+
+      <v-row class="details-row" dense>
+        <v-col cols="12">
+          <b>Suitable for in vivo use:</b>
+          no
+        </v-col>
+      </v-row>
+      <v-divider />
+    </v-card-text>
+
+    <v-card-actions>
+      <v-btn
+        href="https://drive.google.com/file/d/1FQOGQxTdcIfTeM1Vq73vbHOEJ0ZptkHV/view?usp=sharing"
+        color="primary"
+      >
+        <v-icon>mdi-download</v-icon> PDF
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style>
+.details-row {
+  margin: 0;
+}
+</style>

pages/chemical_probe/_id.vue

+<template>
+  <div><ChemicalProbeReportCard /></div>
+</template>
+
+<script>
+import ChemicalProbeReportCard from '~/components/report_cards/chemical_probe/ChemicalProbeReportCard.vue'
+export default {
+  components: {
+    ChemicalProbeReportCard,
+  },
+}
+</script>
+
+<style></style>