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

Enhance action button

parent ba80a7f6
...@@ -109,7 +109,7 @@ svg.motivation-logo { ...@@ -109,7 +109,7 @@ svg.motivation-logo {
/* Filter settings */ /* Filter settings */
.req { .req {
color: red; color: #bd1c2b;
} }
.btn { .btn {
...@@ -141,10 +141,11 @@ svg.motivation-logo { ...@@ -141,10 +141,11 @@ svg.motivation-logo {
.collection-header a { .collection-header a {
color: #fff; color: #fff;
text-decoration: underline;
} }
.collection-key { .collection-key {
color: #555; color: #1e2b3d;
font-size: 16px; font-size: 16px;
} }
...@@ -209,21 +210,43 @@ svg.motivation-logo { ...@@ -209,21 +210,43 @@ svg.motivation-logo {
/* Annotations */ /* Annotations */
.card .hypo-link {
font-size: 16px;
margin-right: 6px;
margin-left: 15px;
}
.badge.badge-primary { .badge.badge-primary {
margin-right: 6px; margin-right: 6px;
} }
.hypothesis-group { .hypothesis-group {
clear: both;
display: block; display: block;
font-size: 12px; font-size: 12px;
text-align: right; text-align: right;
margin-top: 5px; margin: 10px 10px 0 0;
padding: 5px 0 5px 0;
}
.hypothesis-group .hypo-icon {
width: 12px;
}
.annotation-button {
background: #12bbad;
border-radius: 5px;
padding: 5px 10px 5px 0;
}
.annotation-button .hypo-link {
color: #1e2b3d;
font-size: 16px;
margin-right: 6px;
margin-left: 15px;
float: right;
}
.annotation-button .count {
float: right;
}
.annotation-button .count.has-annos {
color: #bd1c2b;
} }
/* Transitions */ /* Transitions */
...@@ -289,6 +312,14 @@ svg.motivation-logo { ...@@ -289,6 +312,14 @@ svg.motivation-logo {
} }
} }
@media (max-width: 780px) {
.annotation-button {
float: none !important;
display: block !important;
margin-bottom: 10px;
}
}
@media (min-width: 1024px) { @media (min-width: 1024px) {
.display-3 { .display-3 {
font-size: 70px; font-size: 70px;
......
<template> <template>
<div class="d-inline"> <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 <a
class="hypo-link" class="hypo-link"
:href="'https://hyp.is/go?url=' + url + ( hypothesis_group != '' ? ('&group=' + hypothesis_group) : ('&group=__world__'))" :href="'https://hyp.is/go?url=' + url + ( hypothesis_group != '' ? ('&group=' + hypothesis_group) : ('&group=__world__'))"
target="_blank" target="_blank"
> >
<span v-show="count > 0">{{ $t('annotations.count0') }}</span> <span class="count" v-show="count > 0">{{ $t('annotations.count0') }}</span>
<span v-show="count == 0">{{ $t('annotations.countX') }}</span> <span class="count" v-show="count == 0">{{ $t('annotations.countX') }}</span>
</a> </a>
<span
class="badge badge-pill"
v-bind:class="{ 'badge-info': count == 0, 'badge-primary': count > 0}"
>{{ count }}</span>
<HypothesisGroup :hypothesis_group="hypothesis_group" :url="item.url" /> <HypothesisGroup :hypothesis_group="hypothesis_group" :url="item.url" />
</div> </div>
</template> </template>
......
<template> <template>
<span class="hypothesis-group"> <span class="hypothesis-group">
<i class="fa fa-users"></i> <img class="hypo-icon" src="@/assets/img/hypothesis-icon.png" alt="Icon Hypothesis">
{{(hypothesis_group != '' ? hypothesis_group_name : 'Public')}} {{(hypothesis_group != '' ? hypothesis_group_name : 'Public')}}
</span> </span>
</template> </template>
......
This diff is collapsed.
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