proxmox-backup/docs/prune-simulator/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>PBS Prune Simulator</title>

    <link rel="stylesheet" type="text/css" href="extjs/theme-crisp/resources/theme-crisp-all.css">
    <style>
        .cal {
            margin: 5px;
        }
        .cal-day {
            vertical-align: top;
            width: 150px;
            height: 75px; /* this is like min-height when used in tables */
            border: #939393 1px solid;
            color: #454545;
        }
        .cal-day-date {
            border-bottom: #444 1px solid;
            color: #000;
        }
        .strikethrough {
            text-decoration: line-through;
        }
        .black {
            color: #000;
        }
        .sun {
            background-color: #ededed;
        }
        .first-of-month {
            border-right: dashed black 4px;
        }
        .clear-trigger {
            background-image: url(./clear-trigger.png);
        }
    </style>

    <script type="text/javascript" src="extjs/ext-all.js"></script>
    <script type="text/javascript" src="prune-simulator.js"></script>
</head>
<body></body>
</html>
create prune simulator A stand-alone ExtJS app that allows experimenting with different backup schedules and prune parameters. The HTML for the documentation was taken from the PBS docs and adapted to the context of the simulator. For performance reasons, the week table does not use subcomponents, but raw HTML. Signed-off-by: Fabian Ebner <f.ebner@proxmox.com> 2020-11-03 14:28:41 +00:00			`<!DOCTYPE html>`
			`<html>`
			`<head>`
			`<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />`
			`<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">`
			`<title>PBS Prune Simulator</title>`

			`<link rel="stylesheet" type="text/css" href="extjs/theme-crisp/resources/theme-crisp-all.css">`
prune sim: fine tune calendar layout/style Avoid black on white, to much contrast hurts the eye, use a dark grey instead. Highlight Sundays, and show month boundaries explicitly with strong dashed border. Factor out some manual set styles to classes and use them instead, decoupling logic and styling a bit more. Use span elements for plain text stuff, which should not be a block (e.g., div) element. Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com> 2020-11-07 12:37:54 +00:00			`<style>`
prune sim: slight layout adaptions add some margin to the calendar table, to not make it seem glued to the left and top, this follow what ExtJS does in general. Further, adapt layout flex so that docs has 2/5 and calendar has 3/5 of space on small screens (e.g., 720p), makes it look much better there. Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com> 2020-11-08 12:14:55 +00:00			`.cal {`
			`margin: 5px;`
			`}`
prune sim: fine tune calendar layout/style Avoid black on white, to much contrast hurts the eye, use a dark grey instead. Highlight Sundays, and show month boundaries explicitly with strong dashed border. Factor out some manual set styles to classes and use them instead, decoupling logic and styling a bit more. Use span elements for plain text stuff, which should not be a block (e.g., div) element. Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com> 2020-11-07 12:37:54 +00:00			`.cal-day {`
			`vertical-align: top;`
			`width: 150px;`
prune sim: set min-heigth for calendar day cells Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com> 2020-11-11 07:10:43 +00:00			`height: 75px; /* this is like min-height when used in tables */`
prune sim: fine tune calendar layout/style Avoid black on white, to much contrast hurts the eye, use a dark grey instead. Highlight Sundays, and show month boundaries explicitly with strong dashed border. Factor out some manual set styles to classes and use them instead, decoupling logic and styling a bit more. Use span elements for plain text stuff, which should not be a block (e.g., div) element. Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com> 2020-11-07 12:37:54 +00:00			`border: #939393 1px solid;`
			`color: #454545;`
			`}`
			`.cal-day-date {`
			`border-bottom: #444 1px solid;`
			`color: #000;`
			`}`
			`.strikethrough {`
			`text-decoration: line-through;`
			`}`
			`.black {`
			`color: #000;`
			`}`
			`.sun {`
			`background-color: #ededed;`
			`}`
			`.first-of-month {`
			`border-right: dashed black 4px;`
			`}`
prune sim: make numberfields more similar to PBS's by creating a new class that adds a clear trigger and also uses the clear-trigger image. Code was taken from the one in PBS's prune window, but we have default values here, so a bit of adapting was necessary. For example, we don't want to reset to the original value (which might have been one of the defaults) when clearing, but always to 'null'. Signed-off-by: Fabian Ebner <f.ebner@proxmox.com> 2020-11-11 09:07:03 +00:00			`.clear-trigger {`
			`background-image: url(./clear-trigger.png);`
			`}`
prune sim: fine tune calendar layout/style Avoid black on white, to much contrast hurts the eye, use a dark grey instead. Highlight Sundays, and show month boundaries explicitly with strong dashed border. Factor out some manual set styles to classes and use them instead, decoupling logic and styling a bit more. Use span elements for plain text stuff, which should not be a block (e.g., div) element. Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com> 2020-11-07 12:37:54 +00:00			`</style>`

create prune simulator A stand-alone ExtJS app that allows experimenting with different backup schedules and prune parameters. The HTML for the documentation was taken from the PBS docs and adapted to the context of the simulator. For performance reasons, the week table does not use subcomponents, but raw HTML. Signed-off-by: Fabian Ebner <f.ebner@proxmox.com> 2020-11-03 14:28:41 +00:00			`<script type="text/javascript" src="extjs/ext-all.js"></script>`
			`<script type="text/javascript" src="prune-simulator.js"></script>`
			`</head>`
			`<body></body>`
			`</html>`