LIL-131 - Якоря для главного меню

project/templates/lilcity/index.html

@@ -82,34 +82,34 @@
           <nav class="header__nav">
             <div class="header__group"><a class="header__section header__section_sub js-header-section {% active_link 'index' %}" href="{% url 'index' %}">ОНЛАЙН-ШКОЛА</a>
               <div class="header__list js-header-list">
-                <a class="header__link" href="#">
+                <a class="header__link" data-scroll href="/#about">
                   <div class="header__title">О школе</div>
                 </a>
-                <a class="header__link" href="#">
+                <a class="header__link" href="/">
                   <div class="header__title">Процесс</div>
                 </a>
-                <a class="header__link" href="#">
+                <a class="header__link" href="/#advantages">
                   <div class="header__title">Преимущества</div>
                 </a>
-                <a class="header__link" href="#">
+                <a class="header__link" href="/#reviews">
                   <div class="header__title">Отзывы</div>
                 </a>
-                <a class="header__link" href="#">
+                <a class="header__link" href="/#gallery">
                   <div class="header__title">Галерея</div>
                 </a>
-                <a class="header__link active" href="#">
+                <a class="header__link active" href="/#schedule">
                   <div class="header__title">Расписание</div>
                 </a>
-                <a class="header__link" href="#">
+                <a class="header__link" href="/#teachers">
                   <div class="header__title">Преподаватели</div>
                 </a>
-                <a class="header__link" href="#">
+                <a class="header__link" href="/#">
                   <div class="header__title">Частые вопросы</div>
                 </a>
-                <a class="header__link" href="#">
+                <a class="header__link" href="/#">
                   <div class="header__title">Оплата</div>
                 </a>
-                <a class="header__link" href="#">
+                <a class="header__link" href="/#">
                   <div class="header__title">Контакты</div>
                 </a>
               </div>

project/templates/lilcity/main.html

@@ -16,7 +16,8 @@
         искусств. </p>
       <img class="text__curve text__curve_one" src="{% static 'img/curve-1.svg' %}" width="320">
     </div>
-    <div class="title title_center">О школе</div>
+    <a id="about" name="about">
+      <div class="title title_center">О школе</div></a>
     <div class="about">
       <div class="about__ava ava">
         <img class="ava__pic" src="{% static 'img/user.jpg' %}">
@@ -62,7 +63,9 @@
 </a>
 <div class="section">
   <div class="section__center center">
-    <div class="title title_center">Преимущества</div>
+    <a id="advantages" name="advantages">
+      <div class="title title_center">Преимущества</div>
+    </a>
     <div class="text">
       <p>Если цените время и стремитесь быть продуктивными, то онлайн-образование это выбор прогрессивного человека для достижения
         необходимых результатов.</p>
@@ -116,7 +119,9 @@
 </div>
 <div class="section section_review">
   <div class="section__center center center_md">
-    <div class="title title_center">Отзывы</div>
+    <a id="reviews" name="reviews">
+      <div class="title title_center">Отзывы</div>
+    </a>
     <div class="text">Мы получаем сотни тёплых отзывов от довольных родителей. Их можно почитать
       <a href="#">здесь;)</a>
     </div>
@@ -164,7 +169,8 @@
 </div>
 <div class="section">
   <div class="section__center center">
-    <div class="title title_center">Галерея</div>
+    <a id="gallery" name="gallery">
+      <div class="title title_center">Галерея</div></a>
     <div class="text">
       <p>Тысячи шедевров уже созданы благодаря Lil City School. Более 10000 работ можно
         <a href='#'>увидеть</a> в Инстаграм</p>
@@ -239,7 +245,9 @@
 </div>
 <div class="section">
   <div class="section__center center center_md">
-    <div class="title title_center">Преподаватели</div>
+    <a id="teachers" name="teachers">
+      <div class="title title_center">Преподаватели</div>
+    </a>
     <div class="text">
       <p>Преподаватели Lil City School имеют большой опыт, поэтому с первых минут детям будет интересно с нами.</p>
       <img class="text__curve text__curve_three" src="{% static 'img/curve-3.svg' %}">
@@ -321,7 +329,9 @@
 </div>
 <div class="section section_gray">
   <div class="section__center center center_md">
-    <div class="title title_center">Расписание</div>
+    <a id="schedule" name="schedule">
+      <div class="title title_center">Расписание</div>
+    </a>
     <div class="schedule">
       <div class="schedule__item">
         <div class="schedule__day">Понедельник</div>

web/package-lock.json

@@ -8938,6 +8938,11 @@
       "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=",
       "dev": true
     },
+    "smooth-scroll": {
+      "version": "12.1.5",
+      "resolved": "https://registry.npmjs.org/smooth-scroll/-/smooth-scroll-12.1.5.tgz",
+      "integrity": "sha1-ttjeyjcant1eo60pHvD7fnQe1B4="
+    },
     "snapdragon": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.1.tgz",

web/package.json

@@ -48,6 +48,7 @@
     "jquery": "^3.3.1",
     "moment": "^2.20.1",
     "owl.carousel": "^2.2.0",
+    "smooth-scroll": "^12.1.5",
     "validator": "^9.2.0"
   }
 }

web/src/js/modules/comments.js

@@ -29,6 +29,7 @@ $(document).ready(function () {
                     }
 
                     commentTextarea.val('');
+                    reset_form();
                 }
             })
             .fail(function (xhr) {
@@ -44,6 +45,7 @@ $(document).ready(function () {
     $('.questions__list').on('click', 'button.question__reply-button', function () {
         const replyId = $(this).attr('data-reply-id');
         const form = $('form.questions__form');
+        form.find('textarea.questions__textarea').focus();
         form.find('input[name=reply_id]').val(replyId);
         form.find('.questions__reply-anchor').attr('href', `#question__${replyId}`);
         form.find('.questions__reply-info').show();
@@ -52,9 +54,12 @@ $(document).ready(function () {
     // Обработчик отмены комментирования в ответ на комментарий
     $('.questions__reply-cancel').on('click', function (e) {
         e.preventDefault();
+        reset_form();
+    });
 
+    function reset_form() {
         const form = $('form.questions__form');
         form.find('input[name=reply_id]').val(0);
         form.find('.questions__reply-info').hide();
-    });
+    }
 });

web/src/js/modules/common.js

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import SmoothScroll from 'smooth-scroll/dist/js/smooth-scroll';
 
 $(document).ready(function () {
     // Добавляем заголовок X-CSRFToken для всех AJAX запросов JQuery.
@@ -7,4 +8,15 @@ $(document).ready(function () {
             'X-CSRFToken': $('meta[name="csrf-token"]').attr('content')
         }
     });
+
+    const scroll = new SmoothScroll('a[href*="#"]', {
+        // Selectors
+        ignore: '[data-scroll-ignore]', // Selector for links to ignore (must be a valid CSS selector)
+        header: null, // Selector for fixed headers (must be a valid CSS selector)
+
+        // Speed & Easing
+        speed: 500, // Integer. How fast to complete the scroll in milliseconds
+        offset: 20, // Integer or Function returning an integer. How far to offset the scrolling anchor location in pixels
+        easing: 'easeInOutCubic', // Easing pattern to use
+    });
 });