Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add LMS layout #405

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: add LMS layout #405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 9 additions & 7 deletions src/v2/scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Есть несколько переменных только для lms, вынести их в отдельный файл lms/variables.scss ?

);

// Custom breakpoints for more control, used on user cards page
Expand Down Expand Up @@ -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;
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Вот это тоже только для lms

$zindex-preloader: 1060;
$zindex-modal-backdrop: 1070;
$zindex-modal: 1080;
$zindex-popover: 1090;
$zindex-tooltip: 1100;
$zindex-close: 1110;


// Utilities
Expand Down
194 changes: 194 additions & 0 deletions src/v2/scss/lms/layouts/_menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
$navbar-submenu-height: 40px;
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Это правильная реализация независимого меню для lms?

$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%;
}
}
43 changes: 43 additions & 0 deletions src/v2/scss/lms/layouts/_sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
$sidebar-width: 230px;
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Тоже наверное в lms/variables.scss нужно положить?


.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");
}
}
}
3 changes: 3 additions & 0 deletions src/v2/scss/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
27 changes: 27 additions & 0 deletions templates/v2/lms/layouts/_sidebar.jinja2
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<nav class="sidebar">
<div class="sidebar__logo">
<svg xmlns="http://www.w3.org/2000/svg" width="92" height="32" viewBox="0 0 92 32">
<g fill="#FFF" fill-rule="evenodd">
<path d="M32 12.6862814L32 .391868097 27.8013489 4.55745158C24.8805705 1.73907476 20.902901 0 16.5385137 0 7.40546646 0 0 6.93888266 0 16 0 25.0611173 7.40546646 32 16.5385137 32 22.2566717 32 27.317048 29.0607332 30.1970377 24.5304306L25.4247636 21.591676C23.5732679 24.4894509 20.2822937 26.4487914 16.5385137 26.4487914 10.7372293 26.4487914 6.04756527 21.7960621 6.04756527 16 6.04756527 10.2449176 10.7372293 5.591676 16.5385137 5.591676 19.3704863 5.591676 21.9427539 6.69095566 23.8293588 8.49815912L19.6369034 12.6575956 32 12.6862814zM37.7958486 23.4274383C39.7967485 25.3456091 42.714139 26.4883164 46.0066003 26.4883164 51.8000556 26.4883164 54.4265964 20.4075359 48.0075002 18.693731L42.6722902 17.3466578C38.1290703 16.1629749 35.0034816 13.1430724 35.0034816 8.85804798 34.8779349 3.96095038 40.1299703-.120220384 46.0066003.00270644609 50.0497259.00270644609 53.8422813 1.26731621 56.6770203 3.43031623L53.384036 8.00114553C51.3836592 6.40975528 48.9239908 5.59331625 46.0066003 5.59331625 41.1301587 5.59331625 38.6710134 10.4499504 44.1730959 12.0003651L49.1740379 13.2659992C53.967828 14.44917 57.8440812 17.4690724 57.8440812 22.4481213 57.9685816 27.7534384 52.4670222 32.1199018 46.0066003 31.9974872 41.5465551 31.9974872 37.4621037 30.5285116 34.4615385 28.0387311L37.7958486 23.4274383zM86.408729 10.4487914C84.5981182 7.51003682 81.3784127 5.591676 77.7162819 5.591676 72.0420245 5.591676 67.4541337 10.2449176 67.4541337 16 67.4541337 21.7955499 72.0420245 26.4487914 77.7162819 26.4487914 81.3784127 26.4487914 84.5981182 24.4899632 86.408729 21.591676L91.0769231 24.5304306C88.2597439 29.0607332 83.310236 32 77.7162819 32 68.78242 32 61.5384615 25.0611173 61.5384615 16 61.5384615 6.93888266 68.78242 0 77.7162819 0 83.310236 0 88.2597439 2.97922203 91.0769231 7.46956939L86.408729 10.4487914z"/>
<path d="M77.5384615,11.0769231 C74.8194465,11.0769231 72.6153846,13.2809849 72.6153846,16 C72.6153846,18.7190151 74.8194465,20.9230769 77.5384615,20.9230769 C80.2574766,20.9230769 82.4615385,18.7190151 82.4615385,16 C82.4615385,13.2809849 80.2574766,11.0769231 77.5384615,11.0769231"/>
</g>
</svg>
</div>
<ul class="sidebar__menu ui list">
<li class="list__item">
<a href="" class="ui label _icon">
{{ macros.svg_icon('calendar') }}Панель управления
</a>
</li>
<li class="list__item">
<a href="" class="ui label _icon">
{{ macros.svg_icon('calendar') }}Расписание
</a>
</li>
<li class="list__item">
<a href="" class="ui label _icon">
{{ macros.svg_icon('calendar') }}Мои задания
</a>
</li>
</ul>
</nav>
77 changes: 77 additions & 0 deletions templates/v2/lms/layouts/_top-menu.jinja2
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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='') -%}
<div class="navbar-container_lms">
{% if show_notification %}
<div class="top-banner-wrapper">
<div class="container">
<div class="top-banner">
<img class="mr-2 d-none d-lg-inline-block" src="/static/v2/img/icons/top-banner-kids.svg" alt="csc-kids">
<div>До 14 апреля открыт <a href="#">приём заявок</a> на очное обучение в центре</div>
</div>
</div>
</div>
{% endif %}

<nav class="navbar navbar-main {% if theme_class %} {{ theme_class }}{% endif %}">
<div class="container">
<a href="" class="btn _extra-small _gray _outline _rounded navbar-lms__btn-back">
{{ macros.svg_icon('arrow-left') }}
<span>Все курсы</span>
</a>
<div class="navbar__title">
<p class="navbar__course" title="Дополнительные главы алгоритмов главы алгоритмов, часть 1">Дополнительные главы алгоритмов главы алгоритмов, часть 1</p>
<span class="navbar__meta">Санкт-Петербург / весна 2020</span>
</div>
{% if show_login_button %}
<a class="btn _outline menu-btn-reg" href="#">
{{ macros.svg_icon('user') }} Войти
</a>
{% else %}
<p class="members-area" href="#">Константинов В.К.</p>
<div class="dropdown dropdown-user-menu">
<button class="btn" type="button" id="userMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{%- if has_avatar -%}
<img class="user-menu-img" src="/media/pages/index/student.png" width="32" height="32" alt="">
{%- else -%}
{{ macros.svg_icon('user') }}
{%- endif -%}
</button>
<div class="dropdown-menu _arrow-right _user-menu" aria-labelledby="userMenuButton">
<a class="dropdown-item" href="#">Профиль</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Выйти</a>
</div>
</div>
{% endif %}
</div>
</nav>

{% if show_submenu %}
<nav class="navbar navbar-submenu">
<div class="container">
<ul class="ui navbar-nav">
<li class="nav-item _active">
<a class="nav-link" href="#">Занятия</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Задания</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Новости</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Описание курса</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ведомость</a>
</li>
</ul>

</div>
</nav>

{% endif %}
</div>
{% if show_notification %}<div class="top-banner-spacer"></div>{% endif %}
{%- endmacro %}
Loading