Add site

.gitignore

@@ -0,0 +1,4 @@
+/node_modules/
+/.git/
+/**/Thumbs.db
+/**/*.DS_Store

app/blocks/content/__feed-container/content__feed-container.css

@@ -0,0 +1,3 @@
+.content__feed-container {
+	list-style-type: none;
+}

app/blocks/content/__header-title/content__header-title.css

@@ -0,0 +1,5 @@
+.content__header-title {
+	padding-top: 39px;
+	padding-bottom: 25px;
+	padding-left: 23px;
+}

app/blocks/content/__header/content__header.css

@@ -0,0 +1,3 @@
+.content__header {
+
+}

app/blocks/content/content.css

@@ -0,0 +1,5 @@
+.content {
+	margin-bottom: 48px;
+
+	background: var(--background-dark-color);
+}

app/blocks/event-menu/--hide/event-menu--hide.css

@@ -0,0 +1,7 @@
+.event-menu--hide {
+	width: 100%;
+
+	position: absolute;
+
+	transform: translateY(100%);
+}

app/blocks/event-menu/__additional-text/event-menu__additional-text.css

@@ -0,0 +1,12 @@
+.event-menu__additional-text {
+	overflow: hidden;
+
+	font-family: var(--SF-Compact-Display-Semibold);
+	font-size: 14px;
+	line-height: 17px;
+
+	color: var(--grey-color);
+
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}

app/blocks/event-menu/__area-close-event-menu/event-menu__area-close-event-menu.css

@@ -0,0 +1,19 @@
+.event-menu__area-close-event-menu {
+	width: 100%;
+	height: 20px;
+
+	position: relative;
+}
+.event-menu__area-close-event-menu::before {
+	width: 10%;
+	height: 3px;
+
+	position: absolute;
+	bottom: 8px;
+	left: calc(50% - 5%);
+
+	border-radius: 5px;
+	background-color: var(--orange-color);
+
+	content: "";
+}

app/blocks/event-menu/__event-list/event-menu__event-list.css

@@ -0,0 +1,3 @@
+.event-menu__event-list {
+	list-style-type: none;
+}

app/blocks/event-menu/__header-menu/event-menu__header-menu.css

@@ -0,0 +1,7 @@
+.event-menu__header-menu {
+	max-height: 134px;
+	padding-top: 40px;
+	padding-right: 24px;
+	padding-bottom: 35px;
+	padding-left: 24px;
+}

app/blocks/event-menu/__scroll-container/event-menu__scroll-container.css

@@ -0,0 +1,13 @@
+.event-menu__scroll-container {
+	display: flex;
+	overflow-x: hidden;
+	overflow-y: scroll;
+
+	flex-direction: column;
+
+	width: 100%;
+	height: calc(100% - 154px);
+
+	border-top-left-radius: 15px;
+	border-top-right-radius: 15px;
+}

app/blocks/event-menu/__title-menu/event-menu__title-menu.css

@@ -0,0 +1,13 @@
+.event-menu__title-menu {
+	overflow: hidden;
+
+	margin-bottom: 11px;
+
+	font-size: 26px;
+	line-height: 31px;
+
+	color: var(--white-color);
+
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}

app/blocks/event-menu/event-menu.css

@@ -0,0 +1,7 @@
+.event-menu {
+	height: 100%;
+
+	position: relative;
+
+	transition: transform 1s;
+}

app/blocks/event-menu/event-menu.js

@@ -0,0 +1,39 @@
+document.addEventListener("DOMContentLoaded", function () {
+
+    // Объявляем необходимые переменные
+    let swipeArea = document.querySelector(".event-menu__area-close-event-menu");
+    let containerMapButton = document.querySelector(".map__button-container");
+    let eventMenuMap = document.querySelector(".event-menu");
+    let itemMap = document.querySelector(".map__container-map-item");
+    let mapMenuPositionTouchStart;
+    let mapMenuPositionTouchEnd;
+    let mapMenuResultSwipe;
+
+    // Добавляем области свайпа в меню ивентов обработчик события касания пальца
+    swipeArea.addEventListener("touchstart", mapMenuTouchStart, { passive: true });
+    // Добавляем области свайпа в меню ивентов обработчик события отпускания пальца
+    swipeArea.addEventListener("touchend", mapMenuTouchEnd, { passive: true });
+
+    function mapMenuTouchStart(e) {
+        // Считываем точку в которой пользователь коснулся экрана
+        mapMenuPositionTouchStart = e.changedTouches[0].pageY;
+    }
+
+    function mapMenuTouchEnd(e) {
+        // Считываем точку в которой пользователь отпустил палец
+        mapMenuPositionTouchEnd = e.changedTouches[0].pageY;
+        // Высчитываем разницу между точкой касания и точкой отпускания пальца
+        mapMenuResultSwipe = mapMenuPositionTouchEnd - mapMenuPositionTouchStart;
+        // Если результат больше 10, то произошёл свайп вниз
+        if(mapMenuResultSwipe > 10) {
+            // Добавляем класс для скрытия меню ивентов
+            eventMenuMap.classList.add("event-menu--hide");
+            // Когда меню скрыто, показываем кнопки на карте
+            setTimeout(() => {
+                itemMap.classList.remove("map__container-map-item--hide");
+                containerMapButton.classList.remove("map__button-container--hide")
+            }, 300);
+        }
+    }
+
+});

app/blocks/feed-item/--first/feed-item--first.css

@@ -0,0 +1,3 @@
+.feed-item--first {
+	border-top: none;
+}

app/blocks/feed-item/__additional-icon/feed-item__additional-icon.css

@@ -0,0 +1,5 @@
+.feed-item__additional-icon {
+	width: 9px;
+	height: 10px;
+	margin-left: auto;
+}

app/blocks/feed-item/__additional-label-container/--hide/feed-item__additional-label-container--hide.css

@@ -0,0 +1,3 @@
+.feed-item__additional-label-container--hide {
+	transform: translateX(200%);
+}

app/blocks/feed-item/__additional-label-container/--recommends/feed-item__additional-label-container--recommends.css

@@ -0,0 +1,6 @@
+.feed-item__additional-label-container--recommends {
+	margin-bottom: 24px;
+	padding-right: 0px;
+
+	position: static;
+}

app/blocks/feed-item/__additional-label-container/feed-item__additional-label-container.css

@@ -0,0 +1,14 @@
+.feed-item__additional-label-container {
+	display: flex;
+
+	align-items: center;
+
+	width: 100%;
+	padding-right: 12px;
+
+	position: absolute;
+	left: 0;
+
+	transition: transform 0.3s;
+	transform: translateY(0);;
+}

app/blocks/feed-item/__additional-text/feed-item__additional-text.css

@@ -0,0 +1,6 @@
+.feed-item__additional-text {
+	font-family: var(--SF-Compact-Display-Regular);
+	font-size: 14px;
+
+	color: var(--grey-color);
+}

app/blocks/feed-item/__bookmark-button-icon/feed-item__bookmark-button-icon.css

@@ -0,0 +1,3 @@
+.feed-item__bookmark-button-icon {
+	transform: matrix(1, 0, 0, -1, 0, 0);
+}

app/blocks/feed-item/__bookmark-button/--active/feed-item__bookmark-button--active.css

@@ -0,0 +1,3 @@
+.feed-item__bookmark-button--active {
+	transform: translateX(0);
+}

app/blocks/feed-item/__bookmark-button/feed-item__bookmark-button.css

@@ -0,0 +1,13 @@
+.feed-item__bookmark-button {
+	width: 128px;
+	height: 100%;
+
+	position: absolute;
+
+	border: none;
+	background: var(--orange-bookmark-gradient);
+
+	transition: transform 0.3s;
+	transform: matrix(1, 0, 0, -1, 0, 0);
+	transform: translateX(-200%);
+}

app/blocks/feed-item/__content/--event/feed-item__content--event.css

@@ -0,0 +1,5 @@
+.feed-item__content--event {
+	padding-top: 24px;
+	padding-bottom: 24px;
+	padding-left: 24px;
+}

app/blocks/feed-item/__content/--music/feed-item__content--music.css

@@ -0,0 +1,4 @@
+.feed-item__content--music {
+	padding-top: 24px;
+	padding-bottom: 24px;
+}

app/blocks/feed-item/__content/--swipe/feed-item__content--swipe.css

@@ -0,0 +1,3 @@
+.feed-item__content--swipe {
+	transform: translateX(128px);
+}

app/blocks/feed-item/__content/--video/feed-item__content--video.css

@@ -0,0 +1,4 @@
+.feed-item__content--video {
+	padding-top: 24px;
+	padding-bottom: 51px;
+}

app/blocks/feed-item/__content/feed-item__content.css

@@ -0,0 +1,11 @@
+.feed-item__content {
+	padding-right: 12px;
+	padding-left: 12px;
+
+	position: relative;
+
+	transition: transform 0.3s;
+	transform: translateX(0);
+
+	will-change: transform;
+}

app/blocks/feed-item/__icon-new-event-container/--hide/feed-item__icon-new-event-container--hide.css

@@ -0,0 +1,3 @@
+.feed-item__icon-new-event-container--hide {
+	transform: translateX(200%);
+}

app/blocks/feed-item/__icon-new-event-container/feed-item__icon-new-event-container.css

@@ -0,0 +1,15 @@
+.feed-item__icon-new-event-container {
+	display: flex;
+
+	align-items: center;
+
+	width: 100%;
+	padding-right: 12px;
+
+	position: absolute;
+	top: 24px;
+	left: 0;
+
+	transition: transform 0.3s;
+	transform: translateX(0);
+}

app/blocks/feed-item/__icon-new-event/feed-item__icon-new-event.css

@@ -0,0 +1,8 @@
+.feed-item__icon-new-event {
+	width: 11px;
+	height: 11px;
+	margin-left: auto;
+
+	border-radius: 100%;
+	background-color: var(--blue-color);
+}

app/blocks/feed-item/__image/--event/feed-item__image--event.css

@@ -0,0 +1,4 @@
+.feed-item__image--event {
+	width: 124px;
+	height: 168px;
+}

app/blocks/feed-item/__image/--music/feed-item__image--music.css

@@ -0,0 +1,4 @@
+.feed-item__image--music {
+	width: 80px;
+	height: 80px;
+}

app/blocks/feed-item/__image/--video/feed-item__image--video.css

@@ -0,0 +1,4 @@
+.feed-item__image--video {
+	width: 188px;
+	height: 120px;
+}

app/blocks/feed-item/__image/feed-item__image.css

@@ -0,0 +1,4 @@
+.feed-item__image {
+	opacity: 0.4;
+	border-radius: 8px;
+}

app/blocks/feed-item/__text-container/--event/feed-item__text-container--event.css

@@ -0,0 +1,4 @@
+.feed-item__text-container--event {
+	bottom: 43px;
+	left: 72px;
+}

app/blocks/feed-item/__text-container/--music/feed-item__text-container--music.css

@@ -0,0 +1,4 @@
+.feed-item__text-container--music {
+	bottom: 41px;
+	left: 72px;
+}

app/blocks/feed-item/__text-container/--video/feed-item__text-container--video.css

@@ -0,0 +1,4 @@
+.feed-item__text-container--video {
+	bottom: 17px;
+	left: 72px;
+}

app/blocks/feed-item/__text-container/feed-item__text-container.css

@@ -0,0 +1,3 @@
+.feed-item__text-container {
+	position: absolute;
+}

app/blocks/feed-item/__text-media/feed-media__text-media.css

@@ -0,0 +1,7 @@
+.feed-media__text-media {
+	font-family: var(--SF-Compact-Display-Semibold);
+	font-size: 14px;
+	line-height: 16px;
+
+	color: var(--grey-color);
+}

app/blocks/feed-item/__title-media/--event/feed-item__title-media--event.css

@@ -0,0 +1,3 @@
+.feed-item__title-media--event {
+	margin-bottom: 55px;
+}

app/blocks/feed-item/__title-media/--music/feed-item__title-media--music.css

@@ -0,0 +1,3 @@
+.feed-item__title-media--music {
+	margin-bottom: 3px;
+}

app/blocks/feed-item/__title-media/--uni-neue/feed-item__title-media--uni-neue.css

@@ -0,0 +1,4 @@
+.feed-item__title-media--uni-neue {
+	font-family: var(--Uni-Neue-Heavy);
+	font-size: 22px;
+}

app/blocks/feed-item/__title-media/--video/feed-item__title-media--video.css

@@ -0,0 +1,3 @@
+.feed-item__title-media--video {
+	margin-bottom: 8px;
+}

app/blocks/feed-item/__title-media/feed-item__title-media.css

@@ -0,0 +1,4 @@
+.feed-item__title-media {
+	font-size: 18px;
+	line-height: 21px;
+}