Skip to content

Commit

Permalink
made 404 error page responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@MintyMods
MintyMods committed Oct 8, 2019
1 parent e98ac6a commit 990c8f3
Show file tree
Hide file tree
Showing 16 changed files with 7,655 additions and 84 deletions.
6,657 changes: 6,657 additions & 0 deletions src/main/resources/static/svg/errors/404/edent-test-card.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/main/resources/static/svg/errors/404/static.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 4 additions & 2 deletions src/main/resources/templates/MintyClientApp.svelte
View file
Expand Up @@ -29,7 +29,8 @@
import Notifications from "./_routes/Notifications.svelte";
import Hosts from "./_routes/Hosts.svelte";
import Devices from "./_routes/Devices.svelte";
import NotFound from "./_routes/_error.svelte";
import NotFound from "./_errors/NotFound.svelte";
import Error from "./_routes/_error.svelte";
const routes = {
"/settings": Settings,
Expand All @@ -42,8 +43,9 @@
"/devices": Devices,
"/about": About,
"/index": About,
"/404": NotFound,
"/": About,
"*": NotFound
"*": Error
};
let sideNavOpen;
Expand Down
4 changes: 2 additions & 2 deletions src/main/resources/templates/_charts/echarts/EchartsLiquidFill.svelte
View file
Expand Up @@ -49,8 +49,8 @@
.item(0);
}
export const showConfig = () => {
config.openDialog(options, data);
export const showConfig = (item) => {
config.openDialog(item);
};
export const hideConfig = () => {
Expand Down
135 changes: 75 additions & 60 deletions src/main/resources/templates/_charts/echarts/EchartsLiquidFillConfig.svelte
View file
Expand Up @@ -111,12 +111,24 @@
});
}
export const openDialog = (options, data) => {
export const openDialog = item => {
data = data;
dialog.showModal();
dialog.open();
// initDialog(item);
// initPickr();
};
function initDialog(item) {
let module = document.getElementById(item.id);
let items = module.querySelectorAll('.svlt-grid-item');
debugger;
//svlt-grid-item svelte-sfqi95
module.classList.add("scrim");
module.style.width = "100vw";
module.style.height = "100vh";
}
export const closeDialog = () => {
dialog.close();
};
Expand All @@ -139,10 +151,14 @@
</script>

<style>
.dialog-wrapper {
width: 100%;
.scrim {
width: 100vw;
height: 100vh;
}
.dialog-wrapper {
width: 100vw !important;
height: 100vh !important;
}
.current-value {
font-size: small;
color: lightgrey;
Expand All @@ -152,10 +168,9 @@
} */
</style>


{#if data !== undefined}
<!-- <div class="dialog-wrapper"> -->
<Dialog bind:this={dialog} aria-labelledby="title" aria-describedby="content">
{#if data !== undefined}
<!-- <div class="dialog-wrapper"> -->
<Dialog bind:this={dialog} aria-labelledby="title" aria-describedby="content">
<Title id="title">
{#if Array.isArray(data)}
<TabBar tabs={data} let:tab>
Expand All @@ -165,57 +180,57 @@
</TabBar>
{:else}{data.label.desc}{/if}
</Title>
<Content id="content">
<!-- {#if config !== undefined} -->
<!-- WAVE COLOURS -->
<!-- {#each $color as color, i} -->
<!-- <Textfield bind:value={colorText} label="Wave Colour" />
<Content id="content">
<!-- {#if config !== undefined} -->
<!-- WAVE COLOURS -->
<!-- {#each $color as color, i} -->
<!-- <Textfield bind:value={colorText} label="Wave Colour" />
<div class="color-picker" /> -->
<!-- {/each} -->
<!-- {/each} -->

<!-- SHAPE -->
<Select
enhanced
bind:value={shapeSelected}
label="Guage shape "
class="shape"
menu$class="shape">
<Option value="" />
{#each SHAPES as item}
<Option value={item.type} selected={shapeSelected === item.type}>
<i class={item.icon} />
{item.desc}
</Option>
{/each}
</Select>
<br />
<!-- WAVE DIRECTION -->
<FormField>
<Switch bind:checked={directionChecked} />
<span slot="label">
Wave direction
<span class="current-value">{$direction}</span>
</span>
</FormField>
<br />
<!-- SHOW OUTLINE -->
<FormField>
<Switch bind:checked={outlineShowChecked} />
<span slot="label">
Show Outline
<span class="current-value">{$outlineShow}</span>
</span>
</FormField>
<!-- {/if} -->
</Content>
<Actions>
<Button action="save">
<Label>Save</Label>
</Button>
<Button action="cancel" default use={[InitialFocus]}>
<Label>Cancel</Label>
</Button>
</Actions>
</Dialog>
<!-- </div> -->
{/if}
<!-- SHAPE -->
<Select
enhanced
bind:value={shapeSelected}
label="Guage shape "
class="shape"
menu$class="shape">
<Option value="" />
{#each SHAPES as item}
<Option value={item.type} selected={shapeSelected === item.type}>
<i class={item.icon} />
{item.desc}
</Option>
{/each}
</Select>
<br />
<!-- WAVE DIRECTION -->
<FormField>
<Switch bind:checked={directionChecked} />
<span slot="label">
Wave direction
<span class="current-value">{$direction}</span>
</span>
</FormField>
<br />
<!-- SHOW OUTLINE -->
<FormField>
<Switch bind:checked={outlineShowChecked} />
<span slot="label">
Show Outline
<span class="current-value">{$outlineShow}</span>
</span>
</FormField>
<!-- {/if} -->
</Content>
<Actions>
<Button action="save">
<Label>Save</Label>
</Button>
<Button action="cancel" default use={[InitialFocus]}>
<Label>Cancel</Label>
</Button>
</Actions>
</Dialog>
<!-- </div> -->
{/if}
10 changes: 6 additions & 4 deletions src/main/resources/templates/_components/Navigation.svelte
View file
Expand Up @@ -63,16 +63,18 @@
}
}
function setActiveNavigationSection(hash) {
function setActiveNavigationSection() {
let nav = document.getElementById("navigation");
if (nav !== null) {
let sections = nav.querySelectorAll("a");
let page = '#' + $location;
if (page === '#/') page = '#/about';
sections.forEach(section => {
if (section.hash === "#" + $location) {
section.classList.add("activated");
if (section.hash === page) {
// section.classList.add("activated");
section.classList.add("mdc-list-item--activated");
} else {
section.classList.remove("activated");
// section.classList.remove("activated");
section.classList.remove("mdc-list-item--activated");
}
});
Expand Down
1 change: 1 addition & 0 deletions src/main/resources/templates/_components/_scss/_hamburger.scss
View file
Expand Up @@ -9,6 +9,7 @@
position: fixed !important;
left: 10px;
top: 10px;
cursor:pointer;
}

@keyframes pulse {
Expand Down
73 changes: 73 additions & 0 deletions src/main/resources/templates/_errors/NotFound.svelte
View file
@@ -0,0 +1,73 @@
<script>
import "./_scss/_notFound.scss";
</script>
<svelte:head><title>404 - Page not found</title></svelte:head>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" class="filterwrapper">
<defs>
<svg id="glitchmask-r" width="100%" height="100%" viewbox="0 0 100 100" preserveAspectRatio="none">
<line class="top-r" x1="0" y1="0" x2="100%" y2="0"> </line>
<line class="bot-r" x1="0" y1="100%" x2="100%" y2="100%"></line>
</svg>
<svg id="glitchmask-g" width="100%" height="100%" viewbox="0 0 100 100" preserveAspectRatio="none">
<line class="top-g" x1="0" y1="0" x2="100%" y2="0"></line>
<line class="bot-g" x1="0" y1="100%" x2="100%" y2="100%"></line>
</svg>

<filter color-interpolation-filters="sRGB" id="filter" width="100%" heigth="100%" x="0" y="0">
<feFlood flood-color="black" result="black" />

<!-- red text start -->
<feFlood flood-color="red" result="REDTXT_FLOOD_10" />
<feComposite operator="in" in="REDTXT_FLOOD_10" in2="SourceAlpha" result="REDTXT_COMP_20" />
<feOffset in="SourceGraphic" dx="-2" dy="0" result="REDTXT_OFFSET_30" />
<feMerge result="REDTXT_MERGE_40">
<feMergeNode in="black" />
<feMergeNode in="REDTXT_COMP_20" />
<feMergeNode in="REDTXT_OFFSET_30" />
</feMerge>
<feImage preserveAspectRatio="none" id="mask-r" result="REDTXT_IMG_50" xlink:href="#glitchmask-r" />
<feComposite in2="REDTXT_IMG_50" in="REDTXT_MERGE_40" operator="out" result="REDTXT_COMP_60" />
<!-- red text end -->

<!-- green text start -->
<feFlood flood-color="limegreen" result="GREENTXT_FLOOD_10" />
<feComposite operator="in" in="GREENTXT_FLOOD_10" in2="SourceAlpha" result="GREENTXT_COMP_20" />
<feOffset in="SourceGraphic" dx="2" dy="0" result="GREENTXT_OFFSET_30" />
<feMerge result="GREENTXT_MERGE_40">
<feMergeNode in="black" />
<feMergeNode in="GREENTXT_COMP_20" />
<feMergeNode in="GREENTXT_OFFSET_30" />
</feMerge>
<feImage preserveAspectRatio="none" id="mask-g" result="GREENTXT_IMG_50" xlink:href="#glitchmask-g" />
<feComposite in2="GREENTXT_IMG_50" in="GREENTXT_MERGE_40" operator="out" result="GREENTXT_COMP_60" />
<!-- green text end -->

<feMerge result="MERGE_10">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="REDTXT_COMP_60" />
<feMergeNode in="GREENTXT_COMP_60" />
</feMerge>
</filter>
</defs>
</svg>



<div class="tv">
<svg class="glitch-filter-example__demo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<text class="page-not-found glitch-filter-example__filtered-text" y="50%" text-anchor="middle" x="50%" textLength="90%">404 - Page Not Found</text>
</svg>
<div class="static">
<div />
</div>
<div class="scan" />
<object
type="image/svg+xml"
data="/svg/errors/404/edent-test-card.svg"
width="100%"
height="100%"
class="svg-content"
title="BBC test card image"
aria-label="BBC test card image with static and scan lines animation" />
</div>

0 comments on commit 990c8f3

Please sign in to comment.