Adjusts position of filter tags and fixes color of collection and icons repository on metadata and filters list when disabled.

This commit is contained in:
Mateus Machado Luna 2018-12-07 12:23:36 -02:00
parent e76aeb77b5
commit c9490e30f1
8 changed files with 49 additions and 102 deletions

View File

@ -61,7 +61,13 @@
</span>
<span class="icon icon-level-identifier">
<i
:class="{ 'tainacan-icon-collections has-text-turquoise5': filter.collection_id == collectionId, 'tainacan-icon-repository has-text-blue5': filter.collection_id != collectionId }"
:class="{
'tainacan-icon-collections': filter.collection_id == collectionId,
'tainacan-icon-repository': filter.collection_id != collectionId,
'has-text-turquoise5': filter.enabled && filter.collection_id == collectionId,
'has-text-blue5': filter.enabled && filter.collection_id != collectionId,
'has-text-gray': !filter.enabled
}"
class="tainacan-icon" />
</span>
<span

View File

@ -66,8 +66,11 @@
<span class="icon icon-level-identifier">
<i
:class="{
'tainacan-icon-collections has-text-turquoise5': (metadatum.collection_id != 'default' && !isRepositoryLevel),
'tainacan-icon-repository has-text-blue5': (metadatum.collection_id == 'default') || isRepositoryLevel
'tainacan-icon-collections': (metadatum.collection_id != 'default' && !isRepositoryLevel),
'tainacan-icon-repository': (metadatum.collection_id == 'default') || isRepositoryLevel,
'has-text-turquoise5': metadatum.enabled && (metadatum.collection_id != 'default' && !isRepositoryLevel),
'has-text-blue5': metadatum.enabled && (metadatum.collection_id == 'default' || isRepositoryLevel),
'has-text-gray': !metadatum.enabled
}"
class="tainacan-icon" />
</span>

View File

@ -6,7 +6,6 @@
<b-checkbox disabled>{{ $i18n.get('label_select_all_items_page') }}</b-checkbox>
</span>
</div>
<div class="field is-pulled-right">
<b-dropdown
position="is-bottom-left"

View File

@ -566,20 +566,12 @@
<!-- <skeleton-items-list v-if="!isOnTheme"/> -->
</div>
<!-- <div
v-if="openAdvancedSearch && advancedSearchResults">
<div class="advanced-search-results-title">
<h1>{{ $i18n.get('info_search_results') }}</h1>
<hr>
</div>
</div> -->
<!-- Admin View Modes-->
<items-list
v-if="!isOnTheme &&
!isLoadingItems &&
totalItems > 0 &&
openAdvancedSearch &&
advancedSearchResults"
((openAdvancedSearch && advancedSearchResults) || !openAdvancedSearch)"
:collection-id="collectionId"
:table-metadata="displayedMetadata"
:items="items"
@ -588,21 +580,6 @@
:is-on-trash="status == 'trash'"
:view-mode="adminViewMode"/>
<!-- Admin View Modes-->
<items-list
v-else-if="!isOnTheme &&
!isLoadingItems &&
totalItems > 0 &&
!openAdvancedSearch"
:collection-id="collectionId"
:table-metadata="displayedMetadata"
:items="items"
:total-items="totalItems"
:is-loading="isLoadingItems"
:is-on-trash="status == 'trash'"
:view-mode="adminViewMode"/>
<!-- When advanced search -->
<!-- Theme View Modes -->
<div
v-if="isOnTheme &&
@ -651,7 +628,6 @@
</section>
<!-- Pagination -->
<!-- When advanced search -->
<pagination
v-if="totalItems > 0 &&
(!isOnTheme || (registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].show_pagination)) &&

View File

@ -520,56 +520,32 @@
<div
v-show="(isLoadingItems &&
!(registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].full_screen))"
!(registeredViewModes[viewMode] != undefined && (registeredViewModes[viewMode].full_screen == true || registeredViewModes[viewMode].implements_skeleton == true)))"
class="loading-container">
<b-loading
:is-full-page="false"
:active="showLoading"/>
</div>
<!-- <div
v-if="openAdvancedSearch && advancedSearchResults">
<div class="advanced-search-results-title">
<h1>{{ $i18n.get('info_search_results') }}</h1>
<hr>
</div>
</div> -->
<!-- When advanced search -->
<!-- Admin View Modes-->
<items-list
v-if="!isOnTheme &&
!isLoadingItems &&
totalItems > 0 &&
openAdvancedSearch &&
advancedSearchResults"
((openAdvancedSearch && advancedSearchResults) || !openAdvancedSearch)"
:collection-id="collectionId"
:table-metadata="displayedMetadata"
:items="items"
:total-items="totalItems"
:is-loading="isLoadingItems"
:is-on-trash="status == 'trash'"
:view-mode="adminViewMode"/>
<!-- Admin View Modes-->
<items-list
v-else-if="!isOnTheme &&
!isLoadingItems &&
totalItems > 0 &&
!openAdvancedSearch"
:collection-id="collectionId"
:table-metadata="displayedMetadata"
:items="items"
:is-loading="isLoadingItems"
:is-on-trash="status == 'trash'"
:view-mode="adminViewMode"/>
<!-- When advanced search -->
<!-- Theme View Modes -->
<div
v-if="isOnTheme &&
((openAdvancedSearch && advancedSearchResults) || !openAdvancedSearch) &&
!isLoadingItems &&
openAdvancedSearch &&
advancedSearchResults &&
registeredViewModes[viewMode] != undefined &&
registeredViewModes[viewMode].type == 'template'"
v-html="itemsListTemplate"/>
@ -578,34 +554,12 @@
v-if="isOnTheme &&
registeredViewModes[viewMode] != undefined &&
registeredViewModes[viewMode].type == 'component' &&
openAdvancedSearch &&
advancedSearchResults"
((openAdvancedSearch && advancedSearchResults) || !openAdvancedSearch)"
:collection-id="collectionId"
:displayed-metadata="displayedMetadata"
:is-filters-menu-compressed="isFiltersMenuCompressed"
:items="items"
:is-loading="isLoadingItems"
:is="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].component : ''"/>
<!-- Regular -->
<!-- Theme View Modes -->
<div
v-if="isOnTheme &&
!isLoadingItems &&
!openAdvancedSearch &&
registeredViewModes[viewMode] != undefined &&
registeredViewModes[viewMode].type == 'template'"
v-html="itemsListTemplate"/>
<component
v-else-if="isOnTheme &&
registeredViewModes[viewMode] != undefined &&
registeredViewModes[viewMode].type == 'component' &&
!openAdvancedSearch"
:collection-id="collectionId"
:displayed-metadata="displayedMetadata"
:is-filters-menu-compressed="isFiltersMenuCompressed"
:items="items"
:total-items="totalItems"
:is-loading="isLoadingItems"
:is="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].component : ''"/>
@ -635,17 +589,10 @@
</section>
<!-- Pagination -->
<!-- When advanced search -->
<pagination
v-if="totalItems > 0 &&
(!isOnTheme || (registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].show_pagination)) &&
advancedSearchResults"/>
<!-- Regular -->
<pagination
v-else-if="totalItems > 0 &&
(!isOnTheme || (registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].show_pagination)) &&
!openAdvancedSearch"/>
(advancedSearchResults || !openAdvancedSearch)"/>
</div>
</div>

View File

@ -15,11 +15,24 @@
table.tainacan-table-skeleton {
tbody {
td.skeleton {
height: 52px;
td.skeleton.thumbnail-cell {
max-height: 52px;
max-width: 34px;
border-radius: 0;
background-color: #eee !important;
border-top: 5px solid white !important;
border-top: 8px solid white !important;
border-bottom: 8px solid white !important;
border-left: 18px solid white !important;
border-right: 18px solid white !important;
}
td.skeleton:not(.thumbnail-cell) {
max-height: 52px;
border-radius: 0;
background-color: #eee !important;
border-top: 18px solid white !important;
border-bottom: 18px solid white !important;
border-left: 8px solid white !important;
border-right:8px solid white !important;
}
}
}
@ -166,6 +179,7 @@
&.thumbnail-cell .skeleton {
height: 38px;
width: 38px;
border-radius: 0;
margin-top: -38px;
margin-left: auto;
margin-right: auto;
@ -187,6 +201,7 @@
}
img.table-thumb {
max-height: 38px !important;
min-height: 38px;
max-width: 38px;
border-radius: 0px;
}

View File

@ -578,22 +578,22 @@ $modal-z: 9999999;
// SKELETON GRADIENT ANIMATIONS
@-webkit-keyframes skeleton-animation {
0%{opacity: 1.0}
50%{opacity: 0.0}
50%{opacity: 0.1}
100%{opacity: 1.0}
}
@-moz-keyframes skeleton-animation {
0%{opacity: 1.0}
50%{opacity: 0.0}
50%{opacity: 0.1}
100%{opacity: 1.0}
}
@-o-keyframes skeleton-animation {
0%{opacity: 1.0}
50%{opacity: 0.0}
50%{opacity: 0.1}
100%{opacity: 1.0}
}
@keyframes skeleton-animation {
0%{opacity: 1.0}
50%{opacity: 0.0}
50%{opacity: 0.1}
100%{opacity: 1.0}
}

View File

@ -47,6 +47,7 @@
v-for="(column, index) in displayedMetadata"
:key="index"
v-if="column.display"
:class="{ 'thumbnail-cell': index == 0 }"
class="column-default-width skeleton"/>
</tr>
</tbody>