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

Begins implementation of terms items list. Ref. #103.

This commit is contained in:
Mateus Machado Luna 2018-08-16 13:07:14 -03:00
parent 8f8b6aaf51
commit 9659d5a34a
3 changed files with 1616 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/admin/js/theme-main.js
View File

@ -92,6 +92,7 @@ Vue.component('view-mode-masonry', ViewModeMasonry);
Vue.use(eventBusSearch, { store: store, router: routerTheme});
// THEME ITEMS LIST (COLLECTIONS)
import ThemeItemsList from '../theme-items-list.vue';
new Vue({
@ -115,4 +116,30 @@ new Vue({
}
});
// THEME ITEMS LIST (TERMS)
import ThemeTermItemsList from '../theme-term-items-list.vue';
new Vue({
el: '#tainacan-term-items-page',
store,
router: routerTheme,
data: {
termId: '',
defaultViewMode: '',
enabledViewModes: {}
},
render: h => h(ThemeTermItemsList),
beforeMount () {
if (this.$el.attributes['term-id'] != undefined)
this.termId = this.$el.attributes['term-id'].value;
if (this.$el.attributes['default-view-mode'] != undefined)
this.defaultViewMode = this.$el.attributes['default-view-mode'].value;
if (this.$el.attributes['enabled-view-modes'] != undefined)
this.enabledViewModes = this.$el.attributes['enabled-view-modes'].value.split(',');
}
});

1405
src/admin/pages/lists/term-items-page.vue Normal file
View File

File diff suppressed because it is too large Load Diff

184
src/admin/theme-term-items-list.vue Normal file
View File

@ -0,0 +1,184 @@
<template>
<term-items-page
class="theme-items-list"
:enabled-view-modes="$root.enabledViewModes"
:default-view-mode="$root.defaultViewMode"
:term-id="$root.termId" />
</template>
<script>
export default {
name: "ThemeTermItemsList",
created() {
this.$userPrefs.init();
}
}
</script>
<style lang="scss">
@import "../admin/scss/_variables.scss";
// Bulma imports
@import "./scss/theme-basics.sass";
// Buefy imports
@import "../../node_modules/buefy/src/scss/components/_datepicker.scss";
@import "../../node_modules/buefy/src/scss/utils/_all.scss";
@import "../../node_modules/buefy/src/scss/components/_checkbox.scss";
@import "../../node_modules/buefy/src/scss/components/_radio.scss";
@import "../../node_modules/buefy/src/scss/components/_tag.scss";
@import "../../node_modules/buefy/src/scss/components/_loading.scss";
@import "../../node_modules/buefy/src/scss/components/_dropdown.scss";
@import "../../node_modules/buefy/src/scss/components/_modal.scss";
// 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/_tabs.scss";
@import "../admin/scss/_selects.scss";
@import "../admin/scss/_dropdown-and-autocomplete.scss";
@import "../admin/scss/_tooltips.scss";
@import "../admin/scss/_tainacan-form.scss";
@import "../admin/scss/_filters-menu-modal.scss";
.theme-items-list {
position: relative;
display: flex;
-webkit-overflow-scrolling: touch;
a{ color: $secondary !important }
a:hover {
cursor: pointer;
color: $secondary !important;
}
ul {
list-style: none;
}
.dropdown {
display: inline-flex;
position: relative;
vertical-align: top;
}
.dropdown-menu {
display: block;
}
.b-radio.radio {
input[type="radio"] + .check {
width: 13px !important;
height: 13px !important;
border: 1px solid $gray4 !important;
}
input[type="radio"] + .check::before {
background: black !important;
width: 7px !important;
height: 7px !important;
}
&:focus input[type="radio"] + .check,
&:active input[type="radio"] + .check,
&:hover input[type="radio"] + .check {
box-shadow: none !important;
}
input[type="radio"]:checked + .check {
border-color: $gray4 !important;
}
&:focus input[type="radio"]:checked + .check {
box-shadow: none !important;
}
}
.collapse-all {
font-size: 0.75rem;
}
.collapse .collapse-trigger {
display: inline;
cursor: pointer;
.label {
vertical-align: middle;
margin-bottom: 0px;
}
}
.filters-menu {
// height: auto;
position: absolute !important;
min-width: $filter-menu-width-theme;
border-right: 0;
padding: 25px 2.0833333% 25px 4.1666667%;
@media screen and (min-width: 769px) and (max-width: 1023px) {
min-width: 25% !important;
}
.columns {
display: flex;
}
.taginput-container {
.control.has-icons-left .icon {
top: 5px;
}
}
}
.search-control {
justify-content: flex-start !important;
@media screen and (min-width: 769px) {
margin-bottom: $page-small-top-padding !important;
.search-control-item {
margin-right: $page-side-padding !important;
}
}
@media screen and (max-width: 768px) {
justify-content: space-between !important;
}
.search-control-item:first-child>div {
margin-left: -8.3333333%;
}
.gray-icon, .gray-icon .icon {
color: $gray4 !important;
i::before {
font-size: 21px;
}
}
.dropdown-item {
padding: 0.25rem 1.35rem 0.25rem 0.25rem;
}
.view-mode-icon {
margin-right: 0px !important;
margin-top: 1px;
margin-left: 4px;
&.icon i::before, .gray-icon i::before {
font-size: 19px !important;
}
}
}
#items-list-area {
width: 100%;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
margin-left: 0;
&.spaced-to-right {
margin-left: $filter-menu-width-theme;
@media screen and (min-width: 769px) and (max-width: 1023px) {
margin-left: 25% !important;
}
}
}
}
</style>