Improve cache reminder as I did not like it.

Pretty satisfied with this one, totally didn't take a couple hours out of my day.

CodePen: https://codepen.io/prplwtf/pen/ExOBQzw?editors=1100
This commit is contained in:
purple 2023-08-11 20:20:31 +02:00
parent 5b435aa183
commit 43af00b7c4
3 changed files with 25 additions and 28 deletions

View file

@ -7,9 +7,9 @@
100% {right:-300px;top:62px;opacity:0;background-color: #2a3743;}
}
/* hides admin cache reminder once this css file is loaded */
#cache-reminder {
display: none;
/* hides admin cache reminder once new changes to this css file are applied */
#cacheOverlay {
display:none;
}
.notification {

View file

@ -0,0 +1,21 @@
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="overlay" style="background:#212529;padding-left:30%;padding-right:30%;padding-top:10%;color:#fff;height:100%;width:100%;position:fixed;left:0;top:0;overflow:hidden;">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-info-circle-fill" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
</svg>
<h3 style="margin-top:13px;">Refresh your cache</h3>
<p>Your browser appears to be showing you outdated parts of this website resulting in problems regarding newly edited stylesheets.</p>
<p style="margin-top:35px;opacity:0.6;">Linux: <code style="background: #2F353B;padding:5px;border-radius:7px;border:1px solid #3F474F">CTRL + SHIFT + R</code> or <code style="background: #2F353B;padding:5px;border-radius:7px;border:1px solid #3F474F">CTRL + F5</code></p>
<p style="margin-top:8px;opacity:0.6;">Windows: <code style="background: #2F353B;padding:5px;border-radius:7px;border:1px solid #3F474F">CTRL + SHIFT + R</code> or <code style="background: #2F353B;padding:5px;border-radius:7px;border:1px solid #3F474F">CTRL + F5</code></p>
<p style="margin-top:8px;opacity:0.6;">MacOS: <code style="background: #2F353B;padding:5px;border-radius:7px;border:1px solid #3F474F">COMMAND + OPTION + R</code></p>
<p style="margin-top:45px;opacity:0.2;">If this website is proxied through services like Cloudflare you'll have to come back in a few hours instead.</p>
</div>
</body>
</html>

View file

@ -38,31 +38,7 @@
</head>
<body class="hold-transition skin-blue fixed sidebar-mini">
<!-- Begin Blueprint cache-refresh requirement -->
<div id="cache-reminder" style="
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #33404D;
z-index: 99997;">
<div style="
background-color: #1F2933;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
z-index: 99998;">
<p style="color:#9AA5B1; padding-left:10px;"><b>Cache refresh required.</b></p>
</div>
<div style="margin-bottom: 60px"></div>
<p style="color:#fff; padding-left: 10px;">
Windows: <code style="background-color: #1F2933;color:#9AA5B1;padding: 5px;border-radius:5px;">CTRL + SHIFT + R</code> or <code style="background-color: #1F2933;color:#9AA5B1;padding: 5px;border-radius:5px;">CTRL + F5</code><br><br>
Linux: <code style="background-color: #1F2933;color:#9AA5B1;padding: 5px;border-radius:5px;">CTRL + SHIFT + R</code> or <code style="background-color: #1F2933;color:#9AA5B1;padding: 5px;border-radius:5px;">CTRL + F5</code><br><br>
MacOS: <code style="background-color: #1F2933;color:#9AA5B1;padding: 5px;border-radius:5px;">COMMAND + OPTION + R</code>
</p>
</div>
<iframe id="cacheOverlay" style="border:none;position:fixed;width:100%;height:100%;top:0;left:0;" src="/extensions/blueprint/helpers/adminCacheRefreshReminder.html"></iframe>
<!-- End Blueprint cache-refresh requirement -->
<div class="wrapper">
<header class="main-header">