From 4499479a23390c2fd37c6348bb0a759f0efd1878 Mon Sep 17 00:00:00 2001 From: cubiclesoft Date: Mon, 12 Jun 2017 19:38:36 -0700 Subject: [PATCH] Admin Pack 2.0. Redesigned responsive layout. --- admin.php | 47 ++- support/admin.css | 585 ++++++++-------------------------- support/admin.js | 52 ++- support/admin_print.css | 86 ++--- support/admin_view.css | 22 +- support/flex_forms.php | 57 +++- support/flex_forms_error.png | Bin 0 -> 701 bytes support/page_basics.php | 92 +++--- support/view_print_layout.php | 13 +- 9 files changed, 326 insertions(+), 628 deletions(-) create mode 100644 support/flex_forms_error.png diff --git a/admin.php b/admin.php index 6d967f4..eda9648 100644 --- a/admin.php +++ b/admin.php @@ -37,6 +37,17 @@ ) ); + // Optional function to customize styles. + function BB_InjectLayoutHead() + { + // Menu title underline: Colors with 60% saturation and 75% brightness generally look good. +?> + +Query("UPDATE userdetails SET email = ?, info = ? WHERE id = ?", array($info["email"], serialize($info), $id)); // else $db->Query("INSERT INTO userdetails SET email = ?, info = ?", array($info["email"], serialize($info))); - BB_RedirectPage("success", ($_REQUEST["id"] > 0 ? "Successfully saved the details." : "Successfully created the details."), array("action=manageexample&sec_t=" . BB_CreateSecurityToken("manageexample"))); + BB_RedirectPage("success", ($_REQUEST["id"] > 0 ? "Successfully saved the details." : "Successfully created the entry."), array("action=manageexample&sec_t=" . BB_CreateSecurityToken("manageexample"))); } } // [Do processing here to generate any dynamic content options.] $somevar = "default value 2"; $items = array("Furries", "Fuzzies", "Fluffies", "Puppies", "Kitties", "Penguins", "Ponies", "Tribbles", "Unicorns"); + $itemdescs = array("So much pretty.", "Everyone loves fuzzy things.", "Worthy of face burying.", "There's a lot to say about teh puppies and so there might be some wrapping of this line.", "Soakin' up teh suns. Acceptin' teh belly rubs.", "Adorbs.", "Will you be my neigh-bor?", "Delicious.", "I'm a barbequein' with mah unicorn!"); $rows = array(); foreach ($items as $num => $item) { - $rows[] = array(($num + 1), htmlspecialchars($item), "Edit"); + $rows[] = array(($num + 1), htmlspecialchars($item), htmlspecialchars($itemdescs[$num]), date("F, j Y @ g:i a"), "Edit"); } // Load and use most FlexForms Modules if available. @@ -199,11 +212,18 @@ function LoadUserDetails($info) "title" => "Table", "split" => false, "type" => "table", - "cols" => array("ID", "Type", "Options"), + "cols" => array("ID", "Type", "Description", "Date", "Options"), + "nowrap" => array("Date"), "rows" => $rows, + "card" => array( + "width" => 800, + "extracols" => array(1), + "head" => "Info/Options", + "body" => "#%2 - %3
%5
%6" + ), "order" => "Order", - "stickyheader" => true, - "desc" => "Description for Table. When used with FlexForms Extras, drag-and-drop and sticky header support are enabled." + "bodyscroll" => true, + "desc" => "Description for Table. When used with FlexForms Extras, responsive table cards, drag-and-drop, and responsive body scroll support are enabled." ), "nosplit", "startrow", @@ -222,6 +242,14 @@ function LoadUserDetails($info) "default" => "", ), "endrow", + array( + "title" => "Select", + "type" => "select", + "name" => "field2e", + "options" => array("name" => "Name", "email" => "E-mail Address", "phone" => "Phone Number"), + "default" => array("name"), + "desc" => "Description for Select." + ), array( "title" => "Cookies?", "type" => "checkbox", @@ -275,7 +303,7 @@ function LoadUserDetails($info) array( "title" => "Informational", "type" => "static", - "value" => "Did you know that FlexForms, which powers Admin Pack, actually has its origins in Barebones CMS? BB_PropertyForm() started it all." + "value" => "Did you know that FlexForms, which powers CubicleSoft Admin Pack, actually has its origins in Barebones CMS? BB_PropertyForm() started it all." ), array( "title" => "Admin Notes", @@ -364,8 +392,11 @@ function LoadUserDetails($info) array( "title" => "Module: Table Filter", "type" => "table", - "cols" => array("ID", "Type", "Options"), + "cols" => array("ID", "Type", "Description", "Date", "Options"), "rows" => $rows, +// "cardwidth" => 620, + "card" => "#%1 - %2
%4
%3
%5", + "bodyscroll" => true, "filter" => true, "desc" => "Description for table. Try typing 'ies' into the filter field. This feature requires FlexForms Modules to be included." ), diff --git a/support/admin.css b/support/admin.css index ef0c141..bc48c07 100644 --- a/support/admin.css +++ b/support/admin.css @@ -1,494 +1,159 @@ -body { - font-family: Verdana, Arial, Helvetica, sans-serif; -} - -@media (min-width: 900px) { - -html { - height: 100%; -} - -body { - margin: 0; - padding: 0; - border: 0; - width: 100%; - height: 100%; - background-color: #FFFFFF; - min-width: 600px; /* Minimum width of layout. Removeable. */ -} - -div.pagewrap { -} - -div.contentwrap { -} - -div.contentwrap div.colmask { - position: relative; - clear: both; - float: left; - width: 100%; - overflow: hidden; - background-color: #F4F4F4; /* Left-column background color. */ -} - -div.contentwrap div.colmask div.colright { - float: left; - width: 200%; - position: relative; - left: 200px; /* Left-column width. */ - background-color: #FFFFFF; /* Right-column background color. */ - border-left: 1px solid #CCCCCC; -} - -div.contentwrap div.colmask div.colright div.col1wrap { - float: right; - width: 50%; - position: relative; - right: 50%; -} - -div.contentwrap div.colmask div.colright div.col1wrap div.col1 { - position: relative; - width: 100%; - overflow: hidden; -} - -div.contentwrap div.colmask div.colright div.col1wrap div.col1inner { - position: relative; - margin-right: 200px; /* Left-column width. */ -} - -div.contentwrap div.colmask div.colright div.col2 { - float: left; - width: 200px; /* Left-column width. */ - position: relative; - right: 200px; /* Left-column width. */ - overflow: hidden; -} - -div.stickycol { - z-index: -1; - clear: both; - width: 200px; - height: 100%; - position: absolute; - top: 0px; - background-color: #F4F4F4; - border-right: 1px solid #CCCCCC; -} - -} - -/* Basic styles for elements. */ -img { - border: 0px none; - margin: 0px; -} - -form { - border: 0px none; - margin: 0px; -} - -a { - color: #035488; - text-decoration: none; -} - -a:hover { - color: #444444; - text-decoration: underline; -} +html, body { height: 100%; margin: 0px; padding: 0px; overflow: hidden; background-color: #FFFFFF; } +body { font-family: Verdana, Arial, Helvetica, sans-serif; position: relative; } -/* Optional left navigation styles. */ -div.leftnav { - position: relative; -} +#menuwrap { float: left; width: 250px; min-width: 200px; max-width: 15%; height: 100%; overflow: auto; border-right: 1px solid #CCCCCC; font-size: 0.9em; background-color: #222222; color: #FAFAFA; } +#menuwrap .menu { margin-top: 1.0em; border-top: 1px solid #444444; padding-top: 1.0em; } +#menuwrap .menu:first-child { margin-top: 0; border-top: 0 none; } +#menuwrap .menu .titlewrap { margin: 0 1.0em 0.85em; } +#menuwrap .menu .title { font-size: 1.2em; font-weight: bold; padding-bottom: 0.2em; border-bottom: 2px solid #888888; } +#menuwrap .menu a { display: block; padding: 0.3em 1.0em; color: #FAFAFA; text-decoration: none; } +#menuwrap .menu a:hover { background-color: #444444; color :#FFFFFF; } -div.leftnav div.menu { - font-size: 0.7em; - border: 1px solid #CCCCCC; - background-color: #FFFFFF; - margin: 4px; - padding: 5px; -} +#contentwrap { height: 100%; overflow: auto; } +#contentwrap .proptitlewrap { background-color: #222222; color: #FAFAFA; padding: 0.85em; box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15); } +#contentwrap .proptitle { display: table-row; font-weight: bold; font-size: 1.3em; } +#contentwrap #navbutton { vertical-align: middle; display: none; padding: 0.23em 0; border: 1px solid #CCCCCC; border-radius: 5px; cursor: pointer; } +#contentwrap #navbutton .navbuttonline { display: block; margin: 0.23em 0.4em; width: 1.0em; height: 2px; background-color: #FAFAFA; border-radius: 2px; } +#contentwrap #navbutton:hover { color: #FFFFFF; border: 1px solid #E0E0E0; background-color: #2A2A2A; } +#contentwrap #navbutton:hover .navbuttonline { background-color: #FFFFFF; } +#contentwrap .proptitletext { display: table-cell; vertical-align: middle; } + +#contentwrap.showmenu { white-space: nowrap; } +#contentwrap.showmenu #navbutton { display: table-cell; } +#contentwrap.showmenu .proptitletext { padding-left: 1.0em; } +#contentwrap #navoverflowwrap { display: none; } +#contentwrap.showmenu { overflow: hidden; } +#contentwrap.showmenu #navoverflowwrap { display: block; position: absolute; width: 100%; height: 100%; z-index: 10000; cursor: pointer; background-color: #000000; opacity: 0.25; } -div.leftnav div.menu div.title { - font-weight: bold; - padding-bottom: 6px; -} +#contentwrap .propmessagewrap { border-top: 1px solid transparent; border-bottom: 1px solid transparent; padding: 0.5em 1.0em; box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15); } +#contentwrap .propmessagesuccess { border-color: #B2DBA1; background-color: #DFF0D8; background-repeat: repeat-x; color: #3C763D; } +#contentwrap .propmessageerror { border-color: #DCA7A7; background-color: #F2DEDE; background-repeat: repeat-x; color: #A94442; } +#contentwrap .propmessageinfo { border-color: #9ACFEA; background-color: #D9EDF7; background-repeat: repeat-x; color: #31708F; } + +#contentwrap .propdescwrap { padding: 1.0em 1.0em 0; } +#contentwrap .propmainwrap { padding: 1.0em; } + +#contentwrap a { color: #4E88C2; text-decoration: none; } +#contentwrap a:hover { color: #297ACC; text-decoration: underline; } +#contentwrap .formitem { margin-top: 1.0em; } +#contentwrap .formitem:first-child { margin-top: 0; } + +#contentwrap .formitemtitle { margin-bottom: 0.2em; font-weight: bold; } + +#contentwrap .formitemdata { position: relative; } + +#contentwrap .formitemdata table { border-collapse: collapse; } +#contentwrap .formitemdata table thead th, #contentwrap .formitemdata table tbody td { padding: 0.3em 0.5em; border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; vertical-align: top; } +#contentwrap .formitemdata table thead th { background-color: #222222; color: #FAFAFA; } +#contentwrap .formitemdata table thead th:first-child { border-left: 1px solid #222222; } +#contentwrap .formitemdata table thead th:last-child { border-right: 1px solid #222222; } +#contentwrap .formitemdata table tbody tr:first-child td { border-top: none; } +#contentwrap .formitemdata table tbody tr:nth-child(even) { background-color: #F6F6F6; } +#contentwrap .formitemdata table tbody tr:last-child { border-bottom: 1px solid #CCCCCC; } +#contentwrap .formitemdata table tbody td.nowrap { white-space: nowrap; } -div.leftnav div.menu a { - display: block; - border-top: 1px solid #DDDDDD; - padding: 6px 15px; -} +#contentwrap .formitemdata input.text { box-sizing: border-box; width: 100%; font-size: 0.9em; padding: 0.3em; border: 1px solid #BBBBBB; } +#contentwrap .formitemdata input.text:focus, #contentwrap .formitemdata input.text:hover { border: 1px solid #888888; } -div.leftnav div.menu a:hover { - background-color: #EFEFEF; - text-decoration: none; -} +#contentwrap .formitemdata textarea { box-sizing: border-box; width: 100%; font-size: 0.9em; padding: 0.3em; border: 1px solid #BBBBBB; } +#contentwrap .formitemdata textarea:focus, #contentwrap .formitemdata textarea:hover { border: 1px solid #888888; } -/* Floating navigation menu styles. */ -div.maincontent div.proptitle div#navbutton { - float: right; - margin-left: 1.0em; - border: 1px solid #D3D3D3; - border-radius: 0.3em; - background-color: #FFFFFF; - padding: 0.2em 0.4em; - font-weight: bold; - font-size: 0.7em; - color: #333333; - cursor: pointer; -} +#contentwrap .formitemdata select { box-sizing: border-box; width: 100%; font-size: 0.9em; padding: 0.3em; border: 1px solid #BBBBBB; } +#contentwrap .formitemdata select:focus, #contentwrap .formitemdata select:hover { border: 1px solid #888888; } -div.maincontent div.proptitle div#navbutton:hover { - background-color: #EAEAEA; - border: 1px solid #BBBBBB; -} +#contentwrap .formitemdata .radioitemwrap, #contentwrap .formitemdata .checkboxitemwrap { margin-left: 1.7em; text-indent: -1.7em; } -div.maincontent div.proptitle div#navbutton.clicked { - background-color: #EAEAEA; - border-top: 1px solid #BBBBBB; - border-left: 1px solid #BBBBBB; - border-right: 1px solid #BBBBBB; - border-bottom: 1px solid #EAEAEA; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; -} +#contentwrap .formitemdata .staticwrap { font-size: 0.9em; } -div.leftnav { - display: none; -} +#contentwrap .fieldtablewrap { margin-top: 1.0em; } +#contentwrap .fieldtablewrap table { border-collapse: collapse; width: 100%; } +#contentwrap .fieldtablewrap table tbody td { padding: 1.0em 1.0em 0 0; vertical-align: top; } +#contentwrap .fieldtablewrap table tbody tr:first-child td { padding-top: 0; } +#contentwrap .formfieldsresponsive .fieldtablewrap table tbody td:nth-last-child(2) { padding-right: 0; } +#contentwrap .fieldtablewrap table tbody td:last-child { padding-right: 0; } +#contentwrap .fieldtablewrap .formitemtitle { white-space: nowrap; } -div.maincontent div.proptitle div#navdropdown { - display: none; - position: absolute; - right: 0; - z-index: 10000; - width: 200px; - background-color: #EAEAEA; - border: 1px solid #BBBBBB; - font-weight: normal; - font-size: 0.75em; -} +#contentwrap hr { margin: 1.0em 0 0 0; border: none; border-top: 1px solid #CCCCCC; } -div.maincontent div.proptitle div#navdropdown div.leftnav { - display: block; -} +#contentwrap .formitemdesc { color: #333333; margin-top: 0.1em; margin-left: 0.5em; font-size: 0.9em; } -@media (min-width: 900px) { +#contentwrap .formitemresult { margin-left: 0.5em; font-size: 0.9em; } +#contentwrap .formitemresult .formitemerror { background: url('flex_forms_error.png') 0 0.1em no-repeat; padding-left: 25px; color: #A94442; font-weight: bold; } -div.maincontent div.proptitle div#navbutton { - display: none; -} +#contentwrap form .formsubmit { margin-top: 1.2em; margin-right: 1.0em; } +#contentwrap form .formsubmit input { padding: 0.3em 1.0em; font-weight: bold; font-size: 1.0em; background-color: #222222; color: #FAFAFA; border: 1px solid #222222; } +#contentwrap form .formsubmit input:hover { background-color: #444444; color :#FFFFFF; } -div.maincontent div.proptitle div#navdropdown { - display: none !important; +@media (max-width: 1000px) { + #menuwrap { display: none; } + #menuwrap.showmenu { display: block; } + #contentwrap #navbutton { display: table-cell; } + #contentwrap .proptitletext { padding-left: 1.0em; } } -div.leftnav { - display: block; +@media (max-width: 420px) { + #contentwrap .fieldtablewrap { margin-top: 0; } + #contentwrap .fieldtablewrap table { display: block; } + #contentwrap .fieldtablewrap table tr { display: block; } + #contentwrap .fieldtablewrap table tr td { display: block; padding: 0; margin-top: 1.0em; } + #contentwrap .formfieldsresponsive .fieldtablewrap table td:last-child { display: none; } } -} -/* Optional message styles. */ -div.message { - margin: 10px 15px 10px 15px; - font-weight: bold; - position: relative; -} +/* FlexForms Extras styles for Admin Pack */ -div.message .success { - background-color: #E8FCDC; - border: 1px solid #008800; - color: #008800; - padding: 10px 24px 10px 24px; - border-radius: 3px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; -} +#contentwrap .formaccordionwrap.ui-accordion h3.ui-accordion-header { margin-top: 1.0em; border: 1px solid #444444; background: #222222; font-weight: bold; color: #ffffff; } +#contentwrap .formaccordionwrap.ui-accordion:first-child h3.ui-accordion-header:first-child { margin-top: 0; } +#contentwrap .formaccordionwrap.ui-accordion h3.ui-accordion-header.ui-active-state { border: 1px solid #444444; background: #222222; font-weight: bold; color: #ffffff; } +#contentwrap .formaccordionwrap.ui-accordion h3.ui-accordion-header.ui-state-hover { border: 1px solid #444444; background: #333333; font-weight: bold; color: #ffffff; } +#contentwrap .formaccordionwrap.ui-accordion h3.ui-accordion-header .ui-icon { background-image: url("jquery_ui_themes/adminpack/images/ui-icons_fafafa_256x240.png"); } -div.message .error { - background-color: #FCDCDC; - border: 1px solid #880000; - color: #880000; - padding: 10px 24px 10px 24px; - border-radius: 3px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; -} +#contentwrap .formaccordionwrap.ui-accordion .ui-helper-reset { line-height: normal; } +#contentwrap .formaccordionwrap.ui-accordion .formaccordionitems.ui-accordion-content { padding: 0 1.5em 1.0em; } +#contentwrap .formaccordionwrap.ui-accordion .formaccordionitems.ui-accordion-content > .formitem:first-child { margin-top: 1.0em; } -div.message .info { - background-color: #DCDCDC; - border: 1px solid #333333; - color: #333333; - padding: 10px 24px 10px 24px; - border-radius: 3px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; -} - -/* Optional main area styles. */ -div.maincontent { - position: relative; - margin: 5px 10px 15px 10px; - padding: 5px; - border: 1px solid #E5E5E5; - background-color: #F5F5F5; - color: #000000; - border-radius: 3px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; -} - -div.maincontent div.proptitle { - font-weight: bold; - font-size: 1.3em; -} +#contentwrap .formitemdata input.date { box-sizing: border-box; width: 100%; font-size: 0.9em; padding: 0.3em; border: 1px solid #BBBBBB; } +#contentwrap .formitemdata input.date:focus, #contentwrap .formitemdata input.date:hover { border: 1px solid #888888; } -div.maincontent div.propdesc { - margin-top: 5px; - padding: 10px 15px 15px 15px; - border-top: 1px solid #CCCCCC; - color: #333333; - font-size: 1.0em; -} +.ui-state-default.ui-state-highlight, .ui-widget-content .ui-state-default.ui-state-highlight { border: 1px solid #c5c5c5; background: #f6f6f6; color: #454545; } +.ui-state-active.ui-state-highlight, .ui-widget-content .ui-state-active.ui-state-highlight { border: 1px solid #444444; background: #222222; color: #ffffff; } +.ui-state-hover.ui-state-highlight, .ui-widget-content .ui-state-hover.ui-state-highlight { border: 1px solid #444444; background: #333333; color: #ffffff; } -div.maincontent div.propinfo { - margin: 0px 15px 10px 15px; - font-weight: bold; - display: none; - position: relative; -} +#contentwrap .formitemdata .uix-multiselect .ui-widget-header div.header-text { white-space: normal; } +#contentwrap .formitemdata .uix-multiselect .ui-widget-header { padding-top: 0.3em; padding-bottom: 0.3em; } +#contentwrap .formitemdata .uix-multiselect .ui-widget-header .uix-control-right { padding-top: 0.8em; } -div.maincontent div.propinfo .success { - background-color: #E8FCDC; - border: 1px solid #008800; - color: #008800; - padding: 10px 24px 10px 24px; -} +#contentwrap .formitemdata .ui-multiselect { padding: 0.3em; } +#contentwrap .formitemdata .ui-multiselect.ui-widget.ui-state-default { border: 1px solid #444444; background: #333333; color: #ffffff; } +#contentwrap .formitemdata .ui-multiselect.ui-widget.ui-state-default span.ui-icon { background-image: url("jquery_ui_themes/adminpack/images/ui-icons_ffffff_256x240.png"); } +#contentwrap .formitemdata .ui-multiselect.ui-widget.ui-state-active { border: 1px solid #444444; background: #222222; color: #ffffff; } +#contentwrap .formitemdata .ui-multiselect.ui-widget.ui-state-hover { border: 1px solid #444444; background: #222222; color: #ffffff; } +#contentwrap .formitemdata .ui-multiselect span.ui-icon { margin-top: 0.2em; } -div.maincontent div.propinfo .error { - background-color: #FCDCDC; - border: 1px solid #880000; - color: #880000; - padding: 10px 24px 10px 24px; -} +#contentwrap .formitemdata .select2-container { display: block; } +#contentwrap .formitemdata .select2-container-multi .select2-choices .select2-search-choice { line-height: 17px; } +#contentwrap .formitemdata .select2-search-choice-close { top: 5px; } +.select2-results .select2-highlighted { background-color: #444444 !important; } -div.maincontent div.propinfo .info { - background-color: #DCDCDC; - border: 1px solid #333333; - color: #333333; - padding: 10px 24px 10px 24px; -} +#contentwrap .formitemdata .draghandle { cursor: move; } +#contentwrap .formitemdata table tbody tr.dragactive { background-color: #E3E3E3; } -div.maincontent div.propmain { - margin: 0px 15px 0px 15px; -} +#contentwrap .formitemdata table.tablecards thead th:nth-last-child(2) { border-right: 1px solid #222222; } +#contentwrap .formitemdata table.tablecards.tablecard-show thead th:nth-last-child(2) { border-right: 1px solid #CCCCCC; } +#contentwrap .formitemdata table.tablecard-show { width: 100%; } +#contentwrap .formitemdata table.tablecard-show-nohead tbody tr:first-child td { border-top: 1px solid #CCCCCC; } -div.maincontent div.propmain div.formfields { - border: 1px solid #E5E5E5; - background-color: #FBFBFB; - padding-left: 10px; - padding-right: 10px; - font-size: 0.9em; - overflow: auto; -} +#contentwrap .formitemdata .tablebodyscroll-scroller3 > table.tablecard-show-nohead > thead > tr { display: none; } -div.maincontent div.propmain div.alt { - border: none; - background-color: #F5F5F5; - padding: 0px; -} +#contentwrap .formitemdata .tablebodyscroll-shadow-top .tablebodyscroll-scroller-shadow-top, #contentwrap .formitemdata .tablebodyscroll-shadow-both .tablebodyscroll-scroller-shadow-top { border-top: 1px solid #CCCCCC; } -div.maincontent div.propmain div.formfields div.formaccordionwrap.ui-accordion { - margin-bottom: 7px; -} -div.maincontent div.propmain div.formfields div.formaccordionwrap.ui-accordion h3.ui-accordion-header { - margin-top: 7px; -} +/* FlexForms Modules styles for Admin Pack */ -div.maincontent div.propmain div.formfields div.formaccordionwrap.ui-accordion h3.ui-state-active { - background: url("jquery_ui_themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #E6E6E6; -} +#contentwrap .formitemdata table.tablecard-show .calendar_day_of_week { margin-top: 0.5em; border-top: 1px solid #E0E0E0; padding-top: 0.5em; font-weight: bold; } +#contentwrap .formitemdata table.tablecard-show .calendar_day_of_week:first-child { margin-top: 0; border-top: none; padding-top: 0; } -div.maincontent div.propmain div.formfields div.formaccordionwrap.ui-accordion div.formaccordionitems.ui-accordion-content { - padding: 0 14px; - background: none; - background-color: #FEFEFE; -} - -div.maincontent div.propmain div.formfields div.formaccordionwrap.ui-accordion div.formaccordionitems.ui-widget-content a { - color: #035488; -} - -div.maincontent div.propmain div.formfields div.formaccordionwrap.ui-accordion div.formaccordionitems.ui-accordion-content div.formitem { - margin-top: 6px; - border-top: 1px dotted #CCCCCC; - padding-top: 6px; -} - -div.maincontent div.propmain div.formfields div.formaccordionwrap.ui-accordion div.formaccordionitems.ui-accordion-content table.rowwrap { - background-color: transparent; -} - -div.maincontent div.propmain div.formfields div.formaccordionwrap.ui-accordion div.formaccordionitems.ui-accordion-content div.fieldtablewrap { - margin-top: 6px; - border-top: 1px dotted #CCCCCC; -} - -div.maincontent div.propmain div.formfields div.formaccordionwrap.ui-accordion div.formaccordionitems.ui-accordion-content div.fieldtablewrap.firstitem { - border-top: 0; -} - -div.maincontent div.propmain div.formfields div.formaccordionwrap.ui-accordion div.formaccordionitems.ui-accordion-content div.fieldtablewrap.firstitem table.rowwrap div.formitem { - margin-top: 0; -} - -div.maincontent div.propmain div.formfields div.formaccordionwrap.ui-accordion div.formaccordionitems.ui-accordion-content div.fieldtablewrap table.rowwrap div.formitem { - border-top: 0; -} - -div.maincontent div.propmain div.formfields div.formaccordionwrap.ui-accordion div.formaccordionitems.ui-accordion-content div.formitem.firstitem { - border-top: 0; -} - -div.maincontent div.propmain div.formfields div.formitem { - margin-top: 12px; - margin-bottom: 12px; -} - -div.maincontent div.propmain div.formfields div.formitem div.formitemtitle { - font-weight: bold; - margin-bottom: 2px; -} - -div.maincontent div.propmain div.formfields div.formitem div.static, div.maincontent div.propmain div.formfields div.formitem div.staticwrap { - margin-left: 7px; - width: 95%; - font-size: 0.95em; -} - -div.maincontent div.propmain div.formfields div.formitem input.text { - padding-left: 3px; - padding-right: 3px; - margin-left: 7px; - width: 95%; - border: 1px solid #C5C5C5; -} - -div.maincontent div.propmain div.formfields div.formitem input.date { - padding-left: 3px; - padding-right: 3px; - margin-left: 7px; - width: 20em; - border: 1px solid #C5C5C5; -} - -div.maincontent div.propmain div.formfields div.formitem div.textareawrap { - width: 95%; -} - -div.maincontent div.propmain div.formfields div.formitem textarea.text { - padding-left: 3px; - padding-right: 3px; - margin-left: 7px; - width: 100%; - border: 1px solid #C5C5C5; -} - -div.maincontent div.propmain div.formfields div.formitem input.checkbox { - margin-left: 7px; - border: 1px solid #C5C5C5; -} - -div.maincontent div.propmain div.formfields div.formitem select { - margin-left: 7px; - width: 95%; - border: 1px solid #C5C5C5; -} - -div.maincontent div.propmain div.formfields div.formitem div.swfuploadinject { - margin-left: 7px; - width: 95%; -} - -div.maincontent div.propmain div.formfields div.formitem div.formitemdesc { - margin-left: 15px; - font-size: 0.9em; - color: #333333; -} - -div.maincontent div.propmain div.formsubmit { - padding-left: 10px; - padding-right: 10px; - margin-top: 10px; - margin-left: auto; - margin-right: auto; - text-align: center; -} - -div.maincontent div.propmain div.formsubmit input.submit { - margin-left: 5px; - margin-right: 5px; - background-color: #FFFFFF; - border: 1px solid #0F5C8E; - font-weight: bold; - padding: 3px; -} - -div.maincontent div.propmain hr { - border: none 0; - border-top: 1px dashed #999999; - height: 1px; -} - -div.maincontent div.propmain table { - border: 1px solid #E5E5E5; - background-color: #FFFFFF; -} - -div.maincontent div.propmain th, td { - padding: 2px 7px; -} - -div.maincontent div.propmain tr.head { - background-color: #ECECEC; -} - -div.maincontent div.propmain tr.row { - background-color: #FAFAFA; -} - -div.maincontent div.propmain tr.altrow { - background-color: #F5F5F5; -} - -div.maincontent div.propmain tr.row td.draghandle { - cursor: move; -} - -div.maincontent div.propmain tr.dragactive { - background-color: #E3E3E3; -} - -div.maincontent div.propmain table.rowwrap { - border: none; - background-color: #FBFBFB; - border-collapse: collapse; -} - -div.maincontent div.propmain table.rowwrap td { - vertical-align: top; - padding: 0px 25px 0px 0px; -} - -div.maincontent div.propmain table.rowwrap td div.formitem { - margin-top: 0px; -} +#contentwrap .formitemdata .tablefiltersearchwrap { margin-bottom: 0.5em; } +#contentwrap .formitemdata table.ff_tablefilter tbody tr.visible { background-color: #FFFFFF; } +#contentwrap .formitemdata table.ff_tablefilter tbody tr.visible.altrow { background-color: #F6F6F6; } +#contentwrap .formitemdata table.ff_tablefilter tbody tr.visible.lastrow { border-bottom: 1px solid #CCCCCC; } diff --git a/support/admin.js b/support/admin.js index 0a500cb..6d39027 100644 --- a/support/admin.js +++ b/support/admin.js @@ -1,12 +1,50 @@ $(function() { + // For handling menu scroll. + function GetScrollLineHeight() { + var iframe = document.createElement('iframe'); + iframe.src = '#'; + document.body.appendChild(iframe); + var iwin = iframe.contentWindow; + var idoc = iwin.document; + idoc.open(); + idoc.write('a'); + idoc.close(); + var span = idoc.body.firstElementChild; + var r = span.offsetHeight; + document.body.removeChild(iframe); + + return r; + } + + var scrolllineheight = GetScrollLineHeight(); + var showingmenu = false; + + $('.proptitlewrap').after($('').click(function() { + $('#menuwrap').toggleClass('showmenu'); + $('#contentwrap').toggleClass('showmenu'); + + showingmenu = !showingmenu; + })); + $('#navbutton').click(function() { - $('#navbutton').toggleClass("clicked"); - $('#navdropdown').toggle().each(function() { - pos = $('#navbutton').position(); - height = $('#navbutton').outerHeight(); - $(this).css({ top: (pos.top + height) + "px" }); - }); + $('#menuwrap').toggleClass('showmenu'); + $('#contentwrap').toggleClass('showmenu'); + + showingmenu = !showingmenu; }); - $('.leftnav').clone().appendTo('#navdropdown'); + var scrolltarget = $('#contentwrap').get(0); + + $('#menuwrap').on('wheel', function(e) { + var $this = $(this); + + if (!showingmenu && $this.get(0).scrollHeight <= $this.innerHeight()) + { + var o = e.originalEvent; + var mult = (o.deltaMode == 1 ? scrolllineheight * 2 : (o.deltaMode == 2 ? $(window).height() - (2 * scrolllineheight) : 1)); + + scrolltarget.scrollTop += o.deltaY * mult; + scrolltarget.scrollLeft += o.deltaX * mult; + } + }); }); \ No newline at end of file diff --git a/support/admin_print.css b/support/admin_print.css index 0a74a32..55c50cf 100644 --- a/support/admin_print.css +++ b/support/admin_print.css @@ -1,75 +1,25 @@ -html { - height: auto; -} +html, body { height: auto; overflow: visible; } -body { - height: auto; - min-width: 0; - overflow: visible; -} +#menuwrap { display: none; } +#menuwrap.showmenu { display: none; } -div.contentwrap div.colmask { - position: static; - float: none; - width: 100%; - overflow: visible; - background-color: #FFFFFF; /* Left-column background color. */ -} +#contentwrap { height: auto; overflow: hidden; } +#contentwrap .proptitlewrap { background-color: #222222; color: #FAFAFA; padding: 0.85em; box-shadow: none; border-bottom: 1px solid #CCCCCC; } +#contentwrap.showmenu #navoverflowwrap { display: none; } +#contentwrap #navbutton { display: none; } +#contentwrap .proptitletext { padding-left: 0em; } -div.contentwrap div.colmask div.colright { - float: none; - width: 100%; - position: static; - left: auto; /* Left-column width. */ - background-color: #FFFFFF; /* Right-column background color. */ - border-left: 0 none; -} +#contentwrap .formitemdata table thead th, #contentwrap .formitemdata table tbody td { border-top: 1px solid #CCCCCC; } +#contentwrap .formitemdata table thead th:first-child { border-left: 1px solid #CCCCCC; } +#contentwrap .formitemdata table thead th:last-child { border-right: 1px solid #CCCCCC; } +#contentwrap .formitemdata table tbody tr:first-child td { border-top: 1px solid #CCCCCC; } -div.contentwrap div.colmask div.colright div.col1wrap { - float: none; - width: 100%; - position: static; - right: auto; -} +#contentwrap form .formsubmit input { background-color: #FAFAFA; color: #222222; border: 1px solid #222222; } -div.contentwrap div.colmask div.colright div.col1wrap div.col1 { - position: static; - width: 100%; - overflow: visible; -} +.ui-multiselect { width: 100% !important; } +#contentwrap .formitemdata .ui-multiselect.ui-widget { border: 1px solid #c5c5c5 !important; background: #ffffff !important; color: #222222 !important; } -div.contentwrap div.colmask div.colright div.col1wrap div.col1inner { - position: static; - margin-right: 0; /* Left-column width. */ -} +.multiselect-available-list { display: none; } +.multiselect-selected-list { left: 0 !important; width: 100% !important; } -div.contentwrap div.colmask div.colright div.col2 { - display: none; -} - -div.stickycol { - display: none; -} - -div.maincontent { - position: static; - margin: 5px 10px 15px 10px; - padding: 0; - background-color: #FFFFFF; - border: 0 none; -} - -div.maincontent div.proptitle div.navbutton { - display: none; -} - -div.maincontent div.propmain div.formfields { - border: 0 none; - background-color: #FFFFFF; - padding-left: 0; - padding-right: 0; -} - -div.maincontent div.propmain div.alt { - background-color: #FFFFFF; -} +.no-print { display: none; } diff --git a/support/admin_view.css b/support/admin_view.css index 80bfe2a..5aadf1e 100644 --- a/support/admin_view.css +++ b/support/admin_view.css @@ -63,36 +63,28 @@ a:hover { div.message { margin: 10px 7px; font-weight: bold; + padding: 7px 15px; + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; } div.message .success { background-color: #E8FCDC; border: 1px solid #008800; color: #008800; - padding: 7px 15px; - border-radius: 3px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; } div.message .error { background-color: #FCDCDC; border: 1px solid #880000; color: #880000; - padding: 7px 15px; - border-radius: 3px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; } div.message .info { background-color: #DCDCDC; border: 1px solid #333333; color: #333333; - padding: 7px 15px; - border-radius: 3px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; } div.maincontent { @@ -348,7 +340,7 @@ div.menuwrap div.menu { padding: 5px; } -div.menuwrap div.menu div.title { +div.menuwrap div.menu div.titlewrap { font-weight: bold; padding-bottom: 6px; } @@ -365,10 +357,10 @@ div.menuwrap div.menu a:hover { } /* Floating navigation menu styles. */ -div.maincontent div.proptitle div#navbutton { +div.maincontent div.proptitle #navbutton { display: none; } -div.maincontent div.proptitle div#navdropdown { +div.maincontent div.proptitle #navdropdown { display: none; } diff --git a/support/flex_forms.php b/support/flex_forms.php index 41efa16..41892b5 100644 --- a/support/flex_forms.php +++ b/support/flex_forms.php @@ -12,6 +12,7 @@ public function __construct() $this->state = array( "formnum" => 0, "formidbase" => "ff_form_", + "responsive" => true, "formtables" => true, "formwidths" => true, "autofocused" => false, @@ -351,7 +352,7 @@ public function Generate($options, $errors = array(), $lastform = true) if (isset($options["fields"])) { ?> -
"> +
state["responsive"]) echo " formfieldsresponsive"; ?>"> $field) { @@ -524,18 +525,26 @@ protected function ProcessField($num, &$field, $id) if ($field == "split" && !$this->state["insiderow"]) echo "
"; else if ($field == "startrow") { - if ($this->state["insiderow"]) echo ""; + if ($this->state["insiderow"]) + { + if ($this->state["responsive"] && $this->state["insiderowwidth"]) echo ""; + + echo ""; + } else if ($this->state["formtables"]) { $this->state["insiderow"] = true; + $this->state["insiderowwidth"] = false; ?>
">state["firstitem"] = false; } } - else if ($field == "endrow" && $this->state["formtables"]) + else if ($field == "endrow" && $this->state["formtables"] && $this->state["insiderow"]) { + if ($this->state["responsive"] && $this->state["insiderowwidth"]) echo ""; + ?>
state["insiderow"]) echo ""; + if ($this->state["insiderow"]) + { + if (!$this->state["responsive"] || !isset($field["width"])) echo ""; + else + { + echo ""; + + $this->state["insiderowwidth"] = true; + } + } + ?>
state["firstitem"] ? " firstitem" : ""); ?>">
-
>
+
state["responsive"] ? "max-" : "") . "width: " . htmlspecialchars($field["width"]) . ";\""; ?>>
-
type="text" id="" name="" value=""state["autofocused"] === $id) echo " autofocus"; ?> />
+
state["responsive"] ? "max-" : "") . "width: " . htmlspecialchars($field["width"]) . ";\""; ?> type="text" id="" name="" value=""state["autofocused"] === $id) echo " autofocus"; ?> />
-
type="password" id="" name="" value=""state["autofocused"] === $id) echo " autofocus"; ?> />
+
state["responsive"] ? "max-" : "") . "width: " . htmlspecialchars($field["width"]) . ";\""; ?> type="password" id="" name="" value=""state["autofocused"] === $id) echo " autofocus"; ?> />
state["responsive"] ? "max-" : "") . "width: " . htmlspecialchars($field["width"]); if (isset($field["height"]) && isset($field["multiple"]) && $field["multiple"] === true) $style[] = "height: " . htmlspecialchars($field["height"]); $style = " style=\"" . implode("; ", $style) . ";\""; } @@ -760,7 +779,7 @@ protected function ProcessField($num, &$field, $id) else { $style = array(); - if (isset($field["width"])) $style[] = "width: " . htmlspecialchars($field["width"]); + if (isset($field["width"])) $style[] = ($this->state["responsive"] ? "max-" : "") . "width: " . htmlspecialchars($field["width"]); if (isset($field["height"])) $style[] = "height: " . htmlspecialchars($field["height"]); $style = " style=\"" . implode("; ", $style) . ";\""; } @@ -781,7 +800,7 @@ protected function ProcessField($num, &$field, $id) if ($this->state["formtables"]) { ?> - > +
state["responsive"] ? "max-" : "") . "width: " . htmlspecialchars($field["width"]) . "\""; ?>> "nowrap") : array()); $rownum = 0; $altrow = false; @@ -930,7 +949,13 @@ protected function ProcessField($num, &$field, $id) } case "custom": { +?> +
+ +
+state["insiderow"]) { + if ($this->state["responsive"] && $this->state["insiderowwidth"]) echo ""; + ?>
N#0$9Ug7g~-`rQ^qx~m@y2OU8A z#zh~=7n#Z$Z*fx-GOtDf07cgx0suCz_W(2~Y(0tf@FX@P6EPuM_dgn$vj9LucO)%W zw%HgMW>=#oL>nZ>M&NEf08>)#)k<{$fCT_r>rPi=BV=hFh6WS^qqze>C6Ek}o{M5% za|@JGowu0t{&hgNzySHZxy@LTNh);YzZ2zSp_ zl$^T&Dnc|NLb&RD_!4>pt@VHdP)ZGER%5ZmWEe$lryR&y;2u^3cOkO4#6c%-(EY6a{600000NkvXXu0mjfxS2AI literal 0 HcmV?d00001 diff --git a/support/page_basics.php b/support/page_basics.php index b188663..0775976 100644 --- a/support/page_basics.php +++ b/support/page_basics.php @@ -185,15 +185,17 @@ function SetCookieFixDomain($name, $value = "", $expires = 0, $path = "", $domai } + $bb_errors = array(); + function BB_RegisterPropertyFormHandler($mode, $callback) { FlexForms::RegisterFormHandler($mode, $callback); } - // Originally from Barebone CMS editing routines. Most functionality has now transitioned to FlexForms. + // Originally from Barebones CMS editing routines. Most functionality has now transitioned to FlexForms. function BB_PropertyForm($options) { - global $bb_formtables, $bb_formwidths, $bb_flexforms; + global $bb_message_layout, $bb_formtables, $bb_formwidths, $bb_flexforms, $bb_errors; if (!isset($bb_formtables) || !is_bool($bb_formtables)) $bb_formtables = true; if (!isset($bb_formwidths) || !is_bool($bb_formwidths)) $bb_formwidths = true; @@ -213,7 +215,7 @@ function BB_PropertyForm($options) else $supportpath = "support"; // Initialize the FlexForms class instance. Override a few defaults for AdminPack template integration. - $bb_flexforms->SetState(array("supporturl" => $rooturl . "/" . $supportpath, "formtables" => $bb_formtables, "formwidths" => $bb_formwidths)); + $bb_flexforms->SetState(array("supporturl" => $rooturl . "/" . $supportpath, "formtables" => $bb_formtables, "formwidths" => $bb_formwidths, "jqueryuitheme" => "adminpack")); $bb_flexforms->SetJSOutput("jquery"); $bb_flexforms->SetCSSOutput("formcss"); @@ -221,18 +223,26 @@ function BB_PropertyForm($options) unset($options["hashnames"]); ?> - -
-
-
-
+
Generate($options); + if (isset($_REQUEST["bb_msg"])) + { + if (!isset($_REQUEST["bb_msgtype"]) || ($_REQUEST["bb_msgtype"] != "error" && $_REQUEST["bb_msgtype"] != "success")) $_REQUEST["bb_msgtype"] = "info"; + + $data2 = str_replace("@MSGTYPE@", htmlspecialchars($_REQUEST["bb_msgtype"]), $bb_message_layout); + $data2 = str_replace("@MESSAGE@", htmlspecialchars(BB_Translate($_REQUEST["bb_msg"])), $data2); + ?> -
+
">
+ +
+
+Generate($options, $bb_errors); +?> +
- - + + + + @TITLE@ - - + + - + -
-
-
-
-
-
-
-@MESSAGE@ -
-@CONTENT@ -
-
-
-
-
@MENU@
-
-
-
-
-
+ +
@CONTENT@
-
@TITLE@
+
@TITLE@
@ITEMS@
EOF; @@ -486,7 +484,7 @@ function BB_InitLayouts() function BB_GeneratePage($title, $menuopts, $contentopts) { - global $bb_rootname, $bb_page_layout, $bb_menu_layout, $bb_menu_item_layout, $bb_message_layout; + global $bb_rootname, $bb_page_layout, $bb_menu_layout, $bb_menu_item_layout; if (!isset($contentopts["title"])) $contentopts["title"] = $title; if (isset($contentopts["hidden"]) && !isset($contentopts["hidden"]["bb_back"]) && (!isset($contentopts["formmode"]) || $contentopts["formmode"] !== "get")) $contentopts["hidden"]["bb_back"] = (isset($_POST["bb_back"]) ? $_POST["bb_back"] : BB_GetBackQueryString()); @@ -512,18 +510,12 @@ function BB_GeneratePage($title, $menuopts, $contentopts) $data = str_replace("@ROOTURL@", htmlspecialchars($rooturl), $bb_page_layout); $data = str_replace("@SUPPORTPATH@", htmlspecialchars($supportpath), $data); - // Process the title and message. + // Process the title. $data = str_replace("@TITLE@", htmlspecialchars(BB_Translate(($bb_rootname != "" ? $bb_rootname . " | " : "") . $title)), $data); $data = str_replace("@ROOTNAME@", htmlspecialchars(BB_Translate($bb_rootname)), $data); - if (!isset($_REQUEST["bb_msg"])) $data = str_replace("@MESSAGE@", "", $data); - else - { - if (!isset($_REQUEST["bb_msgtype"]) || ($_REQUEST["bb_msgtype"] != "error" && $_REQUEST["bb_msgtype"] != "success")) $_REQUEST["bb_msgtype"] = "info"; - $data2 = str_replace("@MSGTYPE@", htmlspecialchars($_REQUEST["bb_msgtype"]), $bb_message_layout); - $data2 = str_replace("@MESSAGE@", htmlspecialchars(BB_Translate($_REQUEST["bb_msg"])), $data2); - $data = str_replace("@MESSAGE@", $data2, $data); - } + // Old templates. + $data = str_replace("@MESSAGE@", "", $data); // Process the menu. $data2 = ""; diff --git a/support/view_print_layout.php b/support/view_print_layout.php index 2ac8771..1312871 100644 --- a/support/view_print_layout.php +++ b/support/view_print_layout.php @@ -145,21 +145,22 @@ public static function ViewStaticFieldType(&$state, $num, &$field, $id) // Main layout. - $bb_page_layout = << - + ob_start(); +?> + + @TITLE@ +
@ROOTNAME@
-@MESSAGE@
@CONTENT@
@@ -168,5 +169,7 @@ public static function ViewStaticFieldType(&$state, $num, &$field, $id)
-EOF; + \ No newline at end of file