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)" @add="addValueToAdvancedSearchQuery($event, 'terms', searchCriterion)"
@typing="autoCompleteTerm($event, searchCriterion)" @typing="autoCompleteTerm($event, searchCriterion)"
/> />
<b-input
class="tainacan-input-disabled"
v-else
type="text"
disabled />
</b-field> </b-field>
<!-- Comparators --> <!-- Comparators -->
@ -90,6 +95,11 @@
:value="key" :value="key"
>{{ comparator }}</option> >{{ comparator }}</option>
</b-select> </b-select>
<b-input
class="tainacan-input-disabled"
v-else
type="text"
disabled />
</b-field> </b-field>
<div class="field"> <div class="field">
@ -572,11 +582,17 @@
.add-link-advanced-search { .add-link-advanced-search {
margin-top: -15px !important; margin-top: -15px !important;
padding-left: 25px !important; padding-left: 8px !important;
} }
.add-link-advanced-search-header { .add-link-advanced-search-header {
margin-top: -20px !important; 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" :value="searchQuery"
@input="futureSearchQuery = $event.target.value" @input="futureSearchQuery = $event.target.value"
@keyup.enter="updateSearch()"> @keyup.enter="updateSearch()">
<!--<span class="icon is-right">--> <span class="icon is-right">
<!--<i--> <i
<!--@click="updateSearch()"--> @click="updateSearch()"
<!--class="mdi mdi-magnify"/>--> class="mdi mdi-magnify"/>
<!--</span>--> </span>
<b-dropdown </div>
ref="advancedSearchShortcut" <b-dropdown
class="advanced-search-header-dropdown" ref="advancedSearchShortcut"
position="is-bottom-left"> class="advanced-search-header-dropdown"
<b-icon position="is-bottom-left">
class="is-right" <a
slot="trigger" class="advanced-s-text"
size="is-small" slot="trigger">
icon="menu-down"/> {{ $i18n.get('advanced_search') }}
<b-dropdown-item> </a>
<p class="is-left">{{ $i18n.get('advanced_search') }}</p> <b-dropdown-item>
<div :style="{'height': '25px'}">
<p class="is-pulled-left">{{ $i18n.get('advanced_search') }}</p>
<b-icon <b-icon
icon="menu-up" icon="menu-up"
class="is-right" /> class="is-pulled-right" />
</b-dropdown-item> </div>
<b-dropdown-item </b-dropdown-item>
:custom="true"> <b-dropdown-item
<advanced-search :custom="true">
:metadata="metadata" <advanced-search
:is-header="true"/> :metadata="metadata"
</b-dropdown-item> :is-header="true"/>
</b-dropdown> </b-dropdown-item>
</div> </b-dropdown>
<!--<a-->
<!--:style="{color: 'white'}"-->
<!--@click="toItemsPage">{{ $i18n.get('advanced_search') }}</a>-->
</div> </div>
<button <button
@click="showProcesses = !showProcesses" @click="showProcesses = !showProcesses"
@ -218,24 +218,33 @@
} }
} }
.dropdown-content { .advanced-search-header-dropdown {
width: 800px !important; height: 27px !important;
}
.dropdown-item:hover { .dropdown-content {
background-color: white; width: 800px !important;
} }
.dropdown-item { .dropdown-item:hover {
span.icon:not(.is-right) { background-color: unset;
position: relative !important; }
.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 { &.menu-compressed {