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