mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-18 15:17:25 +01:00
New client spell fixes (#8974)
* Prevented spells menu from apearing below lvl 11 * Expanding clickable casting area * Persisted spell drawer close * Added edit form modal to party * Added spell toggle * Added markdown notification * Prevented casting on challenge and group tasks locally * Quick fix for self cast * Fixed lint issue
This commit is contained in:
Keith Holliday
GitHub
@@ -1,10 +1,10 @@
|
||||
<template lang="pug">
|
||||
.drawer-container
|
||||
.drawer-title(@click="open = !open")
|
||||
.drawer-title(@click="toggle()")
|
||||
| {{title}}
|
||||
.drawer-toggle-icon.svg-icon.icon-10(v-html="open ? icons.minimize : icons.expand", :class="{ closed: !open }")
|
||||
.drawer-toggle-icon.svg-icon.icon-10(v-html="isOpen ? icons.minimize : icons.expand", :class="{ closed: !isOpen }")
|
||||
transition(name="slide-up", @afterLeave="adjustPagePadding", @afterEnter="adjustPagePadding")
|
||||
.drawer-content(v-show="open")
|
||||
.drawer-content(v-show="isOpen")
|
||||
slot(name="drawer-header")
|
||||
.drawer-slider
|
||||
slot(name="drawer-slider")
|
||||
@@ -13,117 +13,117 @@
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
.drawer-container {
|
||||
z-index: 19;
|
||||
position: fixed;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
bottom: 0;
|
||||
left: 19%;
|
||||
right: 3%;
|
||||
max-width: 80%;
|
||||
|
||||
@media screen and (min-width: 1241px) {
|
||||
max-width: 968px;
|
||||
// 16.67% is the width of the .col-2 sidebar
|
||||
left: calc((100% + 16.67% - 968px) / 2);
|
||||
right: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-toggle-icon {
|
||||
float: right;
|
||||
margin-right: 16px;
|
||||
margin-top: 16px;
|
||||
|
||||
&.closed {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-title {
|
||||
background-color: $gray-10;
|
||||
box-shadow: 0 1px 2px 0 rgba($black, 0.2);
|
||||
cursor: pointer;
|
||||
border-top-right-radius: 8px;
|
||||
border-top-left-radius: 8px;
|
||||
text-align: center;
|
||||
line-height: 1.67;
|
||||
color: $white;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
line-height: 1.33;
|
||||
max-height: 300px;
|
||||
background-color: $gray-50;
|
||||
color: $gray-500;
|
||||
box-shadow: 0 2px 16px 0 rgba($black, 0.3);
|
||||
padding-top: 6px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.drawer-tab {
|
||||
&-container {
|
||||
display: flex;
|
||||
margin-left: 24px;
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
.drawer-container {
|
||||
z-index: 19;
|
||||
position: fixed;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 1.67;
|
||||
bottom: 0;
|
||||
left: 19%;
|
||||
right: 3%;
|
||||
max-width: 80%;
|
||||
|
||||
@media screen and (min-width: 1241px) {
|
||||
max-width: 968px;
|
||||
// 16.67% is the width of the .col-2 sidebar
|
||||
left: calc((100% + 16.67% - 968px) / 2);
|
||||
right: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-toggle-icon {
|
||||
float: right;
|
||||
margin-right: 16px;
|
||||
margin-top: 16px;
|
||||
|
||||
&.closed {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-title {
|
||||
background-color: $gray-10;
|
||||
box-shadow: 0 1px 2px 0 rgba($black, 0.2);
|
||||
cursor: pointer;
|
||||
border-top-right-radius: 8px;
|
||||
border-top-left-radius: 8px;
|
||||
text-align: center;
|
||||
line-height: 1.67;
|
||||
color: $white;
|
||||
border-bottom: 2px solid transparent;
|
||||
padding: 0px 8px 8px 8px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
&-active {
|
||||
border-color: $purple-400;
|
||||
.drawer-content {
|
||||
line-height: 1.33;
|
||||
max-height: 300px;
|
||||
background-color: $gray-50;
|
||||
color: $gray-500;
|
||||
box-shadow: 0 2px 16px 0 rgba($black, 0.3);
|
||||
padding-top: 6px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.drawer-tab {
|
||||
&-container {
|
||||
display: flex;
|
||||
margin-left: 24px;
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 1.67;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
border-bottom: 2px solid transparent;
|
||||
padding: 0px 8px 8px 8px;
|
||||
|
||||
&-active {
|
||||
border-color: $purple-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-slider {
|
||||
padding: 12px 0 0 8px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
.drawer-slider {
|
||||
padding: 12px 0 0 8px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
|
||||
& .message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
& .message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
top: calc(50% - 30px);
|
||||
left: 24px;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
top: calc(50% - 30px);
|
||||
left: 24px;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
|
||||
& .content {
|
||||
background-color: rgba($gray-200, 0.5);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
& .content {
|
||||
background-color: rgba($gray-200, 0.5);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slide-up-enter-active, .slide-up-leave-active {
|
||||
transition-property: all;
|
||||
transition-duration: 450ms;
|
||||
transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
||||
}
|
||||
.slide-up-enter, .slide-up-leave-to {
|
||||
max-height: 0;
|
||||
}
|
||||
.slide-up-enter-active, .slide-up-leave-active {
|
||||
transition-property: all;
|
||||
transition-duration: 450ms;
|
||||
transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
||||
}
|
||||
.slide-up-enter, .slide-up-leave-to {
|
||||
max-height: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@@ -139,6 +139,9 @@ export default {
|
||||
errorMessage: {
|
||||
type: String,
|
||||
},
|
||||
openStatus: {
|
||||
type: Number,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -149,6 +152,13 @@ export default {
|
||||
}),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isOpen () {
|
||||
// Open status is a number so we can tell if the value was passed
|
||||
if (this.openStatus !== undefined) return this.openStatus === 1 ? true : false;
|
||||
return this.open;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
adjustPagePadding () {
|
||||
let minPaddingBottom = 20;
|
||||
@@ -156,6 +166,10 @@ export default {
|
||||
let standardPage = document.getElementsByClassName('standard-page')[0];
|
||||
standardPage.style.paddingBottom = `${drawerHeight + minPaddingBottom}px`;
|
||||
},
|
||||
toggle () {
|
||||
this.open = !this.open;
|
||||
this.$emit('toggled', this.open);
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
// Make sure the page has enough space so the drawer does not overlap content
|
||||
|
||||
Reference in New Issue
Block a user