Signs of Spring App. Release Notes Version 1.0

Size: px

Start display at page:

Download "Signs of Spring App. Release Notes Version 1.0"

Geoffrey Beasley
6 years ago
Views:

1 Signs of Spring App Release Notes Version 1.0

2 App Parameters and Styling In your Caspio account, go to the App s Overview screen. On the right sidebar, click on Manage in the App Parameters area. Edit any of the default values you would like to customize (see the following slides for reference). Custom application styling and images are also managed in the App Parameters section (see the following slides for reference). These styles and images are inserted in the DataPage Headers as App Parameters. You can also apply your own styling, images, and map icon by replacing the App Parameters occurrences with your own custom codes.

3 App Parameters Admin_Upload_New_ Photo_DP_AppKey DataPage AppKey DataPage AppKey is used for links to the "Upload New Photo" DataPage of Admin interface. Company_Name Your Company Name Text is used in signatures. From_ Your Company Name address is used in the password recovery . Header_Background_I mage iframe_height_resize r_js d.png <script> window.onload = function() { var iframe = document.getelementbyid('frame-search'); var iframe2 = document.getelementbyid('frame-results'); var iframedoc= iframe.contentwindow.document; var iframedoc2= iframe2.contentwindow.document; var iframeheight = iframedoc.getelementbyid('cbform-search'); var iframeheight2 = iframedoc2.getelementbyid('cbform-results'); Image for background of the header of all DataPages except of "Manage Posts" DataPage Resultset (Admin interface) and "Public Gallery - Results" DataPage Resultset (Public interface). JavaScript that allows iframe height resize according to content.

4 iframe_height_re sizer_js iframe.style.height= iframeheight.offsetheight+17+'px'; iframe2.style.height= iframeheight2.offsetheight+17+'px'; iframe.onload = function(){ var iframe = document.getelementbyid('frame-search'); var iframedoc = iframe.contentwindow.document; var iframeheight = iframedoc.getelementbyid('cbform-search'); Login_Header_Bac kground_image Manage_Posts_DP _AppKey iframe2.onload = function(){ var iframe = document.getelementbyid('frame-results'); var iframedoc = iframe.contentwindow.document; var iframeheight = iframedoc.getelementbyid('cbform-results'); </script> g DataPage AppKey Image for background source URL of the header of Authentication From. DataPage AppKey is used for links to the "Manage Posts" DataPage of Admin interface.

5 Navigation_Menu _Styles <style>.lo-nav-strip { height: 30px; #recovery-form.lo-nav-strip, #full-content.lo-nav-strip{ margin: 5px 0 0 0; #full-content-report.lo-nav-strip{ margin: 5px 0 2px 0;.ins-list.lo-nav-strip{ height: 75px; #cb-navbar { height: 30px; margin:0 auto; background: transparent; #cb-navbar ul { margin:0px; padding: 0px; list-style-type: none; CSS style for navigation menu on the "Manage Posts", "Upload New Photo" and "Password Recovery" DataPages of Admin interface.

6 Navigation_Menu _Styles #cb-navbar li { margin: 0; padding: 0px; float: left;.ins-list li{ width: 120px; #cb-navbar a { margin: 0px; padding: 6px 25px; text-decoration: none; color: #3186ad; display: block; height: 14px; font-size: 12px; font-weight: bold; * html #cb-navbar a { padding: 7px 0 3px; width: 120px; text-align: center;

7 Navigation_Menu _Styles Password_Recover y_datapage_appk ey #cb-navbar a.selected { background: #484848; color: #ffffff; #cb-navbar a:hover { color: #fff; background: #484848;.ins-list #cb-navbar a{text-align: center;.ins-list #cb-navbar a:hover{ background: 0; text-decoration: underline;.rightbutton{ float: right!important; margin-right: 5px!important; </style> DataPage AppKey DataPage AppKey is used for links to the "Password Recovery" DataPage (inserted as a virtual field in the SS - Admin" Authentication). If you embed the admin interface on your website, change this to your AppKey.

8 Public_Gallery_DP _AppKey Public_Gallery_Filt ering_form_dp_a ppkey Public_Gallery_Re sults_dp_appkey Public_Upload_Ne w_photo_dp_app Key Report_Header_B ackground_image Responsive_Code_ Finish Responsive_Code_ Start DataPage AppKey DataPage AppKey DataPage AppKey DataPage AppKey ound.png </div> <style> /* Change max-width to what size you want the form to change at (max-width: 768px) { * { DataPage AppKey is used for links to the "Public Gallery" DataPage of Public interface. DataPage AppKey is used for links to the "Public Gallery - Filtering Form" DataPage of Public interface. DataPage AppKey is used for links to the "Public Gallery - Results" DataPage of Public interface. DataPage AppKey is used for links to the "Upload New Photo" DataPage of Public interface. Image for background of the header of "Manage Posts" DataPage Resultset (Admin interface) and "Public Gallery - Results" DataPage Resultset (Public interface). JavaScript code finish that allows to make DP responsive. JavaScript code start that allows to make DP responsive.

9 Responsive_Code_ Start -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; #datapage-form table { width: 100%!important; margin: 0px!important; #datapage-form td { display: block; #datapage-form input, #datapage-form select, #filter_button, #upload_button, #header-wrap span, #datapage-form textarea { width: 100%!important; #datapage-form input[type=radio], #datapage-form input[type=checkbox] { width: auto!important; #datapage-form img[alt~="calendar"] { position: relative; left: -19px; top: 4px;

10 Responsive_Code_ Start #datapage-form img[alt~="audio"] { position: relative; left: -19px; top: 4px; #datapage-form img[alt~="download"] { position: relative; left: -46px; top: 4px; #datapage-form input + span > a { display: inline-block; width: 1px; overflow: visible; position: relative; left: -8px; #datapage-form input + a[href="#"], #datapage-form input + a[href="#"] + a { display: inline-block; width: 1px; overflow: visible; position: relative; left: -8px;

11 Responsive_Code_ Start #Report_Header { margin-top: 50px!important; position: inherit!important; #full-content-report > center > img { width: 80%!important; margin: 50px 0 20px!important; #header-wrap a {margin: 10px 42px!important; #full-content{width:auto!important; #full-content > center > img {width: 80%!important; </style> <div id="datapage-form">

12 Responsive_Galler y_code_start (max-width: 768px) { #gallery-single * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; #gallery-single table[id^="pageactionsctnr"] { border-spacing: 0px!important; border-collapse: separate!important; #gallery-single table[id^="pageactionsctnr"] td { display: block; width: auto!important; float: left; text-align: left; padding: 1px!important; JavaScript code start that allows to make gallery DP responsive.

13 Responsive_Galler y_code_start #gallery-single table[id^="pageactionsctnr"] td div { text-align: left!important; #gallery-single table[data-cb-name^="cbtable"] { border-spacing: 0px!important; border-collapse: collapse!important; margin-bottom: 7px; #gallery-single table[data-cb-name^="cbtable"] td { display: block; width: 100%!important; float: left; text-align: left; margin-top: 10px; #gallery-single table[data-cb-name^="cbtable"] td div { text-align: left!important; #gallery-single table[data-cb-name^="cbtable"] td > div >

14 Responsive_Galler y_code_start div[name^="ractnr"], #gallery-single table[data-cb-name^="cbtable"] td > div > div[name^="ractnr"]:hover { vertical-align: middle!important; white-space: normal!important; background: transparent!important; overflow: hidden!important; display: inline-block!important; padding: 0px!important; margin: -6px 12px 8px 12px!important; line-height: 0px; position: static!important; width: auto!important; opacity: 1.0!important;.cbResultSetData > img { width: 100%!important; </style> <div id="gallery-single">

15 Styles_CSS <style>.centered{ margin: 0 auto;.title{ font-size: 16px; text-align: center; text-transform: none; background: #f2f2f2; padding: 10px 0; color: #484848;.auth-form{ width: 350px;.auth-form form>table{ margin: 0;.add-form{ width: 100%; padding: 0px 0px 30px; Common CSS styles.

16 Styles_CSS.ins-list{ width: 600px;.ins-list h1{ padding-left: 7px;.results{ width: 100%;.details{ width: 100%; padding: 0px 0px 30px;.lightfont{ font-weight: normal; color: #aaaaaa; #recovery-form{ width: 550px; padding: 0px 0px 30px; #recovery-form.cbformerror{

17 Styles_CSS margin: 3px 3px 0px 14px; #recovery-form.cbsubmitbuttoncontainer{ border-width: 0px; background: #fff; #recovery-form.cbsubmitbutton{ margin: 0px 3px 0px 0px; div[class*="cbconfirmationmessages"]{ /*margin-left: -3px!important;*/ padding-left: 0!important; margin-top: 10px;.add-form a{ text-decoration: underline; #Admin_Header{ width: 345px;

18 Styles_CSS height: 311px; margin: 30px auto; #Public_Header{ width: 624px; height: 126px; margin-left: 20px; #Report_Header{ width: 340px; height: 160px; margin:-8px auto 0; #full-content{ width:550px; margin: 0 auto; #full-content-report{ width: auto;

19 Styles_CSS margin: 0 auto; #full-content-public{ width: 624px; margin: 0 auto; #full-content #content.cbresultsettableheader{ display: none; #full-content #content.cbresultsettablecellnumberdate{ width: 80px; padding: 20px 12px; font-size: 42px;.cbFormAuthFieldCell.cbFormTextField,.cbFormPassword { padding:10px;

20 Styles_CSS #container{ margin-top: 50px; #header-wrap { height: 50px; margin-left:3px; position: fixed; top: 0; width: 100%; z-index: 100; background-color: #fff; #header-wrap a{ float: right; margin: 10px 20px; #upload_button { color: #FFFFFF; font-size: 12px;

21 Styles_CSS font-family: 'Lato', Arial, sans-serif; font-weight: normal; text-transform: uppercase; text-align: center; min-width: 120px; padding: 7px 16px; display: inline-block; background: #72BB9C; border: none; #upload_button:hover { color: #FFFFFF; font-size: 12px; font-family: 'Lato', Arial, sans-serif; font-weight: normal; text-transform: uppercase; text-align: center; min-width: 120px; padding: 7px 16px; display: inline-block; background: #499776;

22 Styles_CSS border: none; cursor: pointer; </style>

23 Checklist for Going Live Go to the App s Tables screen and open the SS_Admins table. Delete the sample records and add your own user information to log in. Sample data is also located in the SS_Photos and SS_Categories_Lookup tables. Feel free to use these while you are preparing for your rollout. Make sure to delete all sample data before going live. You can import your own data using Caspio s import feature, or add records one by one using the application. In your Caspio account, go to the Authentication screen, edit authentication object SS - Admin, and remove the sample login information from the Footer.

Santa Tracker. Release Notes Version 1.0

Santa Tracker. Release Notes Version 1.0 Santa Tracker Release Notes Version 1.0 App Parameters and Styling In your Caspio account, go to the App s Overview screen and on the right sidebar click on Manage in the App Parameters area. Edit any