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.
this.selectMenuItemForCurrentUrl();
// Once the app is fully displayed, hide the overlay.
this.$nextTick(function () {
// 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.
},

View File

@ -14,10 +14,12 @@
</head>
<body class="w3-light-grey">
<!-- VueJS 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 -->
<div class="w3-bar w3-top w3-black w3-large" style="z-index:4">
@ -76,17 +78,13 @@
<!-- End Page Content -->
<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 class="w3-container">
<h5 v-if="activePage.title != ''"><b><i class='page-title' style="margin-right: 20px;" v-if="activePage.fontAwesomeIconCss != ''" v-bind:class="activePage.fontAwesomeIconCss"></i> {{activePage.title}}</b></h5>
</header>
<div class="w3-container">
<router-view>Loading...</router-view>
<router-view></router-view>
</div>
</div>
@ -1047,7 +1045,8 @@
<li><a href="https://router.vuejs.org/">Vue Router (v3.1.3)</a></li>
</ul>
<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>
</div>

View File

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