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

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

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