From 7aff9efa150c00e7da281528c0e501d28a72f97c Mon Sep 17 00:00:00 2001 From: Svyatoslav Mikhaylov Date: Thu, 1 Apr 2021 14:57:53 +0300 Subject: [PATCH] feat: add lms layout --- src/v2/scss/_variables.scss | 16 +- src/v2/scss/lms/layouts/_menu.scss | 194 ++++++++++++++++++++++ src/v2/scss/lms/layouts/_sidebar.scss | 43 +++++ src/v2/scss/main.scss | 3 + templates/v2/lms/layouts/_sidebar.jinja2 | 27 +++ templates/v2/lms/layouts/_top-menu.jinja2 | 77 +++++++++ templates/v2/lms/layouts/inner.jinja2 | 61 +++++++ 7 files changed, 414 insertions(+), 7 deletions(-) create mode 100644 src/v2/scss/lms/layouts/_menu.scss create mode 100644 src/v2/scss/lms/layouts/_sidebar.scss create mode 100644 templates/v2/lms/layouts/_sidebar.jinja2 create mode 100644 templates/v2/lms/layouts/_top-menu.jinja2 create mode 100644 templates/v2/lms/layouts/inner.jinja2 diff --git a/src/v2/scss/_variables.scss b/src/v2/scss/_variables.scss index d7e13a18..05e3e4b7 100644 --- a/src/v2/scss/_variables.scss +++ b/src/v2/scss/_variables.scss @@ -154,7 +154,8 @@ $grid-breakpoints: ( sm: 576px, md: 768px, lg: 992px, // XXX: Keep in sync with values from `v2/js/utils.js` - xl: 1260px + xl: 1260px, + lms: 1222px // $grid-breakpoints(lg) + $sidebar-width ); // Custom breakpoints for more control, used on user cards page @@ -295,12 +296,13 @@ $zindex-dropdown: 1000 !default; $zindex-sticky: 1020 !default; $zindex-cover: 1030 !default; $zindex-menu: 1040; -$zindex-preloader: 1050; -$zindex-modal-backdrop: 1060; -$zindex-modal: 1070; -$zindex-popover: 1080; -$zindex-tooltip: 1090; -$zindex-close: 1100; +$zindex-sidebar: 1050; +$zindex-preloader: 1060; +$zindex-modal-backdrop: 1070; +$zindex-modal: 1080; +$zindex-popover: 1090; +$zindex-tooltip: 1100; +$zindex-close: 1110; // Utilities diff --git a/src/v2/scss/lms/layouts/_menu.scss b/src/v2/scss/lms/layouts/_menu.scss new file mode 100644 index 00000000..8344e42a --- /dev/null +++ b/src/v2/scss/lms/layouts/_menu.scss @@ -0,0 +1,194 @@ +$navbar-submenu-height: 40px; +$navbar-main-height: 60px; +$navbar-padding-y: 16px; +$header-height: $navbar-main-height + $navbar-submenu-height + $navbar-padding-y * 2; + +$nav-link-padding-x: spacer("2x"); +$nav-link-padding-y: spacer("2x"); + +$nav-link-border-height: spacer("1x"); +$nav-link-with-border-padding-y: $nav-link-padding-y - $nav-link-border-height; + +$nav-link-expected-line-height: 24px; +$__blinking-effect-fix: 4px; +$nav-link-line-height: $nav-link-expected-line-height - $__blinking-effect-fix; +$nav-link-margin: $__blinking-effect-fix / 2; + +$menu-desktop-wrapper-margin: 2px; + +$navbar-toggler-padding-y: $grid-gutter-width / 2 - 1; // humburger size is 18px, to fit in 8pt grid, remove px here +$navbar-toggler-padding-x: $grid-gutter-width / 2; +$navbar-toggler-font-size: $font-size-lg; +$navbar-toggler-border-radius: $border-radius; + +//Body attribute for fix header & sidebar +._lms { + min-width: map-get($grid-breakpoints, lms); + + @include media-breakpoint-up(lms) { + padding: $header-height 0 0 $sidebar-width; + } + padding: 0 0 0 $sidebar-width; + margin-bottom: 0; + + .container { + min-width: map-get($grid-breakpoints, lg); + max-width: map-get($grid-breakpoints, xl); + padding: 0 spacer("10x"); + } +} + +.navbar-container_lms { + width: 100%; + @include media-breakpoint-up(lms) { + position: fixed; + top: 0; + right: 0; + left: 0; + padding-left: $sidebar-width; + z-index: $zindex-menu; + } + + .navbar.navbar-main { + background-color: $white; + border-bottom: 1px solid $gray-light; + padding: $navbar-padding-y 0; + + .container { + display: flex; + flex-wrap: nowrap; + align-items: flex-start; + height: $navbar-main-height; + } + + .navbar__title { + width: 100%; + overflow: hidden; + padding-right: spacer("10x"); + margin-top: spacer("3x"); + line-height: $nav-link-line-height; + } + + .navbar__course { + overflow: hidden; + margin: 0; + font-size: 18px; + white-space: nowrap; + text-overflow: ellipsis; + } + + .navbar__meta { + font-size: 12px; + color: $gray-dark; + } + + .navbar-lms__btn-back { + flex-shrink: 0; + margin: spacer("2x") spacer("4x") 0 0; + } + } + + .navbar.navbar-submenu { + display: flex; + background-color: $white; + border-bottom: 1px solid $gray-light; + font-size: $font-size-base; + + .navbar-nav { + display: flex; + flex-wrap: wrap; + margin: 0; + } + + .nav-item { + margin-right: spacer("4x"); + + &._active { + .nav-link { + padding: $nav-link-padding-y 0 $nav-link-with-border-padding-y; + opacity: 1; + border-bottom: $nav-link-border-height solid $teal; + } + } + + .nav-link { + display: flex; + align-items: center; + opacity: .5; + white-space: nowrap; + padding: $nav-link-padding-y 0; + color: $black; + + &:hover { + opacity: 1; + } + + svg { + margin-left: auto; + } + } + } + } + + .members-area { + display: flex; + flex-shrink: 0; + padding: $nav-link-padding-y $nav-link-padding-x; + margin: ($nav-link-margin + $menu-desktop-wrapper-margin) 0 ($nav-link-margin + $menu-desktop-wrapper-margin) auto; + line-height: $nav-link-line-height; + color: $black; + } + + .dropdown-user-menu { + margin-left: auto; + margin-right: -$navbar-toggler-padding-x; + + ._user { + margin-right: 4px; + } + + &.show { + .btn { + box-shadow: none; + + .user-menu-img { + box-shadow: 0 0 0 4px transparentize($gray-dark, .6); + } + } + } + + .dropdown-menu { + font-size: $font-size-content-base; + right: $navbar-toggler-padding-x; + left: auto; + } + + .btn { + color: $white; + border: 0; + background-color: rgba(0, 0, 0, 0); + padding: $nav-link-padding-y $nav-link-padding-x; + line-height: 30px; + + .svg-icon { + fill: $gray-light; + } + + &:focus { + box-shadow: none; + + .user-menu-img { + box-shadow: 0 0 0 4px transparentize($gray-dark, .6); + } + } + + span { + margin-right: spacer("3x"); + } + } + } + + .user-menu-img { + border-radius: 50%; + } +} diff --git a/src/v2/scss/lms/layouts/_sidebar.scss b/src/v2/scss/lms/layouts/_sidebar.scss new file mode 100644 index 00000000..a10fac48 --- /dev/null +++ b/src/v2/scss/lms/layouts/_sidebar.scss @@ -0,0 +1,43 @@ +$sidebar-width: 230px; + +.sidebar { + width: $sidebar-width; + position: fixed; + top: 0; + bottom: 0; + left: 0; + background-color: $gray-darker; + z-index: $zindex-sidebar; + + .sidebar__logo { + margin: spacer("6x") spacer("4x") spacer("2x"); + } + + .sidebar__menu { + margin: spacer("6x") 0; + + .ui.label._icon { + color: $white; + } + + .list__item { + cursor: pointer; + &:hover { + background-color: $black; + color: $white; + + a.ui.label._icon { + color: $white; + + .sprite-img { + fill: $white; + } + } + } + } + + a.ui.label._icon { + padding: spacer("2x") spacer("4x"); + } + } +} diff --git a/src/v2/scss/main.scss b/src/v2/scss/main.scss index 29a99721..29eee76f 100644 --- a/src/v2/scss/main.scss +++ b/src/v2/scss/main.scss @@ -61,3 +61,6 @@ // TODO: Remove styles below from production build @import "pages/about"; @import "pages/principles"; + +@import "lms/layouts/sidebar"; +@import "lms/layouts/menu"; diff --git a/templates/v2/lms/layouts/_sidebar.jinja2 b/templates/v2/lms/layouts/_sidebar.jinja2 new file mode 100644 index 00000000..f19ddc4d --- /dev/null +++ b/templates/v2/lms/layouts/_sidebar.jinja2 @@ -0,0 +1,27 @@ + diff --git a/templates/v2/lms/layouts/_top-menu.jinja2 b/templates/v2/lms/layouts/_top-menu.jinja2 new file mode 100644 index 00000000..52e72cfe --- /dev/null +++ b/templates/v2/lms/layouts/_top-menu.jinja2 @@ -0,0 +1,77 @@ +{% import "v2/macros/_global.jinja2" as macros %} + +{% macro render(show_submenu=True, show_notification=True, show_login_button=False, has_avatar=True, theme_class='') -%} +
+ {% if show_notification %} +
+
+
+ csc-kids +
До 14 апреля открыт приём заявок на очное обучение в центре
+
+
+
+ {% endif %} + + + + {% if show_submenu %} + + + {% endif %} +
+ {% if show_notification %}
{% endif %} +{%- endmacro %} diff --git a/templates/v2/lms/layouts/inner.jinja2 b/templates/v2/lms/layouts/inner.jinja2 new file mode 100644 index 00000000..b0be17af --- /dev/null +++ b/templates/v2/lms/layouts/inner.jinja2 @@ -0,0 +1,61 @@ + + + + + {#TODO: Придумать title и описание#} + {% block title %}Личный кабинет CSC{% endblock title %} + + + + + + + + + + {% block stylesheets %} {% endblock stylesheets %} + + + + +{% import "v2/macros/_global.jinja2" as macros %} +{% import "v2/lms/layouts/_top-menu.jinja2" as top_menu %} + + + +
+ {% block sprites %} + + {% endblock sprites %} +
+ +{% include "v2/lms/layouts/_sidebar.jinja2" %} + +{% block menu %} + {{ top_menu.render(show_notification=False, has_avatar=False) }} +{% endblock menu %} + +
+ {% block content %}

place page content here

{% endblock content %} +
+ +{% block footer -%} +{%- endblock footer %} + +{{ render_bundle('runtime', config='V2') }} +{{ render_bundle('common', config='V2') }} +{{ render_bundle('main', config='V2') }} + +