Major changes to the structure of pages to utilize the flex layout system.

This commit is contained in:
Wynne Crisman
2016-11-19 19:39:02 -08:00
parent 46ef9680c3
commit 4315418aa1
64 changed files with 3590 additions and 16015 deletions

View File

@@ -21,37 +21,36 @@
<link rel="stylesheet" href="css/awesomplete.css" type="text/css"/>
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<!--<link rel="stylesheet" href="/admin/css/jquery-ui-1.11.4/jquery-ui.min.css"/>-->
<link rel="stylesheet" href="css/titatoggle-dist-min.css"/>
<!--<link rel="stylesheet" href="/admin/css/chosen.css"/>-->
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" href="css/select2.css"/>
<link rel="stylesheet" href="css/bootstrap-datetimepicker.css"/>
<link rel="stylesheet" href="css/jquery.editable.select.css"/>
<link rel="stylesheet" href="main.css" type="text/css"/>
<script type="text/javascript" language="JavaScript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="JavaScript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" language="JavaScript" src="js/jquery.history.js"></script>
<script type="text/javascript" language="JavaScript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" language="JavaScript" src="js/layout.js"></script>
<script type="text/javascript" language="JavaScript" src="js/jquery.cycle.min.js"></script>
<script type="text/javascript" language="JavaScript" src="js/jquery.cycle2.min.js"></script>
<script type="text/javascript" language="JavaScript" src="js/jquery.shadow.js"></script>
<script type="text/javascript" language="JavaScript" src="js/scroller.js"></script>
<script type="text/javascript" language="JavaScript" src="js/framework_lite.js"></script>
<script type="text/javascript" language="JavaScript" src="js/polyfills.js"></script>
<script type="text/javascript" language="JavaScript" src="js/main.js"></script>
<!--<script type="text/javascript" language="JavaScript" src="js/socket.io.js"></script>-->
<script type="text/javascript" language="JavaScript" src="js/LinkedTable.js"></script>
<script type="text/javascript" language="JavaScript" src="js/Dropdown.js"></script>
<script type="text/javascript" language="JavaScript" src="js/moment.js"></script>
<script type="text/javascript" language="JavaScript" src="js/select2.min.js"></script>
<!--<script type="text/javascript" language="JavaScript" src="js/chosen.jquery.js"></script>-->
<!--<script type="text/javascript" language="JavaScript" src="js/jquery.validate.js"></script>-->
<script type="text/javascript" language="JavaScript" src="js/validator.js"></script> <!-- https://github.com/1000hz/bootstrap-validator http://1000hz.github.io/bootstrap-validator/ -->
<script type="text/javascript" language="JavaScript" src="js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" language="JavaScript" src="js/jquery.tabbable.js"></script>
<script type="text/javascript" language="JavaScript" src="js/jquery.editable.select.js"></script>
<script type="text/javascript" language="JavaScript" src="js/EditableSelect.js"></script>
<script type="text/javascript" language="JavaScript" src="js/jquery.disableSelection.js"></script>
<script type="text/javascript" language="JavaScript">
//Add functionality to jquery to display a class listing.
$.fn.classList = function() {return this[0].className.split(/\s+/);};
//Add a disable(bool) method on jquery objects.
jQuery.fn.extend({
disable: function(state) {
@@ -64,16 +63,13 @@
});
}
});
//Ignore clicks on links that are disabled.
$('body').on('click', 'a.disabled', function(event) {
event.preventDefault();
});
//Fix the select2 control to allow typing when focused.
$(document).on('focus', 'span.select2', function () {
$(this).prev('select:not([multiple])').select2('open');
});
//Click the default button when the form is submitted.
$(document).on('submit', 'form', function(event) {
var $form = $(this);
var $btn = $form.find('button.btn-default:visible');
@@ -89,42 +85,59 @@
return {request: JSON.stringify(data)};
}
$(document).on('focusin', function(event) {
var modal = $('div:visible[role="modal"]');
var viewStack = [];
if(modal.length) {
if(modal[0] !== event.target && !modal[0].contains(event.target)) {
//Simulates a crossfade (not able to do this in css without position: absolute or complex javascript, which we want to avoid).
function crossfade($in, $out, $focus) {
$out.fadeOut(300, function() {
$out.css({display: 'none'});
$in.fadeOut(0);
$in.css({display: 'block'});
$in.fadeIn(500, function() {
if($focus) $focus.focus();
});
});
}
}
function showView($view, $focus, transition) {
var $current = transition ? $view.siblings(":visible") : $view.siblings();
//Show or hide the menu.
$view.data('menu') == undefined || $view.data('menu') ? $('#menu').show() : $('#menu').hide();
if(transition) {
$current.fadeOut(300, function() {
$current.css({display: 'none'});
$view.fadeOut(0);
$view.css({display: ''});
$view.fadeIn(500, function() {
if($focus) $focus.focus();
});
});
}
});
else {
$current.fadeOut(0);
$current.css({display: 'none'});
$view.fadeIn(0);
$view.css({display: ''});
if($focus) $focus.focus();
}
}
</script>
</head>
<body>
<div id="overall">
<div id="page">
<div id="menu"><!-- Note: Comment out spacing between the elements since the browser will interpret the spaces as characters to be displayed.
--><a href="#!/sales">Sales</a><!--
--><a href="#!/categories">Categories</a><!--
--><a href="#!/subcategories">Subcategories</a><!--
--><a href="#!/items">Items</a><!--
--><a href="#!/venues">Venues</a><!--
--><a href="#!/measures">Measures</a><!--
--><a href="#!/users">Users</a><!--
--><a style="position: absolute; right: 0px;" href="logout">Log Out</a><!--
--></div>
<div id="menuBackground"></div>
<div id="head">
</div>
<div id="content" bs-view="main-view">
<!--CONTENT:main-->
</div>
<div id="everything">
<div id="rightBar">
<a id="menuButton" href="#!/menu" class="fa fa-bars" aria-hidden="true">
</a>
<a id='logoutButton' href="logout" class="fa fa-sign-out" aria-hidden="true">
</a>
<a id="legalButton" href="#!/legal" class="fa fa-copyright" aria-hidden="true">
</a>
</div>
<!-- footer lines -->
<div id="footer">&copy; 2015 Petit Teton LLC | Farm Email <a href="mailto:farmer@petitteton.com">farmer@petitteton.com</a></div>
<div id="designedBy" style="">
Web Site By: <a href="http://de22.com" style="font-weight: normal" target="_blank">Declarative Engineering LLC</a>
<div id="contentContainer">
<!--CONTENT:main-->
</div>
</div>
</body>