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 {
/* Filter settings */
.req {
color: red;
color: #bd1c2b;
}
.btn {
......@@ -141,10 +141,11 @@ svg.motivation-logo {
.collection-header a {
color: #fff;
text-decoration: underline;
}
.collection-key {
color: #555;
color: #1e2b3d;
font-size: 16px;
}
......@@ -209,21 +210,43 @@ svg.motivation-logo {
/* Annotations */
.card .hypo-link {
font-size: 16px;
margin-right: 6px;
margin-left: 15px;
}
.badge.badge-primary {
margin-right: 6px;
}
.hypothesis-group {
clear: both;
display: block;
font-size: 12px;
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 */
......@@ -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) {
.display-3 {
font-size: 70px;
......
<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
class="hypo-link"
:href="'https://hyp.is/go?url=' + url + ( hypothesis_group != '' ? ('&group=' + hypothesis_group) : ('&group=__world__'))"
target="_blank"
>
<span 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.count0') }}</span>
<span class="count" v-show="count == 0">{{ $t('annotations.countX') }}</span>
</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" />
</div>
</template>
......
<template>
<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')}}
</span>
</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