mirror of
https://github.com/thepaperpilot/The-Modding-Tree.git
synced 2025-03-14 18:11:38 +00:00
Replaced scroll bars
This commit is contained in:
parent
06df4997c3
commit
86924dd6ef
6 changed files with 1609 additions and 19 deletions
23
index.html
23
index.html
|
|
@ -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>
|
||||
|
|
@ -588,6 +588,8 @@ function loadVue() {
|
|||
`
|
||||
});
|
||||
|
||||
Vue.component("PerfectScrollbar", Vue2PerfectScrollbar.PerfectScrollbar);
|
||||
|
||||
app = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
108
js/technical/vue2-perfect-scrollbar.css
Normal file
108
js/technical/vue2-perfect-scrollbar.css
Normal 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;
|
||||
}
|
||||
1472
js/technical/vue2-perfect-scrollbar.umd.js
Normal file
1472
js/technical/vue2-perfect-scrollbar.umd.js
Normal file
File diff suppressed because it is too large
Load diff
21
style.css
21
style.css
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue