From: Nicolas Boisselier <nicolas.boisselier@gmail.com>
Date: Thu, 27 Sep 2018 12:58:14 +0000 (+0100)
Subject: www/dbq/dbq.php
X-Git-Url: https://git.nbdom.net/?a=commitdiff_plain;h=dffc6511881535f5e2c998410d1ee1dab41afa4f;p=nb.git

www/dbq/dbq.php
---

diff --git a/lib/php/db/field.php b/lib/php/db/field.php
index 2c659970..578a0b37 100644
--- a/lib/php/db/field.php
+++ b/lib/php/db/field.php
@@ -133,7 +133,7 @@ class field extends nb {
 		foreach ((array)$values as $value) {
 
 			$h = '';
-			$class = [ 'label', $this->name ];
+			$class = [ 'label', 'form-group', $this->name ];
 			$mime = Mime::fromContent($value);
 			if ($mime) $class[] = $mime;
 
@@ -174,7 +174,7 @@ class field extends nb {
     	}
 
     	$html .= '<div class="'.join(' ',$class).'">'
-				.'<label for="'.$this->name.'">'.htmlspecialchars(prettyText($this->name)).'</label>'
+				.'<label for="'.$this->name.'">'.htmlspecialchars(prettyText($this->name)).':</label>'
 				.'<span class="field">'
 				.$h
 				.'</span>'
diff --git a/lib/php/db/table.php b/lib/php/db/table.php
index 960e9c35..37458285 100644
--- a/lib/php/db/table.php
+++ b/lib/php/db/table.php
@@ -509,7 +509,7 @@ Class Table extends nb {
 		foreach ($params as $k=>$v) {
 			if (!empty($ignore) and in_array($k,$ignore)) continue;
 			if (isset($v) or $k=='action') {
-				if (self::p('debug')) $h .= "<label>$k</label>";
+				if (self::p('debug')) $h .= "<label>$k:</label>";
 				$h .= '<input type="'.(self::p('debug')?'text':'hidden').'" name="'.$k.'" value="'.$v.'"/>'.NB_EOL;
 			}
 		}
@@ -630,11 +630,13 @@ Class Table extends nb {
 		echo '</div>'.NB_EOL; # < fields
 
 		echo ''
-			.'<div class="db buttons">'
+			#.'<div class="btn-group-vertical mx-auto">'
+			.'<div class="db buttons btn-group form-group">'
 			.( empty($_SERVER['HTTP_REFERER']) ? '' : '<input type="button" class="btn btn-danger" onclick="document.location=document.referrer" value="Cancel" />')
-			.'<input class="btn btn-warning" type="reset" />'
-			.'<input class="btn btn-success" type="submit" />'
+			.'<input class="btn btn-secondary" type="reset" />'
+			.'<input class="btn btn-primary" type="submit" />'
 			.'</div>'.NB_EOL
+			#.'</div>'.NB_EOL
 		;
 
 		echo $form_hidden.'</form>'.NB_EOL;
@@ -736,13 +738,13 @@ Class Table extends nb {
 		}
 
 		if ($prev>=0) {
-			$html .= '<span class="prev"><a href="'.$this->url_list('limit',preg_replace('/^0,/','',"$prev,$y")).'">&lt;</a></span>&nbsp;';
+			$html .= '<span class="prev page-item"><a class="page-link" href="'.$this->url_list('limit',preg_replace('/^0,/','',"$prev,$y")).'">&lt;</a></span>';
 		}
 
-		$html .= '<span class="count">'.($tot ? ($x+1) : 0).' - '.( $tot<($x+$y) ? $tot : ($x+$y) ).' / '.$tot.'</span>';
+		$html .= '<span class="count page-item"><span class="page-link">'.($tot ? ($x+1) : 0).' - '.( $tot<($x+$y) ? $tot : ($x+$y) ).' / '.$tot.'</span></span>';
 
 		if ($next<$tot) {
-			$html .= '&nbsp;<span class="next"><a href="'.$this->url_list('limit',"$next,$y").'">&gt;</a></span>';
+			$html .= '<span class="next page-item"><a class="page-link" href="'.$this->url_list('limit',"$next,$y").'">&gt;</a></span>';
 		}
 
 		return $html;
@@ -1366,9 +1368,9 @@ Class Table extends nb {
 			echo $this->{"rows_end_$format"}();
 
 			if ($opt['is_html']) {
-				$nav = '<div class="nav bottom">'
+				$nav = '<nav class="nav bottom pagination">'
 					.$this->nav($opt['count'],$opt['tot'],$opt['limit'])
-				 .'</div>'.NB_EOL
+				 .'</nav>'.NB_EOL
 				;
 				echo $nav;
 			 }
@@ -1676,7 +1678,7 @@ Class Table extends nb {
 
 		foreach ($row as $k => $v) {
 			$html .= '<li>'
-				.( $k == '0' ? '' : '<label>'.prettyText($k).'</label>')
+				.( $k == '0' ? '' : '<label>'.prettyText($k).':</label>')
 				.'<span class="'.$k.'">'.$v.'</span>'
 				.'</li>'.NB_EOL;
 		}
@@ -2156,10 +2158,10 @@ Class Table extends nb {
 	public function html_menu($opt=[]) {
 		if (isset($opt['html_menu']) and !$opt['html_menu']) return '';
 
-		$buttons = '<input type="submit" class="button button-small bnt bnt-primary" value="Go"/>';
+		$buttons = '<input type="submit" class="button button-small btn btn-primary" value="Go"/>';
 		if (!empty($opt['buttons'])) $buttons = $opt['buttons'];
 
-		$r = '<form class="menu list-group-item" id="db-table-html-menu-form" method="get" action="'.$this->request_uri().'">'.NB_EOL;
+		$r = '<form class="menu card list-group-item" id="db-table-html-menu-form" method="get" action="'.$this->request_uri().'">'.NB_EOL;
 
 		# See: http://html5doctor.com/html5-forms-input-types/
 		#$r .= '<input id="skill" type="range" min="1" max="100" value="0" />';
@@ -2175,9 +2177,9 @@ Class Table extends nb {
 			// Tables - see default.js if you change class
 			$tables = array_keys($this->db()->tables());
 			if (count($tables)>1) {
-				$option_html .= '<span class="label">';
-				$option_html .= '<label for="table">Tables</label>'.html_select_array($tables,[
-					'html'       => 'class="table form-control" name="table" id="table"',
+				$option_html .= '<span class="label form-group">';
+				$option_html .= '<label for="table">Tables:</label>'.html_select_array($tables,[
+					'html'       => 'class="db-table _form-control" name="table" id="table"',
 					'selected'   => $this->name,
 					'prettyText' => true,
 					'sort'       => 'natcasesort',
@@ -2187,9 +2189,9 @@ Class Table extends nb {
 
 			// Dbs - see default.js if you change class
 			if (!empty($this->db()->dbs) and count($this->db()->dbs)>1) {
-				$option_html .= '<span class="label">';
-				$option_html .= '<label for="db">Db</label>'.html_select_array($this->db()->dbs,[
-					'html'       => 'class="dbs form-control" id="db" name="db" onchange="document.location=\''.preg_replace('/\?.*$/','',$_SERVER['REQUEST_URI']).'?db=\'+this.value"',
+				$option_html .= '<span class="label form-group">';
+				$option_html .= '<label for="db">Db:</label>'.html_select_array($this->db()->dbs,[
+					'html'       => 'class="dbs _form-control" id="db" name="db" onchange="document.location=\''.preg_replace('/\?.*$/','',$_SERVER['REQUEST_URI']).'?db=\'+this.value"',
 					'selected'   => $this->db()->name,
 					'prettyText' => true,
 					'sort' => 'natcasesort',
@@ -2198,10 +2200,10 @@ Class Table extends nb {
 			}
 
 			// Format
-			$option_html .= '<span class="label">';
+			$option_html .= '<span class="label form-group">';
 			#debug($this->db()->formats);
-			$option_html .= '<label for="format">Format</label>'.html_select_array($this->db()->formats,[
-				'html'       => 'class="format form-control" name="format" id="format"',
+			$option_html .= '<label for="format">Format:</label>'.html_select_array($this->db()->formats,[
+				'html'       => 'class="format _form-control" name="format" id="format"',
 				'selected'   => $this->db()->format,
 				'prettyText' => true,
 # NB 26.12.16         'sort'       => 'natcasesort',
@@ -2210,9 +2212,9 @@ Class Table extends nb {
 
 			// Limit
 			if (!empty($this->db()->limits) and count($this->db()->limits)>1) {
-				$option_html .= '<span class="label">';
-				$option_html .= '<label for="limit">Limit</label>'.html_select_array($this->db()->limits,[
-					'html'       => 'class="limit form-control" name="limit" id="limit"',
+				$option_html .= '<span class="label form-group">';
+				$option_html .= '<label for="limit">Limit:</label>'.html_select_array($this->db()->limits,[
+					'html'       => 'class="limit _form-control" name="limit" id="limit"',
 					'selected'   => $this->p('limit'),
 					'prettyText' => true,
 					'sort' => 'sort',
@@ -2226,9 +2228,9 @@ Class Table extends nb {
 
 			// Order By
 			/*
-			$option_html .= '<span class="label">';
-			$option_html .= '<label for="limit">OrderBy</label>'.html_select_array(array_keys($this->fields()),[
-				'html'       => 'class="orderby form-control" name="orderby" id="orderby"',
+			$option_html .= '<span class="label form-group">';
+			$option_html .= '<label for="limit">OrderBy:</label>'.html_select_array(array_keys($this->fields()),[
+				'html'       => 'class="orderby _form-control" name="orderby" id="orderby"',
 				'selected'   => $this->p('orderby'),
 				'prettyText' => true,
 			]);
@@ -2266,9 +2268,9 @@ Class Table extends nb {
 			$v = $this->p($k);
 
 			$r .= ''
-				.'<span class="label '.$k.'">'
-				. '<label>'.prettyText($k).'</label>'
-				. '<input class="form-control" type="text" id="'.$k.'" name="'.$this->ppreff().$k.'" value="'.$v.'" />'
+				.'<span class="label form-group '.$k.'">'
+				. '<label>'.prettyText($k).':</label>'
+				. '<input class="_form-control" type="text" id="'.$k.'" name="'.$this->ppreff().$k.'" value="'.$v.'" />'
 				.'</span>'
 			;
 
diff --git a/www/dbq/dbq.php b/www/dbq/dbq.php
index 4987b53c..c29c1368 100644
--- a/www/dbq/dbq.php
+++ b/www/dbq/dbq.php
@@ -79,7 +79,6 @@ class DbQ extends nb {
 
 	# Page
 	public $css = '/default'.(PRODUCTION ? '.min' : '').'.css';
-	#public $css = 'https://eyeintheskyclaims.nbdom.net/css/bootstrap.min.css';
 	public $js = [
 		'/js/jquery.min.js',
 		'/default'.(PRODUCTION ? '.min' : '').'.js',
@@ -98,6 +97,8 @@ class DbQ extends nb {
 	private $conf;
 
 	public function __construct($opt=[]) {
+		if (isset($_REQUEST['_bootstrap'])) $this->css = 'https://eyeintheskyclaims.nbdom.net/css/bootstrap.min.css';
+		if (isset($_REQUEST['_bootstrap'])) $this->js[] = 'https://eyeintheskyclaims.nbdom.net/js/bootstrap.min.js';
 		//
 		// Pre defaults values
 
@@ -298,13 +299,12 @@ class DbQ extends nb {
 				$this->page->nav = $nav;
 			}
 
-			$this->page->body_class = ''
+			$this->page->body_class = trim('container-fluid '
 				.(empty($this->params['db']) ? '' : ' db-'.$this->params['db'])
 				.(empty($this->params['table']) ? '' : ' table-'.$this->params['table'])
 				.( (empty($this->db) or empty($this->table)) ? '' : ' no-db' )
 				.(empty($this->params['action']) ? ' action-'.self::PARAM_DB_DEFAULT : ' action-'.($this->params['action'] == 'add' ? 'vi' : $this->params['action']))
-
-			;
+			);
 
 			if ($this->base) $this->page->head[] = '<base href="' . $this->base . '/" />';
 
@@ -319,7 +319,7 @@ class DbQ extends nb {
 			$rows = $obj;
 
 		} elseif (empty($meth)) {
-			if ($this->is_html) echo '<div class="block">'.NB_EOL;
+			if ($this->is_html) echo '<div class="block card">'.NB_EOL;
 			echo $obj;
 			if ($this->is_html) echo '</div>'.NB_EOL;
 
@@ -363,7 +363,7 @@ class DbQ extends nb {
 				$bottom[] = 'Database: '.preg_replace(array_keys($r),$r,$this->db->pdo);
 			}
 
-			if ($bottom and $this->is_html) echo $this->page->tag('div class="block bottom"',join('<br />'.NB_EOL,$bottom));
+			if ($bottom and $this->is_html) echo $this->page->tag('div class="block bottom card mx-auto navbar-text"',join('<br />'.NB_EOL,$bottom));
 
 			$this->page->end();
 		}
@@ -554,8 +554,8 @@ class DbQ extends nb {
 				$hidden = $this->form_hidden($r);
 
 				$r = $this->ar_unshift($r,'view',''
-					.'<form action="'.$this->table->base.'/vi'.'" method="post">'
-					.'<a class="button select vi" href="'.$this->table->base.'/vi'.'" onclick="parentNode.submit();return false;">View</a>'
+					.'<form action="'.$this->table->base.'/vi'.'" method="post" class="vi">'
+					.'<a class="button select vi btn btn-primary" href="'.$this->table->base.'/vi'.'" onclick="parentNode.submit();return false;">View</a>'
 					.$hidden
 					.'</form>'
 				);
@@ -571,7 +571,7 @@ class DbQ extends nb {
 				$rm = $this->uri_add_referer($this->table->base.'/rm');
 				$r['delete'] = ''
 					.'<form action="'.$rm.'" method="post" class="rm">'
-					.'<a class="button rm" href="'.$rm.'" onclick="parentNode.submit();return false;">Delete</a>'
+					.'<a class="button rm btn btn-danger" href="'.$rm.'" onclick="parentNode.submit();return false;">Delete</a>'
 					.$hidden
 					.'</form>'
 				;
@@ -605,6 +605,8 @@ class DbQ extends nb {
 	public static function form_hidden($r) {
 		$h = '';
 		#debug($r);
+		if (isset($_REQUEST['_bootstrap'])) $r['_bootstrap'] = $_REQUEST['_bootstrap'];
+
 		foreach ($r as $k => $values) {
 			$values = (array)$values;
 			$suff = count($values)>1 ? '[]' : '';
@@ -692,7 +694,7 @@ class DbQ extends nb {
 					$this->prettyText($v),
 					[
 						'href' => $this->link("$path" . urlencode($v)),
-						'class' => $k,
+						'class' => 'title-nav-'.$k,
 					],
 				];
 
@@ -861,7 +863,7 @@ class DbQ extends nb {
 			if ($password=='' and !empty($_POST['password'])) $password = $_POST['password'];
 			if ($password=='' and !empty($_GET['password'])) $password = $_GET['password'];
 			if ($this->is_html) echo <<<EOF
-<form action="$this->uri" method="post" class="block" style="padding:1.5em">
+<form action="$this->uri" method="post" class="block card" style="padding:1.5em">
 <label>Password</label><input type="text" name="password" value="$password" />
 <input type="submit" />
 </form>
@@ -877,7 +879,7 @@ EOF;
 			if ($password=='' and !empty($_POST['password'])) $password = $_POST['password'];
 			if ($password=='' and !empty($_GET['password'])) $password = $_GET['password'];
 			if ($this->is_html) echo <<<EOF
-<form action="$this->uri" method="post" class="block" style="padding:1.5em">
+<form action="$this->uri" method="post" class="block card" style="padding:1.5em">
 <label>Password</label><input type="text" name="password" value="$password" />
 <input type="submit" />
 </form>
diff --git a/www/dbq/html/default.css b/www/dbq/html/default.css
index a5e65b15..0e3329f1 100644
--- a/www/dbq/html/default.css
+++ b/www/dbq/html/default.css
@@ -106,9 +106,11 @@ input[size] {
 	max-width: 70%;
 }
 
+/*
+ NB 26.09.18: In code
 div.db-row div label:after,
-form label:after
-{ content: ':'; }
+form label:after { content: ':'; }
+*/
 
 form label,
 form input,
diff --git a/www/dbq/html/default.js b/www/dbq/html/default.js
index 7138c3cb..5abc3c5e 100644
--- a/www/dbq/html/default.js
+++ b/www/dbq/html/default.js
@@ -59,9 +59,14 @@ document.addEventListener("DOMContentLoaded", function() {
 	});
 
 	if (document.querySelector(".nav.bottom") && document.querySelector("table.db-rows")) {
+		/*
 		document.querySelector("table.db-rows").insertAdjacentHTML("beforebegin",""
 			+"<div class=\"nav top\">"+document.querySelector(".nav.bottom").innerHTML+"</div>"
 		);
+		*/
+		document.querySelector("table.db-rows").insertAdjacentHTML("beforebegin",""
+			+document.querySelector(".nav.bottom").outerHTML.replace('bottom','top')
+		);
 	}
 
 	// No more than 100% width
@@ -84,11 +89,11 @@ document.addEventListener("DOMContentLoaded", function() {
 
 	document.querySelectorAll("form.menu input[type=submit]").forEach(function(e) {
 		e.insertAdjacentHTML("afterend",''
-			+'&nbsp;<input type="button" class="clear '+e.className+'" onclick="form_clean(this.form)"'
+			+'&nbsp;<input type="button" class="btn btn-secondary button '+e.className+'" onclick="form_clean(this.form)"'
 				+' value="'+window._dbq['text.clear']+'"'
 			+' />'
 			+( window._dbq['perm'] >= window._dbq['perms']['write']
-				? '&nbsp;<input type="button" class="add '+e.className+'"'
+				? '&nbsp;<input type="button" class="btn btn-warning add '+e.className+'"'
 					+' onclick="window.location=\''+window._dbq['table.base']+'/add/\'"'
 					+' value="'+window._dbq['text.add']+'"/>'
 				: ''
@@ -138,23 +143,24 @@ document.addEventListener("DOMContentLoaded", function() {
 	//
 	// h1 to select links
 	//
-	if (document.querySelector("body.no-db")) document.querySelectorAll("body > h1 a.db, body > h1 a.table").forEach(function(e) {
+	if (document.querySelector("body.no-db")) document.querySelectorAll("body > h1 a.title-nav-db, body > h1 a.title-nav-table").forEach(function(e) {
 
 		//console.log(e.className+': '+window._dbq[e.className+'.base']);
-		var base = window._dbq[e.className+'.base'].replace(/\/[^\/]+$/,'');
+		var cname = e.className.replace('title-nav-','')
+		var base = window._dbq[cname+'.base'].replace(/\/[^\/]+$/,'');
 // NB 11.06.18 		var url = base + (base == '' ? '/ls' : '') + '.json';
 		var url = base + '/ls' + '.json';
-		var fields = e.className == 'db' ? ['id','id'] : ['name','name'];
+		var fields = cname == 'db' ? ['id','id'] : ['name','name'];
 
-// NB 11.06.18 		console.log(url+' | '+e.className);
+// NB 11.06.18 		console.log(url+' | '+cname);
 		dbqGet(url,function(o){
-			//console.log(window._dbq['body.no-db param.'+e.className]);
-			var s = o.select(fields[0],fields[1], window._dbq['param.'+e.className]);
+			//console.log(window._dbq['body.no-db param.'+cname]);
+			var s = o.select(fields[0],fields[1], window._dbq['param.'+cname]);
 			s.onchange = function() {
 				window.location = base + '/' + this.value + ext;
 				//console.log(base + '/' + this.value + ext);
 			};
-			var crit = document.getElementById(e.className);
+			var crit = document.getElementById(cname);
 			if (crit) crit.parentNode.style.display = 'none';
 			s.className = e.className;
 			e.parentNode.replaceChild(s, e);
diff --git a/www/dbq/html/default.min.css b/www/dbq/html/default.min.css
index 4ce2923a..e0d57ee1 100644
--- a/www/dbq/html/default.min.css
+++ b/www/dbq/html/default.min.css
@@ -1 +1 @@
-html{font:90% 'Trebuchet MS',sans-serif;background-color:#eee}body{display:table;margin-left:auto;margin-right:auto;padding-left:1em;padding-right:1em;color:#444}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.loader{border:16px solid #fff;border-radius:50%;border-top:16px solid #000;padding:0;margin:0 auto 0 auto;width:8em;height:8em;animation:spin 2s linear infinite;display:block}body.loader{margin-top:8em}.loader *{display:none!important}h1{margin:0 0 .2em 0;font-size:180%;padding-bottom:.3em;margin-bottom:.5em;border-bottom:dashed 1px #444}h1 select{padding:0;border:none;background:inherit;font:inherit}a{color:inherit}div>a,li a,p a,td a{color:#3572b0}a,a:visited{text-decoration:none}.button:hover,a:hover{opacity:.8}ul{padding:0;margin:0}li{list-style:none;padding:0 0 0 .3em}table{border-collapse:collapse}td,th{padding:.2em .7em}th a.sort{float:left;margin-right:.1em}input:not([type]),input[type=''],input[type=date],input[type=email],input[type=password],input[type=text],input[type=url],select,textarea{border-radius:3px;border:solid 1px #ddd;padding:.3em .4em;box-shadow:0 1px 1px #eee}input[size]{max-width:70%}div.db-row div label:after,form label:after{content:':'}form input,form label,form select{vertical-align:middle;margin:.2em .4em .2em 0}.db-rows{padding:0}.db-rows form{display:inline-block}.block,.menu,div.db-row,form.edit,pre,table.db-rows,ul.db-row{border-radius:4px;border-spacing:0;padding:.5em .2em;margin-bottom:.5em;border:solid 1px #ddd;background-color:#fafafa;box-shadow:0 1px 2px #eee}table.db-rows{border-style:hidden;border-collapse:collapse;box-shadow:0 0 0 1px #ddd;table-layout:fixed}table.db-rows tr:nth-child(even) td{background-color:#fefefe}div.db-row div,table.db-rows td,table.db-rows th,ul.db-row li{border-bottom:solid 1px #ddd}div.db-row div,table.db-rows tr:last-child td,ul.db-row li{border-bottom:none}table.db-rows td,table.db-rows th{border-right:dashed 1px #ddd}.db-rows .count{text-align:right}table.db-rows th{text-align:left}table.db-rows td{padding:.3em .3em}table.db-rows.fixed{width:100%}div.db-row div label,table.db-rows.fixed td,table.db-rows.fixed th{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}table.db-rows.fixed th{white-space:normal}table.db-rows td.delete,table.db-rows td.view{width:1%;white-space:nowrap}table.db-rows.fixed th.view{width:2em}table.db-rows.fixed th.delete{width:2.7em}div.db-rows{clear:both}div.db-row{float:left;margin-right:4px;min-width:24%}.nofloat{float:none}div.db-row div{margin:0;padding:.1em .2em;border-bottom:solid 1px #fff}.db-rows .db-row img{max-height:4.8em}.db-rows .db-row iframe.video{height:150px;width:250px}div.db-row div.view .button{margin-bottom:5px}div.db-row div.delete .button{margin-top:5px}div.db-row div:last-child{border-bottom:none;padding-bottom:0}div.db-row div.delete label,div.db-row div.view label{display:none}div.db-row div.delete,div.db-row div.view{text-align:center}div.db-row div label,ul.db-row li label{padding:.1em .5em .1em 0;min-width:20%;display:inline-block}.button{font:inherit;display:inline-block;text-decoration:none;line-height:1.6em;cursor:pointer;white-space:nowrap;box-sizing:border-box;margin:0 .1em 0 0;padding:0 .3em;border-radius:4px;border:none;color:#3572b0;background-color:#eee;background:linear-gradient(to bottom right,#eee,#ddd);box-shadow:0 1px 1px #bbb}.bottom,.center,.db-rows,.menu,.nav{clear:both;display:table}.bottom,.buttons,.center,.db-rows,.menu,.nav,td.button{margin-left:auto;margin-right:auto}div.buttons{text-align:center;margin-top:.5em}form.menu{padding:.5em;background-color:#fafafa;max-width:1024px}form.menu .button.add{float:right;margin-top:.2em}form.menu .criterias{border-top:dashed 1px #ddd;margin-top:.3em;padding-top:.3em;clear:both}form.menu .criterias span.label{border-right:solid 1px #fff;border-radius:3px;margin:0 .2em;white-space:nowrap;float:left}form.menu .criterias span.label:last-child{border-right:none}form.menu select:focus{max-width:auto}form.menu select{max-width:20%}form.menu .criterias input[type=text]{width:4em}div.db-row label,form.edit .fields label{width:25%;text-align:right;display:inline-block;margin-right:1em;vertical-align:top}div.db-row .label span,form.edit .fields .label span{display:inline-block;text-align:left;vertical-align:middle;margin-top:.2em}form.edit .fields .field{width:54%}form.edit .fields input[size],form.edit .fields select,form.edit .fields textarea{width:65%}form.edit .fields .field a{display:block}form.edit .fields img{max-height:90px}iframe.video{float:left}
+html{font:90% 'Trebuchet MS',sans-serif;background-color:#eee}body{display:table;margin-left:auto;margin-right:auto;padding-left:1em;padding-right:1em;color:#444}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.loader{border:16px solid #fff;border-radius:50%;border-top:16px solid #000;padding:0;margin:0 auto 0 auto;width:8em;height:8em;animation:spin 2s linear infinite;display:block}body.loader{margin-top:8em}.loader *{display:none!important}h1{margin:0 0 .2em 0;font-size:180%;padding-bottom:.3em;margin-bottom:.5em;border-bottom:dashed 1px #444}h1 select{padding:0;border:none;background:inherit;font:inherit}a{color:inherit}div>a,li a,p a,td a{color:#3572b0}a,a:visited{text-decoration:none}.button:hover,a:hover{opacity:.8}ul{padding:0;margin:0}li{list-style:none;padding:0 0 0 .3em}table{border-collapse:collapse}td,th{padding:.2em .7em}th a.sort{float:left;margin-right:.1em}input:not([type]),input[type=''],input[type=date],input[type=email],input[type=password],input[type=text],input[type=url],select,textarea{border-radius:3px;border:solid 1px #ddd;padding:.3em .4em;box-shadow:0 1px 1px #eee}input[size]{max-width:70%}form input,form label,form select{vertical-align:middle;margin:.2em .4em .2em 0}.db-rows{padding:0}.db-rows form{display:inline-block}.block,.menu,div.db-row,form.edit,pre,table.db-rows,ul.db-row{border-radius:4px;border-spacing:0;padding:.5em .2em;margin-bottom:.5em;border:solid 1px #ddd;background-color:#fafafa;box-shadow:0 1px 2px #eee}table.db-rows{border-style:hidden;border-collapse:collapse;box-shadow:0 0 0 1px #ddd;table-layout:fixed}table.db-rows tr:nth-child(even) td{background-color:#fefefe}div.db-row div,table.db-rows td,table.db-rows th,ul.db-row li{border-bottom:solid 1px #ddd}div.db-row div,table.db-rows tr:last-child td,ul.db-row li{border-bottom:none}table.db-rows td,table.db-rows th{border-right:dashed 1px #ddd}.db-rows .count{text-align:right}table.db-rows th{text-align:left}table.db-rows td{padding:.3em .3em}table.db-rows.fixed{width:100%}div.db-row div label,table.db-rows.fixed td,table.db-rows.fixed th{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}table.db-rows.fixed th{white-space:normal}table.db-rows td.delete,table.db-rows td.view{width:1%;white-space:nowrap}table.db-rows.fixed th.view{width:2em}table.db-rows.fixed th.delete{width:2.7em}div.db-rows{clear:both}div.db-row{float:left;margin-right:4px;min-width:24%}.nofloat{float:none}div.db-row div{margin:0;padding:.1em .2em;border-bottom:solid 1px #fff}.db-rows .db-row img{max-height:4.8em}.db-rows .db-row iframe.video{height:150px;width:250px}div.db-row div.view .button{margin-bottom:5px}div.db-row div.delete .button{margin-top:5px}div.db-row div:last-child{border-bottom:none;padding-bottom:0}div.db-row div.delete label,div.db-row div.view label{display:none}div.db-row div.delete,div.db-row div.view{text-align:center}div.db-row div label,ul.db-row li label{padding:.1em .5em .1em 0;min-width:20%;display:inline-block}.button{font:inherit;display:inline-block;text-decoration:none;line-height:1.6em;cursor:pointer;white-space:nowrap;box-sizing:border-box;margin:0 .1em 0 0;padding:0 .3em;border-radius:4px;border:none;color:#3572b0;background-color:#eee;background:linear-gradient(to bottom right,#eee,#ddd);box-shadow:0 1px 1px #bbb}.bottom,.center,.db-rows,.menu,.nav{clear:both;display:table}.bottom,.buttons,.center,.db-rows,.menu,.nav,td.button{margin-left:auto;margin-right:auto}div.buttons{text-align:center;margin-top:.5em}form.menu{padding:.5em;background-color:#fafafa;max-width:1024px}form.menu .button.add{float:right;margin-top:.2em}form.menu .criterias{border-top:dashed 1px #ddd;margin-top:.3em;padding-top:.3em;clear:both}form.menu .criterias span.label{border-right:solid 1px #fff;border-radius:3px;margin:0 .2em;white-space:nowrap;float:left}form.menu .criterias span.label:last-child{border-right:none}form.menu select:focus{max-width:auto}form.menu select{max-width:20%}form.menu .criterias input[type=text]{width:4em}div.db-row label,form.edit .fields label{width:25%;text-align:right;display:inline-block;margin-right:1em;vertical-align:top}div.db-row .label span,form.edit .fields .label span{display:inline-block;text-align:left;vertical-align:middle;margin-top:.2em}form.edit .fields .field{width:54%}form.edit .fields input[size],form.edit .fields select,form.edit .fields textarea{width:65%}form.edit .fields .field a{display:block}form.edit .fields img{max-height:90px}iframe.video{float:left}