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

Css adjustments to metadata and filter list.

This commit is contained in:
Mateus Machado Luna 2018-11-14 13:01:49 -02:00
parent c70f8e7d72
commit 15f1b60c0c
7 changed files with 55 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/admin/admin.vue
View File

@ -16,7 +16,7 @@
@click="isMenuCompressed = !isMenuCompressed"> @click="isMenuCompressed = !isMenuCompressed">
<span class="icon"> <span class="icon">
<i <i
:class="{ 'tainacan-icon-arrowleft' : isMenuCompressed, 'tainacan-icon-arrowright' : !isMenuCompressed }" :class="{ 'tainacan-icon-arrowleft' : !isMenuCompressed, 'tainacan-icon-arrowright' : isMenuCompressed }"
class="tainacan-icon tainacan-icon-20px"/> class="tainacan-icon tainacan-icon-20px"/>
</span> </span>
</button> </button>

27
src/admin/components/lists/collections-home-list.vue
View File

@ -114,9 +114,7 @@
</li> </li>
</ul> </ul>
</router-link> </router-link>
<router-link <div
tag="a"
:to="$routerHelper.getCollectionPath(collection.id)"
v-if="collections.length > 0 && !isLoading" v-if="collections.length > 0 && !isLoading"
:key="index" :key="index"
v-for="(collection, index) of collections" v-for="(collection, index) of collections"
@ -124,7 +122,8 @@
<ul class="menu-list"> <ul class="menu-list">
<li> <li>
<a <a
:href="collection.url" :href="collection.url"
target="_blank"
:aria-label="$i18n.get('label_view_collection')"> :aria-label="$i18n.get('label_view_collection')">
<b-tooltip <b-tooltip
:label="$i18n.get('label_view_collection')" :label="$i18n.get('label_view_collection')"
@ -212,16 +211,20 @@
</router-link> </router-link>
</li> </li>
</ul> </ul>
<router-link
<img tag="a"
:to="$routerHelper.getCollectionPath(collection.id)"
class="card-body">
<img
v-if="collection.thumbnail != undefined" v-if="collection.thumbnail != undefined"
:src="collection['thumbnail'].tainacan_medium ? collection['thumbnail'].tainacan_medium : (collection['thumbnail'].medium ? collection['thumbnail'].medium : thumbPlaceholderPath)"> :src="collection['thumbnail'].tainacan_medium ? collection['thumbnail'].tainacan_medium : (collection['thumbnail'].medium ? collection['thumbnail'].medium : thumbPlaceholderPath)">
<!-- Name --> <!-- Name -->
<div class="metadata-title"> <div class="metadata-title">
<p>{{ collection.name != undefined ? collection.name : '' }}</p> <p>{{ collection.name != undefined ? collection.name : '' }}</p>
</div> </div>
</router-link> </router-link>
</div>
</masonry> </masonry>
</template> </template>
</div> </div>

10
src/admin/components/lists/filters-list.vue
View File

@ -48,7 +48,7 @@
</span> </span>
<span class="icon icon-level-identifier"> <span class="icon icon-level-identifier">
<i <i
:class="{ 'tainacan-icon-collection has-text-turquoise5': filter.collection_id == collectionId, 'tainacan-icon-repository has-text-blue5': filter.collection_id != collectionId }" :class="{ 'tainacan-icon-collections has-text-turquoise5': filter.collection_id == collectionId, 'tainacan-icon-repository has-text-blue5': filter.collection_id != collectionId }"
class="tainacan-icon" /> class="tainacan-icon" />
</span> </span>
<span <span
@ -166,7 +166,7 @@
</span> </span>
<span class="icon icon-level-identifier"> <span class="icon icon-level-identifier">
<i <i
:class="{ 'tainacan-icon-collection has-text-turquoise5': metadatum.collection_id == collectionId, 'tainacan-icon-repository has-text-blue5': metadatum.collection_id != collectionId }" :class="{ 'tainacan-icon-collections has-text-turquoise5': metadatum.collection_id == collectionId, 'tainacan-icon-repository has-text-blue5': metadatum.collection_id != collectionId }"
class="tainacan-icon" /> class="tainacan-icon" />
</span> </span>
<span class="metadatum-name">{{ metadatum.name }}</span> <span class="metadatum-name">{{ metadatum.name }}</span>
@ -561,6 +561,7 @@ export default {
.handle { .handle {
padding-right: 6em; padding-right: 6em;
white-space: nowrap;
} }
.grip-icon { .grip-icon {
color: $gray3; color: $gray3;
@ -677,7 +678,7 @@ export default {
.available-metadata-area { .available-metadata-area {
padding: 10px 0px 10px 10px; padding: 10px 0px 10px 10px;
margin: 0; margin: 0;
max-width: 280px; max-width: 340px;
font-size: 14px; font-size: 14px;
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
@ -718,7 +719,7 @@ export default {
} }
.icon { .icon {
position: relative; position: relative;
bottom: 3px; bottom: 4px;
} }
.metadatum-name { .metadatum-name {
text-overflow: ellipsis; text-overflow: ellipsis;
@ -728,6 +729,7 @@ export default {
margin-left: 0.4em; margin-left: 0.4em;
display: inline-block; display: inline-block;
max-width: 180px; max-width: 180px;
width: 60%;
} }
&:after, &:after,
&:before { &:before {

8
src/admin/components/lists/metadata-list.vue
View File

@ -53,7 +53,7 @@
<span class="icon icon-level-identifier"> <span class="icon icon-level-identifier">
<i <i
:class="{ :class="{
'tainacan-icon-collection has-text-turquoise5': (metadatum.collection_id != 'default' && !isRepositoryLevel), 'tainacan-icon-collections has-text-turquoise5': (metadatum.collection_id != 'default' && !isRepositoryLevel),
'tainacan-icon-repository has-text-blue5': (metadatum.collection_id == 'default') || isRepositoryLevel 'tainacan-icon-repository has-text-blue5': (metadatum.collection_id == 'default') || isRepositoryLevel
}" }"
class="tainacan-icon" /> class="tainacan-icon" />
@ -863,6 +863,7 @@ export default {
.handle { .handle {
padding-right: 6em; padding-right: 6em;
white-space: nowrap;
} }
.grip-icon { .grip-icon {
color: $gray3; color: $gray3;
@ -977,7 +978,7 @@ export default {
.available-metadata-area { .available-metadata-area {
padding: 10px 0px 10px 10px; padding: 10px 0px 10px 10px;
margin: 0; margin: 0;
max-width: 280px; max-width: 340px;
font-size: 14px; font-size: 14px;
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
@ -1027,7 +1028,8 @@ export default {
font-weight: bold; font-weight: bold;
margin-left: 0.4em; margin-left: 0.4em;
display: inline-block; display: inline-block;
max-width: 200px; max-width: 180px;
width: 60%;
} }
&:after, &:after,
&:before { &:before {

4
src/admin/pages/lists/items-page.vue
View File

@ -26,7 +26,7 @@
@click="isFiltersMenuCompressed = !isFiltersMenuCompressed"> @click="isFiltersMenuCompressed = !isFiltersMenuCompressed">
<span class="icon"> <span class="icon">
<i <i
:class="{ 'tainacan-icon-arrowleft' : isFiltersMenuCompressed, 'tainacan-icon-arrowright' : !isFiltersMenuCompressed }" :class="{ 'tainacan-icon-arrowleft' : !isFiltersMenuCompressed, 'tainacan-icon-arrowright' : isFiltersMenuCompressed }"
class="tainacan-icon tainacan-icon-20px"/> class="tainacan-icon tainacan-icon-20px"/>
</span> </span>
</button> </button>
@ -39,7 +39,7 @@
@click="isFilterModalActive = !isFilterModalActive"> @click="isFilterModalActive = !isFilterModalActive">
<span class="icon"> <span class="icon">
<i <i
:class="{ 'tainacan-icon-arrowleft' : isFiltersMenuCompressed, 'tainacan-icon-arrowright' : !isFiltersMenuCompressed }" :class="{ 'tainacan-icon-arrowleft' : !isFiltersMenuCompressed, 'tainacan-icon-arrowright' : isFiltersMenuCompressed }"
class="tainacan-icon tainacan-icon-20px"/> class="tainacan-icon tainacan-icon-20px"/>
</span> </span>
<span class="text">{{ $i18n.get('filters') }}</span> <span class="text">{{ $i18n.get('filters') }}</span>

47
src/admin/scss/_collection-home-cards.scss
View File

@ -32,12 +32,6 @@
a { background-color: $gray2; } a { background-color: $gray2; }
} }
img {
width: 96px;
height: 96px;
border-radius: 0px;
}
&.new-card { &.new-card {
.list-metadata { .list-metadata {
text-align: center; text-align: center;
@ -69,21 +63,6 @@
align-items: center; align-items: center;
} }
} }
.metadata-title {
overflow: hidden;
padding: 0.75rem 1rem;
flex-basis: calc(100% - 96px);
p {
color: black !important;
font-size: 0.875rem !important;
margin-bottom: 0;
}
}
&:hover .metadata-title {
p { text-decoration: none !important; }
}
.menu-list { .menu-list {
width: 100%; width: 100%;
@ -102,7 +81,31 @@
} }
} }
} }
.card-body {
width: 100%;
display: flex;
img {
width: 96px;
height: 96px;
border-radius: 0px;
}
.metadata-title {
overflow: hidden;
padding: 0.75rem 1rem;
flex-basis: calc(100% - 96px);
p {
color: black !important;
font-size: 0.875rem !important;
margin-bottom: 0;
}
}
&:hover .metadata-title {
p { text-decoration: none !important; }
}
}
} }
} }

2
src/admin/scss/_view-mode-grid.scss
View File

@ -53,8 +53,8 @@
} }
img { img {
min-width: 255px;
max-width: 255px; max-width: 255px;
max-height: 255px;
height: auto; height: auto;
border-radius: 0px; border-radius: 0px;
margin-bottom: -5px; margin-bottom: -5px;