2019-09-09 17:00:25 +01:00
|
|
|
// Copyright (C) 2019 Storj Labs, Inc.
|
|
|
|
// See LICENSE for copying information.
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div id="app">
|
2019-12-04 15:38:43 +00:00
|
|
|
<div class="container">
|
|
|
|
<SNOHeader/>
|
2020-03-05 14:23:56 +00:00
|
|
|
<div class="scrollable" @scroll="onScroll">
|
|
|
|
<router-view/>
|
|
|
|
<SNOFooter />
|
|
|
|
</div>
|
2019-12-04 15:38:43 +00:00
|
|
|
</div>
|
2019-09-09 17:00:25 +01:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
2019-11-06 12:41:59 +00:00
|
|
|
import { Component, Vue } from 'vue-property-decorator';
|
2019-09-09 17:00:25 +01:00
|
|
|
|
2019-12-04 15:38:43 +00:00
|
|
|
import SNOFooter from '@/app/components/SNOFooter.vue';
|
|
|
|
import SNOHeader from '@/app/components/SNOHeader.vue';
|
|
|
|
|
2020-03-05 14:23:56 +00:00
|
|
|
const elementsIdsToRemoveOnScroll: string[] = [
|
|
|
|
'bandwidth-tooltip',
|
|
|
|
'bandwidth-tooltip-arrow',
|
|
|
|
'bandwidth-tooltip-point',
|
|
|
|
'disk-space-tooltip',
|
|
|
|
'disk-space-tooltip-arrow',
|
|
|
|
'disk-space-tooltip-point',
|
|
|
|
'egress-tooltip',
|
|
|
|
'egress-tooltip-arrow',
|
|
|
|
'egress-tooltip-point',
|
|
|
|
'ingress-tooltip',
|
|
|
|
'ingress-tooltip-arrow',
|
|
|
|
'ingress-tooltip-point',
|
|
|
|
];
|
|
|
|
|
|
|
|
const elementsClassesToRemoveOnScroll: string[] = [
|
|
|
|
'info__message-box',
|
|
|
|
'payout-period-calendar',
|
|
|
|
'notification-popup-container',
|
|
|
|
];
|
|
|
|
|
2019-12-04 15:38:43 +00:00
|
|
|
@Component({
|
|
|
|
components: {
|
|
|
|
SNOHeader,
|
|
|
|
SNOFooter,
|
|
|
|
},
|
|
|
|
})
|
2020-03-05 14:23:56 +00:00
|
|
|
export default class App extends Vue {
|
|
|
|
public onScroll(): void {
|
|
|
|
elementsIdsToRemoveOnScroll.forEach(id => {
|
|
|
|
this.removeElementById(id);
|
|
|
|
});
|
|
|
|
|
|
|
|
elementsClassesToRemoveOnScroll.forEach(className => {
|
|
|
|
this.removeElementByClass(className);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
private removeElementByClass(className): void {
|
|
|
|
const element: HTMLElement = document.querySelector(className);
|
|
|
|
if (element) {
|
|
|
|
element.remove();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
private removeElementById(id): void {
|
|
|
|
const element: HTMLElement | null = document.getElementById(id);
|
|
|
|
if (element) {
|
|
|
|
element.remove();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2019-09-09 17:00:25 +01:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
body {
|
|
|
|
margin: 0 !important;
|
2019-11-26 09:19:57 +00:00
|
|
|
position: relative;
|
2019-10-28 13:19:57 +00:00
|
|
|
font-family: 'font_regular', sans-serif;
|
2019-12-20 19:11:01 +00:00
|
|
|
overflow-y: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
|
|
display: none;
|
|
|
|
position: fixed;
|
|
|
|
right: 0;
|
2019-09-09 17:00:25 +01:00
|
|
|
}
|
|
|
|
|
2019-12-04 15:38:43 +00:00
|
|
|
.container {
|
|
|
|
background-color: #f4f6f9;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
2020-03-05 14:23:56 +00:00
|
|
|
height: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.scrollable {
|
2020-03-16 03:02:58 +00:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
2020-03-05 14:23:56 +00:00
|
|
|
padding-top: 89px;
|
|
|
|
height: calc(100vh - 89px);
|
|
|
|
width: 100vw;
|
|
|
|
overflow-y: scroll;
|
2019-12-04 15:38:43 +00:00
|
|
|
}
|
|
|
|
|
2019-09-09 17:00:25 +01:00
|
|
|
@font-face {
|
|
|
|
font-display: swap;
|
2019-10-28 13:19:57 +00:00
|
|
|
font-family: 'font_regular';
|
|
|
|
src: url('../../static/fonts/font_regular.ttf');
|
2019-09-09 17:00:25 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
@font-face {
|
|
|
|
font-display: swap;
|
2019-10-28 13:19:57 +00:00
|
|
|
font-family: 'font_medium';
|
|
|
|
src: url('../../static/fonts/font_medium.ttf');
|
2019-09-09 17:00:25 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
@font-face {
|
|
|
|
font-display: swap;
|
2019-10-28 13:19:57 +00:00
|
|
|
font-family: 'font_bold';
|
|
|
|
src: url('../../static/fonts/font_bold.ttf');
|
2019-09-09 17:00:25 +01:00
|
|
|
}
|
|
|
|
</style>
|