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

Several css fixes. Includes a thumbnail placeholder image when none is selected for item in admin listing. Remoes context-edit from category-checkbox in filters.

This commit is contained in:
Mateus Machado Luna 2018-06-07 18:28:41 -03:00
parent ad083b7af8
commit 86a78e46e2
11 changed files with 177 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/admin/components/edition/item-edition-form.vue
View File

@ -21,7 +21,7 @@
:title="$i18n.getHelperTitle('items', 'status')"
:message="$i18n.getHelperMessage('items', 'status')"/>
</div>
<div class="section-box section-status">
<div class="section-status">
<div class="field">
<!-- <div class="block">
<b-radio
@ -798,7 +798,7 @@ export default {
}
}
.section-status{
width: 174px;
padding: 16px 0;
}
.section-thumbnail {
width: 174px;

60
src/admin/components/edition/term-edition-form.vue
View File

@ -18,7 +18,7 @@
@click="headerImageMediaFrame.openFrame($event)">
<b-icon icon="pencil"/>
</a>
<figure class="image is-128x128">
<figure class="image">
<span
v-if="editForm.header_image === undefined || editForm.header_image === false"
class="image-placeholder">{{ $i18n.get('label_empty_header_image') }}</span>
@ -29,18 +29,22 @@
<div class="thumbnail-buttons-row">
<a
id="button-delete"
:aria-label="$i18n.get('label_button_delete_header_image')"
@click="deleteHeaderImage()">
<b-icon icon="delete"/>
:aria-label="$i18n.get('label_button_delete_thumb')"
@click="deleteThumbnail()">
<b-icon
type="is-gray"
icon="delete" />
<span class="text">{{ $i18n.get('remove') }} </span>
</a>
</div>
<a
v-if="editForm.url != undefined && editForm.url!= ''"
class="button is-secondary"
:href="editForm.url">
{{ $i18n.get('see') + ' ' + $i18n.get('term') }}
</a>
<br>
</div>
<a
v-if="editForm.url != undefined && editForm.url!= ''"
class="button is-secondary"
:href="editForm.url">
{{ $i18n.get('see') + ' ' + $i18n.get('term') }}
</a>
</b-field>
</div>
@ -229,15 +233,22 @@
@import "../../scss/_variables.scss";
.column {
padding: 0;
&.is-narrow {
padding-right: 42px;
}
}
form {
padding: 1.0em 2.0em;
padding: 2.0rem 2rem 1rem 2rem;
border-top: 1px solid $draggable-border-color;
border-bottom: 1px solid $draggable-border-color;
margin-top: 1.0em;
.thumbnail-field {
max-height: 128px;
margin-bottom: 96px;
margin-bottom: 66px;
margin-top: -20px;
.content {
@ -245,12 +256,14 @@
font-size: 0.8em;
}
img {
position: absolute;
position: relative;
width: 128px;
}
.image-placeholder {
position: absolute;
margin-left: 10px;
margin-right: 10px;
top: 24px;
bottom: 50%;
font-size: 0.8rem;
font-weight: bold;
@ -273,18 +286,19 @@
margin-top: 1px;
}
}
.thumbnail-buttons-row {
display: none;
}
&:hover {
.thumbnail-buttons-row {
display: inline-block;
display: inline-block;
padding: 8px 0px;
border-radius: 0px 0px 0px 4px;
font-size: 14px;
a { color: $tainacan-input-color; }
.text {
top: -3px;
position: relative;
top: -128px;
background-color: rgba(255, 255, 255, 0.9);
padding: 2px 8px;
border-radius: 0px 0px 0px 4px;
left: 88px;
}
i.mdi-24px.mdi-set, i.mdi-24px.mdi::before {
font-size: 20px;
}
}
}

4
src/admin/components/lists/collections-list.vue
View File

@ -373,6 +373,10 @@ export default {
}
}
}
img.table-thumb {
border-radius: 50px !important;
}
</style>

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

@ -60,17 +60,15 @@
v-for="(column, index) in tableFields"
:key="index"
v-if="column.display && column.field_type_object != undefined && (column.field_type_object.related_mapped_prop == 'title')"
class="metadata-title">
<a
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''"
@click="goToItemPage(item)"/>
</p>
class="metadata-title"
@click="goToItemPage(item)"
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''"/>
<!-- Thumbnail -->
<a
v-if="item.thumbnail != undefined"
@click="goToItemPage(item)">
<img :src="item['thumbnail'].medium">
v-if="item.thumbnail != undefined"
@click="goToItemPage(item)">
<img :src="item['thumbnail'].medium ? item['thumbnail'].medium : thumbPlaceholderPath">
</a>
<!-- Actions -->
@ -103,82 +101,76 @@
<div
class="tainacan-cards-container"
v-if="viewMode == 'cards'">
<div class="columns is-multiline is-gapless no-gutters">
<div
:key="index"
v-for="(item, index) of items"
:class="{ 'selected-card': selectedItems[index] }"
class="tainacan-card">
<!-- Checkbox -->
<div
:class="{ 'is-selecting': isSelectingItems }"
class="card-checkbox">
<b-checkbox
size="is-small"
v-model="selectedItems[index]"/>
</div>
<!-- Title -->
<p
v-for="(column, index) in tableFields"
:key="index"
v-for="(item, index) of items"
class="column is-12-tablet is-half-desktop is-half-widescreen is-one-third-fullhd">
<div
:class="{ 'selected-card': selectedItems[index] }"
class="tainacan-card">
<!-- Checkbox -->
<div
:class="{ 'is-selecting': isSelectingItems }"
class="card-checkbox">
<b-checkbox
size="is-small"
v-model="selectedItems[index]"/>
</div>
<!-- Title -->
<p
v-if="column.display && column.field_type_object != undefined && (column.field_type_object.related_mapped_prop == 'title')"
class="metadata-title"
@click="goToItemPage(item)"
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" />
<!-- Actions -->
<div
v-if="item.current_user_can_edit"
class="actions-area"
:label="$i18n.get('label_actions')">
<a
id="button-edit"
:aria-label="$i18n.getFrom('items','edit_item')"
@click.prevent.stop="goToItemEditPage(item.id)">
<b-icon
type="is-secondary"
icon="pencil"/>
</a>
<a
id="button-delete"
:aria-label="$i18n.get('label_button_delete')"
@click.prevent.stop="deleteOneItem(item.id)">
<b-icon
type="is-secondary"
:icon="!isOnTrash ? 'delete' : 'delete-forever'"/>
</a>
</div>
<!-- Remaining metadata -->
<div
class="media"
@click="goToItemPage(item)">
<a
v-if="item.thumbnail != undefined"
@click="goToItemPage(item)">
<img :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">
</a>
<div class="list-metadata media-body">
<span
v-for="(column, index) in tableFields"
:key="index"
v-if="column.display && column.field_type_object != undefined && (column.field_type_object.related_mapped_prop == 'title')"
class="metadata-title">
<a
v-if="column.display && column.slug != 'thumbnail' && column.field_type_object != undefined && (column.field_type_object.related_mapped_prop != 'title')">
<h3 class="metadata-label">{{ column.name }}</h3>
<p
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''"
@click="goToItemPage(item)"/>
</p>
<!-- Actions -->
<div
v-if="item.current_user_can_edit"
class="actions-area"
:label="$i18n.get('label_actions')">
<a
id="button-edit"
:aria-label="$i18n.getFrom('items','edit_item')"
@click.prevent.stop="goToItemEditPage(item.id)">
<b-icon
type="is-secondary"
icon="pencil"/>
</a>
<a
id="button-delete"
:aria-label="$i18n.get('label_button_delete')"
@click.prevent.stop="deleteOneItem(item.id)">
<b-icon
type="is-secondary"
:icon="!isOnTrash ? 'delete' : 'delete-forever'"/>
</a>
</div>
<div class="card-line"/>
<!-- Remaining metadata -->
<div class="media">
<a
v-if="item.thumbnail != undefined"
@click="goToItemPage(item)">
<img :src="item['thumbnail'].thumb">
</a>
<div class="list-metadata media-body">
<span
v-for="(column, index) in tableFields"
:key="index"
v-if="column.display && column.slug != 'thumbnail' && column.field_type_object != undefined && (column.field_type_object.related_mapped_prop != 'title')">
<h3 class="metadata-label">{{ column.name }}</h3>
<p
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''"
class="metadata-value"/>
</span>
</div>
</div>
class="metadata-value"/>
</span>
</div>
</div>
</div>
</div>
</div>
@ -267,7 +259,7 @@
<span v-if="column.field == 'row_thumbnail'">
<img
class="table-thumb"
:src="item[column.slug].thumb">
:src="item['thumbnail'].thumb ? item['thumbnail'].thumb : thumbPlaceholderPath">
</span>
<p
v-tooltip="{
@ -324,6 +316,7 @@ export default {
allItemsOnPageSelected: false,
isSelectingItems: false,
selectedItems: [],
thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png',
}
},
props: {
@ -337,7 +330,7 @@ export default {
mounted() {
this.selectedItems = [];
for (let i = 0; i < this.items.length; i++)
this.selectedItems.push(false);
this.selectedItems.push(false);
},
watch: {
selectedItems() {

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

@ -121,6 +121,7 @@ export default {
.control {
input {
border-width: 0 !important;
height: 27px;
font-size: 11px;
color: $gray-light;

30
src/admin/scss/_tables.scss
View File

@ -23,17 +23,6 @@
top: auto;
display: table-cell;
&::before {
box-shadow: inset 50px 0 10px -12px #222;
content: " ";
width: 50px;
height: 100%;
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
label.checkbox {
border-radius: 0px;
background-color: white;
@ -141,7 +130,7 @@
&.selected-row {
background-color: $primary-lighter;
.checkbox-cell .checkbox, .actions-cell .actions-container {
background-color: $primary-lighter;
background-color: $primary-lighter-hover;
}
}
td {
@ -200,26 +189,15 @@
.checkbox-cell {
position: sticky !important;
position: -webkit-sticky !important;
&::before { visibility: visible; }
background-color: $gray-hover;
.checkbox {
background-color: $tainacan-input-background !important;
background-color: $gray-hover !important;
}
}
.actions-cell {
.actions-container {
background: $tainacan-input-background !important;
}
&::after {
box-shadow: inset -97px 0 17px -21px #222;
content: " ";
width: 100px;
height: 100%;
position: absolute;
right: 0px;
top: 0;
background: $gray-hover !important;
}
}

3
src/admin/scss/_tainacan-form.scss
View File

@ -4,7 +4,7 @@
.form-submit {
justify-content: space-between !important;
padding: 12px 30px;
padding: 12px 0px ;
margin-bottom: 0px;
.button {
border-width: 1px;
@ -18,6 +18,7 @@
font-weight: bold;
font-size: 14px;
display: inline-block;
white-space: nowrap;
}
.required-field-asterisk {
color: $gray;

2
src/admin/scss/_variables.scss
View File

@ -12,6 +12,7 @@ $tertiary-invert: findColorInvert($tertiary);
$primary-light:#c1dae0;
$primary-lighter: #e6f6f8;
$primary-lighter-hover: #d1e6e6;
$primary-dark: #55A0AF;
$primary-darker: darken($primary-dark, 5%);
@ -24,6 +25,7 @@ $tainacan-input-color: #1d1d1d;
$tainacan-input-background: #e5e5e5;
$tainacan-placeholder-color: #898d8f;
$draggable-border-color: #d8d8d8;
$gray-hover: #dcdcdc;
$gray: #b1b1b1;
$gray-invert: findColorInvert($gray);

50
src/admin/scss/_view-mode-cards.scss
View File

@ -1,32 +1,49 @@
.tainacan-cards-container {
min-height: 200px;
padding: 0;
display: flex;
flex-wrap: wrap;
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
.selected-card {
background-color: $primary-lighter;
.metadata-title {
background-color: $primary-lighter-hover;
}
}
.tainacan-card {
padding: 16px 44px 24px 44px;
padding: 0px;
flex-basis: 0;
margin: 0.75rem;
max-width: 410px;
min-width: 410px;
cursor: pointer;
&:hover {
background-color: $tainacan-input-background !important;
}
.card-checkbox {
position: absolute;
margin-left: -28px;
margin-top: -2px;
margin-left: 1.0rem;
margin-top: 9px;
}
.actions-area {
position: relative;
float: right;
top: -37px;
right: -30px;
width: 60px;
top: -7px;
padding-right: 12px;
width: 80px;
display: flex;
justify-content: space-between;
visibility: hidden;
opacity: 0;
transition: visibility 0.2s, opacity 0.2s;
}
&:hover .actions-area, &:hover .card-line, &.selected-card .card-line {
&:hover .actions-area {
visibility: visible;
opacity: 1.0;
}
@ -40,27 +57,38 @@
visibility: hidden;
}
img {
width: 130px;
width: 170px;
height: auto;
border-radius: 2px;
margin-right: 1.5rem;
}
&:hover img {
border-radius: 0;
}
.metadata-title {
flex-shrink: 0;
font-size: 0.875rem;
margin-bottom: 0.875rem;
padding: 0.75rem 2.75rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-bottom: -27px;
}
&:hover .metadata-title {
background-color: $gray-hover !important;
}
.media {
margin-bottom: -6px;
width: 100%;
.list-metadata {
padding-top: 12px;
padding: 0.75rem 1.5rem;
flex: 1;
font-size: 0.6875rem;
color: gray;
overflow: hidden;
width: 100%;
.metadata-label {
font-size: 0.75rem;

15
src/admin/scss/_view-mode-grid.scss
View File

@ -14,13 +14,17 @@
.tainacan-grid-item {
max-width: 258px;
flex-basis: 0;
margin: 16px 24px 24px 24px;
margin: 1rem 1.5rem 1.5rem 1.5rem;
text-align: center;
&:hover {
background-color: $tainacan-input-background;
}
.grid-item-checkbox {
position: absolute;
margin-top: 9px;
margin-left: 12px;
margin-left: 1rem;
}
.actions-area {
position: relative;
@ -36,6 +40,10 @@
background-color: $tainacan-input-background;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
a {
margin-left: 12px;
}
}
&:hover .actions-area {
visibility: visible;
@ -66,7 +74,8 @@
white-space: nowrap;
overflow: hidden;
text-align: left;
padding: 6px 12px;
padding: 6px 1rem;
cursor: pointer;
}
}

2
src/classes/filter-types/category/Checkbox.vue
View File

@ -69,7 +69,7 @@
let promise = null;
this.isLoading = true;
axios.get('/collection/'+ this.collection +'/fields/' + this.field + '?context=edit')
axios.get('/collection/'+ this.collection +'/fields/' + this.field)
.then( res => {
let field = res.data;
promise = this.getValuesCategory( field.field_type_options.taxonomy_id );