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

Css adjustments. Better responsiviness for long colection and item titles. Better filter button positioning.

This commit is contained in:
Mateus Machado Luna 2018-08-20 12:04:59 -03:00
parent d8b54c5361
commit 5d5ceb9eb6
10 changed files with 91 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/admin/components/edition/collection-edition-form.vue
View File

@ -171,7 +171,7 @@
<b-dropdown
class="two-columns-dropdown"
ref="enabledViewModesDropdown"
:mobile-modal="false"
:mobile-modal="true"
:disabled="Object.keys(registeredViewModes).length < 0">
<button
class="button is-white"

2
src/admin/components/lists/items-list.vue
View File

@ -11,7 +11,7 @@
</div>
<div class="field is-pulled-right">
<b-dropdown
:mobile-modal="false"
:mobile-modal="true"
position="is-bottom-left"
v-if="items.length > 0 && items[0].current_user_can_edit"
:disabled="!isSelectingItems"

9
src/admin/components/navigation/tainacan-collection-subheader.vue
View File

@ -294,6 +294,15 @@ export default {
font-size: 12px;
line-height: 12px;
color: #1d1d1d;
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow-x: hidden;
max-width: 115px;
margin: 0 0.1rem;
display: inline-block;
vertical-align: bottom;
}
}
.level {

18
src/admin/components/navigation/tainacan-title.vue
View File

@ -145,12 +145,19 @@ export default {
.tainacan-page-title {
margin-bottom: 40px;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
h1, h2 {
font-size: 20px;
font-weight: 500;
color: $gray5;
display: inline-block;
width: 80%;
flex-shrink: 1;
flex-grow: 1;
}
a.back-link{
font-weight: 500;
@ -161,9 +168,20 @@ export default {
margin: 3px 0px 4px 0px;
height: 1px;
background-color: $secondary;
width: 100%;
}
.breadcrumbs {
font-size: 12px;
width: 100%;
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow-x: hidden;
max-width: 75%;
margin: 0 0.1rem;
display: inline-block;
vertical-align: bottom;
}
}
.level-left {
.level-item {

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

@ -10,10 +10,22 @@
class="is-hidden-mobile"
id="filter-menu-compress-button"
:class="{'filter-menu-compress-button-top-repo': isRepositoryLevel}"
:style="{ top: !isOnTheme ? '120px' : (searchControlHeight - 15) + 'px' }"
:style="{ top: !isOnTheme ? '120px' : '76px' }"
@click="isFiltersMenuCompressed = !isFiltersMenuCompressed">
<b-icon :icon="isFiltersMenuCompressed ? 'menu-right' : 'menu-left'" />
</button>
<!-- Filters mobile modal button -->
<button
v-if="!openAdvancedSearch"
class="is-hidden-tablet"
id="filter-menu-compress-button"
:class="{'filter-menu-compress-button-top-repo': isRepositoryLevel}"
:style="{ top: !isOnTheme ? (searchControlHeight + 70) + 'px' : (searchControlHeight - 25) + 'px' }"
@click="isFilterModalActive = !isFilterModalActive">
<b-icon :icon="isFiltersMenuCompressed ? 'menu-right' : 'menu-left'" />
<span class="text">{{ $i18n.get('filters') }}</span>
</button>
<!-- Side bar with search and filters -->
<aside
:style="{ top: searchControlHeight + 'px' }"
@ -116,7 +128,7 @@
class="search-control-item"
v-if="!isOnTheme">
<b-dropdown
:mobile-modal="false"
:mobile-modal="true"
id="item-creation-options-dropdown">
<button
class="button is-secondary"
@ -158,7 +170,7 @@
class="search-control-item">
<b-dropdown
ref="displayedMetadataDropdown"
:mobile-modal="false"
:mobile-modal="true"
:disabled="totalItems <= 0 || adminViewMode == 'grid'|| adminViewMode == 'cards'"
class="show">
<button
@ -194,6 +206,7 @@
<div class="search-control-item">
<b-field>
<b-dropdown
:mobile-modal="true"
:disabled="totalItems <= 0"
@input="onChangeOrderBy($event)">
<button
@ -262,7 +275,7 @@
<b-field>
<b-dropdown
@change="onChangeViewMode($event)"
:mobile-modal="false"
:mobile-modal="true"
position="is-bottom-left"
:aria-label="$i18n.get('label_view_mode')">
<button
@ -295,7 +308,7 @@
<b-field>
<b-dropdown
@change="onChangeAdminViewMode($event)"
:mobile-modal="false"
:mobile-modal="true"
position="is-bottom-left"
:aria-label="$i18n.get('label_view_mode')">
<button
@ -359,13 +372,6 @@
</b-field>
</div>
<!-- Filters mobile modal button -->
<div class="search-control-item is-hidden-tablet">
<button
@click="isFilterModalActive = !isFilterModalActive"
class="button is-secondary">{{ $i18n.get('filters') }}</button>
</div>
<!-- Text simple search (used on mobile, instead of the one from filter list)-->
<div class="is-hidden-tablet search-control-item">
<div class="search-area">
@ -1065,7 +1071,7 @@
},
adjustSearchControlHeight() {
this.$nextTick(() => {
this.searchControlHeight = this.$refs['search-control'] ? this.$refs['search-control'].clientHeight : 0;
this.searchControlHeight = this.$refs['search-control'] ? this.$refs['search-control'].clientHeight + this.$refs['search-control'].offsetTop : 0;
this.isFiltersMenuCompressed = jQuery(window).width() <= 768;
});
}
@ -1084,6 +1090,7 @@
});
this.$eventBusSearch.$on('hasFiltered', hasFiltered => {
this.adjustSearchControlHeight();
this.hasFiltered = hasFiltered;
});
@ -1132,12 +1139,13 @@
this.$eventBusSearch.setInitialAdminViewMode(this.$userPrefs.get(prefsAdminViewMode));
}
this.adjustSearchControlHeight();
// Watches window resize to adjust filter's top position and compression on mobile
window.addEventListener('resize', this.adjustSearchControlHeight());
window.addEventListener('resize', this.adjustSearchControlHeight);
},
beforeDestroy() {
this.$off();
window.removeEventListener('resize', this.adjustSearchControlHeight());
window.removeEventListener('resize', this.adjustSearchControlHeight);
}
}
</script>
@ -1289,6 +1297,22 @@
.icon {
margin-top: -1px;
}
@media screen and (max-width: 768px) {
max-width: 100%;
width: auto;
padding: 3px 6px 3px 0px;
height: 24px;
.icon {
position: relative;
top: -3px;
}
.text {
position: relative;
top: -6px;
}
}
}
.spaced-to-right {

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

@ -116,7 +116,7 @@
class="search-control-item"
v-if="!isOnTheme">
<b-dropdown
:mobile-modal="false"
:mobile-modal="true"
id="item-creation-options-dropdown">
<button
class="button is-secondary"
@ -158,7 +158,7 @@
class="search-control-item">
<b-dropdown
ref="displayedMetadataDropdown"
:mobile-modal="false"
:mobile-modal="true"
:disabled="totalItems <= 0 || adminViewMode == 'grid'|| adminViewMode == 'cards'"
class="show">
<button
@ -262,7 +262,7 @@
<b-field>
<b-dropdown
@change="onChangeViewMode($event)"
:mobile-modal="false"
:mobile-modal="true"
position="is-bottom-left"
:aria-label="$i18n.get('label_view_mode')">
<button
@ -295,7 +295,7 @@
<b-field>
<b-dropdown
@change="onChangeAdminViewMode($event)"
:mobile-modal="false"
:mobile-modal="true"
position="is-bottom-left"
:aria-label="$i18n.get('label_view_mode')">
<button

4
src/admin/scss/_checkboxes.scss
View File

@ -8,7 +8,7 @@
width: 12px;
height: 12px;
flex-shrink: 0;
border-radius: 0;
border-radius: 1px;
display: inline-block;
border: 1px solid $gray4;
transition: background 150ms ease-out;
@ -22,7 +22,7 @@
border-color: $gray4 !important;
}
input[type="checkbox"]:checked + .check {
background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23000' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center !important;
background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:rgb(69,70,71)' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center !important;
border-color: $gray4 !important;
}
}

10
src/admin/scss/_dropdown-and-autocomplete.scss
View File

@ -41,6 +41,16 @@
}
}
}
&.is-mobile-modal {
@media screen and (max-width: 1088px) {
.dropdown-menu {
border-radius: 4px;
.dropdown-item {
padding: 0.75rem !important;
}
}
}
}
}
.taginput-container {

5
src/admin/scss/_filters-menu-modal.scss
View File

@ -2,11 +2,8 @@
.modal-close {
right: calc(8.3333333% + 20px);
background-color: $gray1;
background-color: white;
&:hover {
background-color: $gray2;
}
&::before, &::after {
background-color: $secondary;
}

7
src/admin/scss/_view-mode-cards.scss
View File

@ -26,9 +26,14 @@
max-height: 218px;
cursor: pointer;
@media screen and (max-width: 768px) {
@media screen and (max-width: 450px) {
max-width: 100%;
min-width: 100%;
img {
width: 33.333333% !important;
height: 33.333333% !important;
}
}
&:hover {