diff --git a/frappe/hooks.py b/frappe/hooks.py index 3b9eee6604..b0bb3fb7bb 100644 --- a/frappe/hooks.py +++ b/frappe/hooks.py @@ -47,9 +47,8 @@ web_include_js = [ "website_script.js" ] -bootstrap = "assets/frappe/css/bootstrap.css" web_include_css = [ - "assets/css/frappe-web.css" + "assets/css/bootstrap-4-web.css" ] website_route_rules = [ diff --git a/frappe/public/build.json b/frappe/public/build.json index 3c783f9b19..213234a60c 100755 --- a/frappe/public/build.json +++ b/frappe/public/build.json @@ -11,6 +11,9 @@ "public/less/form_grid.less", "node_modules/frappe-datatable/dist/frappe-datatable.css" ], + "css/bootstrap-4-web.css": [ + "public/scss/bootstrap-4.scss" + ], "concat:js/moment-bundle.min.js": [ "node_modules/moment/min/moment-with-locales.min.js", "node_modules/moment-timezone/builds/moment-timezone-with-data.min.js" @@ -45,6 +48,9 @@ "public/js/frappe/misc/rating_icons.html", "public/js/frappe/socketio_client.js" ], + "js/bootstrap-4-web.min.js": [ + "website/js/bootstrap-4.js" + ], "js/control.min.js": [ "public/js/frappe/ui/capture.js", "public/js/frappe/form/controls/base_control.js", diff --git a/frappe/public/less/website.less b/frappe/public/less/website.less index dcc1bb5b1e..eef2b4cc1f 100644 --- a/frappe/public/less/website.less +++ b/frappe/public/less/website.less @@ -124,8 +124,8 @@ li { } .page_content { - padding-top: 30px; - padding-bottom: 30px; + padding-top: 2rem; + padding-bottom: 2rem; } .carousel-control .icon { @@ -405,12 +405,12 @@ a.active { // background-color: #ffa; // } -.page-breadcrumbs .breadcrumb { - padding: 0px; - background-color: transparent; - border-radius: 0px; - font-size: 12px; -} +// .page-breadcrumbs .breadcrumb { +// padding: 0px; +// background-color: transparent; +// border-radius: 0px; +// font-size: 12px; +// } .breadcrumb a { color: inherit; @@ -594,15 +594,15 @@ li.footer-child-item { padding-bottom:2000px; margin-bottom:-2000px;} .shopping-cart { - .cart-icon { - .dropdown-toggle { - text-decoration: none !important; - } - } - margin-top:12px; - margin-bottom:8px; - padding-right:15px; - border-right: 1px solid @border-color; + // .cart-icon { + // .dropdown-toggle { + // text-decoration: none !important; + // } + // } + // margin-top:12px; + // margin-bottom:8px; + // padding-right:15px; + // border-right: 1px solid @border-color; } .badge-wrapper { display: inline-block; diff --git a/frappe/public/scss/bootstrap-4.scss b/frappe/public/scss/bootstrap-4.scss new file mode 100644 index 0000000000..7d921a3e0d --- /dev/null +++ b/frappe/public/scss/bootstrap-4.scss @@ -0,0 +1,95 @@ +@import "variables"; +@import "~bootstrap/scss/bootstrap"; +@import "multilevel-dropdown"; + + +body { + font-size: 16px; +} + +.navbar.bg-dark { + .dropdown-menu { + font-size: .75rem; + background-color: $dark; + border-radius: 0; + } + + .nav-link { + white-space: nowrap; + color: $light; + + &:hover { + color: $primary; + } + } + + .nav-item { + padding: 0rem 1rem; + } + + .dropdown-item { + color: $light; + + &:hover { + background-color: $dark; + color: $primary; + } + } +} + + +.input-dark { + background-color: $dark; + border-color: darken($primary, 40%); + color: $light; +} + +.breadcrumb { + font-size: 0.75rem; +} + +a.card { + text-decoration: none; +} + +img { + max-width: 100%; +} + +.hidden { + @extend .d-none; +} + +.video-background { + width: 100vw; + position: absolute; + top: 0; + left: 0; + z-index: -1; + + &-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + background-color: var(--dark); + opacity: 0.4; + } +} + +.hero-section { + background-image: url("/assets/rigpl_theme/images/hero-image.jpg"); + background-size: cover; + background-position-y: 15%; + background-position-y: 27%; +} + +.btn-primary { + color: $white; +} + +.text-underline { + text-decoration: underline; +} \ No newline at end of file diff --git a/frappe/public/scss/multilevel-dropdown.scss b/frappe/public/scss/multilevel-dropdown.scss new file mode 100644 index 0000000000..928718a109 --- /dev/null +++ b/frappe/public/scss/multilevel-dropdown.scss @@ -0,0 +1,17 @@ +.dropdown-submenu { + position: relative; +} + +.dropdown-submenu a::after { + transform: rotate(-90deg); + position: absolute; + right: 6px; + top: .8em; +} + +.dropdown-submenu .dropdown-menu { + top: 0; + left: 100%; + margin-left: .1rem; + margin-right: .1rem; +} diff --git a/frappe/public/scss/variables.scss b/frappe/public/scss/variables.scss new file mode 100644 index 0000000000..ec58e6a1f3 --- /dev/null +++ b/frappe/public/scss/variables.scss @@ -0,0 +1,8 @@ +// $midnight_blue: #18427B; +// $dark_purple: #191B69; +// $light_grey: #E2DBD4; +// $green: #8BBF46; +// $slate_grey: #7F8487; + +// $primary: $green; +// $dark: $dark_purple; \ No newline at end of file diff --git a/frappe/templates/base.html b/frappe/templates/base.html index c47caf6d6f..c3d96bd9b0 100644 --- a/frappe/templates/base.html +++ b/frappe/templates/base.html @@ -3,101 +3,79 @@ - - {% block title %} {{ title | striptags }} {% endblock %} + - {% block favicon %} - - {% block title %} {{ title | striptags }} {% endblock %} + + {% block favicon %} + - {% endblock %} + type="image/x-icon" + > + {% endblock %} + {%- block head -%} - {% block meta_block %}{% endblock %} {% if head_html is defined -%} {{ head_html or "" }} {%- endif %} {%- for link in web_include_css %} {%- endfor -%} - {%- block head_include %}{{ head_include or "" }}{% endblock -%} - {%- block style %}{%- endblock -%} {%- endblock -%} - + -{% block body %} -
-
-
- {%- block banner -%} - {% include "templates/includes/banner_extension.html" ignore missing %} - {% if banner_html -%} -
- -
- {%- endif %} - {%- endblock -%} + {%- block navbar -%} + {% include "templates/includes/navbar/navbar.html" %} + {%- endblock -%} - {%- block navbar -%} - {% include "templates/includes/navbar/navbar.html" %} - {%- endblock -%} -
+ {% block content %} + {{ content }} + {% endblock %} + + {%- block footer -%} + {% include "templates/includes/footer/footer.html" %} + {%- endblock -%} -
-
- {%- block hero -%}{%- endblock -%} -
-
- {% block content %}{% endblock %} -
-
- {%- if footer is defined -%} -
-
- {{ footer }} -
-
- {%- endif -%} -
-
- {%- block footer -%}{% include "templates/includes/footer/footer.html" %}{%- endblock -%} -
-
{% block base_scripts %} - - - - + + + {% endblock %} - {%- if js_globals is defined %} - - {% endif -%} + + {%- if js_globals is defined %} + + {% endif -%} + {%- for link in web_include_js %} - + {%- endfor -%} - {%- block script %}{%- endblock %} + + {%- block script %}{%- endblock %} - {%- block body_include %}{{ body_include or "" }}{% endblock -%} + {%- block body_include %}{{ body_include or "" }}{% endblock -%} -{% endblock %} diff --git a/frappe/templates/includes/breadcrumbs.html b/frappe/templates/includes/breadcrumbs.html index 7c54bdaae1..48f952db66 100644 --- a/frappe/templates/includes/breadcrumbs.html +++ b/frappe/templates/includes/breadcrumbs.html @@ -1,12 +1,19 @@ -{% if parents and parents|length > 0 %} - -{% endif %} +
+ {% if not no_breadcrumbs and parents %} + + {% endif %} +
diff --git a/frappe/templates/includes/navbar/navbar.html b/frappe/templates/includes/navbar/navbar.html index 7ac8d6193e..5555c9d636 100644 --- a/frappe/templates/includes/navbar/navbar.html +++ b/frappe/templates/includes/navbar/navbar.html @@ -1,21 +1,20 @@ - \ No newline at end of file diff --git a/frappe/templates/includes/navbar/navbar_items.html b/frappe/templates/includes/navbar/navbar_items.html index bb4009c8cf..3fd87c9b3f 100644 --- a/frappe/templates/includes/navbar/navbar_items.html +++ b/frappe/templates/includes/navbar/navbar_items.html @@ -1,16 +1,39 @@ +{% macro render_item(item, submenu=False) %} +{% if item.child_items %} +
  • + + +
    • +{% else %} +
  • + + {{ item.label }} + +
    • +{% endif %} +{% endmacro %} + {% if top_bar_items -%} -