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

Css adjustments to Items Page and Item Edition Page. Removal of metadata compress menu.

This commit is contained in:
Mateus Machado Luna 2018-12-12 10:55:33 -02:00
parent 530084651a
commit c79f1686f8
4 changed files with 307 additions and 408 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/admin/admin.vue
View File

@ -103,6 +103,7 @@
margin: 94px auto 0 auto;
position: relative;
overflow-y: hidden;
overflow-x: hidden;
height: calc(100% - 94px);
@media screen and (max-width: 769px) {

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

@ -4,15 +4,7 @@
:is-full-page="false"
:active.sync="isLoading"
:can-cancel="false"/>
<button
id="metadata-column-compress-button"
@click="isMetadataColumnCompressed = !isMetadataColumnCompressed">
<span class="icon">
<i
:class="{ 'tainacan-icon-arrowleft' : isMetadataColumnCompressed, 'tainacan-icon-arrowright' : !isMetadataColumnCompressed }"
class="tainacan-icon tainacan-icon-20px"/>
</span>
</button>
<div class="tainacan-page-title">
<h1 v-if="isCreatingNewItem">
<span
@ -43,9 +35,7 @@
class="tainacan-form"
label-width="120px">
<div class="columns">
<div
:class="{ 'is-12': isMetadataColumnCompressed, 'is-5-5': !isMetadataColumnCompressed }"
class="column">
<div class="column is-5">
<!-- Hook for extra Form options -->
<template
@ -360,9 +350,7 @@
</template>
</div>
<div
class="column is-4-5"
v-show="!isMetadataColumnCompressed">
<div class="column is-7">
<!-- Hook for extra Form options -->
<template
@ -658,7 +646,6 @@ export default {
isOnSequenceEdit: false,
sequenceRightDirection: false,
isLoading: false,
isMetadataColumnCompressed: false,
metadatumCollapses: [],
collapseAll: true,
visibility: 'publish',
@ -958,11 +945,8 @@ export default {
});
},
deleteAttachment(attachment) {
console.log(attachment)
this.removeAttachmentFromItem(attachment.id)
.then(() => {
console.log(this.attachmentsList)
})
.then(() => { })
.catch((error) => {
this.$console.error(error);
});
@ -1217,28 +1201,6 @@ export default {
@import '../../scss/_variables.scss';
#metadata-column-compress-button {
position: absolute;
z-index: 99;
right: 0;
top: 148px;
max-width: 36px;
height: 36px;
width: 36px;
border: none;
background-color: $gray2;
color: $secondary;
padding: 0px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
cursor: pointer;
.icon {
margin-top: 2px;
margin-right: 8px;
}
}
.page-container {
padding: 25px 0px;
@ -1290,32 +1252,24 @@ export default {
}
}
.column.is-12 {
.column.is-5 {
padding-left: $page-side-padding;
padding-right: $page-side-padding;
}
.column.is-5-5 {
max-width: 55%;
padding-left: $page-side-padding;
padding-right: $page-side-padding;
transition: width 0.6s;
@media screen and (max-width: 769px) {
max-width: 100%;
}
}
.column.is-4-5 {
max-width: 45%;
padding-left: $page-side-padding;
.column.is-7 {
padding-left: 0;
padding-right: $page-side-padding;
transition: all 0.6s;
.field {
padding: 10px 0px 10px 60px;
}
@media screen and (max-width: 769px) {
padding-left: $page-side-padding;
max-width: 100%;
}
@ -1406,14 +1360,12 @@ export default {
.file-item-control {
position: absolute;
background-color: $gray2;
background-color: $gray1;
width: 112px;
margin: 15px;
bottom: 0px;
padding: 2px 8px 4px 8px;
text-align: right;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
display: none;
visibility: hidden;
opacity: 0;

13
src/admin/components/other/file-item.vue
View File

@ -7,7 +7,6 @@
:style="{ 'max-width': size != undefined ? size + 'px' : '112px' }"
v-if="showName && file.title != undefined">{{ file.title.rendered }}</figcaption>
<div
:class="{ 'rounded': showName }"
:style="{ 'width': size != undefined ? size + 'px' : '112px', 'height': size != undefined ? size + 'px' : '112px' }"
class="image-wrapper">
<div
@ -100,17 +99,15 @@ export default {
.image, .file-placeholder {
transform: scale(1.05);
}
figcaption {
background-color: $gray1;
}
}
.image-wrapper {
overflow: hidden;
position: relative;
display: inline-block;
&.rounded {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.image {
height: 100%;
width: 100%;
@ -138,9 +135,7 @@ export default {
}
figcaption {
background-color: $gray1;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: white;
padding: 8px 15px;
font-size: 9px;
width: 100%;

61
src/admin/pages/singles/item-page.vue
View File

@ -5,19 +5,6 @@
:active.sync="isLoading"
:can-cancel="false"/>
<!--<b-tabs v-model="activeTab">-->
<!--<b-tab-item-->
<!--style="margin: 0 -1rem 0 -1rem !important;"-->
<!--:label="$i18n.get('title_item_page')">-->
<button
id="metadata-column-compress-button"
@click="isMetadataColumnCompressed = !isMetadataColumnCompressed">
<span class="icon">
<i
:class="{ 'tainacan-icon-arrowleft' : isMetadataColumnCompressed, 'tainacan-icon-arrowright' : !isMetadataColumnCompressed }"
class="tainacan-icon tainacan-icon-20px"/>
</span>
</button>
<div class="tainacan-page-title">
<h1>
<span
@ -35,9 +22,7 @@
</div>
<div class="tainacan-form">
<div class="columns">
<div
:class="{ 'is-12': isMetadataColumnCompressed, 'is-5-5': !isMetadataColumnCompressed }"
class="column">
<div class="column is-5">
<!-- Hook for extra Form options -->
<template
@ -211,9 +196,7 @@
</template>
</div>
<div
v-show="!isMetadataColumnCompressed"
class="column is-4-5">
<div class="column is-7">
<!-- Hook for extra Form options -->
<template
@ -330,11 +313,6 @@
</div>
</div>
</div>
<!--</b-tab-item>-->
<!--<b-tab-item :label="$i18n.get('activities')">-->
<!--<activites-page />-->
<!--</b-tab-item>-->
<!--</b-tabs>-->
</div>
</template>
@ -354,7 +332,6 @@
itemId: Number,
isLoading: false,
isLoadingMetadatumMappers: false,
isMetadataColumnCompressed: false,
open: true,
collectionName: '',
thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png',
@ -479,28 +456,6 @@
@import '../../scss/_variables.scss';
#metadata-column-compress-button {
position: absolute;
z-index: 99;
right: 0;
top: 148px;
max-width: 36px;
height: 36px;
width: 36px;
border: none;
background-color: $gray2;
color: $secondary;
padding: 0;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
cursor: pointer;
.icon {
margin-top: 2px;
margin-right: 8px;
}
}
.page-container {
padding: 25px 0;
@ -556,28 +511,24 @@
margin-bottom: 70px;
}
.column.is-5-5 {
width: 45.833333333%;
.column.is-5 {
padding-left: $page-side-padding;
padding-right: $page-side-padding;
transition: width 0.6s;
@media screen and (max-width: 769px) {
width: 100%;
}
}
.column.is-4-5 {
width: 37.5%;
padding-left: $page-side-padding;
.column.is-7 {
padding-left: 0;
padding-right: $page-side-padding;
transition: all 0.6s;
.field {
padding: 10px 0 10px 30px;
}
@media screen and (max-width: 769px) {
padding-left: $page-side-padding;
width: 100%;
}
}