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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -61,7 +61,13 @@
</span> </span>
<span class="icon icon-level-identifier"> <span class="icon icon-level-identifier">
<i <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" /> class="tainacan-icon" />
</span> </span>
<span <span

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

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

1
src/admin/components/search/skeleton-items-list.vue
View File

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

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

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

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

@ -520,56 +520,32 @@
<div <div
v-show="(isLoadingItems && 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"> class="loading-container">
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
:active="showLoading"/> :active="showLoading"/>
</div> </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 -->
<items-list
v-if="!isOnTheme &&
!isLoadingItems &&
totalItems > 0 &&
openAdvancedSearch &&
advancedSearchResults"
:collection-id="collectionId"
:table-metadata="displayedMetadata"
:items="items"
:is-loading="isLoadingItems"
:is-on-trash="status == 'trash'"
:view-mode="adminViewMode"/>
<!-- Admin View Modes--> <!-- Admin View Modes-->
<items-list <items-list
v-else-if="!isOnTheme && v-if="!isOnTheme &&
!isLoadingItems && !isLoadingItems &&
totalItems > 0 && totalItems > 0 &&
!openAdvancedSearch" ((openAdvancedSearch && advancedSearchResults) || !openAdvancedSearch)"
:collection-id="collectionId" :collection-id="collectionId"
:table-metadata="displayedMetadata" :table-metadata="displayedMetadata"
:items="items" :items="items"
:total-items="totalItems"
:is-loading="isLoadingItems" :is-loading="isLoadingItems"
:is-on-trash="status == 'trash'" :is-on-trash="status == 'trash'"
:view-mode="adminViewMode"/> :view-mode="adminViewMode"/>
<!-- When advanced search -->
<!-- Theme View Modes --> <!-- Theme View Modes -->
<div <div
v-if="isOnTheme && v-if="isOnTheme &&
((openAdvancedSearch && advancedSearchResults) || !openAdvancedSearch) &&
!isLoadingItems && !isLoadingItems &&
openAdvancedSearch &&
advancedSearchResults &&
registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode] != undefined &&
registeredViewModes[viewMode].type == 'template'" registeredViewModes[viewMode].type == 'template'"
v-html="itemsListTemplate"/> v-html="itemsListTemplate"/>
@ -578,34 +554,12 @@
v-if="isOnTheme && v-if="isOnTheme &&
registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode] != undefined &&
registeredViewModes[viewMode].type == 'component' && registeredViewModes[viewMode].type == 'component' &&
openAdvancedSearch && ((openAdvancedSearch && advancedSearchResults) || !openAdvancedSearch)"
advancedSearchResults"
:collection-id="collectionId" :collection-id="collectionId"
:displayed-metadata="displayedMetadata" :displayed-metadata="displayedMetadata"
:is-filters-menu-compressed="isFiltersMenuCompressed"
:items="items" :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" :is-filters-menu-compressed="isFiltersMenuCompressed"
:items="items" :total-items="totalItems"
:is-loading="isLoadingItems" :is-loading="isLoadingItems"
:is="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].component : ''"/> :is="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].component : ''"/>
@ -633,19 +587,12 @@
</router-link> </router-link>
</div> </div>
</section> </section>
<!-- Pagination --> <!-- Pagination -->
<!-- When advanced search -->
<pagination <pagination
v-if="totalItems > 0 && v-if="totalItems > 0 &&
(!isOnTheme || (registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].show_pagination)) && (!isOnTheme || (registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].show_pagination)) &&
advancedSearchResults"/> (advancedSearchResults || !openAdvancedSearch)"/>
<!-- Regular -->
<pagination
v-else-if="totalItems > 0 &&
(!isOnTheme || (registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].show_pagination)) &&
!openAdvancedSearch"/>
</div> </div>
</div> </div>

21
src/admin/scss/_tables.scss
View File

@ -15,11 +15,24 @@
table.tainacan-table-skeleton { table.tainacan-table-skeleton {
tbody { tbody {
td.skeleton { td.skeleton.thumbnail-cell {
height: 52px; max-height: 52px;
max-width: 34px;
border-radius: 0; border-radius: 0;
background-color: #eee !important; 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 { &.thumbnail-cell .skeleton {
height: 38px; height: 38px;
width: 38px; width: 38px;
border-radius: 0;
margin-top: -38px; margin-top: -38px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -187,6 +201,7 @@
} }
img.table-thumb { img.table-thumb {
max-height: 38px !important; max-height: 38px !important;
min-height: 38px;
max-width: 38px; max-width: 38px;
border-radius: 0px; border-radius: 0px;
} }

8
src/admin/scss/_variables.scss
View File

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

1
src/theme-helper/view-mode-table.vue
View File

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