diff --git a/static/DragDropTouch.js b/static/DragDropTouch.js new file mode 100644 index 0000000..bba5fd0 --- /dev/null +++ b/static/DragDropTouch.js @@ -0,0 +1,452 @@ +var DragDropTouch; +(function (DragDropTouch_1) { + 'use strict'; + /** + * Object used to hold the data that is being dragged during drag and drop operations. + * + * It may hold one or more data items of different types. For more information about + * drag and drop operations and data transfer objects, see + * HTML Drag and Drop API. + * + * This object is created automatically by the @see:DragDropTouch singleton and is + * accessible through the @see:dataTransfer property of all drag events. + */ + var DataTransfer = (function () { + function DataTransfer() { + this._dropEffect = 'move'; + this._effectAllowed = 'all'; + this._data = {}; + } + Object.defineProperty(DataTransfer.prototype, "dropEffect", { + /** + * Gets or sets the type of drag-and-drop operation currently selected. + * The value must be 'none', 'copy', 'link', or 'move'. + */ + get: function () { + return this._dropEffect; + }, + set: function (value) { + this._dropEffect = value; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(DataTransfer.prototype, "effectAllowed", { + /** + * Gets or sets the types of operations that are possible. + * Must be one of 'none', 'copy', 'copyLink', 'copyMove', 'link', + * 'linkMove', 'move', 'all' or 'uninitialized'. + */ + get: function () { + return this._effectAllowed; + }, + set: function (value) { + this._effectAllowed = value; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(DataTransfer.prototype, "types", { + /** + * Gets an array of strings giving the formats that were set in the @see:dragstart event. + */ + get: function () { + return Object.keys(this._data); + }, + enumerable: true, + configurable: true + }); + /** + * Removes the data associated with a given type. + * + * The type argument is optional. If the type is empty or not specified, the data + * associated with all types is removed. If data for the specified type does not exist, + * or the data transfer contains no data, this method will have no effect. + * + * @param type Type of data to remove. + */ + DataTransfer.prototype.clearData = function (type) { + if (type != null) { + delete this._data[type.toLowerCase()]; + } + else { + this._data = {}; + } + }; + /** + * Retrieves the data for a given type, or an empty string if data for that type does + * not exist or the data transfer contains no data. + * + * @param type Type of data to retrieve. + */ + DataTransfer.prototype.getData = function (type) { + return this._data[type.toLowerCase()] || ''; + }; + /** + * Set the data for a given type. + * + * For a list of recommended drag types, please see + * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Recommended_Drag_Types. + * + * @param type Type of data to add. + * @param value Data to add. + */ + DataTransfer.prototype.setData = function (type, value) { + this._data[type.toLowerCase()] = value; + }; + /** + * Set the image to be used for dragging if a custom one is desired. + * + * @param img An image element to use as the drag feedback image. + * @param offsetX The horizontal offset within the image. + * @param offsetY The vertical offset within the image. + */ + DataTransfer.prototype.setDragImage = function (img, offsetX, offsetY) { + var ddt = DragDropTouch._instance; + ddt._imgCustom = img; + ddt._imgOffset = { x: offsetX, y: offsetY }; + }; + return DataTransfer; + }()); + DragDropTouch_1.DataTransfer = DataTransfer; + /** + * Defines a class that adds support for touch-based HTML5 drag/drop operations. + * + * The @see:DragDropTouch class listens to touch events and raises the + * appropriate HTML5 drag/drop events as if the events had been caused + * by mouse actions. + * + * The purpose of this class is to enable using existing, standard HTML5 + * drag/drop code on mobile devices running IOS or Android. + * + * To use, include the DragDropTouch.js file on the page. The class will + * automatically start monitoring touch events and will raise the HTML5 + * drag drop events (dragstart, dragenter, dragleave, drop, dragend) which + * should be handled by the application. + * + * For details and examples on HTML drag and drop, see + * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations. + */ + var DragDropTouch = (function () { + /** + * Initializes the single instance of the @see:DragDropTouch class. + */ + function DragDropTouch() { + this._lastClick = 0; + // enforce singleton pattern + if (DragDropTouch._instance) { + throw 'DragDropTouch instance already created.'; + } + // detect passive event support + // https://github.com/Modernizr/Modernizr/issues/1894 + var supportsPassive = false; + document.addEventListener('test', function () { }, { + get passive() { + supportsPassive = true; + return true; + } + }); + // listen to touch events + if (navigator.maxTouchPoints) { + var d = document, + ts = this._touchstart.bind(this), + tm = this._touchmove.bind(this), + te = this._touchend.bind(this), + opt = supportsPassive ? { passive: false, capture: false } : false; + d.addEventListener('touchstart', ts, opt); + d.addEventListener('touchmove', tm, opt); + d.addEventListener('touchend', te); + d.addEventListener('touchcancel', te); + } + } + /** + * Gets a reference to the @see:DragDropTouch singleton. + */ + DragDropTouch.getInstance = function () { + return DragDropTouch._instance; + }; + // ** event handlers + DragDropTouch.prototype._touchstart = function (e) { + var _this = this; + if (this._shouldHandle(e)) { + // raise double-click and prevent zooming + if (Date.now() - this._lastClick < DragDropTouch._DBLCLICK) { + if (this._dispatchEvent(e, 'dblclick', e.target)) { + e.preventDefault(); + this._reset(); + return; + } + } + // clear all variables + this._reset(); + // get nearest draggable element + var src = this._closestDraggable(e.target); + if (src) { + // give caller a chance to handle the hover/move events + if (!this._dispatchEvent(e, 'mousemove', e.target) && + !this._dispatchEvent(e, 'mousedown', e.target)) { + // get ready to start dragging + this._dragSource = src; + this._ptDown = this._getPoint(e); + this._lastTouch = e; + e.preventDefault(); + // show context menu if the user hasn't started dragging after a while + setTimeout(function () { + if (_this._dragSource == src && _this._img == null) { + if (_this._dispatchEvent(e, 'contextmenu', src)) { + _this._reset(); + } + } + }, DragDropTouch._CTXMENU); + if (DragDropTouch._ISPRESSHOLDMODE) { + this._pressHoldInterval = setTimeout(function () { + _this._isDragEnabled = true; + _this._touchmove(e); + }, DragDropTouch._PRESSHOLDAWAIT); + } + } + } + } + }; + DragDropTouch.prototype._touchmove = function (e) { + if (this._shouldCancelPressHoldMove(e)) { + this._reset(); + return; + } + if (this._shouldHandleMove(e) || this._shouldHandlePressHoldMove(e)) { + // see if target wants to handle move + var target = this._getTarget(e); + if (this._dispatchEvent(e, 'mousemove', target)) { + this._lastTouch = e; + e.preventDefault(); + return; + } + // start dragging + if (this._dragSource && !this._img && this._shouldStartDragging(e)) { + this._dispatchEvent(e, 'dragstart', this._dragSource); + this._createImage(e); + this._dispatchEvent(e, 'dragenter', target); + } + // continue dragging + if (this._img) { + this._lastTouch = e; + e.preventDefault(); // prevent scrolling + this._dispatchEvent(e, 'drag', this._dragSource); + if (target != this._lastTarget) { + this._dispatchEvent(this._lastTouch, 'dragleave', this._lastTarget); + this._dispatchEvent(e, 'dragenter', target); + this._lastTarget = target; + } + this._moveImage(e); + this._isDropZone = this._dispatchEvent(e, 'dragover', target); + } + } + }; + DragDropTouch.prototype._touchend = function (e) { + if (this._shouldHandle(e)) { + // see if target wants to handle up + if (this._dispatchEvent(this._lastTouch, 'mouseup', e.target)) { + e.preventDefault(); + return; + } + // user clicked the element but didn't drag, so clear the source and simulate a click + if (!this._img) { + this._dragSource = null; + this._dispatchEvent(this._lastTouch, 'click', e.target); + this._lastClick = Date.now(); + } + // finish dragging + this._destroyImage(); + if (this._dragSource) { + if (e.type.indexOf('cancel') < 0 && this._isDropZone) { + this._dispatchEvent(this._lastTouch, 'drop', this._lastTarget); + } + this._dispatchEvent(this._lastTouch, 'dragend', this._dragSource); + this._reset(); + } + } + }; + // ** utilities + // ignore events that have been handled or that involve more than one touch + DragDropTouch.prototype._shouldHandle = function (e) { + return e && + !e.defaultPrevented && + e.touches && e.touches.length < 2; + }; + + // use regular condition outside of press & hold mode + DragDropTouch.prototype._shouldHandleMove = function (e) { + return !DragDropTouch._ISPRESSHOLDMODE && this._shouldHandle(e); + }; + + // allow to handle moves that involve many touches for press & hold + DragDropTouch.prototype._shouldHandlePressHoldMove = function (e) { + return DragDropTouch._ISPRESSHOLDMODE && + this._isDragEnabled && e && e.touches && e.touches.length; + }; + + // reset data if user drags without pressing & holding + DragDropTouch.prototype._shouldCancelPressHoldMove = function (e) { + return DragDropTouch._ISPRESSHOLDMODE && !this._isDragEnabled && + this._getDelta(e) > DragDropTouch._PRESSHOLDMARGIN; + }; + + // start dragging when specified delta is detected + DragDropTouch.prototype._shouldStartDragging = function (e) { + var delta = this._getDelta(e); + return delta > DragDropTouch._THRESHOLD || + (DragDropTouch._ISPRESSHOLDMODE && delta >= DragDropTouch._PRESSHOLDTHRESHOLD); + } + + // clear all members + DragDropTouch.prototype._reset = function () { + this._destroyImage(); + this._dragSource = null; + this._lastTouch = null; + this._lastTarget = null; + this._ptDown = null; + this._isDragEnabled = false; + this._isDropZone = false; + this._dataTransfer = new DataTransfer(); + clearInterval(this._pressHoldInterval); + }; + // get point for a touch event + DragDropTouch.prototype._getPoint = function (e, page) { + if (e && e.touches) { + e = e.touches[0]; + } + return { x: page ? e.pageX : e.clientX, y: page ? e.pageY : e.clientY }; + }; + // get distance between the current touch event and the first one + DragDropTouch.prototype._getDelta = function (e) { + if (DragDropTouch._ISPRESSHOLDMODE && !this._ptDown) { return 0; } + var p = this._getPoint(e); + return Math.abs(p.x - this._ptDown.x) + Math.abs(p.y - this._ptDown.y); + }; + // get the element at a given touch event + DragDropTouch.prototype._getTarget = function (e) { + var pt = this._getPoint(e), el = document.elementFromPoint(pt.x, pt.y); + while (el && getComputedStyle(el).pointerEvents == 'none') { + el = el.parentElement; + } + return el; + }; + // create drag image from source element + DragDropTouch.prototype._createImage = function (e) { + // just in case... + if (this._img) { + this._destroyImage(); + } + // create drag image from custom element or drag source + var src = this._imgCustom || this._dragSource; + this._img = src.cloneNode(true); + this._copyStyle(src, this._img); + this._img.style.top = this._img.style.left = '-9999px'; + // if creating from drag source, apply offset and opacity + if (!this._imgCustom) { + var rc = src.getBoundingClientRect(), pt = this._getPoint(e); + this._imgOffset = { x: pt.x - rc.left, y: pt.y - rc.top }; + this._img.style.opacity = DragDropTouch._OPACITY.toString(); + } + // add image to document + this._moveImage(e); + document.body.appendChild(this._img); + }; + // dispose of drag image element + DragDropTouch.prototype._destroyImage = function () { + if (this._img && this._img.parentElement) { + this._img.parentElement.removeChild(this._img); + } + this._img = null; + this._imgCustom = null; + }; + // move the drag image element + DragDropTouch.prototype._moveImage = function (e) { + var _this = this; + requestAnimationFrame(function () { + if (_this._img) { + var pt = _this._getPoint(e, true), s = _this._img.style; + s.position = 'absolute'; + s.pointerEvents = 'none'; + s.zIndex = '999999'; + s.left = Math.round(pt.x - _this._imgOffset.x) + 'px'; + s.top = Math.round(pt.y - _this._imgOffset.y) + 'px'; + } + }); + }; + // copy properties from an object to another + DragDropTouch.prototype._copyProps = function (dst, src, props) { + for (var i = 0; i < props.length; i++) { + var p = props[i]; + dst[p] = src[p]; + } + }; + DragDropTouch.prototype._copyStyle = function (src, dst) { + // remove potentially troublesome attributes + DragDropTouch._rmvAtts.forEach(function (att) { + dst.removeAttribute(att); + }); + // copy canvas content + if (src instanceof HTMLCanvasElement) { + var cSrc = src, cDst = dst; + cDst.width = cSrc.width; + cDst.height = cSrc.height; + cDst.getContext('2d').drawImage(cSrc, 0, 0); + } + // copy style (without transitions) + var cs = getComputedStyle(src); + for (var i = 0; i < cs.length; i++) { + var key = cs[i]; + if (key.indexOf('transition') < 0) { + dst.style[key] = cs[key]; + } + } + dst.style.pointerEvents = 'none'; + // and repeat for all children + for (var i = 0; i < src.children.length; i++) { + this._copyStyle(src.children[i], dst.children[i]); + } + }; + DragDropTouch.prototype._dispatchEvent = function (e, type, target) { + if (e && target) { + var evt = document.createEvent('Event'), t = e.touches ? e.touches[0] : e; + evt.initEvent(type, true, true); + evt.button = 0; + evt.which = evt.buttons = 1; + this._copyProps(evt, e, DragDropTouch._kbdProps); + this._copyProps(evt, t, DragDropTouch._ptProps); + evt.dataTransfer = this._dataTransfer; + target.dispatchEvent(evt); + return evt.defaultPrevented; + } + return false; + }; + // gets an element's closest draggable ancestor + DragDropTouch.prototype._closestDraggable = function (e) { + for (; e; e = e.parentElement) { + if (e.hasAttribute('draggable') && e.draggable) { + return e; + } + } + return null; + }; + return DragDropTouch; + }()); + /*private*/ DragDropTouch._instance = new DragDropTouch(); // singleton + // constants + DragDropTouch._THRESHOLD = 5; // pixels to move before drag starts + DragDropTouch._OPACITY = 0.5; // drag image opacity + DragDropTouch._DBLCLICK = 500; // max ms between clicks in a double click + DragDropTouch._CTXMENU = 900; // ms to hold before raising 'contextmenu' event + DragDropTouch._ISPRESSHOLDMODE = false; // decides of press & hold mode presence + DragDropTouch._PRESSHOLDAWAIT = 400; // ms to wait before press & hold is detected + DragDropTouch._PRESSHOLDMARGIN = 25; // pixels that finger might shiver while pressing + DragDropTouch._PRESSHOLDTHRESHOLD = 0; // pixels to move before drag starts + // copy styles/attributes from drag source to drag image element + DragDropTouch._rmvAtts = 'id,class,style,draggable'.split(','); + // synthesize and dispatch an event + // returns true if the event has been handled (e.preventDefault == true) + DragDropTouch._kbdProps = 'altKey,ctrlKey,metaKey,shiftKey'.split(','); + DragDropTouch._ptProps = 'pageX,pageY,clientX,clientY,screenX,screenY,offsetX,offsetY'.split(','); + DragDropTouch_1.DragDropTouch = DragDropTouch; +})(DragDropTouch || (DragDropTouch = {})); diff --git a/static/font.css b/static/font.css new file mode 100644 index 0000000..f1c8929 --- /dev/null +++ b/static/font.css @@ -0,0 +1,927 @@ +/* + * Elusive-Icons by Dovy Paukstys + * https://github.com/dovy/elusive-iconfont + * License : SIL OFL - http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL +*/ +@font-face { + font-family: 'Elusive-Icons'; + src:url('fonts/Elusive-Icons.eot'); + src:url('fonts/Elusive-Icons.eot?#iefix') format('embedded-opentype'), + url('fonts/Elusive-Icons.ttf') format('truetype'), + url('fonts/Elusive-Icons.woff') format('woff'), + url('fonts/Elusive-Icons.svg#Elusive-Icons') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class*="el-icon-"] { + font-family: 'Elusive-Icons'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.el-icon-zoom-out:before { + content: "\e600"; +} +.el-icon-zoom-in:before { + content: "\e601"; +} +.el-icon-youtube:before { + content: "\e602"; +} +.el-icon-wrench-alt:before { + content: "\e603"; +} +.el-icon-wrench:before { + content: "\e604"; +} +.el-icon-wordpress:before { + content: "\e605"; +} +.el-icon-wheelchair:before { + content: "\e606"; +} +.el-icon-website-alt:before { + content: "\e607"; +} +.el-icon-website:before { + content: "\e608"; +} +.el-icon-warning-sign:before { + content: "\e609"; +} +.el-icon-w3c:before { + content: "\e60a"; +} +.el-icon-volume-up:before { + content: "\e60b"; +} +.el-icon-volume-off:before { + content: "\e60c"; +} +.el-icon-volume-down:before { + content: "\e60d"; +} +.el-icon-vkontakte:before { + content: "\e60e"; +} +.el-icon-vimeo:before { + content: "\e60f"; +} +.el-icon-view-mode:before { + content: "\e610"; +} +.el-icon-video-chat:before { + content: "\e611"; +} +.el-icon-video-alt:before { + content: "\e612"; +} +.el-icon-video:before { + content: "\e613"; +} +.el-icon-viadeo:before { + content: "\e614"; +} +.el-icon-user:before { + content: "\e615"; +} +.el-icon-usd:before { + content: "\e616"; +} +.el-icon-upload:before { + content: "\e617"; +} +.el-icon-unlock-alt:before { + content: "\e618"; +} +.el-icon-unlock:before { + content: "\e619"; +} +.el-icon-universal-access:before { + content: "\e61a"; +} +.el-icon-twitter:before { + content: "\e61b"; +} +.el-icon-tumblr:before { + content: "\e61c"; +} +.el-icon-trash-alt:before { + content: "\e61d"; +} +.el-icon-trash:before { + content: "\e61e"; +} +.el-icon-torso:before { + content: "\e61f"; +} +.el-icon-tint:before { + content: "\e620"; +} +.el-icon-time-alt:before { + content: "\e621"; +} +.el-icon-time:before { + content: "\e622"; +} +.el-icon-thumbs-up:before { + content: "\e623"; +} +.el-icon-thumbs-down:before { + content: "\e624"; +} +.el-icon-th-list:before { + content: "\e625"; +} +.el-icon-th-large:before { + content: "\e626"; +} +.el-icon-th:before { + content: "\e627"; +} +.el-icon-text-width:before { + content: "\e628"; +} +.el-icon-text-height:before { + content: "\e629"; +} +.el-icon-tasks:before { + content: "\e62a"; +} +.el-icon-tags:before { + content: "\e62b"; +} +.el-icon-tag:before { + content: "\e62c"; +} +.el-icon-stumbleupon:before { + content: "\e62d"; +} +.el-icon-stop-alt:before { + content: "\e62e"; +} +.el-icon-stop:before { + content: "\e62f"; +} +.el-icon-step-forward:before { + content: "\e630"; +} +.el-icon-step-backward:before { + content: "\e631"; +} +.el-icon-star-empty:before { + content: "\e632"; +} +.el-icon-star-alt:before { + content: "\e633"; +} +.el-icon-star:before { + content: "\e634"; +} +.el-icon-stackoverflow:before { + content: "\e635"; +} +.el-icon-spotify:before { + content: "\e636"; +} +.el-icon-speaker:before { + content: "\e637"; +} +.el-icon-soundcloud:before { + content: "\e638"; +} +.el-icon-smiley-alt:before { + content: "\e639"; +} +.el-icon-smiley:before { + content: "\e63a"; +} +.el-icon-slideshare:before { + content: "\e63b"; +} +.el-icon-skype:before { + content: "\e63c"; +} +.el-icon-signal:before { + content: "\e63d"; +} +.el-icon-shopping-cart-sign:before { + content: "\e63e"; +} +.el-icon-shopping-cart:before { + content: "\e63f"; +} +.el-icon-share-alt:before { + content: "\e640"; +} +.el-icon-share:before { + content: "\e641"; +} +.el-icon-search-alt:before { + content: "\e642"; +} +.el-icon-search:before { + content: "\e643"; +} +.el-icon-screenshot:before { + content: "\e644"; +} +.el-icon-screen-alt:before { + content: "\e645"; +} +.el-icon-screen:before { + content: "\e646"; +} +.el-icon-scissors:before { + content: "\e647"; +} +.el-icon-rss:before { + content: "\e648"; +} +.el-icon-road:before { + content: "\e649"; +} +.el-icon-reverse-alt:before { + content: "\e64a"; +} +.el-icon-retweet:before { + content: "\e64b"; +} +.el-icon-return-key:before { + content: "\e64c"; +} +.el-icon-resize-vertical:before { + content: "\e64d"; +} +.el-icon-resize-small:before { + content: "\e64e"; +} +.el-icon-resize-horizontal:before { + content: "\e64f"; +} +.el-icon-resize-full:before { + content: "\e650"; +} +.el-icon-repeat-alt:before { + content: "\e651"; +} +.el-icon-repeat:before { + content: "\e652"; +} +.el-icon-remove-sign:before { + content: "\e653"; +} +.el-icon-remove-circle:before { + content: "\e654"; +} +.el-icon-remove:before { + content: "\e655"; +} +.el-icon-refresh:before { + content: "\e656"; +} +.el-icon-reddit:before { + content: "\e657"; +} +.el-icon-record:before { + content: "\e658"; +} +.el-icon-random:before { + content: "\e659"; +} +.el-icon-quotes-alt:before { + content: "\e65a"; +} +.el-icon-quotes:before { + content: "\e65b"; +} +.el-icon-question-sign:before { + content: "\e65c"; +} +.el-icon-question:before { + content: "\e65d"; +} +.el-icon-qrcode:before { + content: "\e65e"; +} +.el-icon-puzzle:before { + content: "\e65f"; +} +.el-icon-print:before { + content: "\e660"; +} +.el-icon-podcast:before { + content: "\e661"; +} +.el-icon-plus-sign:before { + content: "\e662"; +} +.el-icon-plus:before { + content: "\e663"; +} +.el-icon-play-circle:before { + content: "\e664"; +} +.el-icon-play-alt:before { + content: "\e665"; +} +.el-icon-play:before { + content: "\e666"; +} +.el-icon-plane:before { + content: "\e667"; +} +.el-icon-pinterest:before { + content: "\e668"; +} +.el-icon-picture:before { + content: "\e669"; +} +.el-icon-picasa:before { + content: "\e66a"; +} +.el-icon-photo-alt:before { + content: "\e66b"; +} +.el-icon-photo:before { + content: "\e66c"; +} +.el-icon-phone-alt:before { + content: "\e66d"; +} +.el-icon-phone:before { + content: "\e66e"; +} +.el-icon-person:before { + content: "\e66f"; +} +.el-icon-pencil-alt:before { + content: "\e670"; +} +.el-icon-pencil:before { + content: "\e671"; +} +.el-icon-pause-alt:before { + content: "\e672"; +} +.el-icon-pause:before { + content: "\e673"; +} +.el-icon-path:before { + content: "\e674"; +} +.el-icon-paper-clip-alt:before { + content: "\e675"; +} +.el-icon-paper-clip:before { + content: "\e676"; +} +.el-icon-opensource:before { + content: "\e677"; +} +.el-icon-ok-sign:before { + content: "\e678"; +} +.el-icon-ok-circle:before { + content: "\e679"; +} +.el-icon-ok:before { + content: "\e67a"; +} +.el-icon-off:before { + content: "\e67b"; +} +.el-icon-network:before { + content: "\e67c"; +} +.el-icon-myspace:before { + content: "\e67d"; +} +.el-icon-music:before { + content: "\e67e"; +} +.el-icon-move:before { + content: "\e67f"; +} +.el-icon-minus-sign:before { + content: "\e680"; +} +.el-icon-minus:before { + content: "\e681"; +} +.el-icon-mic-alt:before { + content: "\e682"; +} +.el-icon-mic:before { + content: "\e683"; +} +.el-icon-map-marker-alt:before { + content: "\e684"; +} +.el-icon-map-marker:before { + content: "\e685"; +} +.el-icon-male:before { + content: "\e686"; +} +.el-icon-magnet:before { + content: "\e687"; +} +.el-icon-magic:before { + content: "\e688"; +} +.el-icon-lock-alt:before { + content: "\e689"; +} +.el-icon-lock:before { + content: "\e68a"; +} +.el-icon-livejournal:before { + content: "\e68b"; +} +.el-icon-list-alt:before { + content: "\e68c"; +} +.el-icon-list:before { + content: "\e68d"; +} +.el-icon-linkedin:before { + content: "\e68e"; +} +.el-icon-link:before { + content: "\e68f"; +} +.el-icon-lines:before { + content: "\e690"; +} +.el-icon-leaf:before { + content: "\e691"; +} +.el-icon-lastfm:before { + content: "\e692"; +} +.el-icon-laptop-alt:before { + content: "\e693"; +} +.el-icon-laptop:before { + content: "\e694"; +} +.el-icon-key:before { + content: "\e695"; +} +.el-icon-italic:before { + content: "\e696"; +} +.el-icon-iphone-home:before { + content: "\e697"; +} +.el-icon-instagram:before { + content: "\e698"; +} +.el-icon-info-sign:before { + content: "\e699"; +} +.el-icon-indent-right:before { + content: "\e69a"; +} +.el-icon-indent-left:before { + content: "\e69b"; +} +.el-icon-inbox-box:before { + content: "\e69c"; +} +.el-icon-inbox-alt:before { + content: "\e69d"; +} +.el-icon-inbox:before { + content: "\e69e"; +} +.el-icon-idea-alt:before { + content: "\e69f"; +} +.el-icon-idea:before { + content: "\e6a0"; +} +.el-icon-hourglass:before { + content: "\e6a1"; +} +.el-icon-home-alt:before { + content: "\e6a2"; +} +.el-icon-home:before { + content: "\e6a3"; +} +.el-icon-heart-empty:before { + content: "\e6a4"; +} +.el-icon-heart-alt:before { + content: "\e6a5"; +} +.el-icon-heart:before { + content: "\e6a6"; +} +.el-icon-hearing-impaired:before { + content: "\e6a7"; +} +.el-icon-headphones:before { + content: "\e6a8"; +} +.el-icon-hdd:before { + content: "\e6a9"; +} +.el-icon-hand-up:before { + content: "\e6aa"; +} +.el-icon-hand-right:before { + content: "\e6ab"; +} +.el-icon-hand-left:before { + content: "\e6ac"; +} +.el-icon-hand-down:before { + content: "\e6ad"; +} +.el-icon-guidedog:before { + content: "\e6ae"; +} +.el-icon-group-alt:before { + content: "\e6af"; +} +.el-icon-group:before { + content: "\e6b0"; +} +.el-icon-graph-alt:before { + content: "\e6b1"; +} +.el-icon-graph:before { + content: "\e6b2"; +} +.el-icon-googleplus:before { + content: "\e6b3"; +} +.el-icon-globe-alt:before { + content: "\e6b4"; +} +.el-icon-globe:before { + content: "\e6b5"; +} +.el-icon-glasses:before { + content: "\e6b6"; +} +.el-icon-glass:before { + content: "\e6b7"; +} +.el-icon-github-text:before { + content: "\e6b8"; +} +.el-icon-github:before { + content: "\e6b9"; +} +.el-icon-gift:before { + content: "\e6ba"; +} +.el-icon-gbp:before { + content: "\e6bb"; +} +.el-icon-fullscreen:before { + content: "\e6bc"; +} +.el-icon-friendfeed-rect:before { + content: "\e6bd"; +} +.el-icon-friendfeed:before { + content: "\e6be"; +} +.el-icon-foursquare:before { + content: "\e6bf"; +} +.el-icon-forward-alt:before { + content: "\e6c0"; +} +.el-icon-forward:before { + content: "\e6c1"; +} +.el-icon-fork:before { + content: "\e6c2"; +} +.el-icon-fontsize:before { + content: "\e6c3"; +} +.el-icon-font:before { + content: "\e6c4"; +} +.el-icon-folder-sign:before { + content: "\e6c5"; +} +.el-icon-folder-open:before { + content: "\e6c6"; +} +.el-icon-folder-close:before { + content: "\e6c7"; +} +.el-icon-folder:before { + content: "\e6c8"; +} +.el-icon-flickr:before { + content: "\e6c9"; +} +.el-icon-flag-alt:before { + content: "\e6ca"; +} +.el-icon-flag:before { + content: "\e6cb"; +} +.el-icon-fire:before { + content: "\e6cc"; +} +.el-icon-filter:before { + content: "\e6cd"; +} +.el-icon-film:before { + content: "\e6ce"; +} +.el-icon-file-new-alt:before { + content: "\e6cf"; +} +.el-icon-file-new:before { + content: "\e6d0"; +} +.el-icon-file-edit-alt:before { + content: "\e6d1"; +} +.el-icon-file-edit:before { + content: "\e6d2"; +} +.el-icon-file-alt:before { + content: "\e6d3"; +} +.el-icon-file:before { + content: "\e6d4"; +} +.el-icon-female:before { + content: "\e6d5"; +} +.el-icon-fast-forward:before { + content: "\e6d6"; +} +.el-icon-fast-backward:before { + content: "\e6d7"; +} +.el-icon-facetime-video:before { + content: "\e6d8"; +} +.el-icon-facebook:before { + content: "\e6d9"; +} +.el-icon-eye-open:before { + content: "\e6da"; +} +.el-icon-eye-close:before { + content: "\e6db"; +} +.el-icon-exclamation-sign:before { + content: "\e6dc"; +} +.el-icon-eur:before { + content: "\e6dd"; +} +.el-icon-error-alt:before { + content: "\e6de"; +} +.el-icon-error:before { + content: "\e6df"; +} +.el-icon-envelope-alt:before { + content: "\e6e0"; +} +.el-icon-envelope:before { + content: "\e6e1"; +} +.el-icon-eject:before { + content: "\e6e2"; +} +.el-icon-edit:before { + content: "\e6e3"; +} +.el-icon-dribbble:before { + content: "\e6e4"; +} +.el-icon-download-alt:before { + content: "\e6e5"; +} +.el-icon-download:before { + content: "\e6e6"; +} +.el-icon-digg:before { + content: "\e6e7"; +} +.el-icon-deviantart:before { + content: "\e6e8"; +} +.el-icon-delicious:before { + content: "\e6e9"; +} +.el-icon-dashboard:before { + content: "\e6ea"; +} +.el-icon-css:before { + content: "\e6eb"; +} +.el-icon-credit-card:before { + content: "\e6ec"; +} +.el-icon-compass-alt:before { + content: "\e6ed"; +} +.el-icon-compass:before { + content: "\e6ee"; +} +.el-icon-comment-alt:before { + content: "\e6ef"; +} +.el-icon-comment:before { + content: "\e6f0"; +} +.el-icon-cogs:before { + content: "\e6f1"; +} +.el-icon-cog-alt:before { + content: "\e6f2"; +} +.el-icon-cog:before { + content: "\e6f3"; +} +.el-icon-cloud-alt:before { + content: "\e6f4"; +} +.el-icon-cloud:before { + content: "\e6f5"; +} +.el-icon-circle-arrow-up:before { + content: "\e6f6"; +} +.el-icon-circle-arrow-right:before { + content: "\e6f7"; +} +.el-icon-circle-arrow-left:before { + content: "\e6f8"; +} +.el-icon-circle-arrow-down:before { + content: "\e6f9"; +} +.el-icon-child:before { + content: "\e6fa"; +} +.el-icon-chevron-up:before { + content: "\e6fb"; +} +.el-icon-chevron-right:before { + content: "\e6fc"; +} +.el-icon-chevron-left:before { + content: "\e6fd"; +} +.el-icon-chevron-down:before { + content: "\e6fe"; +} +.el-icon-check-empty:before { + content: "\e6ff"; +} +.el-icon-check:before { + content: "\e700"; +} +.el-icon-certificate:before { + content: "\e701"; +} +.el-icon-cc:before { + content: "\e702"; +} +.el-icon-caret-up:before { + content: "\e703"; +} +.el-icon-caret-right:before { + content: "\e704"; +} +.el-icon-caret-left:before { + content: "\e705"; +} +.el-icon-caret-down:before { + content: "\e706"; +} +.el-icon-car:before { + content: "\e707"; +} +.el-icon-camera:before { + content: "\e708"; +} +.el-icon-calendar-sign:before { + content: "\e709"; +} +.el-icon-calendar:before { + content: "\e70a"; +} +.el-icon-bullhorn:before { + content: "\e70b"; +} +.el-icon-bulb:before { + content: "\e70c"; +} +.el-icon-brush:before { + content: "\e70d"; +} +.el-icon-broom:before { + content: "\e70e"; +} +.el-icon-briefcase:before { + content: "\e70f"; +} +.el-icon-braille:before { + content: "\e710"; +} +.el-icon-bookmark-empty:before { + content: "\e711"; +} +.el-icon-bookmark:before { + content: "\e712"; +} +.el-icon-book:before { + content: "\e713"; +} +.el-icon-bold:before { + content: "\e714"; +} +.el-icon-blogger:before { + content: "\e715"; +} +.el-icon-blind:before { + content: "\e716"; +} +.el-icon-bell:before { + content: "\e717"; +} +.el-icon-behance:before { + content: "\e718"; +} +.el-icon-barcode:before { + content: "\e719"; +} +.el-icon-ban-circle:before { + content: "\e71a"; +} +.el-icon-backward:before { + content: "\e71b"; +} +.el-icon-asl:before { + content: "\e71c"; +} +.el-icon-arrow-up:before { + content: "\e71d"; +} +.el-icon-arrow-right:before { + content: "\e71e"; +} +.el-icon-arrow-left:before { + content: "\e71f"; +} +.el-icon-arrow-down:before { + content: "\e720"; +} +.el-icon-align-right:before { + content: "\e721"; +} +.el-icon-align-left:before { + content: "\e722"; +} +.el-icon-align-justify:before { + content: "\e723"; +} +.el-icon-align-center:before { + content: "\e724"; +} +.el-icon-adult:before { + content: "\e725"; +} +.el-icon-adjust-alt:before { + content: "\e726"; +} +.el-icon-adjust:before { + content: "\e727"; +} +.el-icon-address-book-alt:before { + content: "\e728"; +} +.el-icon-address-book:before { + content: "\e729"; +} +.el-icon-asterisk:before { + content: "\e72a"; +} diff --git a/static/fonts/Elusive-Icons.eot b/static/fonts/Elusive-Icons.eot new file mode 100644 index 0000000..822d181 Binary files /dev/null and b/static/fonts/Elusive-Icons.eot differ diff --git a/static/fonts/Elusive-Icons.svg b/static/fonts/Elusive-Icons.svg new file mode 100644 index 0000000..1dc2e76 --- /dev/null +++ b/static/fonts/Elusive-Icons.svg @@ -0,0 +1,309 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/fonts/Elusive-Icons.ttf b/static/fonts/Elusive-Icons.ttf new file mode 100644 index 0000000..ba2bafe Binary files /dev/null and b/static/fonts/Elusive-Icons.ttf differ diff --git a/static/fonts/Elusive-Icons.woff b/static/fonts/Elusive-Icons.woff new file mode 100644 index 0000000..0d9e274 Binary files /dev/null and b/static/fonts/Elusive-Icons.woff differ diff --git a/static/style.css b/static/style.css index a21ae1a..ddef538 100644 --- a/static/style.css +++ b/static/style.css @@ -1,10 +1,19 @@ -body {color:#fff;background-color:#666;margin:0;padding-top: 8em;} +@import "font.css"; + +body { + font-family: sans; + color:#fff; + background-color:#666; + margin:0; + padding-top: 8em; +} div {box-sizing: border-box;} h2 {margin:0;} table {background-color: #555;margin-left:.5em;max-width:100%;font-size:.9em} td {padding: 0;} th {background-color: #aaa;} tr:nth-child(2n+1) {background-color: #888;} +button {overflow:hidden;} * {box-sizing: border-box;} .btn-group-lg > .btn, .btn-lg { padding: 10px 16px; @@ -155,7 +164,7 @@ tr:nth-child(2n+1) {background-color: #888;} .client_container:nth-child(2n+1) {background-color:#444;} .command {margin: 0 !important;} -.buttons {width:75%;margin:auto;text-align: center;padding: 2em;} +.buttons {margin:auto;text-align: center;padding: 2em;} .btn { margin:auto; min-width:2em; @@ -252,10 +261,13 @@ tr:nth-child(2n+1) {background-color: #888;} line-height: 1.1em; } .indicator { - display:inline-block; + display:block; background-color: #C32600; - margin: 0 0 0 5%; - padding: 0.3em; + margin: auto; + padding: 0; + display: block; + text-align: center; + max-width: 8em; } .table_cont table { margin:0; @@ -286,7 +298,56 @@ tr:nth-child(2n+1) {background-color: #888;} #wl_3 {height:.95em;} -@media screen and (max-width: 800px) { +@media screen and (max-width: 1280px) { + #master_remote .left_col { + width: auto; + } + #master_remote .right_col { + width: auto; + display: block; + } + .client_container .left_col { + width: 34%; + } + .client_container .left_col button { + width:1.5em; + } + .client_container .right_col { + width: 65%; + } +} + +@media screen and (max-width: 1024px) { +/* + button { + width:1.2em; + } +*/ + #master_remote button { + max-width:3em; + } + #master_remote .left_col { + max-width: 10em; + } + #master_remote h2 { + font-size: 1em; + } + .client_container .left_col button { + width:1.2em; + } + .client_container .right_col .btn { + min-width:1.5em; + } +} + + +@media screen and (max-width: 850px) { + button { + max-width: 2.2em; + } + #master_remote button { + max-width: 2.2em; + } table {margin:0} td {padding:0;} .btn-group-lg > .btn, .btn-lg { @@ -298,4 +359,33 @@ tr:nth-child(2n+1) {background-color: #888;} overflow: scroll; font-size: .9em; } +} +@media screen and (max-width: 610px) { + body { + padding-top: 12em; + } + #master_remote .left_col { + max-width: 5em; + } + #master_remote { + height: 12em; + } + .client_container .left_col { + width: 44%; + + } + .client_container .right_col { + width: 55%; + } + .client_container .buttons { + padding: 2.5em 0; + } + #master_remote .delete_btn { + position: absolute; + left: 40%; + top: 3em; + height: 2em; + max-width: none; + width: 20%; + } } \ No newline at end of file diff --git a/templates/main.html b/templates/main.html index 40d1080..9927e21 100644 --- a/templates/main.html +++ b/templates/main.html @@ -15,20 +15,20 @@

- - - - - - - - - - - - - - + + + + + + + + + + + + + +

@@ -38,10 +38,10 @@

{{host}}

- - - - + + + +

{{status_message}}

{{gui_l10n['str_link']}}: @@ -55,7 +55,7 @@

- +
@@ -73,15 +73,15 @@ -->
- - - - - - - - - + + + + + + + + + @@ -94,5 +94,7 @@ window.LOCALE = "{{gui_l10n['locale']}}"; + +