diff --git a/README.md b/README.md index 2624897..5f9a14c 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,120 @@ -# costapy-template-black-dashboard -Dashboard template from Creative Tim that has been designed for CostaPy +# CostaPy Template - Black Dashboard +Dashboard template from [Creative Tim](https://www.creative-tim.com/product/black-dashboard#) that has been designed for CostaPy + +## Usage + +- Put the folder in your templates directory +- Add to handler + + import templates.blackdashboard.main as blackdashboard + + kwargs["mako"] = { + "website" : blackdashboard.main(directory.page["public"], "dashboard") # page_directory, file_name + } + +- Define a necessary variable on your modules function + + title = "CostaPy" + baseurl = "http://localhost" + + menu_icon = "fa fa-user-tie" + menu_name = "Dashboard" + profile_picture = "http://localhost/profile/1.jpg" + profile_name = "John Smith" + logout = "http://localhost/logout" + + color = "blue" # blue | green | orange | red + logo = "http://localhost/logo.png" + user_roles = ["member"] # A roles that user have + active_page = "Dashboard" # Current active page name + + copyright = "Dita Aji Pratama" # Copyright on the footer + +- Config a navbar menu on your modules function + + navbar_menu = [ + { + "name" :"Home", + "href" :"/" + }, + { + "name" :"Dashboard", + "href" :"#" + }, + { + "name" :"CostaPy Website", + "href" :"https://costapy.ditaajipratama.com" + } + ] + + profile_menu = [ + { + "name" :"Profile", + "href" :"/profile" + }, + { + "name" :"Setting", + "href" :"/setting" + } + ] + +- Config a sidebar menu on your modules function + + sidebar_menu = [ + { + "icon" :"fa fa-home", + "name" :"Dashboard", + "href" :"/", + "roles" :["member", "admin"] + }, + { + "icon" :"fa fa-users", + "name" :"Users", + "href" :"/users", + "roles" :["admin"] + } + ] + +- Config a footer menu on your modules function + + footer_menu = [ + { + "name" :"CostaPy Website", + "href" :"https://costapy.ditaajipratama.com" + } + ] + +- Set a template on your modules function + + from mako.template import Template + + interface = Template(params["mako"]["website"]['template']).render( + title = title, + baseurl = baseurl, + navbar = Template(params["mako"]["website"]['navbar']).render( + title = title, + baseurl = baseurl, + menu_icon = menu_icon, + menu_name = menu_name, + menu = navbar_menu, + profile_picture = profile_picture, + profile_name = profile_name, + profile_menu = profile_menu, + logout = logout + ), + sidebar = Template(params["mako"]["website"]['sidebar']).render( + color = color, + logo = logo, + title = title, + user_roles = user_roles, + active_page = active_page, + menu = sidebar_menu + ), + footer = Template(params["mako"]["website"]['footer']).render( + copyright = copyright, + menu = footer_menu, + ), + container = Template(params["mako"]["website"]['container']).render( + # your container content here + ) + ) diff --git a/blackdashboard/html/footer.html b/blackdashboard/html/footer.html new file mode 100644 index 0000000..2ff71bd --- /dev/null +++ b/blackdashboard/html/footer.html @@ -0,0 +1,14 @@ + diff --git a/blackdashboard/html/navbar.html b/blackdashboard/html/navbar.html new file mode 100644 index 0000000..9485d00 --- /dev/null +++ b/blackdashboard/html/navbar.html @@ -0,0 +1,89 @@ + + + +
+ diff --git a/blackdashboard/html/sidebar.html b/blackdashboard/html/sidebar.html new file mode 100644 index 0000000..07b6446 --- /dev/null +++ b/blackdashboard/html/sidebar.html @@ -0,0 +1,27 @@ + diff --git a/blackdashboard/html/template.html b/blackdashboard/html/template.html new file mode 100644 index 0000000..2734fab --- /dev/null +++ b/blackdashboard/html/template.html @@ -0,0 +1,192 @@ + + + + + + + + + +`s get reset. However, we also reset the\n// bottom margin to use `rem` units instead of `em`.\np {\n margin-top: 0;\n margin-bottom: $paragraph-margin-bottom;\n}\n\n// Abbreviations\n//\n// 1. Duplicate behavior to the data-* attribute for our tooltip plugin\n// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n// 3. Add explicit cursor to indicate changed behavior.\n// 4. Remove the bottom border in Firefox 39-.\n// 5. Prevent the text-decoration to be skipped.\n\nabbr[title],\nabbr[data-original-title] { // 1\n text-decoration: underline; // 2\n text-decoration: underline dotted; // 2\n cursor: help; // 3\n border-bottom: 0; // 4\n text-decoration-skip-ink: none; // 5\n}\n\naddress {\n margin-bottom: 1rem;\n font-style: normal;\n line-height: inherit;\n}\n\nol,\nul,\ndl {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n margin-bottom: 0;\n}\n\ndt {\n font-weight: $dt-font-weight;\n}\n\ndd {\n margin-bottom: .5rem;\n margin-left: 0; // Undo browser default\n}\n\nblockquote {\n margin: 0 0 1rem;\n}\n\nb,\nstrong {\n font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari\n}\n\nsmall {\n @include font-size(80%); // Add the correct font size in all browsers\n}\n\n//\n// Prevent `sub` and `sup` elements from affecting the line height in\n// all browsers.\n//\n\nsub,\nsup {\n position: relative;\n @include font-size(75%);\n line-height: 0;\n vertical-align: baseline;\n}\n\nsub { bottom: -.25em; }\nsup { top: -.5em; }\n\n\n//\n// Links\n//\n\na {\n color: $link-color;\n text-decoration: $link-decoration;\n background-color: transparent; // Remove the gray background on active links in IE 10.\n\n @include hover {\n color: $link-hover-color;\n text-decoration: $link-hover-decoration;\n }\n}\n\n// And undo these styles for placeholder links/named anchors (without href)\n// which have not been made explicitly keyboard-focusable (without tabindex).\n// It would be more straightforward to just use a[href] in previous block, but that\n// causes specificity issues in many other styles that are too complex to fix.\n// See https://github.com/twbs/bootstrap/issues/19402\n\na:not([href]):not([tabindex]) {\n color: inherit;\n text-decoration: none;\n\n @include hover-focus {\n color: inherit;\n text-decoration: none;\n }\n\n &:focus {\n outline: 0;\n }\n}\n\n\n//\n// Code\n//\n\npre,\ncode,\nkbd,\nsamp {\n font-family: $font-family-monospace;\n @include font-size(1em); // Correct the odd `em` font sizing in all browsers.\n}\n\npre {\n // Remove browser default top margin\n margin-top: 0;\n // Reset browser default of `1em` to use `rem`s\n margin-bottom: 1rem;\n // Don't allow content to break outside\n overflow: auto;\n}\n\n\n//\n// Figures\n//\n\nfigure {\n // Apply a consistent margin strategy (matches our type styles).\n margin: 0 0 1rem;\n}\n\n\n//\n// Images and content\n//\n\nimg {\n vertical-align: middle;\n border-style: none; // Remove the border on images inside links in IE 10-.\n}\n\nsvg {\n // Workaround for the SVG overflow bug in IE10/11 is still required.\n // See https://github.com/twbs/bootstrap/issues/26878\n overflow: hidden;\n vertical-align: middle;\n}\n\n\n//\n// Tables\n//\n\ntable {\n border-collapse: collapse; // Prevent double borders\n}\n\ncaption {\n padding-top: $table-cell-padding;\n padding-bottom: $table-cell-padding;\n color: $table-caption-color;\n text-align: left;\n caption-side: bottom;\n}\n\nth {\n // Matches default `