Fixed overload display

This commit is contained in:
Jason Snelders 2019-11-16 16:20:16 +11:00
parent 84a2889f0a
commit 7e21a0ef0e
3 changed files with 13 additions and 12 deletions

View File

@ -104,8 +104,12 @@ var app = new Vue({
// Set the "current" main navigation item based on the current route. // Set the "current" main navigation item based on the current route.
this.selectMenuItemForCurrentUrl(); this.selectMenuItemForCurrentUrl();
// Once the app is fully displayed, hide the overlay. this.$nextTick(function () {
this.hideFullPageOverlay(); // Code that will run only after the entire view has been rendered.
// Once the app is fully rendered, hide the overlay.
this.hideFullPageOverlay();
});
this.status = "loaded"; // Now we can start watching for changes in 'sections' data. this.status = "loaded"; // Now we can start watching for changes in 'sections' data.
}, },

View File

@ -13,11 +13,13 @@
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body class="w3-light-grey"> <body class="w3-light-grey">
<!-- VueJS App --> <!-- VueJS App -->
<div id="app"> <div id="app">
<div id="full-page-overlay">
<div id="full-page-overlay-text">Please wait while we load the goodness.</div>
</div>
<!-- Top container --> <!-- Top container -->
<div class="w3-bar w3-top w3-black w3-large" style="z-index:4"> <div class="w3-bar w3-top w3-black w3-large" style="z-index:4">
@ -75,10 +77,6 @@
<!-- End Page Content --> <!-- End Page Content -->
<div class="w3-main w3-padding-16"> <div class="w3-main w3-padding-16">
<div id="full-page-overlay">
<div id="full-page-overlay-text">Please wait while we load the goodness.</div>
</div>
<!-- Header --> <!-- Header -->
<header class="w3-container"> <header class="w3-container">
@ -86,7 +84,7 @@
</header> </header>
<div class="w3-container"> <div class="w3-container">
<router-view>Loading...</router-view> <router-view></router-view>
</div> </div>
</div> </div>
@ -1047,7 +1045,8 @@
<li><a href="https://router.vuejs.org/">Vue Router (v3.1.3)</a></li> <li><a href="https://router.vuejs.org/">Vue Router (v3.1.3)</a></li>
</ul> </ul>
<p class="margin-top-64"> <p class="margin-top-64">
Developed by <a href="https://jsnelders.com" target="_blank">Jason Snelders</a>. Developed by <a href="https://jsnelders.com" target="_blank">Jason Snelders</a>.<br>
Source code at <a href="https://github.com/jsnelders/json-resume-editor" target="_blank">https://github.com/jsnelders/json-resume-editor</a>.
</p> </p>
</p> </p>
</div> </div>

View File

@ -15,9 +15,7 @@ html, body, h1, h2, h3, h4, h5
#full-page-overlay #full-page-overlay
{ {
position: fixed; /* Sit on top of the page content */ position: fixed; /* Sit on top of the page content */
/*display: none;*/ /* Hidden by default */
display: block; display: block;
display: none;
width: 100%; /* Full width (cover the whole page) */ width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */ height: 100%; /* Full height (cover the whole page) */
top: 0; top: 0;