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

Improvements in theme search control design. Preventive renderMetadata function on Items List table for admin.

This commit is contained in:
mateuswetah 2018-06-01 21:09:29 -03:00
parent b7839998b5
commit 2d326c1bb3
4 changed files with 20 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -101,10 +101,10 @@
v-if="column.field !== 'row_thumbnail' &&
column.field !== 'row_actions' &&
column.field !== 'row_creation'"
:data="renderMetadata( item.metadata[column.slug] )"/> -->
:data="renderMetadata(item.metadata, column)"/> -->
<p
v-tooltip="{
content: renderMetadata( item.metadata[column.slug] ),
content: renderMetadata(item.metadata, column),
html: true,
autoHide: false,
placement: 'auto-start'
@ -114,7 +114,7 @@
column.field !== 'row_actions' &&
column.field !== 'row_creation' &&
column.field !== 'row_author'"
v-html="renderMetadata( item.metadata[column.slug] )"/>
v-html="renderMetadata(item.metadata, column)"/>
<span v-if="column.field == 'row_thumbnail'">
<img
@ -284,7 +284,9 @@ export default {
goToItemEditPage(itemId) {
this.$router.push(this.$routerHelper.getItemEditPath(this.collectionId, itemId));
},
renderMetadata(metadata) {
renderMetadata(itemMetadata, column) {
let metadata = itemMetadata[column.slug] != undefined ? itemMetadata[column.slug] : false;
if (!metadata) {
return '';

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

@ -14,16 +14,18 @@
}
}
.dropdown-menu {
padding: 0;
border-radius: 0px;
.dropdown-content {
padding: 0;
border-radius: 0px !important;
.dropdown-item {
padding: 0.375rem 1rem;
label { margin-bottom: 0; }
&.control { font-size: 13px !important; }
.b-checkbox { width: 100% };
&:hover {
background-color: $primary-lighter;
}
.is-small {
color: gray;
}
&:hover { background-color: $primary-lighter; }
.is-small { color: gray; }
}
}
}

1
src/admin/scss/theme-basics.sass
View File

@ -5,3 +5,4 @@
@import "../../../node_modules/bulma/sass/elements/icon.sass"
@import "../../../node_modules/bulma/sass/elements/tag.sass"
@import "../../../node_modules/bulma/sass/components/tabs.sass"
@import "../../../node_modules/bulma/sass/elements/button.sass"

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

@ -14,6 +14,8 @@ export default {
<style lang="scss">
@import "../admin/scss/_variables.scss";
// Bulma imports
@import "./scss/theme-basics.sass";
@ -28,8 +30,8 @@ export default {
@import "../../node_modules/buefy/src/scss/components/_dropdown.scss";
// Tainacan imports
@import "../admin/scss/_variables.scss";
@import "../admin/scss/_tables.scss";
@import "../admin/scss/_dropdown-and-autocomplete.scss";
@import "../admin/scss/_tooltips.scss";
@import "../admin/scss/_tainacan-form.scss";
@ -56,11 +58,8 @@ export default {
margin-top: 0px;
margin-bottom: 0px;
display: inline-flex;
color: #1d1d1d;
font-size: 1.0em;
font-weight: normal;
cursor: pointer;
background-color: white;
&.is-secondary:hover, &.is-secondary:focus {
background: $secondary !important;
@ -151,162 +150,8 @@ export default {
position: relative;
vertical-align: top;
}
.dropdown, .autocomplete {
.dropdown-trigger{
.button {
border: none;
.icon {
color: $secondary;
align-items: start;
}
}
.button.is-primary, .button.is-secondary, .button.is-success {
.icon {
color: $white;
}
}
}
.dropdown-menu {
display: block;
.dropdown-content {
font-size: 13px !important;
border-radius: 0px !important;
.dropdown-item {
a {
color: $tainacan-input-color !important;
}
.b-checkbox { width: 100% };
&:hover {
background-color: $primary-lighter;
}
.is-small {
color: gray;
}
}
}
}
}
.taginput-container {
padding: 0 !important;
background-color: white !important;
&:focus, &:active {
border: none !important;
}
.input { margin-bottom: 0px !important; }
.input.has-selected, .input:focus, .input:active {
background-color: white;
border: 1px solid $tainacan-input-background !important;
}
.tag {
background: white;
padding-right: 0;
padding-left: 0.5em;
&.is-delete {
color: $gray-light;
&::after {
height: 30% !important;
width: 1px !important;
}
&::before {
width: 30% !important;
height: 1px !important;
}
&:hover, &:focus {
background-color: white;
color: black;
}
}
}
}
.selected-list-box {
padding: 4px 0px;
border: 1px solid $tainacan-input-background;
background-color: white;
display: flex;
.tags {
margin-right: 8px;
}
.tag {
background: white;
padding-right: 0;
padding-left: 0.5em;
&.is-delete {
color: $gray-light;
&::after {
height: 30% !important;
width: 1px !important;
}
&::before {
width: 30% !important;
height: 1px !important;
}
&:hover, &:focus {
background-color: white;
color: black;
}
}
}
}
.switch {
input[type="checkbox"] + .check {
background-color: $gray-light;
border: 2px solid $gray-light;
width: 2.7em;
height: 1.7em;
&::before {
background-color: white;
box-shadow: none;
}
}
&:hover input[type="checkbox"]:checked + .check {
background-color: $primary-light;
}
input[type="checkbox"]:checked + .check {
border: 2px solid $secondary;
background-color: transparent;
&::before {
background-color: $secondary;
transform: translate3d(78%, 0, 0);
}
}
&:hover input[type="checkbox"] + .check {
background-color: $gray-light;
}
&:focus input[type="checkbox"] + .check,
&:focus input[type="checkbox"]:checked + .check {
box-shadow: none;
}
&.is-small {
font-size: 9px;
input[type="checkbox"] + .check {
border: 1.5px solid $gray-light;
width: 2.55em;
height: 1.7em;
&::before {
width: 1.0em;
height: 1.0em;
}
}
input[type="checkbox"]:checked + .check {
border: 1.5px solid $secondary;
&::before {
transform: translate3d(84%, 0, 0);
}
}
}
.dropdown-menu {
display: block;
}
.b-checkbox.checkbox {