1
0
Fork 0
mirror of https://github.com/thepaperpilot/The-Modding-Tree.git synced 2025-03-14 10:01:47 +00:00

Replaced scroll bars

This commit is contained in:
thepaperpilot 2021-05-09 15:21:42 -05:00
parent 06df4997c3
commit 86924dd6ef
6 changed files with 1609 additions and 19 deletions

View file

@ -6,8 +6,10 @@
<link rel="stylesheet" type="text/css" href="popup.css" />
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<link href="js/technical/vue2-perfect-scrollbar.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script type="text/javascript" src="js/technical/break_eternity.js"></script>
<script type="text/javascript" src="js/technical/vue2-perfect-scrollbar.umd.js"></script>
<script type="text/javascript" src="js/technical/layerSupport.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/Layers/flowers.js"></script>
@ -96,15 +98,15 @@
</div>
</div>
<div v-if="!(gameEnded && !player.keepGoing)" id="treeTab" v-bind:style="{'z-index': (tmp.scrolled ? '1' : '5000')}" onscroll="resizeCanvas()"
v-bind:class="{ fullWidth: (player.tab === 'none' || player.navTab === 'none'), col: (player.tab !== 'none' && player.navTab !== 'none'), left: (player.tab !== 'none' && player.navTab !== 'none')}">
<br>
<overlay-head id="fakeHead" style="visibility: hidden;">
</overlay-head>
<perfect-scrollbar v-if="!(gameEnded && !player.keepGoing)" style="height: calc(100% - 70px)" id="treeTab" v-bind:style="{'z-index': (tmp.scrolled ? '1' : '5000')}" onscroll="resizeCanvas()"
v-bind:class="{ fullWidth: (player.tab === 'none' || player.navTab === 'none'), left: (player.tab !== 'none' && player.navTab !== 'none')}">
<br>
<overlay-head id="fakeHead" style="visibility: hidden;">
</overlay-head>
<layer-tab :layer="player.navTab === 'none' ? player.tab : player.navTab" :key="'left'"></layer-tab>
<layer-tab :layer="player.navTab === 'none' ? player.tab : player.navTab" :key="'left'"></layer-tab>
</div>
</perfect-scrollbar>
<!-- Popups -->
<div class="popup-container">
@ -117,13 +119,12 @@
</transition-group>
</div>
<div v-if="player.navTab !== 'none' && player.tab !== 'none' && !(gameEnded && !player.keepGoing)" onscroll="resizeCanvas()"
v-bind:class="{ fullWidth: player.navTab === 'none', col: player.navTab !== 'none', right: player.navTab !== 'none', fast: true, tab: true}">
<perfect-scrollbar v-if="player.navTab !== 'none' && player.tab !== 'none' && !(gameEnded && !player.keepGoing)" onscroll="resizeCanvas()" v-bind:class="{ fullWidth: player.navTab === 'none', right: player.navTab !== 'none', fast: true, tab: true}">
<div v-for="layer in LAYERS" >
<div v-if="player.tab===layer" >
<layer-tab :layer="layer" :back="'none'" :spacing="'50px'" :key="'left'"></layer-tab>
</div>
</div>
</div>
</perfect-scrollbar>
</div>
</body>

View file

@ -588,6 +588,8 @@ function loadVue() {
`
});
Vue.component("PerfectScrollbar", Vue2PerfectScrollbar.PerfectScrollbar);
app = new Vue({
el: "#app",
data: {

View file

@ -506,7 +506,7 @@ const interval = setInterval(function () {
resizeCanvas();
needCanvasUpdate = false;
}
tmp.scrolled = document.getElementById("treeTab").scrollTop > 30;
tmp.scrolled = document.getElementById("treeTab")?.scrollTop > 30;
updateTemp();
gameLoop(diff);
fixNaNs();

View file

@ -0,0 +1,108 @@
/*
* Container style
*/
.ps {
overflow: hidden !important;
overflow-anchor: none;
-ms-overflow-style: none;
touch-action: auto;
-ms-touch-action: auto;
}
/*
* Scrollbar rail styles
*/
.ps__rail-x {
display: none;
opacity: 0;
transition: background-color .2s linear, opacity .2s linear;
-webkit-transition: background-color .2s linear, opacity .2s linear;
height: 15px;
/* there must be 'bottom' or 'top' for ps__rail-x */
bottom: 0px;
/* please don't change 'position' */
position: absolute;
}
.ps__rail-y {
display: none;
opacity: 0;
transition: background-color .2s linear, opacity .2s linear;
-webkit-transition: background-color .2s linear, opacity .2s linear;
width: 15px;
/* there must be 'right' or 'left' for ps__rail-y */
right: 0;
/* please don't change 'position' */
position: absolute;
}
.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
display: block;
background-color: transparent;
}
.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
opacity: 0.6;
}
.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
background-color: #eee;
opacity: 0.9;
}
/*
* Scrollbar thumb styles
*/
.ps__thumb-x {
background-color: #aaa;
border-radius: 6px;
transition: background-color .2s linear, height .2s ease-in-out;
-webkit-transition: background-color .2s linear, height .2s ease-in-out;
height: 6px;
/* there must be 'bottom' for ps__thumb-x */
bottom: 2px;
/* please don't change 'position' */
position: absolute;
}
.ps__thumb-y {
background-color: #aaa;
border-radius: 6px;
transition: background-color .2s linear, width .2s ease-in-out;
-webkit-transition: background-color .2s linear, width .2s ease-in-out;
width: 6px;
/* there must be 'right' for ps__thumb-y */
right: 2px;
/* please don't change 'position' */
position: absolute;
}
.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
background-color: #999;
height: 11px;
}
.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
background-color: #999;
width: 11px;
}
/* MS supports */
@supports (-ms-overflow-style: none) {
.ps {
overflow: auto !important;
}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.ps {
overflow: auto !important;
}
}
.ps {
position: relative;
}

File diff suppressed because it is too large Load diff

View file

@ -174,11 +174,6 @@ h1, h2, h3, b, input {
cursor: pointer;
}
#treeTab {
height: calc(100% - 70px);
padding-bottom: 20px;
}
/*noinspection CssUnusedSymbol*/
.back:hover {
transform: scale(1.1, 1.1);
@ -438,7 +433,7 @@ a {
}
/*noinspection CssUnusedSymbol*/
.col.right {
.right {
top: 50px;
right: 0;
z-index: 999999;
@ -782,7 +777,7 @@ button > * {
@media only screen and (max-width: 1280px) {
/*noinspection CssUnusedSymbol*/
.col.right {
.right {
min-width: 100%;
background: var(--background);
}
@ -1170,3 +1165,15 @@ b, h3 {
margin-bottom: 10px;
display: block;
}
.ps {
height: calc(100% - 70px);
padding-bottom: 20px;
position: fixed !important;
transition-duration: 0s;
width: 49.5%;
}
.ps__rail-y {
z-index: 100;
}