Skip to content

Instantly share code, notes, and snippets.

@jnbdz

jnbdz/layout-2.patternfly.html

Created December 7, 2024 18:32
Show Gist options
  • Save jnbdz/cefe8833d5ec658af5d46b4fb2beab2d to your computer and use it in GitHub Desktop.
Save jnbdz/cefe8833d5ec658af5d46b4fb2beab2d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
layout-2.patternfly.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🛝 Hery - Playground 🛝</title>
<link rel="stylesheet" href="assets/library/node_modules/@patternfly/patternfly/patternfly.min.css">
<!--<link rel="stylesheet" href="assets/library/node_modules/@patternfly/patternfly/patternfly-addons.css">-->
<!--<link rel="stylesheet" href="assets/library/node_modules/jquery-ui/dist/themes/start/jquery-ui.min.css">-->
<link rel="stylesheet" href="assets/style.css">
<style>
div {
border: 1px dotted grey;
}
</style>
</head>
<body>
<div class="pf-v6-l-stack">
<!-- ################################### -->
<!-- ############## Header ############# -->
<!-- ################################### -->
<header class="pf-v6-l-stack__item">content</header>
<!-- ################################### -->
<!-- ############# Middle ############## -->
<!-- ################################### -->
<main class="pf-v6-l-stack__item pf-m-fill pf-v6-l-split">
<div class="pf-v6-l-split__item pf-m-fill">
<div class="pf-v6-l-bullseye">
<div class="pf-v6-l-bullseye__item" style="border: none">
<svg
class="pf-v6-c-spinner"
role="progressbar"
viewBox="0 0 100 100"
aria-label="Loading..."
>
<circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
</svg>
</div>
</div>
</div>
</main>
<!-- ################################### -->
<!-- ############## Footer ############## -->
<!-- ################################### -->
<footer class="pf-v6-l-stack__item">content</footer>
</div>
<template id="screen-loader">
<div class="pf-v6-l-bullseye">
<div class="pf-v6-l-bullseye__item" style="border: none">
<svg
class="pf-v6-c-spinner"
role="progressbar"
viewBox="0 0 100 100"
aria-label="Loading..."
>
<circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
</svg>
</div>
</div>
</template>
<template id="tab-eql-editor">
<div class="pf-v6-l-split__item">content</div>
<div class="pf-v6-l-split__item pf-m-fill">pf-m-fill</div>
<div class="pf-v6-l-split__item">content</div>
</template>
<template id="tab-hery-editor">
<div class="pf-v6-l-split__item">content</div>
<div class="pf-v6-l-split__item pf-m-fill">pf-m-fill</div>
<div class="pf-v6-l-split__item">content</div>
</template>
<template id="tab-cache-editor">
<div class="pf-v6-l-split__item">content</div>
<div class="pf-v6-l-split__item pf-m-fill">pf-m-fill</div>
<div class="pf-v6-l-split__item">content</div>
</template>
<script src="assets/library/node_modules/jquery/dist/jquery.min.js"></script>
<script src="assets/library/node_modules/jquery-ui/dist/jquery-ui.min.js"></script>
<script src="assets/library/node_modules/monaco-editor/min/vs/loader.js"></script>
<script src="assets/library/node_modules/sql.js/dist/sql-wasm.js"></script>
<script src="assets/hery.editor.js"></script>
<!--<script src="assets/eql.editor.js"></script>-->
<script src="assets/cache.editor.js"></script>
<script src="assets/wasm_exec.js"></script>
<script src="assets/ux.js"></script>
<script src="assets/editor.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment