Skip to content

Commit

Permalink
fix: enable text selection in author and Citation
Browse files Browse the repository at this point in the history 
formatting citation card
  • Loading branch information
@NishaSharma14
NishaSharma14 committed Oct 12, 2023
1 parent fc2ee96 commit f1c1eb3
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 157 deletions.
64 changes: 5 additions & 59 deletions resources/js/Pages/Project/Show.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -498,51 +498,9 @@
class="mt-2 text-md text-gray-900 space-y-5 focus:pointer-events-auto"
>
<div class="mt-1 grid grid-cols-1 gap-4 sm:grid-cols-2">
<div
v-for="citation in project.citations"
:key="citation.id"
class="relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-top space-x-3 hover:border-gray-400 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-teal-500"
>
<div class="flex-1 min-w-0">
<a
class="focus:outline-none cursor-pointer"
:href="getCitationLink(citation.doi)"
:target="getTarget(citation.doi)"
>
<span
class="absolute inset-0"
aria-hidden="true"
></span>
<p
class="text-sm font-medium text-gray-900"
>
{{ citation.title }}
</p>
<p class="text-sm text-teal-500">
{{ citation.authors }}
</p>
<p class="text-sm text-gray-500">
{{ citation.citation_text }}
</p>
<p
v-if="citation.doi"
class="text-sm font-sm text-gray-500"
>
DOI -
<a
:href="citation.doi"
class="text-teal-900"
>{{ citation.doi }}</a
>
</p>
<p
class="text-sm text-gray-500 truncate ..."
>
{{ citation.abstract }} ...
</p>
</a>
</div>
</div>
<citation-card
:citations="this.project.citations"
/>
</div>
</dd>
</div>
Expand Down Expand Up @@ -615,6 +573,7 @@ import ManageCitation from "@/Shared/ManageCitation.vue";
import Citation from "@/Shared/Citation.vue";
import Publish from "@/Shared/Publish.vue";
import AuthorCard from "@/Shared/AuthorCard.vue";
import CitationCard from "@/Shared/CitationCard.vue";
export default {
components: {
Expand All @@ -632,6 +591,7 @@ export default {
Citation,
Publish,
AuthorCard,
CitationCard,
},
props: [
"project",
Expand Down Expand Up @@ -720,20 +680,6 @@ export default {
this.manageCitationElement.toggleDialog();
//this.emitter.emit("openAddCitationDialog", {});
},
getCitationLink(doi) {
var link = "#";
if (doi) {
link = "https://doi.org/" + doi;
}
return link;
},
getTarget(id) {
var target = null;
if (id) {
target = "_blank";
}
return target;
},
},
};
</script>
92 changes: 8 additions & 84 deletions resources/js/Pages/Public/Project/Show.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,67 +114,11 @@
<div
class="mt-1 grid grid-cols-1 gap-4 sm:grid-cols-2"
>
<div
v-for="citation in project.data
.citations"
:key="citation.id"
class="relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-top space-x-3 hover:border-gray-400 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-teal-500"
>
<div class="flex-1 min-w-0">
<a
class="focus:outline-none cursor-pointer"
:href="
getCitationLink(
citation.doi
)
"
:target="
getTarget(citation.doi)
"
>
<span
class="absolute inset-0"
aria-hidden="true"
></span>
<p
class="text-sm font-medium text-gray-900"
>
{{ citation.title }}
</p>
<p
class="text-sm text-teal-500"
>
{{ citation.authors }}
</p>
<p
class="text-sm text-gray-500"
>
{{
citation.citation_text
}}
</p>
<p
v-if="citation.doi"
class="text-sm font-sm text-gray-500"
>
DOI -
<a
:href="citation.doi"
class="text-teal-900"
>{{
citation.doi
}}</a
>
</p>
<p
class="text-sm text-gray-500 truncate ..."
>
{{ citation.abstract }}
...
</p>
</a>
</div>
</div>
<citation-card
:citations="
this.project.data.citations
"
/>
</div>
</dd>
</div>
Expand All @@ -192,11 +136,13 @@
<script>
import ProjectLayout from "@/Pages/Public/Project/Layout.vue";
import AuthorCard from "@/Shared/AuthorCard.vue";
import CitationCard from "@/Shared/CitationCard.vue";
export default {
components: {
ProjectLayout,
AuthorCard,
CitationCard,
},
props: ["project", "tab"],
data() {
Expand All @@ -212,28 +158,6 @@ export default {
this.schema = response.data;
});
},
methods: {
getOrcidLink(orcidId) {
var link = "#";
if (orcidId) {
link = "https://orcid.org/" + orcidId;
}
return link;
},
getCitationLink(doi) {
var link = "#";
if (doi) {
link = "https://doi.org/" + doi;
}
return link;
},
getTarget(id) {
var target = null;
if (id) {
target = "_blank";
}
return target;
},
},
methods: {},
};
</script>
9 changes: 4 additions & 5 deletions resources/js/Shared/AuthorCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,21 @@
<div
v-for="author in authors"
:key="author.id"
class="relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-top space-x-3 hover:border-gray-400 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-teal-500"
class="select-text relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-top space-x-3 hover:border-gray-400 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-teal-500"
>
<div class="flex-1 min-w-0">
<div>
<a
class="focus:outline-none cursor-pointer"
class="focus:outline-none cursor-pointer select-text"
:href="getOrcidLink(author.orcid_id)"
:target="getTarget(author.orcid_id)"
>
<span class="absolute inset-0" aria-hidden="true"></span>
<div class="mb-1 flex items-center justify-between">
<p class="text-sm font-medium text-teal-900">
<span class="text-sm font-medium text-teal-900">
{{ author.title }}
{{ author.given_name }}
{{ author.family_name }}
</p>
</span>
<button
v-if="author.pivot && author.pivot.contributor_type"
class="text-sm text-gray-400"
Expand Down
59 changes: 59 additions & 0 deletions resources/js/Shared/CitationCard.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<template>
<div
v-for="citation in citations"
:key="citation.id"
class="relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-top space-x-3 hover:border-gray-400 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-teal-500"
>
<div class="flex-1 min-w-0">
<a
class="focus:outline-none cursor-pointer select-text"
:href="getCitationLink(citation.doi)"
:target="getTarget(citation.doi)"
>
<p class="text-sm font-medium text-gray-900">
{{ citation.title }}
</p>
<p class="text-sm text-teal-500">
{{ citation.authors }}
</p>
<p class="text-sm text-gray-500">
{{ citation.citation_text }}
</p>
<p v-if="citation.doi" class="text-sm font-sm text-gray-500">
DOI -
<a :href="citation.doi" class="text-teal-900">{{
citation.doi
}}</a>
</p>
<div
class="text-sm text-gray-500 truncate line-clamp-2 ..."
v-html="citation.abstract"
></div>
</a>
</div>
</div>
</template>

<script>
export default {
components: {},
props: ["citations"],
methods: {
getCitationLink(doi) {
var link = "#";
if (doi) {
link = "https://doi.org/" + doi;
}
return link;
},
getTarget(id) {
var target = null;
if (id) {
target = "_blank";
}
return target;
},
},
};
</script>
>
16 changes: 7 additions & 9 deletions resources/js/Shared/ManageCitation.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -364,14 +364,13 @@
>
Abstract
</p>
<p
<div
id="citation-abstract"
class="text-xs text-gray-500"
>
{{
v-html="
fetchedCitations.abstract
}}
</p>
"
></div>
</div>
</div>
</div>
Expand Down Expand Up @@ -474,12 +473,11 @@
<div
class="sm:flex sm:justify-between"
>
<p
<div
v-if="element.abstract"
class="text-xs font-medium text-gray-900"
>
{{ element.abstract }}
</p>
v-html="element.abstract"
></div>
</div>
</div>
</li>
Expand Down

0 comments on commit f1c1eb3

Please sign in to comment.