tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixes style and adds tooltip to exporter and see colleciton buttons.

This commit is contained in:
Mateus Machado Luna 2018-12-17 12:21:50 -02:00
parent 816eb7ca88
commit 244f4c04bd
1 changed files with 60 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/admin/components/navigation/tainacan-repository-subheader.vue
View File

@ -6,28 +6,44 @@
<h1 v-if="isRepositoryLevel">{{ repositoryName }}</h1>
<h1 v-else>{{ $i18n.get('collection') + '' }} <span class="has-text-weight-bold">{{ collectionName }}</span></h1>
<div>
<a
@click="openAvailableExportersModal"
class="button"
id="exporter-collection-button"
v-if="!isRepositoryLevel">
<span class="icon">
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-export"/>
</span>
</a>
<a
:href="collectionURL"
target="_blank"
v-if="!isRepositoryLevel"
class="button"
id="view-collection-button">
<span class="icon">
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-see"/>
</span>
{{ $i18n.get('label_view_collection') }}
</a>
</div>
<ul class="repository-subheader-icons">
<li
v-tooltip="{
content: $i18n.get('exporters'),
autoHide: false,
placement: 'bottom-start',
classes: ['header-tooltips']
}">
<a
@click="openAvailableExportersModal"
class="button"
id="exporter-collection-button"
v-if="!isRepositoryLevel">
<span class="icon">
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-export"/>
</span>
</a>
</li>
<li
v-tooltip="{
content: $i18n.get('label_view_collection'),
autoHide: false,
placement: 'bottom-end',
classes: ['header-tooltips']
}">
<a
:href="collectionURL"
target="_blank"
v-if="!isRepositoryLevel"
class="button"
id="view-collection-button">
<span class="icon">
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-see"/>
</span>
<!-- {{ $i18n.get('label_view_collection') }} -->
</a>
</li>
</ul>
</div>
@ -86,17 +102,24 @@ export default {
}
</script>
<style lang="scss" scoped>
<style lang="scss">
@import "../../scss/_variables.scss";
.header-tooltips .tooltip-inner {
color: $turquoise5;
font-size: 0.75rem;
font-weight: 400;
padding: 0.75rem;
}
// Tainacan Header
#tainacan-repository-subheader {
background-color: $turquoise5;
height: 42px;
max-height: 42px;
width: 100%;
overflow-y: hidden;
// overflow-y: hidden;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 0;
@ -131,28 +154,20 @@ export default {
transition: all 0.2s linear;
}
#view-collection-button {
border: none;
border-radius: 0px !important;
height: 42px !important;
right: 0;
position: relative;
background-color: $turquoise4;
color: white;
.icon {
margin-right: 0.75rem;
}
}
.repository-subheader-icons {
display: flex;
flex-wrap: nowrap;
margin-right: calc(4.6666667% - 2.083333333px);
#exporter-collection-button {
border: none;
border-radius: 0px !important;
height: 42px !important;
right: 0;
position: relative;
background-color: $turquoise4;
color: white;
#view-collection-button,
#exporter-collection-button {
border: none;
border-radius: 0px !important;
height: 42px !important;
background-color: $turquoise5;
color: white;
width: 48px;
}
}
@media screen and (max-width: 769px) {