Giter Club home page Giter Club logo

Comments (4)

mkloubertego avatar mkloubertego commented on May 30, 2024 1

@CJamesKeller

Btw.: Try $HOME/vscode-kanban.css as path instead.

from vscode-kanban.

mkloubertego avatar mkloubertego commented on May 30, 2024

@CJamesKeller

I have taken a "HTML screenshot" of the following board to get an idea where to start:

vscode-kanban-screenshot2

Here is the HTML:

<html>

<head>
    <style id="_defaultStyles">
        body {
            background-color: var(--vscode-editor-background);
            color: var(--vscode-editor-foreground);
            font-family: var(--vscode-editor-font-family);
            font-weight: var(--vscode-editor-font-weight);
            font-size: var(--vscode-editor-font-size);
            margin: 0;
            padding: 0 20px;
        }

        img {
            max-width: 100%;
            max-height: 100%;
        }

        a {
            color: var(--vscode-textLink-foreground);
        }

        a:hover {
            color: var(--vscode-textLink-activeForeground);
        }

        a:focus,
        input:focus,
        select:focus,
        textarea:focus {
            outline: 1px solid -webkit-focus-ring-color;
            outline-offset: -1px;
        }

        code {
            color: var(--vscode-textPreformat-foreground);
        }

        blockquote {
            background: var(--vscode-textBlockQuote-background);
            border-color: var(--vscode-textBlockQuote-border);
        }

        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background-color: var(--vscode-scrollbarSlider-background);
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: var(--vscode-scrollbarSlider-hoverBackground);
        }

        ::-webkit-scrollbar-thumb:active {
            background-color: var(--vscode-scrollbarSlider-activeBackground);
        }
    </style>
    <script>
        const acquireVsCodeApi = (function() {
            const originalPostMessage = window.parent.postMessage.bind(window.parent);
            let acquired = false;

            let state = undefined;

            return () => {
                if (acquired) {
                    throw new Error('An instance of the VS Code API has already been acquired');
                }
                acquired = true;
                return Object.freeze({
                    postMessage: function(msg) {
                        return originalPostMessage({
                            command: 'onmessage',
                            data: msg
                        }, '*');
                    },
                    setState: function(newState) {
                        state = newState;
                        originalPostMessage({
                            command: 'do-update-state',
                            data: JSON.stringify(newState)
                        }, '*');
                        return newState;
                    },
                    getState: function() {
                        return state;
                    }
                });
            };
        })();
        delete window.parent;
        delete window.top;
        delete window.frameElement;
    </script>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/css/font-awesome.css">
    <link rel="stylesheet" href="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/css/hljs-atom-one-dark.css">
    <link rel="stylesheet" href="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/css/codemirror.css">
    <link rel="stylesheet" href="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/css/mermaid/mermaid.css">
    <link rel="stylesheet" href="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/css/mermaid/mermaid.dark.css">
    <link rel="stylesheet" href="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/css/bootstrap.min.css" vsckb-style="bootstrap">

    <script src="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/js/filtrex.js"></script>
    <script src="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/js/moment-with-locales.min.js"></script>
    <script src="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/js/highlight.pack.js"></script>
    <script src="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/js/codemirror/codemirror.js"></script>
    <script src="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/js/codemirror/addon/display/autorefresh.js"></script>
    <script src="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/js/codemirror/mode/markdown/markdown.js"></script>
    <script src="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/js/mermaid/mermaid.js"></script>
    <script src="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/js/mermaid/mermaidAPI.js"></script>
    <script src="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/js/showdown.min.js"></script>
    <script src="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/js/jquery.min.js" crossorigin="anonymous"></script>
    <script src="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

    <script>
        const vscode = acquireVsCodeApi();

        function vsckb_log(msg) {
            try {
                if (msg instanceof Error) {
                    msg = `ERROR: ${ msg.message }
    
    ${ msg.stack }`;
                }

                vscode.postMessage({
                    command: 'log',
                    data: {
                        message: JSON.stringify(msg)
                    }
                });
            } catch (e) {}
        }

        window.onerror = function(message, url, line, column, error) {
            vsckb_log({
                message: message,
                url: url,
                line: line,
                column: column,
                error: error
            });

            return false;
        };

        const VSCKB_AJAX_LOADER_16x11 = "vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/img/ajax-loader-16x11.gif";
    </script>

    <title>Kanban Board</title>
</head>

<body class="vscode-dark" style="">
    <div id="vsckb-body-top" class="clearfix"></div>



    <header>
        <nav class="navbar navbar-dark fixed-top bg-dark" style="">
            <a class="navbar-brand" href="#" title="#">
                <img src="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/img/icon.svg" width="30" height="30" class="d-inline-block align-top" alt="">
                <span title="/home/mkloubert/test/vscode-powertools/.vscode/vscode-kanban.json">Kanban Board (vscode-powertools)</span>
            </a>

            <form class="form-inline">

                <div id="vsckb-additional-header-btns">
                    <a class="btn btn-primary btn-sm text-white" id="vsckb-filter-cards-btn" title="Filter">
                        <i class="fa fa-filter" aria-hidden="true"></i>
                    </a>

                    <a class="btn btn-secondary btn-sm text-dark" id="vsckb-reload-board-btn" title="Reload Board">
                        <i class="fa fa-refresh" aria-hidden="true"></i>
                    </a>

                    <a class="btn btn-secondary btn-sm text-dark" id="vsckb-save-board-btn" title="Save Board">
                        <i class="fa fa-floppy-o" aria-hidden="true"></i>
                    </a>
                </div>


                <div id="vsckb-social-media-btns">
                    <a class="btn btn-dark btn-sm text-white vsckb-btn-with-known-url" vsckb-url="github" title="Open Project On GitHub">
                        <i class="fa fa-github" aria-hidden="true"></i>
                    </a>

                    <a class="btn btn-dark btn-sm text-white vsckb-btn-with-known-url" vsckb-url="twitter" title="Follow Author On Twitter">
                        <i class="fa fa-twitter" aria-hidden="true"></i>
                    </a>

                    <a class="btn btn-dark btn-sm text-white vsckb-btn-with-known-url" vsckb-url="paypal" title="Support Project via PayPal">
                        <i class="fa fa-paypal" aria-hidden="true"></i>
                    </a>
                </div>
            </form>
        </nav>
    </header>



    <main role="main" class="container-fluid h-100">
        <div class="row h-100">
            <div class="col col-6 col-md-3 h-100">
                <div class="card text-dark bg-secondary vsckb-card" id="vsckb-card-todo">
                    <div class="card-header font-weight-bold vsckb-primary-card-header border border-dark border-bottom-0 text-dark">
                        <span class="vsckb-title">Todo</span>

                        <div class="vsckb-buttons float-right">
                            <a class="btn btn-sm vsckb-add-btn" title="Add Card ...">
                                <i class="fa fa-plus" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>

                    <div class="card-body vsckb-primary-card-body h-100 bg-light border border-dark">
                        <div class="vsckb-kanban-card border border-dark" style="">
                            <div class="vsckb-kanban-card-col vsckb-kanban-card-type font-weight-bold bg-info text-dark"><a class="btn btn-sm" title="Edit Card"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a><a class="btn btn-sm" title="Delete Card"><i class="fa fa-trash" aria-hidden="true"></i></a></div>
                            <div class="vsckb-kanban-card-info bg-white text-dark" title="Click Here To View Details ...">
                                <div class="vsckb-kanban-card-title font-weight-bold">TODO Card</div>
                                <div class="vsckb-kanban-card-category" style="">TODO Category</div>
                                <div class="vsckb-kanban-card-progress" style="display: none;"></div>
                                <div class="vsckb-kanban-card-body">
                                    <div class="vsckb-markdown">
                                        <p>TODO Short Description</p>
                                    </div>
                                </div>
                            </div>
                            <div class="vsckb-kanban-card-footer text-dark" style="">
                                <div class="vsckb-buttons float-right"><a class="btn btn-sm" title="Move To 'In Progress'"><i class="fa fa-play-circle" aria-hidden="true"></i></a></div>
                                <div class="vsckb-creation-time float-left" vsckb-time="2019-05-08T20:32:14.061Z" title="2019-05-08 22:32:14" style="">~ 7 min</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col col-6 col-md-3 h-100">
                <div class="card text-white bg-primary vsckb-card" id="vsckb-card-in-progress">
                    <div class="card-header font-weight-bold vsckb-primary-card-header border border-dark border-bottom-0 text-white">
                        <span class="vsckb-title">In Progress</span>

                        <div class="vsckb-buttons float-right">
                            <a class="btn btn-sm vsckb-add-btn" title="Add Card ...">
                                <i class="fa fa-plus" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>

                    <div class="card-body vsckb-primary-card-body h-100 bg-light border border-dark">
                        <div class="vsckb-kanban-card border border-dark" style="">
                            <div class="vsckb-kanban-card-col vsckb-kanban-card-type font-weight-bold bg-danger text-white"><a class="btn btn-sm" title="Edit Card"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a><a class="btn btn-sm" title="Delete Card"><i class="fa fa-trash" aria-hidden="true"></i></a></div>
                            <div class="vsckb-kanban-card-info bg-white text-dark" title="Click Here To View Details ...">
                                <div class="vsckb-kanban-card-title font-weight-bold">In Progress Card</div>
                                <div class="vsckb-kanban-card-category" style="">In Progress Category</div>
                                <div class="vsckb-kanban-card-progress" title="33.3 %" style="">
                                    <div class="vsckb-kanban-card-progress-bar bg-danger" style="width: 33%;"></div>
                                </div>
                                <div class="vsckb-kanban-card-body">
                                    <div class="vsckb-markdown">
                                        <p>In Progress Short Description</p>
                                    </div>
                                </div>
                            </div>
                            <div class="vsckb-kanban-card-footer text-dark" style="">
                                <div class="vsckb-buttons float-right"><a class="btn btn-sm" title="Move To 'Todo'"><i class="fa fa-stop-circle" aria-hidden="true"></i></a><a class="btn btn-sm" title="Move To 'Testing'"><i class="fa fa-heartbeat" aria-hidden="true"></i></a><a class="btn btn-sm" title="Move To 'Done'"><i class="fa fa-check-circle" aria-hidden="true"></i></a></div>
                                <div class="vsckb-creation-time float-left" vsckb-time="2019-05-08T20:32:42.641Z" title="2019-05-08 22:32:42" style="">~ 7 min</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col col-6 col-md-3 h-100">
                <div class="card text-white bg-warning vsckb-card" id="vsckb-card-testing">
                    <div class="card-header font-weight-bold vsckb-primary-card-header border border-dark border-bottom-0 text-white">
                        <span class="vsckb-title">Testing</span>

                        <div class="vsckb-buttons float-right">
                            <a class="btn btn-sm vsckb-add-btn" title="Add Card ...">
                                <i class="fa fa-plus" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>

                    <div class="card-body vsckb-primary-card-body h-100 bg-light border border-dark">
                        <div class="vsckb-kanban-card border border-dark" style="">
                            <div class="vsckb-kanban-card-col vsckb-kanban-card-type font-weight-bold bg-dark text-white"><a class="btn btn-sm" title="Edit Card"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a><a class="btn btn-sm" title="Delete Card"><i class="fa fa-trash" aria-hidden="true"></i></a></div>
                            <div class="vsckb-kanban-card-info bg-white text-dark" title="Click Here To View Details ...">
                                <div class="vsckb-kanban-card-title font-weight-bold">Testing Card</div>
                                <div class="vsckb-kanban-card-category" style="">Testing Category</div>
                                <div class="vsckb-kanban-card-progress" style="display: none;"></div>
                                <div class="vsckb-kanban-card-body">
                                    <div class="vsckb-markdown">
                                        <p>Testing Short Description</p>
                                    </div>
                                </div>
                            </div>
                            <div class="vsckb-kanban-card-footer text-dark" style="">
                                <div class="vsckb-buttons float-right"><a class="btn btn-sm" title="Move To 'In Progress'"><i class="fa fa-thumbs-down" aria-hidden="true"></i></a><a class="btn btn-sm" title="Move To 'Done'"><i class="fa fa-check-circle" aria-hidden="true"></i></a></div>
                                <div class="vsckb-creation-time float-left" vsckb-time="2019-05-08T20:33:04.618Z" title="2019-05-08 22:33:04" style="">~ 6 min</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col col-6 col-md-3 h-100">
                <div class="card text-white bg-success vsckb-card" id="vsckb-card-done">
                    <div class="card-header font-weight-bold vsckb-primary-card-header border border-dark border-bottom-0 text-white">
                        <span class="vsckb-title">Done</span>

                        <div class="vsckb-buttons float-right">
                            <a class="btn btn-sm vsckb-clear-btn" title="Clear ...">
                                <i class="fa fa-eraser" aria-hidden="true"></i>
                            </a>

                            <a class="btn btn-sm vsckb-add-btn" title="Add Card ...">
                                <i class="fa fa-plus" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>

                    <div class="card-body vsckb-primary-card-body h-100 bg-light border border-dark">
                        <div class="vsckb-kanban-card border border-dark" style="">
                            <div class="vsckb-kanban-card-col vsckb-kanban-card-type font-weight-bold bg-info text-dark"><a class="btn btn-sm" title="Edit Card"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a><a class="btn btn-sm" title="Delete Card"><i class="fa fa-trash" aria-hidden="true"></i></a></div>
                            <div class="vsckb-kanban-card-info bg-white text-dark" title="Click Here To View Details ...">
                                <div class="vsckb-kanban-card-title font-weight-bold">Done Card</div>
                                <div class="vsckb-kanban-card-category" style="">Done Category</div>
                                <div class="vsckb-kanban-card-progress" style="display: none;"></div>
                                <div class="vsckb-kanban-card-body">
                                    <div class="vsckb-markdown">
                                        <p>Done Short Description</p>
                                    </div>
                                </div>
                            </div>
                            <div class="vsckb-kanban-card-footer text-dark" style="">
                                <div class="vsckb-buttons float-right"><a class="btn btn-sm" title="Move To 'Testing'"><i class="fa fa-heartbeat" aria-hidden="true"></i></a><a class="btn btn-sm" title="Move To 'In Progress'"><i class="fa fa-refresh" aria-hidden="true"></i></a></div>
                                <div class="vsckb-creation-time float-left" vsckb-time="2019-05-08T20:33:34.247Z" title="2019-05-08 22:33:34" style="">~ 6 min</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>



    <div id="vsckb-body-bottom" class="clearfix"></div>

    <link rel="stylesheet" href="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/css/style.css">
    <link rel="stylesheet" href="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/css/board.css" vsckb-style="custom">

    <script src="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/js/script.js" crossorigin="anonymous"></script>
    <script src="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/js/board.js" crossorigin="anonymous"></script>


    <div class="modal" tabindex="-1" role="dialog" id="vsckb-add-card-modal" data-keyboard="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Card</h5>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="vsckb-new-card-title">Title</label>
                            <input type="text" class="form-control" id="vsckb-new-card-title">
                        </div>

                        <div class="row">
                            <div class="col col-10">
                                <div class="form-group vsckb-card-type-list">
                                    <label for="vsckb-new-card-type">Type</label>
                                    <select id="vsckb-new-card-type" class="form-control">
                                        <option value="bug">Bug / issue</option>
                                        <option value="emergency">Emergency</option>
                                        <option value="" selected="">Note / task</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col col-2">
                                <div class="form-group">
                                    <label for="vsckb-new-card-prio">Prio</label>
                                    <input type="number" id="vsckb-new-card-prio" class="form-control" placeholder="0">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="vsckb-new-card-category">Category</label>
                            <input type="text" class="form-control" id="vsckb-new-card-category">
                        </div>

                        <div class="form-group vsckb-card-assigned-to">
                            <label for="vsckb-new-card-assigned-to">Assigned To</label>
                            <input type="text" class="form-control" id="vsckb-new-card-assigned-to">
                        </div>

                        <div class="row">
                            <div class="col col-12">
                                <ul class="nav nav-pills vsckb-card-description-details-tablist" id="vsckb-new-card-description-details-tablist" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="vsckb-new-card-description-tab" data-toggle="pill" href="#vsckb-new-card-description-tab-pane" role="tab" aria-controls="vsckb-new-card-description-tab-pane" aria-selected="true" title="#vsckb-new-card-description-tab-pane">
                                            (Short) Description
                                        </a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" id="vsckb-new-card-details-tab" data-toggle="pill" href="#vsckb-new-card-details-tab-pane" role="tab" aria-controls="vsckb-new-card-details-tab-pane" aria-selected="false" title="#vsckb-new-card-details-tab-pane">
                                            Details
                                        </a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" id="vsckb-new-card-references-tab" data-toggle="pill" href="#vsckb-new-card-references-tab-pane" role="tab" aria-controls="vsckb-new-card-references-tab-pane" aria-selected="false" title="#vsckb-new-card-references-tab-pane">
                                            References
                                        </a>
                                    </li>
                                </ul>

                                <div class="tab-content vsckb-card-description-details-tab-content" id="vsckb-new-card-description-details-tab-content">
                                    <div class="tab-pane form-group show active" id="vsckb-new-card-description-tab-pane" role="tabpanel" aria-labelledby="vsckb-new-card-description-tab">
                                        <textarea class="form-control vsckb-markdown-editor" id="vsckb-new-card-description" rows="5" style="display: none;"></textarea>
                                        <div class="CodeMirror cm-s-default CodeMirror-wrap">
                                            <div style="overflow: hidden; position: relative; width: 3px; height: 0px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0"></textarea></div>
                                            <div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true">
                                                <div style="min-width: 1px;"></div>
                                            </div>
                                            <div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true">
                                                <div style="height: 100%; min-height: 1px;"></div>
                                            </div>
                                            <div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
                                            <div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
                                            <div class="CodeMirror-scroll" tabindex="-1">
                                                <div class="CodeMirror-sizer" style="margin-left: 0px;">
                                                    <div style="position: relative;">
                                                        <div class="CodeMirror-lines" role="presentation">
                                                            <div role="presentation" style="position: relative; outline: none;">
                                                                <div class="CodeMirror-measure">
                                                                    <pre><span>xxxxxxxxxx</span></pre>
                                                                    <div class="CodeMirror-linenumber CodeMirror-gutter-elt">
                                                                        <div>1</div>
                                                                    </div>
                                                                </div>
                                                                <div class="CodeMirror-measure"></div>
                                                                <div style="position: relative; z-index: 1;"></div>
                                                                <div class="CodeMirror-cursors"></div>
                                                                <div class="CodeMirror-code" role="presentation"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div style="position: absolute; height: 30px; width: 1px;"></div>
                                                <div class="CodeMirror-gutters">
                                                    <div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 1px;"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="tab-pane form-group" id="vsckb-new-card-details-tab-pane" role="tabpanel" aria-labelledby="vsckb-new-card-details-tab">
                                        <textarea class="form-control vsckb-markdown-editor" id="vsckb-new-card-details" rows="7" style="display: none;"></textarea>
                                        <div class="CodeMirror cm-s-default CodeMirror-wrap">
                                            <div style="overflow: hidden; position: relative; width: 3px; height: 0px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0"></textarea></div>
                                            <div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true">
                                                <div style="min-width: 1px;"></div>
                                            </div>
                                            <div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true">
                                                <div style="height: 100%; min-height: 1px;"></div>
                                            </div>
                                            <div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
                                            <div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
                                            <div class="CodeMirror-scroll" tabindex="-1">
                                                <div class="CodeMirror-sizer" style="margin-left: 0px;">
                                                    <div style="position: relative;">
                                                        <div class="CodeMirror-lines" role="presentation">
                                                            <div role="presentation" style="position: relative; outline: none;">
                                                                <div class="CodeMirror-measure">
                                                                    <pre><span>xxxxxxxxxx</span></pre>
                                                                    <div class="CodeMirror-linenumber CodeMirror-gutter-elt">
                                                                        <div>1</div>
                                                                    </div>
                                                                </div>
                                                                <div class="CodeMirror-measure"></div>
                                                                <div style="position: relative; z-index: 1;"></div>
                                                                <div class="CodeMirror-cursors"></div>
                                                                <div class="CodeMirror-code" role="presentation"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div style="position: absolute; height: 30px; width: 1px;"></div>
                                                <div class="CodeMirror-gutters">
                                                    <div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 1px;"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="tab-pane form-group vsckb-card-references-tab-pane" id="vsckb-new-card-references-tab-pane" role="tabpanel" aria-labelledby="vsckb-new-card-references-tab">
                                        <nav class="navbar navbar-light bg-light">

                                            <div class="col" style="display: table; margin: 0; padding: 0;">
                                                <div style="display: table-cell;">
                                                    <select class="form-control vsckb-card-list"></select>
                                                </div>

                                                <div style="display: table-cell; width: 32px; padding: 8px; top: -2px; position: relative;">
                                                    <a class="btn btn-sm btn-primary text-white vsckb-add-link-to-card-btn text-center align-middle" title="Add Link To Card ..." id="vsckb-edit-card-add-link-btn">
                                                        <i class="fa fa-link" aria-hidden="true"></i>
                                                    </a>
                                                </div>
                                            </div>

                                        </nav>

                                        <div class="vsckb-list-of-linked-cards"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>


                    <div class="row">
                        <div class="col col-12">
                            <div class="vsckb-help-link">
                                <i class="fa fa-question-circle" aria-hidden="true"></i> <a href="#" class="vsckb-with-known-url" vsckb-url="markdown-help" title="#">Markdown Help</a>
                            </div>

                            <div class="vsckb-help-link">
                                <i class="fa fa-question-circle" aria-hidden="true"></i> <a href="#" class="vsckb-with-known-url" vsckb-url="mermaid-help" title="#">Diagram Help</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <a class="btn btn-primary text-white" title="null">
                        <i class="fa fa-plus-circle" aria-hidden="true"></i>

                        <span>Add</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" tabindex="-1" role="dialog" id="vsckb-delete-card-modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title">Delete Card</h5>

                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div class="modal-body"></div>

                <div class="modal-footer">
                    <a class="btn btn-warning text-white font-weight-bold vsckb-no-btn" title="null">
                        <span>NO!</span>
                    </a>

                    <a class="btn btn-danger text-white vsckb-yes-btn" title="null">
                        <span>Yes</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" tabindex="-1" role="dialog" id="vsckb-edit-card-modal" data-keyboard="false" vsckb-type="in-progress" aria-hidden="true" style="display: none;">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">Edit Card</h5>

                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="vsckb-edit-card-title">Title</label>
                            <input type="text" class="form-control" id="vsckb-edit-card-title">
                        </div>

                        <div class="row">
                            <div class="col col-10">
                                <div class="form-group vsckb-card-type-list">
                                    <label for="vsckb-edit-card-type">Type</label>
                                    <select id="vsckb-edit-card-type" class="form-control">
                                        <option value="bug">Bug / issue</option>
                                        <option value="emergency">Emergency</option>
                                        <option value="" selected="">Note / task</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col col-2">
                                <div class="form-group">
                                    <label for="vsckb-edit-card-prio">Prio</label>
                                    <input type="number" id="vsckb-edit-card-prio" class="form-control" placeholder="0">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="vsckb-edit-card-category">Category</label>
                            <input type="text" class="form-control" id="vsckb-edit-card-category">
                        </div>

                        <div class="form-group vsckb-card-assigned-to">
                            <label for="vsckb-edit-card-assigned-to">Assigned To</label>
                            <input type="text" class="form-control" id="vsckb-edit-card-assigned-to">
                        </div>

                        <div class="row">
                            <div class="col col-12">
                                <ul class="nav nav-pills vsckb-card-description-details-tablist" id="vsckb-edit-card-description-details-tablist" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link" id="vsckb-edit-card-description-tab" data-toggle="pill" href="#vsckb-edit-card-description-tab-pane" role="tab" aria-controls="vsckb-edit-card-description-tab-pane" aria-selected="false" title="#vsckb-edit-card-description-tab-pane">
                                            (Short) Description
                                        </a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link active show" id="vsckb-edit-card-details-tab" data-toggle="pill" href="#vsckb-edit-card-details-tab-pane" role="tab" aria-controls="vsckb-edit-card-details-tab-pane" aria-selected="true" title="#vsckb-edit-card-details-tab-pane">
                                            Details
                                        </a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" id="vsckb-edit-card-references-tab" data-toggle="pill" href="#vsckb-edit-card-references-tab-pane" role="tab" aria-controls="vsckb-edit-card-references-tab-pane" aria-selected="false" title="#vsckb-edit-card-references-tab-pane">
                                            References
                                        </a>
                                    </li>
                                </ul>

                                <div class="tab-content vsckb-card-description-details-tab-content" id="vsckb-edit-card-description-details-tab-content">
                                    <div class="tab-pane form-group" id="vsckb-edit-card-description-tab-pane" role="tabpanel" aria-labelledby="vsckb-edit-card-description-tab">
                                        <textarea class="form-control vsckb-markdown-editor" id="vsckb-edit-card-description" rows="5" maxlength="255" style="display: none;"></textarea>
                                        <div class="CodeMirror cm-s-default CodeMirror-wrap">
                                            <div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 42px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0"></textarea></div>
                                            <div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true" style="bottom: 0px;">
                                                <div style="min-width: 1px; height: 0px;"></div>
                                            </div>
                                            <div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true">
                                                <div style="height: 100%; min-height: 1px; width: 0px;"></div>
                                            </div>
                                            <div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
                                            <div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
                                            <div class="CodeMirror-scroll" tabindex="-1">
                                                <div class="CodeMirror-sizer" style="margin-left: 30px; padding-right: 0px; padding-bottom: 0px; margin-bottom: -10px; border-right-width: 20px; min-height: 26px;">
                                                    <div style="position: relative; top: 0px;">
                                                        <div class="CodeMirror-lines" role="presentation">
                                                            <div role="presentation" style="position: relative; outline: none;">
                                                                <div class="CodeMirror-measure">
                                                                    <div class="CodeMirror-linenumber CodeMirror-gutter-elt">
                                                                        <div>1</div>
                                                                    </div>
                                                                </div>
                                                                <div class="CodeMirror-measure"></div>
                                                                <div style="position: relative; z-index: 1;"></div>
                                                                <div class="CodeMirror-cursors" style="">
                                                                    <div class="CodeMirror-cursor" style="left: 12px; top: 0px; height: 18px;">&nbsp;</div>
                                                                </div>
                                                                <div class="CodeMirror-code" role="presentation">
                                                                    <div style="position: relative;">
                                                                        <div class="CodeMirror-gutter-wrapper" style="left: -30px;">
                                                                            <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">1</div>
                                                                        </div>
                                                                        <pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">In Progress Short Description</span></pre>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div style="position: absolute; height: 20px; width: 1px; border-bottom: 0px solid transparent; top: 26px;"></div>
                                                <div class="CodeMirror-gutters" style="left: 0px; height: 46px;">
                                                    <div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="tab-pane form-group active show" id="vsckb-edit-card-details-tab-pane" role="tabpanel" aria-labelledby="vsckb-edit-card-details-tab">
                                        <textarea class="form-control vsckb-markdown-editor" id="vsckb-edit-card-details" rows="7" style="display: none;"></textarea>
                                        <div class="CodeMirror cm-s-default CodeMirror-wrap">
                                            <div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 134px; left: 164px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0"></textarea></div>
                                            <div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true" style="display: block; bottom: 0px;">
                                                <div style="min-width: 1px; height: 170px;"></div>
                                            </div>
                                            <div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true">
                                                <div style="height: 100%; min-height: 1px; width: 0px;"></div>
                                            </div>
                                            <div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
                                            <div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
                                            <div class="CodeMirror-scroll" tabindex="-1">
                                                <div class="CodeMirror-sizer" style="margin-left: 30px; margin-bottom: -10px; border-right-width: 20px; min-height: 170px; padding-right: 10px; padding-bottom: 0px;">
                                                    <div style="position: relative; top: 0px;">
                                                        <div class="CodeMirror-lines" role="presentation">
                                                            <div role="presentation" style="position: relative; outline: none;">
                                                                <div class="CodeMirror-measure"><span><span></span>x</span></div>
                                                                <div class="CodeMirror-measure"></div>
                                                                <div style="position: relative; z-index: 1;"></div>
                                                                <div class="CodeMirror-cursors" style="visibility: hidden;">
                                                                    <div class="CodeMirror-cursor" style="left: 134px; top: 144px; height: 18px;">&nbsp;</div>
                                                                </div>
                                                                <div class="CodeMirror-code" role="presentation" style="">
                                                                    <div style="position: relative;">
                                                                        <div class="CodeMirror-gutter-wrapper" style="left: -30px;">
                                                                            <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">1</div>
                                                                        </div>
                                                                        <pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable-2">- </span><span class="cm-link cm-variable-2">[ ]</span><span class="cm-variable-2"> Mercury</span></span></pre>
                                                                    </div>
                                                                    <div style="position: relative;">
                                                                        <div class="CodeMirror-gutter-wrapper" style="left: -30px;">
                                                                            <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">2</div>
                                                                        </div>
                                                                        <pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable-2">- </span><span class="cm-link cm-variable-2">[x]</span><span class="cm-variable-2"> Venus</span></span></pre>
                                                                    </div>
                                                                    <div style="position: relative;">
                                                                        <div class="CodeMirror-gutter-wrapper" style="left: -30px;">
                                                                            <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">3</div>
                                                                        </div>
                                                                        <pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable-2">- </span><span class="cm-link cm-variable-2">[x]</span><span class="cm-variable-2"> Earth (Orbit/Moon)</span></span></pre>
                                                                    </div>
                                                                    <div style="position: relative;">
                                                                        <div class="CodeMirror-gutter-wrapper" style="left: -30px;">
                                                                            <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">4</div>
                                                                        </div>
                                                                        <pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable-2">- </span><span class="cm-link cm-variable-2">[x]</span><span class="cm-variable-2"> Mars</span></span></pre>
                                                                    </div>
                                                                    <div style="position: relative;">
                                                                        <div class="CodeMirror-gutter-wrapper" style="left: -30px;">
                                                                            <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">5</div>
                                                                        </div>
                                                                        <pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable-2">- </span><span class="cm-link cm-variable-2">[ ]</span><span class="cm-variable-2"> Jupiter</span></span></pre>
                                                                    </div>
                                                                    <div style="position: relative;">
                                                                        <div class="CodeMirror-gutter-wrapper" style="left: -30px;">
                                                                            <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">6</div>
                                                                        </div>
                                                                        <pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable-2">- </span><span class="cm-link cm-variable-2">[ ]</span><span class="cm-variable-2"> Saturn</span></span></pre>
                                                                    </div>
                                                                    <div style="position: relative;">
                                                                        <div class="CodeMirror-gutter-wrapper" style="left: -30px;">
                                                                            <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">7</div>
                                                                        </div>
                                                                        <pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable-2">- </span><span class="cm-link cm-variable-2">[ ]</span><span class="cm-variable-2"> Uranus</span></span></pre>
                                                                    </div>
                                                                    <div style="position: relative;">
                                                                        <div class="CodeMirror-gutter-wrapper" style="left: -30px;">
                                                                            <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">8</div>
                                                                        </div>
                                                                        <pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable-2">- </span><span class="cm-link cm-variable-2">[ ]</span><span class="cm-variable-2"> Neptune</span></span></pre>
                                                                    </div>
                                                                    <div style="position: relative;">
                                                                        <div class="CodeMirror-gutter-wrapper" style="left: -30px;">
                                                                            <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">9</div>
                                                                        </div>
                                                                        <pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable-2">- </span><span class="cm-link cm-variable-2">[ ]</span><span class="cm-variable-2"> Comet Haley</span></span></pre>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div style="position: absolute; height: 20px; width: 1px; border-bottom: 0px solid transparent; top: 170px;"></div>
                                                <div class="CodeMirror-gutters" style="left: 0px; height: 190px;">
                                                    <div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="tab-pane form-group vsckb-card-references-tab-pane" id="vsckb-edit-card-references-tab-pane" role="tabpanel" aria-labelledby="vsckb-edit-card-references-tab">
                                        <nav class="navbar navbar-light bg-light">

                                            <div class="col" style="display: table; margin: 0; padding: 0;">
                                                <div style="display: table-cell;">
                                                    <select class="form-control vsckb-card-list">
                                                        <option value="">----- Select A Card -----</option>
                                                        <option value="4" title="">Done Card</option>
                                                        <option value="3" title="">Testing Card</option>
                                                        <option value="1" title="">TODO Card</option>
                                                    </select>
                                                </div>

                                                <div style="display: table-cell; width: 32px; padding: 8px; top: -2px; position: relative;">
                                                    <a class="btn btn-sm btn-primary text-white vsckb-add-link-to-card-btn text-center align-middle" title="Add Link To Card ..." id="vsckb-edit-card-add-link-btn">
                                                        <i class="fa fa-link" aria-hidden="true"></i>
                                                    </a>
                                                </div>
                                            </div>

                                        </nav>

                                        <div class="vsckb-list-of-linked-cards">
                                            <div class="alert alert-info" role="alert">There Is Currently No Card Linked</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>


                    <div class="row">
                        <div class="col col-12">
                            <div class="vsckb-help-link">
                                <i class="fa fa-question-circle" aria-hidden="true"></i> <a href="#" class="vsckb-with-known-url" vsckb-url="markdown-help" title="#">Markdown Help</a>
                            </div>

                            <div class="vsckb-help-link">
                                <i class="fa fa-question-circle" aria-hidden="true"></i> <a href="#" class="vsckb-with-known-url" vsckb-url="mermaid-help" title="#">Diagram Help</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <a class="btn btn-primary vsckb-save-btn text-white" title="null">
                        <i class="fa fa-floppy-o" aria-hidden="true"></i>

                        <span>Save</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" tabindex="-1" role="dialog" id="vsckb-clear-done-modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-warning text-white">
                    <h5 class="modal-title"></h5>

                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div class="modal-body">
                    <span>Do you really want to delete ALL cards in <strong>Done</strong>?</span>
                </div>

                <div class="modal-footer">
                    <a class="btn btn-warning text-white font-weight-bold vsckb-no-btn" title="null">
                        <span>NO!</span>
                    </a>

                    <a class="btn btn-danger text-white vsckb-yes-btn" title="null">
                        <span>Yes</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" tabindex="-1" role="dialog" id="vsckb-card-details-modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>

                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="col col-12 vsckb-badge-list"></div>
                    </div>

                    <div class="row">
                        <div class="col col-12 vsckb-body"></div>
                    </div>
                </div>

                <div class="modal-footer">
                    <a class="btn btn-primary vsckb-edit-btn text-white" title="null">
                        <i class="fa fa-pencil-square-o" aria-hidden="true"></i>

                        <span>Edit</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" tabindex="-1" role="dialog" id="vsckb-card-filter-modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-dark text-white">
                    <h5 class="modal-title">Filter</h5>

                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        <label for="vsckb-card-filter-expr">Expression</label>
                        <textarea type="text" class="form-control" id="vsckb-card-filter-expr" placeholder="example: type == &quot;emergency&quot; or is_bug" rows="7"></textarea>
                    </div>

                    <div class="row">
                        <div class="col col-12">
                            <i class="fa fa-question-circle" aria-hidden="true"></i> <a href="#" class="vsckb-with-known-url" vsckb-url="filter-help" title="#">Open Help</a>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <a class="btn btn-primary vsckb-apply-btn text-white" title="null">
                        <i class="fa fa-filter" aria-hidden="true"></i>

                        <span>Apply</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <link rel="stylesheet" href="vscode-resource:/home/mkloubert/proj/vscode-kanban/out/res/vscode-kanban.css">
</body>

</html>

from vscode-kanban.

CJamesKeller avatar CJamesKeller commented on May 30, 2024

Great, that worked! Thanks!

from vscode-kanban.

CJamesKeller avatar CJamesKeller commented on May 30, 2024

Great, that worked! Thanks!

from vscode-kanban.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.