incremental-social/The-Modding-Tree
incremental-social/The-Modding-Tree
Template
1
0
Fork 0
mirror of https://github.com/Acamaeda/The-Modding-Tree.git synced 2024-11-24 09:21:46 +00:00
Code Issues Releases Activity Actions

Tweaked look of lore component

Browse source
This commit is contained in:
thepaperpilot 2020-10-24 19:47:42 -05:00
parent 3de5d23477
commit da4d22c734
3 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -162,8 +162,8 @@
<div v-if="player.tab==layer" v-bind:class="'col right fast tab'" v-bind:style="[tmp[layer].style ? tmp[layer].style : {}, (layers[layer].tabFormat && !Array.isArray(tmp[layer].tabFormat)) ? tmp[layer].tabFormat[player.subtabs[layer].mainTabs].style : {}]"> <div v-if="player.tab==layer" v-bind:class="'col right fast tab'" v-bind:style="[tmp[layer].style ? tmp[layer].style : {}, (layers[layer].tabFormat && !Array.isArray(tmp[layer].tabFormat)) ? tmp[layer].tabFormat[player.subtabs[layer].mainTabs].style : {}]">
<button class="back" onclick="showTab('tree')">←</button><br><br><br> <button class="back" onclick="showTab('tree')">←</button><br><br><br>
<div v-if="!layers[layer].tabFormat"> <div v-if="!layers[layer].tabFormat">
<main-display v-bind:style="tmp[layer].componentStyles['main-display']" :layer="layer"></main-display>
<lore v-if="tmp[layer].lore" :layer="layer"></lore> <lore v-if="tmp[layer].lore" :layer="layer"></lore>
<main-display v-bind:style="tmp[layer].componentStyles['main-display']" :layer="layer"></main-display>
<div v-if="tmp[layer].type !== 'none'"> <div v-if="tmp[layer].type !== 'none'">
<prestige-button v-bind:style="tmp[layer].componentStyles['prestige-button']" :layer="layer"></prestige-button> <prestige-button v-bind:style="tmp[layer].componentStyles['prestige-button']" :layer="layer"></prestige-button>
</div> </div>

8
js/v.js
View file

@ -72,13 +72,13 @@ function loadVue() {
Vue.component('lore', { Vue.component('lore', {
props: ['layer', 'data'], props: ['layer', 'data'],
template: ` template: `
<div class="story" v-bind:style="{'border-color': tmp[layer].color}"> <div class="story instant" v-bind:style="{'border-color': tmp[layer].color, 'border-radius': player[layer].loreHidden ? 0 : '8px'}">
<button class="story-title" v-bind:style="{'background-color': tmp[layer].color}" <button class="story-title" v-bind:style="{'background-color': tmp[layer].color}"
v-on:click="player[layer].loreHidden = player[layer].loreHidden !== true"> v-on:click="player[layer].loreHidden = !player[layer].loreHidden">
<span class="story-toggle">{{player[layer].loreHidden === true ? "+" : "-"}}</span> <span class="story-toggle">{{player[layer].loreHidden ? "+" : "-"}}</span>
{{layers[layer].name}} {{layers[layer].name}}
</button> </button>
<div v-if="player[layer].loreHidden !== true" class="story-text"> <div v-if="!player[layer].loreHidden" class="story-text">
<span v-html="data ? data : layers[layer].lore"></span> <span v-html="data ? data : layers[layer].lore"></span>
</div> </div>
</div> </div>

10
style.css
View file

@ -601,9 +601,10 @@ button > * {
.story { .story {
width: 600px; width: 600px;
max-width: 95%; max-width: 95%;
border: solid 4px; border-bottom: solid 4px;
border-radius: 8px; border-radius: 8px;
margin-bottom: 8px; margin-bottom: 8px;
text-align: left;
} }
.story-title { .story-title {
@ -612,8 +613,8 @@ button > * {
color: black; color: black;
cursor: pointer; cursor: pointer;
border: none; border: none;
width: 100%;
padding: 2px; padding: 2px;
border-radius: 8px 8px 0 0;
} }
.story-toggle { .story-toggle {
@ -628,4 +629,9 @@ button > * {
.story-text { .story-text {
padding: 2px; padding: 2px;
border: solid 4px;
border-color: inherit;
border-radius: inherit;
border-top-left-radius: 0;
margin-bottom: -2px;
} }