Skip to content

Commit 7aff9ef

Browse files
mikhailovSvyatmikhailovSvyat
committed
feat: add lms layout
1 parent 65aff54 commit 7aff9ef

File tree

7 files changed

+414
-7
lines changed

7 files changed

+414
-7
lines changed

‎src/v2/scss/_variables.scss‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,8 @@ $grid-breakpoints: (
154154
sm: 576px,
155155
md: 768px,
156156
lg: 992px, // XXX: Keep in sync with values from `v2/js/utils.js`
157-
xl: 1260px
157+
xl: 1260px,
158+
lms: 1222px // $grid-breakpoints(lg) + $sidebar-width
158159
);
159160

160161
// Custom breakpoints for more control, used on user cards page
@@ -295,12 +296,13 @@ $zindex-dropdown: 1000 !default;
295296
$zindex-sticky: 1020 !default;
296297
$zindex-cover: 1030 !default;
297298
$zindex-menu: 1040;
298-
$zindex-preloader: 1050;
299-
$zindex-modal-backdrop: 1060;
300-
$zindex-modal: 1070;
301-
$zindex-popover: 1080;
302-
$zindex-tooltip: 1090;
303-
$zindex-close: 1100;
299+
$zindex-sidebar: 1050;
300+
$zindex-preloader: 1060;
301+
$zindex-modal-backdrop: 1070;
302+
$zindex-modal: 1080;
303+
$zindex-popover: 1090;
304+
$zindex-tooltip: 1100;
305+
$zindex-close: 1110;
304306

305307

306308
// Utilities

‎src/v2/scss/lms/layouts/_menu.scss‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
$navbar-submenu-height: 40px;
2+
$navbar-main-height: 60px;
3+
$navbar-padding-y: 16px;
4+
$header-height: $navbar-main-height + $navbar-submenu-height + $navbar-padding-y * 2;
5+
6+
$nav-link-padding-x: spacer("2x");
7+
$nav-link-padding-y: spacer("2x");
8+
9+
$nav-link-border-height: spacer("1x");
10+
$nav-link-with-border-padding-y: $nav-link-padding-y - $nav-link-border-height;
11+
12+
$nav-link-expected-line-height: 24px;
13+
$__blinking-effect-fix: 4px;
14+
$nav-link-line-height: $nav-link-expected-line-height - $__blinking-effect-fix;
15+
$nav-link-margin: $__blinking-effect-fix / 2;
16+
17+
$menu-desktop-wrapper-margin: 2px;
18+
19+
$navbar-toggler-padding-y: $grid-gutter-width / 2 - 1; // humburger size is 18px, to fit in 8pt grid, remove px here
20+
$navbar-toggler-padding-x: $grid-gutter-width / 2;
21+
$navbar-toggler-font-size: $font-size-lg;
22+
$navbar-toggler-border-radius: $border-radius;
23+
24+
//Body attribute for fix header & sidebar
25+
._lms {
26+
min-width: map-get($grid-breakpoints, lms);
27+
28+
@include media-breakpoint-up(lms) {
29+
padding: $header-height 0 0 $sidebar-width;
30+
}
31+
padding: 0 0 0 $sidebar-width;
32+
margin-bottom: 0;
33+
34+
.container {
35+
min-width: map-get($grid-breakpoints, lg);
36+
max-width: map-get($grid-breakpoints, xl);
37+
padding: 0 spacer("10x");
38+
}
39+
}
40+
41+
.navbar-container_lms {
42+
width: 100%;
43+
@include media-breakpoint-up(lms) {
44+
position: fixed;
45+
top: 0;
46+
right: 0;
47+
left: 0;
48+
padding-left: $sidebar-width;
49+
z-index: $zindex-menu;
50+
}
51+
52+
.navbar.navbar-main {
53+
background-color: $white;
54+
border-bottom: 1px solid $gray-light;
55+
padding: $navbar-padding-y 0;
56+
57+
.container {
58+
display: flex;
59+
flex-wrap: nowrap;
60+
align-items: flex-start;
61+
height: $navbar-main-height;
62+
}
63+
64+
.navbar__title {
65+
width: 100%;
66+
overflow: hidden;
67+
padding-right: spacer("10x");
68+
margin-top: spacer("3x");
69+
line-height: $nav-link-line-height;
70+
}
71+
72+
.navbar__course {
73+
overflow: hidden;
74+
margin: 0;
75+
font-size: 18px;
76+
white-space: nowrap;
77+
text-overflow: ellipsis;
78+
}
79+
80+
.navbar__meta {
81+
font-size: 12px;
82+
color: $gray-dark;
83+
}
84+
85+
.navbar-lms__btn-back {
86+
flex-shrink: 0;
87+
margin: spacer("2x") spacer("4x") 0 0;
88+
}
89+
}
90+
91+
.navbar.navbar-submenu {
92+
display: flex;
93+
background-color: $white;
94+
border-bottom: 1px solid $gray-light;
95+
font-size: $font-size-base;
96+
97+
.navbar-nav {
98+
display: flex;
99+
flex-wrap: wrap;
100+
margin: 0;
101+
}
102+
103+
.nav-item {
104+
margin-right: spacer("4x");
105+
106+
&._active {
107+
.nav-link {
108+
padding: $nav-link-padding-y 0 $nav-link-with-border-padding-y;
109+
opacity: 1;
110+
border-bottom: $nav-link-border-height solid $teal;
111+
}
112+
}
113+
114+
.nav-link {
115+
display: flex;
116+
align-items: center;
117+
opacity: .5;
118+
white-space: nowrap;
119+
padding: $nav-link-padding-y 0;
120+
color: $black;
121+
122+
&:hover {
123+
opacity: 1;
124+
}
125+
126+
svg {
127+
margin-left: auto;
128+
}
129+
}
130+
}
131+
}
132+
133+
.members-area {
134+
display: flex;
135+
flex-shrink: 0;
136+
padding: $nav-link-padding-y $nav-link-padding-x;
137+
margin: ($nav-link-margin + $menu-desktop-wrapper-margin) 0 ($nav-link-margin + $menu-desktop-wrapper-margin) auto;
138+
line-height: $nav-link-line-height;
139+
color: $black;
140+
}
141+
142+
.dropdown-user-menu {
143+
margin-left: auto;
144+
margin-right: -$navbar-toggler-padding-x;
145+
146+
._user {
147+
margin-right: 4px;
148+
}
149+
150+
&.show {
151+
.btn {
152+
box-shadow: none;
153+
154+
.user-menu-img {
155+
box-shadow: 0 0 0 4px transparentize($gray-dark, .6);
156+
}
157+
}
158+
}
159+
160+
.dropdown-menu {
161+
font-size: $font-size-content-base;
162+
right: $navbar-toggler-padding-x;
163+
left: auto;
164+
}
165+
166+
.btn {
167+
color: $white;
168+
border: 0;
169+
background-color: rgba(0, 0, 0, 0);
170+
padding: $nav-link-padding-y $nav-link-padding-x;
171+
line-height: 30px;
172+
173+
.svg-icon {
174+
fill: $gray-light;
175+
}
176+
177+
&:focus {
178+
box-shadow: none;
179+
180+
.user-menu-img {
181+
box-shadow: 0 0 0 4px transparentize($gray-dark, .6);
182+
}
183+
}
184+
185+
span {
186+
margin-right: spacer("3x");
187+
}
188+
}
189+
}
190+
191+
.user-menu-img {
192+
border-radius: 50%;
193+
}
194+
}

‎src/v2/scss/lms/layouts/_sidebar.scss‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
$sidebar-width: 230px;
2+
3+
.sidebar {
4+
width: $sidebar-width;
5+
position: fixed;
6+
top: 0;
7+
bottom: 0;
8+
left: 0;
9+
background-color: $gray-darker;
10+
z-index: $zindex-sidebar;
11+
12+
.sidebar__logo {
13+
margin: spacer("6x") spacer("4x") spacer("2x");
14+
}
15+
16+
.sidebar__menu {
17+
margin: spacer("6x") 0;
18+
19+
.ui.label._icon {
20+
color: $white;
21+
}
22+
23+
.list__item {
24+
cursor: pointer;
25+
&:hover {
26+
background-color: $black;
27+
color: $white;
28+
29+
a.ui.label._icon {
30+
color: $white;
31+
32+
.sprite-img {
33+
fill: $white;
34+
}
35+
}
36+
}
37+
}
38+
39+
a.ui.label._icon {
40+
padding: spacer("2x") spacer("4x");
41+
}
42+
}
43+
}

‎src/v2/scss/main.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,3 +61,6 @@
6161
// TODO: Remove styles below from production build
6262
@import "pages/about";
6363
@import "pages/principles";
64+
65+
@import "lms/layouts/sidebar";
66+
@import "lms/layouts/menu";

‎templates/v2/lms/layouts/_sidebar.jinja2‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<nav class="sidebar">
2+
<div class="sidebar__logo">
3+
<svg xmlns="http://www.w3.org/2000/svg" width="92" height="32" viewBox="0 0 92 32">
4+
<g fill="#FFF" fill-rule="evenodd">
5+
<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"/>
6+
<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"/>
7+
</g>
8+
</svg>
9+
</div>
10+
<ul class="sidebar__menu ui list">
11+
<li class="list__item">
12+
<a href="" class="ui label _icon">
13+
{{ macros.svg_icon('calendar') }}Панель управления
14+
</a>
15+
</li>
16+
<li class="list__item">
17+
<a href="" class="ui label _icon">
18+
{{ macros.svg_icon('calendar') }}Расписание
19+
</a>
20+
</li>
21+
<li class="list__item">
22+
<a href="" class="ui label _icon">
23+
{{ macros.svg_icon('calendar') }}Мои задания
24+
</a>
25+
</li>
26+
</ul>
27+
</nav>

‎templates/v2/lms/layouts/_top-menu.jinja2‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
{% import "v2/macros/_global.jinja2" as macros %}
2+
3+
{% macro render(show_submenu=True, show_notification=True, show_login_button=False, has_avatar=True, theme_class='') -%}
4+
<div class="navbar-container_lms">
5+
{% if show_notification %}
6+
<div class="top-banner-wrapper">
7+
<div class="container">
8+
<div class="top-banner">
9+
<img class="mr-2 d-none d-lg-inline-block" src="/static/v2/img/icons/top-banner-kids.svg" alt="csc-kids">
10+
<div>До 14 апреля открыт <a href="#">приём заявок</a> на очное обучение в центре</div>
11+
</div>
12+
</div>
13+
</div>
14+
{% endif %}
15+
16+
<nav class="navbar navbar-main {% if theme_class %} {{ theme_class }}{% endif %}">
17+
<div class="container">
18+
<a href="" class="btn _extra-small _gray _outline _rounded navbar-lms__btn-back">
19+
{{ macros.svg_icon('arrow-left') }}
20+
<span>Все курсы</span>
21+
</a>
22+
<div class="navbar__title">
23+
<p class="navbar__course" title="Дополнительные главы алгоритмов главы алгоритмов, часть 1">Дополнительные главы алгоритмов главы алгоритмов, часть 1</p>
24+
<span class="navbar__meta">Санкт-Петербург / весна 2020</span>
25+
</div>
26+
{% if show_login_button %}
27+
<a class="btn _outline menu-btn-reg" href="#">
28+
{{ macros.svg_icon('user') }} Войти
29+
</a>
30+
{% else %}
31+
<p class="members-area" href="#">Константинов В.К.</p>
32+
<div class="dropdown dropdown-user-menu">
33+
<button class="btn" type="button" id="userMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
34+
{%- if has_avatar -%}
35+
<img class="user-menu-img" src="/media/pages/index/student.png" width="32" height="32" alt="">
36+
{%- else -%}
37+
{{ macros.svg_icon('user') }}
38+
{%- endif -%}
39+
</button>
40+
<div class="dropdown-menu _arrow-right _user-menu" aria-labelledby="userMenuButton">
41+
<a class="dropdown-item" href="#">Профиль</a>
42+
<div class="dropdown-divider"></div>
43+
<a class="dropdown-item" href="#">Выйти</a>
44+
</div>
45+
</div>
46+
{% endif %}
47+
</div>
48+
</nav>
49+
50+
{% if show_submenu %}
51+
<nav class="navbar navbar-submenu">
52+
<div class="container">
53+
<ul class="ui navbar-nav">
54+
<li class="nav-item _active">
55+
<a class="nav-link" href="#">Занятия</a>
56+
</li>
57+
<li class="nav-item">
58+
<a class="nav-link" href="#">Задания</a>
59+
</li>
60+
<li class="nav-item">
61+
<a class="nav-link" href="#">Новости</a>
62+
</li>
63+
<li class="nav-item">
64+
<a class="nav-link" href="#">Описание курса</a>
65+
</li>
66+
<li class="nav-item">
67+
<a class="nav-link" href="#">Ведомость</a>
68+
</li>
69+
</ul>
70+
71+
</div>
72+
</nav>
73+
74+
{% endif %}
75+
</div>
76+
{% if show_notification %}<div class="top-banner-spacer"></div>{% endif %}
77+
{%- endmacro %}

0 commit comments

Comments
 (0)