Skip to content

Commit

Permalink
fix: updated card - compound and study
Browse files Browse the repository at this point in the history
  • Loading branch information
@CS76
CS76 committed Nov 20, 2023
1 parent 6b5f6ff commit 23863ab
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 131 deletions.
168 changes: 61 additions & 107 deletions resources/js/App/MoleculeCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,120 +6,72 @@
class="p-4 border-b"
:molecule="molecule.canonical_smiles"
></Depictor2D>
<div
v-if="molecule.name && molecule.name != ''"
class="py-4 px-4"
>
<div class="flex items-center">
<div class="mb-1 flex items-center">
<svg
:key="index"
v-for="index in molecule.annotation_level"
class="inline text-yellow-400 h-4 w-4 flex-shrink-0"
x-state:on="Active"
x-state:off="Inactive"
x-state-description='Active: "text-yellow-400", Inactive: "text-gray-200"'
x-description="Heroicon name: mini/star"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
></path>
</svg>
<svg
:key="index"
v-for="index in 5 - molecule.annotation_level"
class="inline text-gray-200 h-4 w-4 flex-shrink-0"
x-state-description='undefined: "text-yellow-400", undefined: "text-gray-200"'
x-description="Heroicon name: mini/star"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
<div class="py-4 px-4">
<Link :href="'/spectra?compound=' + molecule.identifier">
<div class="flex items-center">
<div class="mb-1 flex items-center">
<svg
:key="index"
v-for="index in molecule.annotation_level"
class="inline text-yellow-400 h-4 w-4 flex-shrink-0"
x-state:on="Active"
x-state:off="Inactive"
x-state-description='Active: "text-yellow-400", Inactive: "text-gray-200"'
x-description="Heroicon name: mini/star"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
></path>
</svg>
<svg
:key="index"
v-for="index in 5 -
molecule.annotation_level"
class="inline text-gray-200 h-4 w-4 flex-shrink-0"
x-state-description='undefined: "text-yellow-400", undefined: "text-gray-200"'
x-description="Heroicon name: mini/star"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
></path>
</svg>
</div>
</div>
<div class="font-bold text-md mb-2">
<a
class="font-semibold text-gray-600 hover:underline"
>#NMRXIV:{{ molecule.identifier }}</a
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
></path>
</svg>
</div>
</div>
<div class="font-bold text-md mb-2">
<a
:href="'/spectra?compound=' + molecule.identifier"
class="font-semibold text-gray-600 hover:underline"
>#NMRXIV:{{ molecule.identifier }}</a
<div
class="text-gray-700 text-base break-all text-sm capitalize"
v-if="
molecule.iupac_name && molecule.iupac_name != ''
"
>
</div>
<div
class="text-gray-700 text-base break-all text-sm xs:truncate"
>
{{ molecule.name }}
</div>
</div>
<div v-else class="py-4 px-4">
<div class="flex items-center">
<div class="mb-1 flex items-center">
<svg
:key="index"
v-for="index in molecule.annotation_level"
class="inline text-yellow-400 h-4 w-4 flex-shrink-0"
x-state:on="Active"
x-state:off="Inactive"
x-state-description='Active: "text-yellow-400", Inactive: "text-gray-200"'
x-description="Heroicon name: mini/star"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
></path>
</svg>
<svg
:key="index"
v-for="index in 5 - molecule.annotation_level"
class="inline text-gray-200 h-4 w-4 flex-shrink-0"
x-state-description='undefined: "text-yellow-400", undefined: "text-gray-200"'
x-description="Heroicon name: mini/star"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
></path>
</svg>
{{ molecule.iupac_name }}
</div>
</div>
<div class="font-bold text-md mb-2">
<a
:href="'/spectra?compound=' + molecule.identifier"
class="font-semibold text-gray-600 hover:underline"
>#NMRXIV:{{ molecule.identifier }}</a
<div
class="text-gray-700 text-base break-all text-sm"
v-else
>
</div>
<div
class="text-gray-700 text-base break-all text-xs truncate"
>
<small>
<label>SMILES</label><br />
{{ molecule.canonical_smiles }}
</small>
</div>
</div>
</Link>
</div>

<!-- <div class="px-6 pb-2">
<span
class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"
Expand All @@ -140,9 +92,11 @@
</template>
<script>
import Depictor2D from "@/Shared/Depictor2D.vue";
import { Link } from "@inertiajs/vue3";
export default {
components: {
Depictor2D,
Link,
},
props: ["molecule"],
computed: {},
Expand Down
49 changes: 25 additions & 24 deletions resources/js/Shared/StudyCardPublic.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,10 +137,10 @@
</span>
</div>
</div>
<div
class="flex-1 bg-white p-3 border-t mt-1 flex flex-col justify-between"
>
<Link :href="study.public_url">
<Link :href="study.public_url">
<div
class="flex-1 bg-white p-3 border-t mt-1 flex flex-col justify-between"
>
<div>
<small
v-if="study.identifier"
Expand All @@ -160,31 +160,32 @@
</div>
</div>
</div>
</Link>

<div class="flex-1">
<p
class="text-lg mt-2 font-semibold text-gray-900 line-clamp-1"
>
{{ study.name }}
</p>
<div class="mt-1 h-14 overflow-hidden">
<span
v-for="type in study.experiment_types"
:key="type"
class="mt-1 inline-flex items-center rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
<div class="flex-1">
<p
class="text-lg mt-2 font-semibold text-gray-900 line-clamp-1"
>
{{ type }}
</span>
{{ study.name }}
</p>
<div class="mt-1 h-14 overflow-hidden">
<span
v-for="type in study.experiment_types"
:key="type"
class="mt-1 inline-flex items-center rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
>
{{ type }}
</span>
</div>
</div>
</div>
<div class="pt-1">
<div class="text-xs text-gray-600">
<span class="text-gray-400">Last updated on</span>
{{ formatDate(study.updated_at) }}

<div class="pt-1">
<div class="text-xs text-gray-600">
<span class="text-gray-400">Last updated on</span>
{{ formatDate(study.updated_at) }}
</div>
</div>
</div>
</div>
</Link>
</div>
</template>

Expand Down

0 comments on commit 23863ab

Please sign in to comment.