@paperbits/core/workshops/settings/ko/settings.html

Paperbits core components.

<!--ko if: working()-->
<spinner></spinner>
<!--/ko-->

<div class="flex flex-column fit">
    <div class="flex-item flex-item-grow form" data-bind="scrollable: true">
        <div class="form-group">
            <label class="form-label">Favicon</label>
            <div class="flex">
                <div class="flex-item dropzone-showbox dropzone-square" data-bind="background: favicon, balloon: { component: { name: 'media-selector', params: { mimeType: 'image/x-icon', onSelect: $component.onMediaSelected } }, position: 'top' }"></div>

                <button class="flex-item flex-item-grow btn" data-bind="balloon: { component: { name: 'media-selector', params: { mimeType: 'image/x-icon', onSelect: $component.onMediaSelected } }, position: 'top' }">
                    <i aria-hidden="true" class="paperbits-icon paperbits-square-upload"></i>
                    Setup favicon
                </button>
            </div>
        </div>

        <div class="form-group">
            <label for="title" class="form-label">Title</label>
            <input type="text" id="title" class="form-control" data-bind="textInput: title, focus: true" maxlength="500" />
        </div>

        <div class="form-group">
            <label for="description" class="form-label">Description</label>
            <textarea id="description" class="form-control" data-bind="textInput: description" maxlength="500"></textarea>
        </div>

        <div class="form-group">
            <label for="keywords" class="form-label">Keywords</label>
            <input type="text" id="keywords" class="form-control" data-bind="textInput: keywords" maxlength="500" />
        </div>

        <div class="form-group">
            <label for="author" class="form-label">Author</label>
            <input type="text" id="author" class="form-control" data-bind="textInput: author" maxlength="500" />
        </div>
    </div>
</div>