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

Responsiveness updates for search-control bar. #347.

This commit is contained in:
Mateus Machado Luna 2020-01-27 22:27:26 -03:00
parent 5113f242ed
commit ec6e0707f3
4 changed files with 53 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -188,7 +188,8 @@
:aria-label="$i18n.get('label_displayed_metadata')" :aria-label="$i18n.get('label_displayed_metadata')"
class="button is-white" class="button is-white"
slot="trigger"> slot="trigger">
<span>{{ $i18n.get('label_displayed_metadata') }}</span> <span class="is-hidden-touch is-hidden-desktop-only">{{ $i18n.get('label_displayed_metadata') }}</span>
<span class="is-hidden-widescreen">{{ $i18n.get('metadata') }}</span>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown" /> <i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown" />
</span> </span>
@ -301,7 +302,16 @@
<div class="search-control-item"> <div class="search-control-item">
<b-field> <b-field>
<label class="label is-hidden-mobile">{{ $i18n.get('label_visualization') + ':' }}</label> <label
class="label is-hidden-touch is-hidden-desktop-only"
style="margin-right: -10px;">
{{ $i18n.get('label_visualization') + ':&nbsp; ' }}
</label>
<label
class="label is-hidden-widescreen is-hidden-mobile"
style="margin-right: -10px;">
{{ $i18n.get('label_view_on') + ':&nbsp; ' }}
</label>
<b-dropdown <b-dropdown
@change="onChangeAdminViewMode($event)" @change="onChangeAdminViewMode($event)"
:mobile-modal="true" :mobile-modal="true"
@ -400,7 +410,7 @@
<span class="gray-icon"> <span class="gray-icon">
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-url"/> <i class="tainacan-icon tainacan-icon-20px tainacan-icon-url"/>
</span> </span>
<span class="is-hidden-touch">{{ $i18n.get('label_view_as') }}</span> <span class="is-hidden-touch is-hidden-desktop-only">{{ $i18n.get('label_view_as') }}</span>
</button> </button>
</div> </div>
@ -1436,9 +1446,9 @@
} }
.view-mode-icon { .view-mode-icon {
margin-right: 3px !important; margin-right: 0px !important;
margin-top: -4px; margin-top: -2px;
margin-left: 6px !important; margin-left: 4px !important;
width: 1.25rem; width: 1.25rem;
} }
@ -1475,6 +1485,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
min-width: 120px;
max-width: calc(16.66667vw - 60px); max-width: calc(16.66667vw - 60px);
padding-right: 15px; padding-right: 15px;

2
src/views/admin/scss/_buttons.scss
View File

@ -18,7 +18,7 @@ button.link-style:active {
.button { .button {
border-radius: 6px !important; border-radius: 6px !important;
font-weight: normal; font-weight: normal;
padding: 2px 15px !important; padding: 2px 13px !important;
margin-top: 0px !important; margin-top: 0px !important;
margin-bottom: 0px !important; margin-bottom: 0px !important;
height: inherit !important; height: inherit !important;

2
src/views/tainacan-admin-i18n.php
View File

@ -292,6 +292,8 @@ return apply_filters( 'tainacan-admin-i18n', [
'label_records' => __( 'Records', 'tainacan' ), 'label_records' => __( 'Records', 'tainacan' ),
'label_masonry' => __( 'Masonry', 'tainacan' ), 'label_masonry' => __( 'Masonry', 'tainacan' ),
'label_visualization' => __( 'Visualization', 'tainacan' ), 'label_visualization' => __( 'Visualization', 'tainacan' ),
/* translators: This should be a short term for `visualization` such as `view on` referring to the view modes dropdown */
'label_view_on' => __( 'View on', 'tainacan' ),
'label_available_importers' => __( 'Available Importers', 'tainacan' ), 'label_available_importers' => __( 'Available Importers', 'tainacan' ),
'label_target_collection' => __( 'Target Collection', 'tainacan' ), 'label_target_collection' => __( 'Target Collection', 'tainacan' ),
'label_source_file' => __( 'Source file', 'tainacan' ), 'label_source_file' => __( 'Source file', 'tainacan' ),

77
src/views/theme-search/pages/theme-items-page.vue
View File

@ -104,7 +104,8 @@
:aria-label="$i18n.get('label_displayed_metadata')" :aria-label="$i18n.get('label_displayed_metadata')"
class="button is-white" class="button is-white"
slot="trigger"> slot="trigger">
<span>{{ $i18n.get('label_displayed_metadata') }}</span> <span class="is-hidden-touch is-hidden-desktop-only">{{ $i18n.get('label_displayed_metadata') }}</span>
<span class="is-hidden-widescreen">{{ $i18n.get('metadata') }}</span>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown"/> <i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown"/>
</span> </span>
@ -137,7 +138,7 @@
<!-- Change OrderBy Select and Order Button--> <!-- Change OrderBy Select and Order Button-->
<div class="search-control-item"> <div class="search-control-item">
<b-field> <b-field>
<label class="label">{{ $i18n.get('label_sorting_direction') }}</label> <label class="label">{{ $i18n.get('label_sort') }}</label>
<b-dropdown <b-dropdown
:mobile-modal="true" :mobile-modal="true"
@input="onChangeOrder()" @input="onChangeOrder()"
@ -183,7 +184,7 @@
</b-dropdown> </b-dropdown>
<span <span
class="label" class="label"
style="padding-left: 0.65rem;"> style="padding-left: 2px;">
{{ $i18n.get('info_by_inner') }} {{ $i18n.get('info_by_inner') }}
</span> </span>
<b-dropdown <b-dropdown
@ -218,7 +219,16 @@
<!-- View Modes Dropdown --> <!-- View Modes Dropdown -->
<div class="search-control-item"> <div class="search-control-item">
<b-field> <b-field>
<label class="label is-hidden-mobile">{{ $i18n.get('label_visualization') + ':&nbsp; ' }}</label> <label
class="label is-hidden-touch is-hidden-desktop-only"
style="margin-right: -10px;">
{{ $i18n.get('label_visualization') + ':&nbsp; ' }}
</label>
<label
class="label is-hidden-widescreen"
style="margin-right: -10px;">
{{ $i18n.get('label_view_on') + ':&nbsp; ' }}
</label>
<b-dropdown <b-dropdown
@change="onChangeViewMode($event)" @change="onChangeViewMode($event)"
:mobile-modal="true" :mobile-modal="true"
@ -270,7 +280,7 @@
<span <span
class="gray-icon view-mode-icon" class="gray-icon view-mode-icon"
v-html="registeredViewModes[viewModeOption].icon"/> v-html="registeredViewModes[viewModeOption].icon"/>
<span class="is-hidden-touch">{{ registeredViewModes[viewModeOption].label }}</span> <span class="is-hidden-tablet-only">{{ registeredViewModes[viewModeOption].label }}</span>
</button> </button>
</div> </div>
@ -284,7 +294,7 @@
<span class="gray-icon"> <span class="gray-icon">
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-url"/> <i class="tainacan-icon tainacan-icon-20px tainacan-icon-url"/>
</span> </span>
<span class="is-hidden-touch">{{ $i18n.get('label_view_as') }}</span> <span class="is-hidden-touch is-hidden-desktop-only">{{ $i18n.get('label_view_as') }}</span>
</button> </button>
</div> </div>
</div> </div>
@ -1224,7 +1234,7 @@
} }
.view-mode-icon { .view-mode-icon {
margin-right: 0px !important; margin-right: 0px !important;
margin-top: -4px; margin-top: -2px;
margin-left: 4px; margin-left: 4px;
width: 1.25rem; width: 1.25rem;
@ -1246,6 +1256,10 @@
&:first-of-type { &:first-of-type {
min-width: 100%; min-width: 100%;
.search-area {
max-width: 100% !important;
}
} }
} }
@ -1280,41 +1294,6 @@
max-width: 26px; max-width: 26px;
} }
.view-mode-icon {
margin-right: 3px !important;
margin-top: -4px;
margin-left: 6px !important;
width: 1.25rem;
}
.search-area {
position: relative;
display: flex;
align-items: center;
width: 100%;
.control {
width: 100%;
.icon {
pointer-events: all;
cursor: pointer;
color: $blue5;
height: 27px;
font-size: 1.125rem !important;
height: auto !important;
}
margin: -2px 0 5px 0;
}
.is-pulled-right {
position: absolute;
right: 0;
top: 100%;
}
.input {
border: 1px solid $gray2;
}
}
.dropdown-menu { .dropdown-menu {
display: block; display: block;
@ -1344,13 +1323,12 @@
} }
.search-area { .search-area {
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
max-width: 16.66667vw;
.input {
border: 1px solid $gray2;
}
.control { .control {
width: 100%; width: 100%;
.icon { .icon {
@ -1361,6 +1339,15 @@
font-size: 1.125rem !important; font-size: 1.125rem !important;
height: auto !important; height: auto !important;
} }
margin: -2px 0 5px 0;
}
.is-pulled-right {
position: absolute;
right: 0;
top: 100%;
}
.input {
border: 1px solid $gray2;
} }
a { a {
margin-left: 12px; margin-left: 12px;