0.0.118

static/aerbimCSS.css

@@ -434,7 +434,6 @@ body.n_scroll{
 }
 
 .photo_container_descript_process{
-    background: #ffffff;
     text-align: center;
     width: 150px;
     height: 150px;
@@ -1392,3 +1391,76 @@ body.n_scroll{
 
 /* examples project*/
 
+.b_projects_slider{
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.right_part_b_projects_slider{
+    transform: rotate(180deg);
+}
+
+.info_part_b_projects_slider{
+    padding: 0 30px;
+    width: 87%;
+}
+
+.el_container_projects_slider{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    flex-direction: row;
+}
+.el_container_projects_slider.hide{
+    display: none;
+}
+
+.left_part_proj{
+    width: 47.5%;
+    margin-right: 2.5%;
+}
+
+.title_proj{
+    font-size: 16px;
+    font-weight: 500;
+    color: #0C54A0;
+    border-radius: 5px;
+    background: rgba(0, 63, 129, 0.30);
+    padding: 5px;
+    width: 158px;
+    margin-bottom: 15px;
+}
+
+.name_proj{
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 30px;
+    text-transform: uppercase;
+}
+
+.task_title{
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 15px;
+}
+
+.task_description{
+    font-size: 14px;
+    font-weight: 400;
+}
+
+.right_part_proj{
+    width: 47.5%;
+    margin-left: 2.5%;
+}
+
+.img_proj{
+    width: 100%;
+    height: 100%;
+    object-fit: scale-down;
+    object-position: center;
+}

static/aerbimJS.js

@@ -313,4 +313,34 @@ function resetForm () {
     if (btn_form.classList.contains("hide")){
         btn_form.classList.remove('hide')
     }
+}
+
+function changeSlideProject (el,type) {
+    let cur_slide = document.querySelector(".el_container_projects_slider.show")
+
+    let dataset = cur_slide.dataset
+    if (dataset){
+        let index_cur_slide = parseInt(dataset['indexSlideProj'])
+        let count_slides = parseInt(dataset['countSlidesProj'])
+        let slide_f_processing = null
+        if (type === 'next'){
+            if (!index_cur_slide + 1 > count_slides){
+                slide_f_processing = document.querySelector(`[data-index-slide-proj="${index_cur_slide++}"]`)
+            } else {
+                slide_f_processing = document.querySelector(`[data-index-slide-proj="1"]`)
+            }
+        } else if (type === 'back'){
+            if (index_cur_slide - 1 !== 0){
+                slide_f_processing = document.querySelector(`[data-index-slide-proj="${index_cur_slide--}"]`)
+            } else {
+                slide_f_processing = document.querySelector(`[data-index-slide-proj="${count_slides}"]`)
+            }
+        }
+        if (slide_f_processing){
+            slide_f_processing.classList.toggle("show")
+            slide_f_processing.classList.toggle("hide")
+            cur_slide.classList.toggle("show")
+            cur_slide.classList.toggle("hide")
+        }
+    }
 }

static/images/arrow_slider_projects.svg

@@ -0,0 +1,6 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 8647">
+<circle id="Ellipse 169" cx="25" cy="25" r="24.5" transform="rotate(-180 25 25)" stroke="#C1C1C1"/>
+<path id="Rectangle 251" d="M28.3934 35.6066L17.7868 25L28.3934 14.3934" stroke="#C1C1C1" stroke-width="3" stroke-linecap="round"/>
+</g>
+</svg>

templates/blocks/b_projects.html

@@ -1,9 +1,28 @@
-<div>
-    {% for project in page.get_projects %}
-        <div>
-            {{ project.name }}
-            {{ project.description|safe|linebreaksbr }}
-            <img src="{{ MEDIA_URL }}{{ project.picture }}" alt="{{ project.name }}" />
-        </div>
-    {% endfor %}
+{#<div>#}
+{#    {% for project in page.get_projects %}#}
+{#        <div>#}
+{#            {{ project.name }}#}
+{#            {{ project.description|safe|linebreaksbr }}#}
+{#            <img src="{{ MEDIA_URL }}{{ project.picture }}" alt="{{ project.name }}" />#}
+{#        </div>#}
+{#    {% endfor %}#}
+{#</div>#}
+{% load static %}
+<div {% include "block_settings/blocks_settings.html" %}>
+    <div class="cut-width">
+         <div class="b_projects_slider">
+             <div class="left_part_b_projects_slider">
+                 <img onclick="changeSlideProject(this,'back')" class="left_arrow_proj" src="{% static "images/arrow_slider_projects.svg" %}" alt="">
+             </div>
+             <div class="info_part_b_projects_slider">
+                 {% for project in page.get_projects %}
+                    {% include 'widgets/w_project.html' %}
+                 {% endfor %}
+             </div>
+             <div class="right_part_b_projects_slider">
+                 <img onclick="changeSlideProject(this,'next')" class="right_arrow_proj" src="{% static "images/arrow_slider_projects.svg" %}" alt="">
+             </div>
+             
+         </div>
+    </div>
 </div>

templates/widgets/w_project.html

@@ -0,0 +1,15 @@
+{% load static %}
+{% load i18n %}
+
+<div class="el_container_projects_slider{% if not forloop.first %} hide{% else %} show{% endif %}" data-index-slide-proj="{{ forloop.counter }}" data-count-slides-proj="{{ page.get_projects|length }}">
+    <div class="left_part_proj">
+        <div class="title_proj">{% translate "Примеры проектов" %}</div>
+        <div class="name_proj">{{ project.name }}</div>
+        <div class="task_title">{% translate "Задача" %}</div>
+        <div class="task_description">{{ project.description|safe|linebreaksbr }}</div>
+    </div>
+    <div class="right_part_proj">
+        <img class="img_proj" src="{{ MEDIA_URL }}{{ project.picture }}" alt="">
+    </div>
+
+</div>