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

Better responsiviness for Advanced Search on Theme.

This commit is contained in:
Mateus Machado Luna 2018-08-01 10:02:13 -03:00
parent 9a63d08118
commit da8aa71e4b
4 changed files with 31 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,13 +18,13 @@
v-else
:style="advancedSearchResults ? { 'padding-top': '0' } : { 'padding-top': '47px' }"
:class="{ 'padding-in-header': isHeader, 'padding-regular': !isHeader }"
class="columns is-multiline tnc-advanced-search-container">
class="tnc-advanced-search-container">
<div
v-show="!advancedSearchResults"
v-for="searchCriterion in searchCriteria"
:key="searchCriterion"
class="field column is-12 tainacan-form">
class="field is-12 tainacan-form">
<b-field
class="columns"
@ -88,7 +88,6 @@
@typing="autoCompleteTerm($event, searchCriterion)"
/>
<b-input
class="tainacan-input-disabled"
v-else
type="text"
disabled />
@ -113,7 +112,6 @@
>{{ comparator }}</option>
</b-select>
<b-input
class="tainacan-input-disabled"
v-else
type="text"
disabled />
@ -609,7 +607,7 @@
padding-bottom: 47px;
.column {
padding: 0 0.3rem 0.3rem !important;
padding: 0 0.5rem 0.75rem !important;
}
.control {
@ -632,9 +630,16 @@
margin-left: -5px !important;
}
.tainacan-input-disabled {
background-color: $gray3;
@media screen and (max-width: 768px) {
.is-12>.columns {
flex-wrap: wrap;
}
.is-two-thirds {
order: 3;
flex-basis: 100%;
}
}
}
</style>

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

@ -94,7 +94,7 @@
<div
id="items-list-area"
class="items-list-area"
:class="{ 'spaced-to-right': !isFiltersMenuCompressed }">
:class="{ 'spaced-to-right': !isFiltersMenuCompressed && !openAdvancedSearch }">
<!-- FILTERS TAG LIST-->
<filters-tags-list
@ -382,17 +382,15 @@
</div>
<!-- ADVANCED SEARCH -->
<div
v-if="openAdvancedSearch">
<div v-if="openAdvancedSearch">
<div class="columns tnc-advanced-search-close">
<div class="column">
<div class="advanced-search-criteria-title">
<div class="tnc-advanced-search-close">
<div class="advanced-search-criteria-title">
<div class="is-flex">
<h1>{{ $i18n.get('info_search_criteria') }}</h1>
<div
:style="{'margin-bottom': 'auto'}"
class="field is-grouped is-pulled-right">
class="field is-grouped">
<p
v-if="advancedSearchResults"
class="control">
@ -413,8 +411,8 @@
</a>
</p>
</div>
<hr>
</div>
<hr>
</div>
</div>
@ -1087,6 +1085,10 @@
.advanced-search-criteria-title {
padding: 0;
&>.is-flex {
justify-content: space-between;
}
h1 {
font-size: 20px;
font-weight: 500;
@ -1307,6 +1309,9 @@
align-items: center;
width: 100%;
.input {
border: 1px solid $gray2;
}
.control {
width: 100%;
.icon {

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

@ -10,8 +10,8 @@
border: 1px solid $gray2 !important;
}
&[disabled] {
color: $gray4;
background-color: $gray2;
color: $gray4 !important;
background-color: $gray2 !important;
}
&::placeholder,
&::-ms-input-placeholder,

91
src/admin/theme-items-list.vue
View File

@ -35,6 +35,9 @@ export default {
// Tainacan imports
@import "../admin/scss/_tables.scss";
@import "../admin/scss/_modals.scss";
@import "../admin/scss/_buttons.scss";
@import "../admin/scss/_inputs.scss";
@import "../admin/scss/_checkboxes.scss";
@import "../admin/scss/_pagination.scss";
@import "../admin/scss/_tags.scss";
@import "../admin/scss/_selects.scss";
@ -56,65 +59,6 @@ export default {
list-style: none;
}
// Some components have a different style in listing pages
.button {
height: inherit !important;
box-shadow: none !important;
border-radius: 6px;
padding: 2px 15px;
margin-top: 0px;
margin-bottom: 0px;
display: inline-flex;
font-weight: normal;
cursor: pointer;
&.is-secondary:hover, &.is-secondary:focus {
background: $secondary !important;
}
&.is-primary:hover, &.is-primary:focus {
background: $turquoise3 !important;
}
&.is-success:hover, &.is-success:focus {
background: $success !important;
}
&.is-white:hover, &.is-white:focus, &.is-outlined:hover, &.is-outlined:focus {
background: $white !important;
}
&:active {
-webkit-transform: none !important;
transform: none !important;
}
&.is-outlined {
color: #150e38 !important;
background-color: white;
border-color: $gray4 !important;
}
&:focus {
outline: 0px;
}
}
.button.is-small {
height: 26px !important;
line-height: 12px;
}
.button:not(.is-small):not(.is-medium):not(.is-large) {
height: 30px !important;
line-height: 20px !important;
font-size: 14px !important;
}
.input, .textarea {
font-size: 14px;
border: 1px solid $gray2;
border-radius: 1px !important;
background-color: white;
box-shadow: none !important;
&:focus, &:active {
box-shadow: none !important;
background-color: white;
border: 1px solid $gray2 !important;
}
}
.dropdown {
display: inline-flex;
position: relative;
@ -123,35 +67,6 @@ export default {
.dropdown-menu {
display: block;
}
.b-checkbox.checkbox {
align-items: baseline;
margin-bottom: 5px;
input[type="checkbox"] {
box-shadow: none !important;
}
input[type="checkbox"] + .check {
width: 1.0em;
height: 1.0em;
flex-shrink: 0;
border-radius: 0;
border: 1px solid $gray4;
transition: background 150ms ease-out;
box-shadow: none !important;
}
&:focus input[type="checkbox"] + .check,
&:active input[type="checkbox"] + .check,
&:hover input[type="checkbox"] + .check {
box-shadow: none !important;
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;
border-color: $gray4 !important;
}
}
.b-radio.radio {
input[type="radio"] + .check {