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">
<span class="icon">
<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"/>
</span>
</button>

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

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

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

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

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

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

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

@ -26,7 +26,7 @@
@click="isFiltersMenuCompressed = !isFiltersMenuCompressed">
<span class="icon">
<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"/>
</span>
</button>
@ -39,7 +39,7 @@
@click="isFilterModalActive = !isFilterModalActive">
<span class="icon">
<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"/>
</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; }
}
img {
width: 96px;
height: 96px;
border-radius: 0px;
}
&.new-card {
.list-metadata {
text-align: center;
@ -69,21 +63,6 @@
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 {
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 {
min-width: 255px;
max-width: 255px;
max-height: 255px;
height: auto;
border-radius: 0px;
margin-bottom: -5px;