Commit d0480099 authored by Axel Dürkop's avatar Axel Dürkop
Browse files

Restructure annotation area

parent ae606a77
......@@ -3,7 +3,7 @@
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"serve": "HOST=127.0.0.1 vue-cli-service serve",
"build": "vue-cli-service build",
"test": "vue-cli-service lint && yarn run test:unit",
"lint": "vue-cli-service lint",
......
......@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: zocurelia.com hypothes.is api.zotero.org; script-src 'unsafe-inline' 'unsafe-eval' zocurelia.com cdnjs.cloudflare.com *.jquery.com stackpath.bootstrapcdn.com localhost:8080 hypothes.is api.zotero.org; style-src 'unsafe-inline' zocurelia.com cdnjs.cloudflare.com *.jquery.com stackpath.bootstrapcdn.com localhost:8080 hypothes.is api.zotero.org; img-src data: xldrkp.norma.uberspace.de zocurelia.com localhost:8080 hypothes.is api.zotero.org; font-src data: zocurelia.com cdnjs.cloudflare.com hypothes.is api.zotero.org; connect-src *">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: zocurelia.com hypothes.is api.zotero.org; script-src 'unsafe-inline' 'unsafe-eval' zocurelia.com cdnjs.cloudflare.com *.jquery.com stackpath.bootstrapcdn.com 127.0.0.1:8080 hypothes.is api.zotero.org; style-src 'unsafe-inline' zocurelia.com cdnjs.cloudflare.com *.jquery.com stackpath.bootstrapcdn.com 127.0.0.1:8080 hypothes.is api.zotero.org; img-src data: xldrkp.norma.uberspace.de zocurelia.com 127.0.0.1:8080 hypothes.is api.zotero.org; font-src data: zocurelia.com cdnjs.cloudflare.com hypothes.is api.zotero.org; connect-src *">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Zocurelia</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
......
......@@ -216,47 +216,51 @@ svg.motivation-logo {
}
.hypothesis-group {
clear: both;
float: right;
display: block;
font-size: 12px;
text-align: right;
margin: 10px 10px 0 0;
padding: 5px 0 5px 0;
margin: 0 10px 5px 0;
padding: 0;
}
.annotation-button .hypo-icon {
.annotation-area .service-icon {
width: 20px;
display: inline-block;
margin: 12px 10px 0 0;
padding: 5px 0 0 5px;
float: left;
float: right;
margin: 12px 10px;
}
.annotation-area .service-icons {
clear: both;
float: none;
display: block;
}
.annotation-button {
.annotation-area {
background: #12bbad;
border-radius: 5px;
padding: 5px 10px 5px 0;
padding: 5px 5px 5px 0;
float: right;
}
.annotation-button .hypo-link {
.annotation-area .hypo-link {
color: #1e2b3d;
font-size: 16px;
margin-right: 6px;
margin-left: 15px;
float: right;
}
.annotation-button .count {
float: right;
.annotation-area .count {
text-decoration: underline;
margin-right: 10px;
padding-top: 3px;
}
.annotation-button .count.badge {
.annotation-area .count.badge {
text-decoration: none;
}
.annotation-button .count.has-annos {
.annotation-area .count.has-annos {
color: #bd1c2b;
}
......@@ -324,7 +328,7 @@ svg.motivation-logo {
}
@media (max-width: 780px) {
.annotation-button {
.annotation-area {
float: none !important;
display: block !important;
margin-bottom: 10px;
......@@ -339,10 +343,10 @@ svg.motivation-logo {
/* RSS */
.rss-icon {
/* .rss-icon {
width: 20px;
display: inline-block;
margin: 12px 10px 0 8px;
padding: 5px 0 0 5px;
float: left;
}
\ No newline at end of file
} */
<template>
<div class="d-inline annotation-button">
<span
class="count badge badge-pill"
v-bind:class="{ 'badge-info': count == 0, 'badge-primary': count > 0}"
>{{ count }}</span>
<a
class="hypo-link"
:href="'https://hyp.is/go?url=' + url + ( hypothesis_group != '' ? ('&group=' + hypothesis_group) : ('&group=__world__'))"
target="_blank"
>
<span class="count" v-show="count > 0">{{ $t('annotations.count0') }}</span>
<span class="count" v-show="count == 0">{{ $t('annotations.countX') }}</span>
</a>
<div class="annotation-area">
<HypothesisGroup :hypothesis_group="hypothesis_group" :url="item.url" />
<RSS :url="item.url" />
<DashboardLink :url="item.url" />
<div style="clear: both;"></div>
<div class="hypo-link-container">
<a
class="hypo-link"
:href="'https://hyp.is/go?url=' + url + ( hypothesis_group != '' ? ('&group=' + hypothesis_group) : ('&group=__world__'))"
target="_blank"
>
<span class="count" v-show="count > 0">{{ $t('annotations.count0') }}</span>
<span class="count" v-show="count == 0">{{ $t('annotations.countX') }}</span>
<span
class="count badge badge-pill"
v-bind:class="{ 'badge-info': count == 0, 'badge-primary': count > 0}"
>{{ count }}</span>
</a>
</div>
<div class="service-icons">
<RSS :url="item.url" />
<ZotReferenceLink :zotero_item_url="item.zotero_item_url" />
<DashboardLink :url="item.url" />
</div>
<div style="clear: both;"></div>
</div>
</template>
......@@ -24,6 +30,7 @@
import HypothesisClient from "hypothesis-api-client";
import HypothesisGroup from "@/components/HypothesisGroup";
import DashboardLink from "@/components/HypothesisDocInDashboard";
import ZotReferenceLink from "@/components/ZotReferenceLink";
import RSS from "@/components/RSS";
import { mapGetters } from "vuex";
......@@ -33,7 +40,8 @@ export default {
components: {
HypothesisGroup,
RSS,
DashboardLink
DashboardLink,
ZotReferenceLink
},
data() {
return {
......
<template>
<div>
<a :title="$t('annotations.hypothesis.dashboardlink')" target="_blank" :href="('https://hypothes.is/search?q=url%3A' + url)">
<img class="hypo-icon" src="@/assets/img/hypothesis-icon.png" alt="Icon Hypothesis" />
<a :title="$t('annotations.hypothesis.tooltip')" target="_blank" :href="('https://hypothes.is/search?q=url%3A' + url)">
<img class="service-icon" src="@/assets/img/hypothesis-icon.png" alt="Icon Hypothesis" />
</a>
</div>
</template>
......
......@@ -6,7 +6,6 @@
<h5 class="title">{{ item.title }}</h5>
<Authors :authors="item.authors" />
<PublishDate v-show="item.pub_date" :pub_date="item.pub_date"/>
<ZotReferenceLink :zotero_item_url="item.zotero_item_url"/>
</div>
<div class="card-body">
<AbstractNote :abstractNote="item.abstractNote" :extra="item.extra" />
......@@ -24,7 +23,6 @@ import AbstractNote from "@/components/AbstractNote.vue";
import Tags from "@/components/Tags.vue";
import Authors from "@/components/Authors.vue";
import PublishDate from "@/components/PublishDate.vue";
import ZotReferenceLink from "@/components/ZotReferenceLink.vue";
export default {
name: "Item",
......@@ -33,8 +31,7 @@ export default {
AbstractNote,
Tags,
Authors,
PublishDate,
ZotReferenceLink
PublishDate
},
props: ["groupID", "subcollections", "collectionKey", "tags", "item"]
};
......
<template>
<div>
<a :title="$t('rss.tooltip')" target="_blank" :href="feed">
<img class="rss-icon" src="@/assets/img/rss.png" alt="RSS icon" />
<img class="service-icon" src="@/assets/img/rss.png" alt="RSS icon" />
</a>
</div>
</template>
......
<template>
<span>
<a target="_blank" :href="zotero_item_url">
<img class="zotero-logo" src="@/assets/img/zotero.png" alt="">
<a :title="$t('zotero.tooltip')" target="_blank" :href="zotero_item_url">
<img class="service-icon" src="@/assets/img/zotero.png" alt="">
</a>
</span>
</template>
......
......@@ -137,6 +137,9 @@
},
"historyback": "Zurück",
"rss": {
"tooltip": "Rechtsklick, um den RSS-Feed für Annotationen zu kopieren"
"tooltip": "RSS-Feed der Annotationen in diesem Beitrag"
},
"zotero": {
"tooltip": "Link zu bibliografischen Informationen in Zotero"
}
}
......@@ -51,7 +51,7 @@
"count0": "What do you think?",
"countX": "Ask and discuss!",
"hypothesis": {
"dashboardlink": "Open Hypothesis dashboard for latest annotations."
"tooltip": "Open Hypothesis dashboard for latest annotations"
}
},
"help": {
......@@ -138,6 +138,9 @@
},
"historyback": "Back",
"rss": {
"tooltip": "Right-click to copy the link to the RSS feed of related annotations"
"tooltip": "Link to the RSS feed of related annotations"
},
"zotero": {
"tooltip": "Link to detailled bibliographic information in Zotero"
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment