Finally got the tables to scroll independently and fill the remaining page height. Still working on Item's alias list controls, and getting key events associated with tables and lists.

This commit is contained in:
Wynne Crisman
2016-11-20 19:55:53 -08:00
parent 4315418aa1
commit 801c0507e5
8 changed files with 354 additions and 259 deletions

1
.gitignore vendored
View File

@@ -3,6 +3,7 @@ node_modules
config.js
public/main.css
public/admin/main.css
public/admin/*.css
public/emailFailures.txt
sessions/
config/db.js

View File

@@ -0,0 +1,15 @@
/**
* jQuery Editable Select
* Indri Muska <indrimuska@gmail.com>
*
* Source on GitHub @ https://github.com/indrimuska/jquery-editable-select
*/
input.es-input { padding-right: 20px !important; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG2YAABzjgAA4DIAAIM2AAB5CAAAxgwAADT6AAAgbL5TJ5gAAABGSURBVHjaYvz//z8DOYCJgUzA0tnZidPK8vJyRpw24pLEpwnuVHRFhDQxMDAwMPz//x+OOzo6/iPz8WFGuocqAAAA//8DAD/sORHYg7kaAAAAAElFTkSuQmCC) right center no-repeat; }
input.es-input.open {
-webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0; }
.es-list { position: absolute; padding: 0; margin: 0; border: 1px solid #d1d1d1; display: none; z-index: 1000; background: #fff; max-height: 160px; overflow-y: auto;
-moz-box-shadow: 0 2px 3px #ccc; -webkit-box-shadow: 0 2px 3px #ccc; box-shadow: 0 2px 3px #ccc; }
.es-list li { display: block; padding: 5px 10px; margin: 0; }
.es-list li.selected { background: #f3f3f3; }

View File

@@ -129,11 +129,11 @@
<body>
<div id="everything">
<div id="rightBar">
<a id="menuButton" href="#!/menu" class="fa fa-bars" aria-hidden="true">
<a href="#!/menu" class="fa fa-bars menuButton" aria-hidden="true">
</a>
<a id='logoutButton' href="logout" class="fa fa-sign-out" aria-hidden="true">
<a href="logout" class="fa fa-sign-out logoutButton" aria-hidden="true">
</a>
<a id="legalButton" href="#!/legal" class="fa fa-copyright" aria-hidden="true">
<a href="#!/legal" class="fa fa-copyright legalButton" aria-hidden="true">
</a>
</div>
<div id="contentContainer">

View File

@@ -35,7 +35,6 @@
<div id="editorView" class="view" style="display: none;" data-menu="false">
<div class="modal-dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title"></h4>
</div>
<form role="form" autocomplete="off">
@@ -47,7 +46,7 @@
<label for="DFSubcategory">Subcategory</label>
<div class="form-group">
<input name="subcategoryId" id="DFSubcategoryId" type="hidden"/>
<input name="subcategory" id="DFSubcategory" class="form-control" tabindex="0" required/>
<input name="subcategory" id="DFSubcategory" class="form-control" type="text" tabindex="0" required/>
</div>
<label for="DFPrice">Default Price</label>
<div class="input-group">
@@ -425,9 +424,6 @@ $(function() {
}
});
});
$editorView.find('#DFCancel').on('click', function(event) {
closeView();
});
//Add a new alias to the alias list.
$editorView.find('#DFNewAliasAdd').on('click', function(event) {
//Add the text in the DFNewAlias input as an alias in the list.
@@ -483,6 +479,16 @@ $(function() {
}
});
//Close the view if the user uses the escape key and it isn't handled at the widget level.
$editorView.on('keyup', function(event) {
switch(event.keyCode) {
case 27:
if(!event.isDefaultPrevented())
location.href='#!/items';
break;
}
});
//++++++++++++++++++++++++++++++++++++++
// ++++++++++ Delete View +++++++++++

View File

@@ -1,6 +1,11 @@
#items {
height: 100%;
#editorView {
height: 100%;
overflow-y: auto;
}
#listView {
height: 100%;
//Flex container options.

View File

@@ -93,8 +93,17 @@
case 9: //Tab
_this.select(_this.$list.find('li.selected'));
case 27: //Esc
_this.hide();
break;
if(_this.$input.hasClass('open')) {
_this.hide();
//Try to stop any default behavior from occurring.
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true; //IE 6-8
event.preventDefault();
return false;
}
else {
return true;
}
default:
_this.filter();
_this.highlight(0);

View File

@@ -0,0 +1,136 @@
/*!
* jQuery.tabbable 1.0 - Simple utility for selecting the next / previous ':tabbable' element.
* https://github.com/marklagendijk/jQuery.tabbable
*
* Includes ':tabbable' and ':focusable' selectors from jQuery UI Core
*
* Copyright 2013, Mark Lagendijk
* Released under the MIT license
*
*/
(function($){
'use strict';
/**
* Focusses the next :focusable element. Elements with tabindex=-1 are focusable, but not tabable.
* Does not take into account that the taborder might be different as the :tabbable elements order
* (which happens when using tabindexes which are greater than 0).
*/
$.focusNext = function(){
selectNextTabbableOrFocusable(':focusable');
};
/**
* Focusses the previous :focusable element. Elements with tabindex=-1 are focusable, but not tabable.
* Does not take into account that the taborder might be different as the :tabbable elements order
* (which happens when using tabindexes which are greater than 0).
*/
$.focusPrev = function(){
selectPrevTabbableOrFocusable(':focusable');
};
/**
* Focusses the next :tabable element.
* Does not take into account that the taborder might be different as the :tabbable elements order
* (which happens when using tabindexes which are greater than 0).
*/
$.tabNext = function(){
selectNextTabbableOrFocusable(':tabbable');
};
/**
* Focusses the previous :tabbable element
* Does not take into account that the taborder might be different as the :tabbable elements order
* (which happens when using tabindexes which are greater than 0).
*/
$.tabPrev = function(){
selectPrevTabbableOrFocusable(':tabbable');
};
function selectNextTabbableOrFocusable(selector){
var selectables = $(selector);
var current = $(':focus');
var nextIndex = 0;
if(current.length === 1){
var currentIndex = selectables.index(current);
if(currentIndex + 1 < selectables.length){
nextIndex = currentIndex + 1;
}
}
selectables.eq(nextIndex).focus();
}
function selectPrevTabbableOrFocusable(selector){
var selectables = $(selector);
var current = $(':focus');
var prevIndex = selectables.length - 1;
if(current.length === 1){
var currentIndex = selectables.index(current);
if(currentIndex > 0){
prevIndex = currentIndex - 1;
}
}
selectables.eq(prevIndex).focus();
}
/**
* :focusable and :tabbable, both taken from jQuery UI Core
*/
$.extend($.expr[ ':' ], {
data: $.expr.createPseudo ?
$.expr.createPseudo(function(dataName){
return function(elem){
return !!$.data(elem, dataName);
};
}) :
// support: jQuery <1.8
function(elem, i, match){
return !!$.data(elem, match[ 3 ]);
},
focusable: function(element){
return focusable(element, !isNaN($.attr(element, 'tabindex')));
},
tabbable: function(element){
var tabIndex = $.attr(element, 'tabindex'),
isTabIndexNaN = isNaN(tabIndex);
return ( isTabIndexNaN || tabIndex >= 0 ) && focusable(element, !isTabIndexNaN);
}
});
/**
* focussable function, taken from jQuery UI Core
* @param element
* @returns {*}
*/
function focusable(element){
var map, mapName, img,
nodeName = element.nodeName.toLowerCase(),
isTabIndexNotNaN = !isNaN($.attr(element, 'tabindex'));
if('area' === nodeName){
map = element.parentNode;
mapName = map.name;
if(!element.href || !mapName || map.nodeName.toLowerCase() !== 'map'){
return false;
}
img = $('img[usemap=#' + mapName + ']')[0];
return !!img && visible(img);
}
return ( /^(input|select|textarea|button|object)$/.test(nodeName) ?
!element.disabled :
'a' === nodeName ?
element.href || isTabIndexNotNaN :
isTabIndexNotNaN) &&
// the element and all of its ancestors must be visible
visible(element);
function visible(element){
return $.expr.filters.visible(element) && !$(element).parents().addBack().filter(function(){
return $.css(this, 'visibility') === 'hidden';
}).length;
}
}
})(jQuery);

View File

@@ -1,14 +1,31 @@
//@import url('//fonts.googleapis.com/css?family=PT+Sans|Grand+Hotel|Open+Sans:400,600');
* {
margin: 0;
padding: 0;
}
html {
scrollbar-face-color: #808080;
scrollbar-highlight-color: #808080;
scrollbar-3dlight-color: #707070;
scrollbar-darkshadow-color: #808080;
scrollbar-shadow-color: #7e7e7e;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #505050;
}
body {
background: #F6F6F6;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 1.0em;
}
html, body {
height: 100%;
display: flex;
flex-direction: column;
background: red;
//display: flex;
//flex-direction: column;
margin: 0;
}
@@ -18,6 +35,55 @@ html, body {
margin: 0 auto;
background: white;
width: 100%;
height: 100%;
}
#rightBar {
position: relative;
float: right;
width: 75px;
height: 100%;
.menuButton {
position: absolute;
top: 0;
right: 0;
margin: 14px 7px 0 0;
font-size: 5em;
}
.logoutButton {
position: absolute;
top: 120px;
right: 0;
margin-right: 14px;
font-size: 3em;
}
.legalButton {
position: absolute;
bottom: 0;
right: 0;
margin-right: 14px;
margin-bottom: 14px;
font-size: 3em;
}
.menuButton, .legalButton, .logoutButton {
color: black;
width: 1em;
height: 1em;
}
.menuButton:hover, .legalButton:hover, .logoutButton:hover {
text-decoration: none;
color: black;
}
.menuButton:active, .legalButton:active, .logoutButton:active {
text-decoration: none;
color: black;
}
}
#contentContainer {
@@ -32,252 +98,109 @@ html, body {
height: 100%;
}
#rightBar {
position: relative;
float: right;
width: 75px;
height: 100%;
}
#listView {
/*height: 100%;*/
flex-flow: column nowrap;
/*justify-content: space-around;*/
/*align-items: flex-start;*/
/*align-content: center;*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}
.buttonContainer {
flex:none;
background-color:black;
color:white;
}
#dataTable {
overflow-y: scroll;
flex: auto;
align-self: stretch;
height: 10%;
max-height: 100%;
}
@require "test2"
//
////@import url('//fonts.googleapis.com/css?family=PT+Sans|Grand+Hotel|Open+Sans:400,600');
//
//* {
// margin: 0;
// padding: 0;
//}
//
//html {
// scrollbar-face-color: #808080;
// scrollbar-highlight-color: #808080;
// scrollbar-3dlight-color: #707070;
// scrollbar-darkshadow-color: #808080;
// scrollbar-shadow-color: #7e7e7e;
// scrollbar-arrow-color: #ffffff;
// scrollbar-track-color: #505050;
//}
//
//body {
// background: #F6F6F6;
// font-family: verdana, arial, helvetica, sans-serif;
// font-size: 1.0em;
//}
//
//html, body {
// height: 100%;
// display: flex;
// flex-direction: column;
// background: red;
// margin: 0;
//}
//
//#everything {
// max-width: 950px;
// min-width: 250px;
// margin: 0 auto;
// background: white;
// width: 100%;
//}
//
//#rightBar {
// position: relative;
// float: right;
// width: 75px;
// height: 100%;
//}
//
//#contentContainer {
// position: relative;
// display: -webkit-box;
// display: -moz-box;
// display: -ms-flexbox;
// display: -moz-flex;
// display: -webkit-flex;
// display: flex;
// flex-direction: column;
// height: 100%;
//}
//
////@media (max-width: 1100px) {
//// #contentContainer {
//// margin: 0 75px 0 0;
//// }
////}
//
//#menuButton, #legalButton, #logoutButton {
// color: black;
// width: 1em;
// height: 1em;
//}
//
//#menuButton:hover, #legalButton:hover, #logoutButton:hover {
// text-decoration: none;
// color: black;
//}
//
//#menuButton:active, #legalButton:active, #logoutButton:active {
// text-decoration: none;
// color: black;
//}
//
//#menuButton {
// //position: absolute;
// top: 0;
// right: 0;
// margin: 14px 7px 0 0;
// font-size: 5em;
//}
//
//#logoutButton {
// //position: absolute;
// top: 120px;
// right: 0;
// margin-right: 14px;
// font-size: 3em;
//}
//
//#legalButton {
// //position: absolute;
// bottom: 0;
// right: 0;
// margin-right: 14px;
// margin-bottom: 14px;
// font-size: 3em;
//}
////
////.view:after {
//// content: "";
//// display: table;
//// clear: both;
////}
//
//
//p {
// text-align: justify;
// -webkit-font-smoothing: antialiased;
// text-rendering: optimizeLegibility;
//}
//
//h1 {
// white-space: nowrap;
// color: black;
// font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
// font-size: 1.6em;
// font-weight: 800;
// padding-left: 0px;
// text-transform: uppercase;
//}
//h1:after {
// border-bottom: 2px solid #222;
// width: 100%;
// margin-bottom: 10px;
//.view:after {
// content: "";
// display: block;
// display: table;
// clear: both;
//}
//
//h2 {
// display: inline;
// color: #333;
// font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
// font-size: 1.125em;
// font-weight: 800;
// padding-left: 0px;
// text-transform: uppercase;
//}
//
//h3 {
// display: inline;
// color: #333;
// font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
// font-size: 1em;
// font-weight: 800;
// padding-left: 0px;
// text-transform: uppercase;
//}
//
//h5 {
// display: block;
// color: #333;
// font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
// font-size: .875em;
// font-weight: 400;
// font-style: oblique;
// padding-left: 0px;
// text-transform: uppercase;
// margin: 60px 0 0px 0;
//}
//
//li {
// list-style-type: none;
//}
//
//sup, sub {
// line-height: 0.1em;
//}
//
//.hidden {
// display: none;
// visibility: hidden;
//}
//
//.clickable {
// cursor: pointer;
// cursor: hand;
//}
//
//.inlineBlock {
// display: inline-block;
//}
//
//.modal-dialog {
// background: white;
//}
//
//.selected {
// background-color: #ffe184 !important;
//}
//
//@require "bootstrap"
//@require "editableSelect"
//@require "menu"
//@require "configMenu"
//@require "legal"
//@require "editor"
//@require "users"
//@require "venues"
//@require "measures"
//@require "categories"
//@require "subcategories"
//@require "items"
//@require "sales"
p {
text-align: justify;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1 {
white-space: nowrap;
color: black;
font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
font-size: 1.6em;
font-weight: 800;
padding-left: 0px;
text-transform: uppercase;
}
h1:after {
border-bottom: 2px solid #222;
width: 100%;
margin-bottom: 10px;
content: "";
display: block;
}
h2 {
display: inline;
color: #333;
font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
font-size: 1.125em;
font-weight: 800;
padding-left: 0px;
text-transform: uppercase;
}
h3 {
display: inline;
color: #333;
font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
font-size: 1em;
font-weight: 800;
padding-left: 0px;
text-transform: uppercase;
}
h5 {
display: block;
color: #333;
font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
font-size: .875em;
font-weight: 400;
font-style: oblique;
padding-left: 0px;
text-transform: uppercase;
margin: 60px 0 0px 0;
}
li {
list-style-type: none;
}
sup, sub {
line-height: 0.1em;
}
.hidden {
display: none;
visibility: hidden;
}
.clickable {
cursor: pointer;
cursor: hand;
}
.inlineBlock {
display: inline-block;
}
.modal-dialog {
background: white;
}
.selected {
background-color: #ffe184 !important;
}
@require "bootstrap"
@require "editableSelect"
@require "menu"
@require "configMenu"
@require "legal"
@require "editor"
@require "users"
@require "venues"
@require "measures"
@require "categories"
@require "subcategories"
@require "items"
@require "sales"