Css adjustments on home page.
This commit is contained in:
parent
25376c5edd
commit
ca74b5bc88
|
@ -50,7 +50,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="collections.length > 0 && !isLoading">
|
||||
<masonry
|
||||
:cols="{ default: 5, 1919: 4, 1407: 3, 1215: 2, 1023: 2, 767: 1 }"
|
||||
:gutter="25"
|
||||
|
@ -219,15 +219,7 @@
|
|||
|
||||
<!-- Name -->
|
||||
<div class="metadata-title">
|
||||
<p
|
||||
v-tooltip="{
|
||||
content: collection.name != undefined ? collection.name : '',
|
||||
html: true,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}">
|
||||
{{ collection.name != undefined ? collection.name : '' }}
|
||||
</p>
|
||||
<p>{{ collection.name != undefined ? collection.name : '' }}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</masonry>
|
||||
|
@ -259,9 +251,13 @@ export default {
|
|||
display: flex;
|
||||
width: calc(100% + 1.25rem);
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: nowrap;
|
||||
margin: 0 -0.75rem;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
|
@ -274,7 +270,6 @@ export default {
|
|||
|
||||
&:first-of-type {
|
||||
width: 56.7%;
|
||||
max-width: 56.7%;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
@ -180,7 +180,7 @@
|
|||
font-size: 24px;
|
||||
width: 50px;
|
||||
height: $header-height;
|
||||
background-color: $gray0;
|
||||
background-color: $gray1;
|
||||
padding-bottom: 0.4rem;
|
||||
}
|
||||
.logo-area {
|
||||
|
|
|
@ -392,7 +392,7 @@ export default {
|
|||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 47px;
|
||||
right: 35px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
|
|
|
@ -276,14 +276,14 @@ export default {
|
|||
margin: 0 -0.75rem;
|
||||
|
||||
li {
|
||||
padding: 0.75rem;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
background-color: $gray0;
|
||||
background-color: $gray1;
|
||||
flex-grow: 1;
|
||||
margin: 0.75rem;
|
||||
height: 120px;
|
||||
min-width: 142px;
|
||||
// max-width: 142px;
|
||||
min-width: 13%;
|
||||
flex-basis: 13%;
|
||||
|
||||
@media screen and (max-width: 580px) {
|
||||
max-width: calc(100% - 52px);
|
||||
|
|
|
@ -86,14 +86,51 @@
|
|||
<p v-if="status == undefined || status == ''">{{ $i18n.get('info_no_collection_created') }}</p>
|
||||
<p v-if="status == 'draft'">{{ $i18n.get('info_no_collection_draft') }}</p>
|
||||
<p v-if="status == 'trash'">{{ $i18n.get('info_no_collection_trash') }}</p>
|
||||
<router-link
|
||||
v-if="status == undefined || status == ''"
|
||||
id="button-create-collection"
|
||||
tag="button"
|
||||
class="button is-secondary"
|
||||
:to="{ path: $routerHelper.getNewCollectionPath() }">
|
||||
{{ $i18n.getFrom('collections', 'new_item') }}
|
||||
</router-link>
|
||||
|
||||
<div v-if="$userCaps.hasCapability('edit_tainacan-collections') && status == undefined || status == ''">
|
||||
<b-dropdown id="collection-creation-options-dropdown">
|
||||
<button
|
||||
class="button is-secondary"
|
||||
slot="trigger">
|
||||
<div>{{ $i18n.getFrom('collections', 'new_item') }}</div>
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown" />
|
||||
</span>
|
||||
</button>
|
||||
<b-dropdown-item>
|
||||
<router-link
|
||||
id="a-create-collection"
|
||||
tag="div"
|
||||
:to="{ path: $routerHelper.getNewCollectionPath() }">
|
||||
{{ $i18n.get('new_blank_collection') }}
|
||||
<br>
|
||||
<small class="is-small">{{ $i18n.get('info_choose_your_metadata') }}</small>
|
||||
</router-link>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item
|
||||
:key="metadatum_mapper.slug"
|
||||
v-for="metadatum_mapper in metadatum_mappers"
|
||||
v-if="metadatum_mapper.metadata != false">
|
||||
<router-link
|
||||
:id="'a-create-collection-' + metadatum_mapper.slug"
|
||||
tag="div"
|
||||
:to="{ path: $routerHelper.getNewMappedCollectionPath(metadatum_mapper.slug) }">
|
||||
{{ $i18n.get(metadatum_mapper.name) }}
|
||||
</router-link>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item>
|
||||
<div
|
||||
id="a-import-collection"
|
||||
tag="div"
|
||||
@click="onOpenImportersModal">
|
||||
{{ $i18n.get('import') }}
|
||||
<br>
|
||||
<small class="is-small">{{ $i18n.get('info_import_collection') }}</small>
|
||||
</div>
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
@ -11,10 +11,10 @@
|
|||
animation-duration: 0.5s;
|
||||
|
||||
.tainacan-card {
|
||||
background-color: $gray0;
|
||||
background-color: $gray1;
|
||||
padding: 0px;
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 1.25rem;
|
||||
margin-bottom: 1.6rem;
|
||||
flex-basis: 0;
|
||||
min-height: 125px;
|
||||
cursor: pointer;
|
||||
|
@ -73,6 +73,8 @@
|
|||
.metadata-title {
|
||||
overflow: hidden;
|
||||
padding: 0.75rem 1rem;
|
||||
flex-basis: calc(100% - 96px);
|
||||
|
||||
p {
|
||||
color: black !important;
|
||||
font-size: 0.875rem !important;
|
||||
|
|
Loading…
Reference in New Issue