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

New style for advanced search component

This commit is contained in:
weryques 2018-07-18 13:08:40 -03:00
parent 17daaa3de7
commit e8e56bf3bd
2 changed files with 69 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/admin/components/advanced-search/advanced-search.vue
View File

@ -70,6 +70,11 @@
@add="addValueToAdvancedSearchQuery($event, 'terms', searchCriterion)"
@typing="autoCompleteTerm($event, searchCriterion)"
/>
<b-input
class="tainacan-input-disabled"
v-else
type="text"
disabled />
</b-field>
<!-- Comparators -->
@ -90,6 +95,11 @@
:value="key"
>{{ comparator }}</option>
</b-select>
<b-input
class="tainacan-input-disabled"
v-else
type="text"
disabled />
</b-field>
<div class="field">
@ -572,11 +582,17 @@
.add-link-advanced-search {
margin-top: -15px !important;
padding-left: 25px !important;
padding-left: 8px !important;
}
.add-link-advanced-search-header {
margin-top: -20px !important;
padding: 0 !important;
margin-left: -5px !important;
}
tainacan-input-disabled {
background-color: $gray;
}
}

95
src/admin/components/navigation/tainacan-header.vue
View File

@ -26,37 +26,37 @@
:value="searchQuery"
@input="futureSearchQuery = $event.target.value"
@keyup.enter="updateSearch()">
<!--<span class="icon is-right">-->
<!--<i-->
<!--@click="updateSearch()"-->
<!--class="mdi mdi-magnify"/>-->
<!--</span>-->
<b-dropdown
ref="advancedSearchShortcut"
class="advanced-search-header-dropdown"
position="is-bottom-left">
<b-icon
class="is-right"
slot="trigger"
size="is-small"
icon="menu-down"/>
<b-dropdown-item>
<p class="is-left">{{ $i18n.get('advanced_search') }}</p>
<span class="icon is-right">
<i
@click="updateSearch()"
class="mdi mdi-magnify"/>
</span>
</div>
<b-dropdown
ref="advancedSearchShortcut"
class="advanced-search-header-dropdown"
position="is-bottom-left">
<a
class="advanced-s-text"
slot="trigger">
{{ $i18n.get('advanced_search') }}
</a>
<b-dropdown-item>
<div :style="{'height': '25px'}">
<p class="is-pulled-left">{{ $i18n.get('advanced_search') }}</p>
<b-icon
icon="menu-up"
class="is-right" />
</b-dropdown-item>
<b-dropdown-item
:custom="true">
<advanced-search
:metadata="metadata"
:is-header="true"/>
</b-dropdown-item>
</b-dropdown>
</div>
<!--<a-->
<!--:style="{color: 'white'}"-->
<!--@click="toItemsPage">{{ $i18n.get('advanced_search') }}</a>-->
class="is-pulled-right" />
</div>
</b-dropdown-item>
<b-dropdown-item
:custom="true">
<advanced-search
:metadata="metadata"
:is-header="true"/>
</b-dropdown-item>
</b-dropdown>
</div>
<button
@click="showProcesses = !showProcesses"
@ -218,24 +218,33 @@
}
}
.dropdown-content {
width: 800px !important;
}
.advanced-search-header-dropdown {
height: 27px !important;
.dropdown-item:hover {
background-color: white;
}
.dropdown-content {
width: 800px !important;
}
.dropdown-item {
span.icon:not(.is-right) {
position: relative !important;
.dropdown-item:hover {
background-color: unset;
}
.dropdown-menu {
top: 0 !important;
}
.dropdown-item {
span.icon:not(.is-right) {
position: relative !important;
}
}
.advanced-s-text {
margin: 0 12px;
font-size: 12px;
color: white;
}
}
/*a {*/
/*margin: 0px 12px;*/
/*font-size: 12px;*/
/*}*/
}
}
&.menu-compressed {