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

New version of Collection Edition Form.

This commit is contained in:
Mateus Machado Luna 2018-08-21 12:42:01 -03:00
parent 43fb79a6f9
commit 68c6b907b6
3 changed files with 134 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

191
src/admin/components/edition/collection-edition-form.vue
View File

@ -10,55 +10,48 @@
<!-- Header Page -------------------------------- -->
<b-field :addons="false">
<label class="label">{{ $i18n.get('label_header_image') }}</label>
<!-- <label class="label">{{ $i18n.get('label_header_image') }}</label> -->
<div class="header-field">
<figure class="image">
<span
v-if="collection.header_image == undefined || collection.header_image == false"
class="image-placeholder">{{ $i18n.get('label_empty_header_image') }}</span>
<img
:alt="$i18n.get('label_thumbnail')"
:src="(collection.header_image == undefined || collection.header_image == false) ? headerPlaceholderPath : collection.header_image">
</figure>
<div class="header-buttons-row">
<a
class="button is-rounded is-secondary"
id="button-edit-header-image"
:aria-label="$i18n.get('label_button_edit_header_image')"
@click="headerImageMediaFrame.openFrame($event)">
<b-icon
size="is-small"
icon="pencil" />
</a>
<a
class="button is-rounded is-secondary"
id="button-delete-header-image"
:aria-label="$i18n.get('label_button_delete_thumb')"
@click="deleteHeaderImage()">
<b-icon
size="is-small"
icon="delete" />
</a>
</div>
</div>
</b-field>
<div class="columns">
<div class="column is-4">
<!-- Thumbnail -------------------------------- -->
<b-field :addons="false">
<label class="label">{{ $i18n.get('label_thumbnail') }}</label>
<div
class="header-image-img"
:style="{ backgroundImage: 'url(' + ((collection.header_image == undefined || collection.header_image == false) ? headerPlaceholderPath : collection.header_image + ')') }"/>
<div class="header-buttons-row">
<a
class="button is-rounded is-secondary"
id="button-edit-header-image"
:aria-label="$i18n.get('label_button_edit_header_image')"
@click="headerImageMediaFrame.openFrame($event)">
<b-icon
size="is-small"
icon="pencil" />
</a>
<a
class="button is-rounded is-secondary"
id="button-delete-header-image"
:aria-label="$i18n.get('label_button_delete_thumb')"
@click="deleteHeaderImage()">
<b-icon
size="is-small"
icon="delete" />
</a>
</div>
<div class="description-placeholder-area" />
<!-- Thumbnail -------------------------------- -->
<!-- <label class="label">{{ $i18n.get('label_thumbnail') }}</label> -->
<div class="thumbnail-field">
<figure class="image">
<span
v-if="collection.thumbnail.thumb == undefined || collection.thumbnail.thumb == false"
v-if="collection.thumbnail == undefined || ((collection.thumbnail.medium == undefined || collection.thumbnail.medium == false) && (collection.thumbnail.tainacan_medium == undefined || collection.thumbnail.tainacan_medium == false))"
class="image-placeholder">{{ $i18n.get('label_empty_thumbnail') }}</span>
<img
id="thumbail-image"
:alt="$i18n.get('label_thumbnail')"
:src="(collection.thumbnail.thumb == undefined || collection.thumbnail.thumb == false) ? thumbPlaceholderPath : collection.thumbnail.thumb">
:src="((collection.thumbnail.medium == undefined || collection.thumbnail.medium == false) && (collection.thumbnail.tainacan_medium == undefined || collection.thumbnail.tainacan_medium == false)) ? thumbPlaceholderPath : (collection.thumbnail.tainacan_medium ? collection.thumbnail.tainacan_medium : collection.thumbnail.medium)">
</figure>
<div class="thumbnail-buttons-row">
<a
@ -81,7 +74,12 @@
</a>
</div>
</div>
</b-field>
</figure>
</div>
</b-field>
<div class="columns">
<div class="column is-4">
<!-- Cover Page -------------------------------- -->
<b-field
@ -220,20 +218,21 @@
</option>
</b-select>
</b-field>
<!-- Comment Status ------------------------ -->
<b-field
:addons="false"
:label="$i18n.get('label_comment_status')">
<div class="field">
<label class="label">{{ $i18n.get('label_comment_status') }}</label>
<help-button
:title="$i18n.getHelperTitle('collections', 'comment_status')"
:message="$i18n.getHelperMessage('collections', 'comment_status')"/>
<b-switch
id="tainacan-checkbox-comment-status"
size="is-small"
true-value="open"
false-value="closed"
v-model="form.comment_status" />
<help-button
:title="$i18n.getHelperTitle('collections', 'comment_status')"
:message="$i18n.getHelperMessage('collections', 'comment_status')"/>
</b-field>
</div>
</div>
<div class="column is-1" />
<div class="column">
@ -821,6 +820,9 @@ export default {
@import "../../scss/_variables.scss";
.column {
padding: 0px;
}
.field {
position: relative;
@ -853,36 +855,70 @@ export default {
}
}
.header-field {
img {
padding: 20px;
margin-bottom: 3rem;
.header-image-img {
height: 360px;
background-size: cover;
background-position: center;
opacity: 1.0;
transition: opacity 0.3s;
@media screen and (max-width: 769px) {
height: 200px;
}
&:hover {
opacity: 0.8;
}
}
.image-placeholder {
position: absolute;
left: 30%;
right: 30%;
top: 40%;
top: 30%;
font-size: 2.0rem;
font-weight: bold;
z-index: 99;
text-align: center;
color: $gray4;
@media screen and (min-width: 769px) and (max-width: 1024px) {
font-size: 1.4rem;
}
@media screen and (max-width: 769px) {
font-size: 1.2rem;
}
font-size: 1.125rem;
top: 15%;
}
}
.header-buttons-row {
text-align: right;
top: -35px;
right: 20px;
bottom: 140px;
right: $page-side-padding;
position: relative;
@media screen and (min-width: 769px) and (max-width: 1024px) {
bottom: 128px;
}
}
.description-placeholder-area {
background-color: $gray5;
height: 118px;
width: 100%;
position: absolute;
bottom: 0%;
border-top: 4px solid white;
}
}
.thumbnail-field {
max-height: 208px;
margin-bottom: 180px;
margin-top: -20px;
position: absolute;
bottom: 195px;
left: $page-side-padding;
@media screen and (max-width: 769px) {
bottom: 152px;
}
.content {
padding: 10px;
@ -890,25 +926,56 @@ export default {
}
img {
border-radius: 100px;
border: 4px solid white;
position: absolute;
height: 178px;
width: 178px;
padding: 20px;
min-height: 168px;
min-width: 168px;
max-height: 168px;
max-width: 168px;
margin: 20px;
padding: 0;
opacity: 1.0;
transition: opacity 0.3s;
@media screen and (max-width: 769px) {
min-height: 85px;
min-width: 85px;
max-height: 85px;
max-width: 85px;
}
&:hover {
opacity: 0.9;
}
}
.image-placeholder {
position: relative;
left: 40px;
bottom: -100px;
font-size: 0.8rem;
bottom: -125px;
font-size: 1rem;
font-weight: bold;
z-index: 99;
text-align: center;
color: $gray4;
display: block;
width: 90%;
margin-left: auto;
margin-right: auto;
@media screen and (max-width: 769px) {
font-size: 0.7rem;
bottom: -80px;
left: 15px;
}
}
.thumbnail-buttons-row {
position: relative;
left: 60px;
bottom: -142px;
left: 116px;
bottom: -165px;
@media screen and (max-width: 769px) {
left: 70px;
bottom: -80px;
}
}
}
.selected-cover-page {

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

@ -210,16 +210,16 @@
<div class="section-box section-thumbnail">
<div class="thumbnail-field">
<file-item
v-if="item.thumbnail.thumb != undefined && item.thumbnail.thumb != false"
v-if="item.thumbnail != undefined && ((item.thumbnail.tainacan_medium != undefined && item.thumbnail.tainacan_medium != false) || (item.thumbnail.medium != undefined && item.thumbnail.medium != false))"
:show-name="false"
:size="178"
:file="{
media_type: 'image',
guid: { rendered: item.thumbnail.thumb },
guid: { rendered: item.thumbnail.tainacan_medium ? item.thumbnail.tainacan_medium : item.thumbnail.medium },
title: { rendered: $i18n.get('label_thumbnail')},
description: { rendered: `<img alt='Thumbnail' src='` + item.thumbnail.full + `'/>` }}"/>
<figure
v-if="item.thumbnail.thumb == undefined || item.thumbnail.thumb == false"
v-if="item.thumbnail == undefined || ((item.thumbnail.medium == undefined || item.thumbnail.medium == false) && (item.thumbnail.tainacan_medium == undefined || item.thumbnail.tainacan_medium == false))"
class="image">
<span class="image-placeholder">{{ $i18n.get('label_empty_thumbnail') }}</span>
<img
@ -237,7 +237,7 @@
icon="pencil" />
</a>
<a
v-if="item.thumbnail.thumb != undefined && item.thumbnail.thumb != false"
v-if="(item.thumbnail.tainacan_medium != undefined && item.thumbnail.tainacan_medium != false) || (item.thumbnail.medium != undefined && item.thumbnail.medium != false)"
id="button-delete-thumbnail"
class="button is-rounded is-secondary"
:aria-label="$i18n.get('label_button_delete_thumb')"

2
src/admin/components/navigation/tainacan-title.vue
View File

@ -201,7 +201,7 @@ export default {
}
top: 206px;
margin-bottom: 0px !important;
margin-bottom: 12px !important;
}
}
</style>