Skip to content

D
default2
Commit 8ddad0f7 authored by Yuri Bondarenko's avatar Yuri Bondarenko
Browse files
Options

ms-map

parent 972748fd
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1879 additions and 66 deletions
.eslintrc.json
View file @ 8ddad0f7
{
"parserOptions": {
"ecmaVersion": 8,
"ecmaVersion": 9,
"sourceType": "module",
"ecmaFeatures": {}
},
......
gulpfile.js
View file @ 8ddad0f7
......@@ -83,9 +83,7 @@ const Clean = cb => {
};
task("CLEAN", Clean);
/**
* CSS
*/
// ========================== CSS ============================
const devCss = cb => {
cb();
return src("./src/assets/css/*.css")
......@@ -136,7 +134,16 @@ const prodJs = cb => {
// Оптимизация картинок для dev
const devImgComponents = cb => {
cb();
return src(["./src/assets/img/**/*", "./src/components/**/*.png", "./src/components/**/*.jpg", "./src/components/**/*.jpeg", "./src/components/**/*.gif", "./src/components/**/*.svg"])
// prettier-ignore
return src([
"node_modules/lightgallery.js/dist/img/*",
"./src/assets/img/**/*",
"./src/components/**/*.png",
"./src/components/**/*.jpg",
"./src/components/**/*.jpeg",
"./src/components/**/*.gif",
"./src/components/**/*.svg"
])
.pipe(cache(imagemin()))
.pipe(dest("./dev/assets/img"));
};
......@@ -144,11 +151,41 @@ const devImgComponents = cb => {
// Оптимизация картинок для prod
const prodImgComponents = cb => {
cb();
return src(["src/assets/img/**/*", "src/components/**/*.png", "src/components/**/*.jpg", "src/components/**/*.jpeg", "src/components/**/*.gif", "src/components/**/*.svg"])
// prettier-ignore
return src([
"node_modules/lightgallery.js/dist/img/*",
"src/assets/img/**/*",
"src/components/**/*.png",
"src/components/**/*.jpg",
"src/components/**/*.jpeg",
"src/components/**/*.gif",
"src/components/**/*.svg"
])
.pipe(cache(imagemin()))
.pipe(dest("prod/assets/img"));
};
// ================== FONTS ============================
const devFonts = cb => {
cb();
// prettier-ignore
return src([
"node_modules/lightgallery.js/dist/fonts/*",
"src/assets/fonts/**/*"
])
.pipe(dest("dev/assets/fonts"));
};
const prodFonts = cb => {
cb();
// prettier-ignore
return src([
"node_modules/lightgallery.js/dist/fonts/*",
"src/assets/fonts/**/*"
])
.pipe(dest("prod/assets/fonts"));
};
// ================== HTML ============================
// HTML для dev
const devHtml = () => {
......@@ -185,7 +222,7 @@ function browserSyncReload(done) {
task(
"DEV",
series(devImgComponents, devCss, devJs, devHtml, () => {
series(devImgComponents, devFonts, devCss, devJs, devHtml, () => {
watch(["./src/assets/css/*.css", "./src/components/**/*.css"], devCss);
watch(["./src/assets/js/*.js", "./src/components/**/*.js"], devJs);
watch("./src/**/*.html", series(devHtml, browserSyncReload));
......@@ -197,4 +234,4 @@ task(
// ================== PROD ============================
// Публикация на prod
task("PROD", series(prodImgComponents, prodCss, prodJs, prodHtml));
task("PROD", series(prodImgComponents, prodFonts, prodCss, prodJs, prodHtml));
package-lock.json
View file @ 8ddad0f7
This diff is collapsed.
src/assets/css/app.css
View file @ 8ddad0f7
/* Vendor Css */
@import url("../../../node_modules/swiper/dist/css/swiper.min.css");
@import url("../../../node_modules/lightgallery.js/dist/css/lightgallery.min.css");
/* Project CSS */
@import url("../../components/ms-header/ms-header.css");
......
src/assets/js/app.js
View file @ 8ddad0f7
import msMiniGallery from "../../components/ms-mini-gallery/ms-mini-gallery";
import msInfoCarousel from "../../components/ms-info-carousel/ms-info-carousel";
import msMap from "../../components/ms-map/ms-map";
document.addEventListener("DOMContentLoaded", async () => {
/**
......@@ -38,4 +39,12 @@ document.addEventListener("DOMContentLoaded", async () => {
}
}
});
/**
* карта
*/
new msMap({
mapId: "5cc82180e6b9d406cb074a77",
templateFolder: "acapella-2019"
});
});
src/components/ms-info-carousel/ms-info-carousel.html
View file @ 8ddad0f7
<section class="ms-info-carousel swiper-container">
<!-- prettier-ignore -->
<div class="ms-info-carousel__list swiper-wrapper">
<div class="ms-info-carousel__list swiper-wrapper" id="ms-ingo-carousel__gallery">
@@include( 'ms-info-carousel__item.html', {
"title": "Идея фестиваля",
......
src/components/ms-info-carousel/ms-info-carousel.js
View file @ 8ddad0f7
......@@ -2,6 +2,9 @@
*
*/
import { Swiper, Navigation, Pagination, Scrollbar } from "swiper/dist/js/swiper.esm.js";
// import lightGallery from "lightgallery.js/dist/js/lightgallery";
import "lightgallery.js";
import "lg-thumbnail.js";
/**
*
......@@ -14,5 +17,11 @@ Swiper.use([Navigation, Pagination, Scrollbar]);
export default class msMiniGallery {
constructor(selector, options) {
new Swiper(selector, options);
/* global lightGallery */
lightGallery(document.getElementById("ms-ingo-carousel__gallery"), {
thumbnail: true,
selector: ".ms-info-carousel__picture"
});
}
}
src/components/ms-info-carousel/ms-info-carousel__item.html
View file @ 8ddad0f7
......@@ -5,7 +5,7 @@
@@dscr
</div>
</div>
<div class="ms-info-carousel__picture">
<div class="ms-info-carousel__picture" data-src="@@img">
<img src="@@img" alt="@@title" />
</div>
</div>
src/components/ms-map/close.svg 0 → 100644
View file @ 8ddad0f7
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.279552 1.6281C-0.0928893 1.25565 -0.0928895 0.651787 0.279552 0.279337C0.651994 -0.0931125 1.25584 -0.0931125 1.62828 0.279338L9.72067 8.3719C10.0931 8.74435 10.0931 9.34821 9.72067 9.72066C9.34823 10.0931 8.74438 10.0931 8.37194 9.72066L0.279552 1.6281Z" fill="#B6B6B6"/>
<path d="M9.72045 1.6281C10.0929 1.25565 10.0929 0.651787 9.72045 0.279337C9.34801 -0.0931125 8.74416 -0.0931125 8.37172 0.279338L0.279331 8.3719C-0.0931103 8.74435 -0.0931105 9.34821 0.279331 9.72066C0.651773 10.0931 1.25562 10.0931 1.62806 9.72066L9.72045 1.6281Z" fill="#B6B6B6"/>
</svg>
src/components/ms-map/icon-pin-active.svg 0 → 100644
View file @ 8ddad0f7
<svg width="39" height="53" viewBox="0 0 39 53" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M36.8135 10.6C33.6225 4.29889 27.4771 0.353333 20.5044 0C19.8544 0 19.2044 0 18.4953 0C11.4635 0.294444 5.37709 4.29889 2.18618 10.6C-1.12291 17.0778 -0.650183 24.5567 3.42709 30.6222L18.0225 52.2344C18.3771 52.7056 18.9089 53 19.4998 53C20.0907 53 20.6225 52.7056 20.9771 52.2344L35.5725 30.6222C39.6498 24.6156 40.0635 17.1367 36.8135 10.6ZM19.4998 24.1444C15.8953 24.1444 12.9998 21.2589 12.9998 17.6667C12.9998 14.0744 15.8953 11.1889 19.4998 11.1889C23.1044 11.1889 25.9998 14.0744 25.9998 17.6667C25.9998 21.2589 23.1044 24.1444 19.4998 24.1444Z" fill="#F04E43"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="39" height="53" fill="white"/>
</clipPath>
</defs>
</svg>
src/components/ms-map/icon-pin.svg 0 → 100644
View file @ 8ddad0f7
<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8" r="8" fill="#F04E43"/>
<g filter="url(#filter0_d)">
<circle cx="8" cy="8" r="3.5" fill="white"/>
</g>
<defs>
<filter id="filter0_d" x="0.5" y="4.5" width="15" height="15" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
src/components/ms-map/map-city.svg 0 → 100644
View file @ 8ddad0f7
This diff is collapsed.
src/components/ms-map/map-pattern.svg 0 → 100644
View file @ 8ddad0f7
This diff is collapsed.
src/components/ms-map/ms-map.html 0 → 100644
View file @ 8ddad0f7
<section class="ms-map" id="ms-map">
<div class="ms-map__inner">
<div class="ms-map__container" id="ms-map__container"></div>
<div class="ms-map__event" id="map-event">
<button class="ms-map__close"></button>
<div class="ms-map__event-inner">
</div>
</div>
</div>
</section>
\ No newline at end of file
src/components/ms-map/ms-map.js 0 → 100644
View file @ 8ddad0f7
This diff is collapsed.
src/components/ms-map/ms-map.less 0 → 100644
View file @ 8ddad0f7
.ms-map {
position: relative;
padding: 0 65px 120px;
margin-bottom: 80px;
@media @m {
padding: 0 40px 90px;
margin-bottom: 70px;
}
@media @s {
padding: 0 15px 60px;
margin-bottom: 60px;
}
&::before {
content: "";
display: block;
position: absolute;
top: -300px;
bottom: 0;
left: 0;
width: 520px;
background-image: url('@@path/img/ms-map/map-pattern.svg');
background-repeat: no-repeat;
background-position: top left;
background-size: 100% auto;
z-index: 0;
@media @m {
background-size: 80% auto;
}
}
&::after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 400px;
background-color: #F4F5F6;
background-image: url('@@path/img/ms-map/map-city.svg');
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% auto;
z-index: 0;
}
h2 {
font-size: 40px;
font-weight: normal;
margin-top: 0;
margin-bottom: 20px;
font-family: @f-circe;
color: #111;
padding: 0 60px 0 60px;
@media @xl {
padding: 0 4.16666vw 0 5.55555vw;
}
@media @m {
margin-top: 0;
}
@media @s {
font-size: 28px;
}
}
&__inner {
position: relative;
}
&__container {
width: 100%;
height: 650px;
border-radius: 6px;
overflow: hidden;
position: relative;
z-index: 1;
@media @m {
width: 100%;
margin: 0;
height: 720 / 768 * 100vw;
overflow: hidden;
}
@media @s {
height: 85vh;
width: 100%;
margin: 0;
border-radius: 0;
}
}
&__event {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
width: 470px;
height: auto;
color: black;
font-family: 'Muller';
text-align: justify;
display: none;
background: white;
box-shadow: 0 30px 40px rgba(0, 0, 0, 0.1);
z-index: 3;
@media @m {
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
width: auto;
}
@media @s {
display: none;
padding: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
transform: none;
z-index: 999999;
height: 100%;
}
&-inner {
padding: 30px;
text-align: center;
max-width: 450px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
@media @m {
align-items: center;
justify-content: flex-start;
text-align: left;
}
@media @s {
overflow-y: auto;
display: block;
padding: 15px 20px;
}
}
&-img {
width: 100%;
min-height: 220px;
background-size: cover;
background-position: center;
margin-bottom: 20px;
@media @m {
min-height: 200px;
min-width: 200px;
//margin-right: 20px;
margin-bottom: 30px;
}
@media @s {
min-height: 200px;
min-width: 200px;
margin-right: 0;
margin-bottom: 20px;
}
}
&-title {
font-size: 21px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 20px;
margin-top: 15px;
text-align: left;
@media @m {
padding-right: 30px;
}
@media @s {
font-size: 20px;
line-height: 1.2;
}
}
&-address {
font-size: 13px;
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 20px;
text-align: left;
font-weight: 400;
@media @m {
justify-content: flex-start;
}
@media @s {
font-size: 14px;
}
&::before {
content: '';
display: block;
width: 12px;
min-width: 12px;
height: 15px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='15' viewBox='0 0 12 15' fill='none'%3E%3Cpath d='M5.50405 14.975C4.90405 14.175 4.40405 13.375 3.80405 12.675C3.00405 11.475 2.10405 10.275 1.30405 9.075C0.704052 8.275 0.204052 7.375 0.104052 6.375C-0.0959482 5.475 0.00405183 4.475 0.304052 3.575C0.704052 2.475 1.50405 1.575 2.50405 0.875C3.10405 0.475 3.80405 0.175 4.50405 0.075C5.80405 -0.125 7.00405 0.075 8.20405 0.675C9.70405 1.475 10.6041 2.775 11.0041 4.475C11.4041 6.175 10.9041 7.775 9.90405 9.175C9.20405 10.175 8.40405 11.175 7.70405 12.175C7.00405 12.975 6.40405 13.875 5.70405 14.775C5.70405 14.875 5.60405 14.875 5.50405 14.975ZM5.60405 2.975C4.10405 2.875 3.00405 4.175 3.00405 5.475C3.00405 6.975 4.30405 8.075 5.50405 8.075C6.90405 8.075 8.10405 6.975 8.10405 5.475C8.10405 4.075 7.00405 2.875 5.60405 2.975Z' fill='%23F34640'/%3E%3C/svg%3E");
margin-right: 10px;
}
&--empty {
margin-top: 30px;
}
}
&-dscr {
margin-bottom: 15px;
font-size: 14px;
line-height: 21 / 14;
text-align: left;
font-weight: 400;
@media @s {
font-size: 16px;
line-height: 1.3;
}
}
&-more {
color: #A0C548;
font-size: 16px;
font-weight: 700;
text-decoration: none;
display: flex;
align-items: center;
justify-content: flex-start;
@media @m {
justify-content: flex-start;
}
&::after {
content: "";
display: block;
width: 8px;
height: 13px;
border-radius: 50%;
margin-left: 10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13' fill='none'%3E%3Cpath d='M1 12L6.5 6.2L1 1' stroke='%2396C858' stroke-width='1.3437' stroke-miterlimit='10'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
}
}
.fancybox-close-small {
display: none;
}
}
&__close {
position: absolute;
top: 22px;
right: 22px;
width: 25px;
height: 25px;
background: none;
border: none;
border-radius: 50%;
background-color: white;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M10.0035 8.5008L16.6885 1.81576C17.1038 1.40078 17.1038 0.727457 16.6885 0.312477C16.2732 -0.102857 15.6005 -0.102857 15.1852 0.312477L8.50018 6.99751L1.81478 0.312477C1.39945 -0.102857 0.726835 -0.102857 0.311501 0.312477C-0.103834 0.727457 -0.103834 1.40078 0.311501 1.81576L6.99689 8.5008L0.311501 15.1858C-0.103834 15.6008 -0.103834 16.2741 0.311501 16.6891C0.519168 16.8964 0.791332 17.0003 1.06314 17.0003C1.33495 17.0003 1.60712 16.8964 1.81478 16.6888L8.50018 10.0037L15.1852 16.6888C15.3929 16.8964 15.665 17.0003 15.9369 17.0003C16.2087 17.0003 16.4808 16.8964 16.6885 16.6888C17.1038 16.2738 17.1038 15.6005 16.6885 15.1855L10.0035 8.5008Z' fill='%23A0C548'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='17' height='17' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
background-size: 13px 13px;
background-repeat: no-repeat;
background-position: center;
appearance: none;
cursor: pointer;
display: none;
z-index: 9;
@media @m {
top: 15px;
right: 15px;
}
@media @s {
top: 20px;
right: 20px;
}
}
&__pattern {
position: absolute;
&--1 {
left: 0;
top: -20%;
width: 12%;
@media @m {
width: 20%;
top: -15%;
}
@media @s {
width: 30%;
top: -15%;
}
}
&--2 {
left: 0;
bottom: -10%;
width: 7%;
@media @m {
bottom: -5%;
width: 14%;
}
@media @s {
display: none;
}
}
&--3 {
right: 15%;
bottom: -7%;
width: 7%;
@media @m {
right: 15%;
bottom: -7%;
width: 12%;
}
@media @s {
display: none;
}
}
}
}
.fancybox-slide.fancybox-slide--html {
@media @m {
transform: translateX(0)!important
}
}
\ No newline at end of file
src/index.html
View file @ 8ddad0f7
......@@ -27,7 +27,7 @@
@@include( './components/ms-info-carousel/ms-info-carousel.html' )
<!-- Карта -->
<!-- @ @include( './components/ms-map/ms-map.html' ) -->
@@include( './components/ms-map/ms-map.html' )
<!-- Коломенское -->
<!-- @ @include( './components/ms-koloma/ms-koloma.html' ) -->
......
webpack.dev.js
View file @ 8ddad0f7
......@@ -27,11 +27,7 @@ module.exports = {
"@babel/preset-env",
{
useBuiltIns: "usage",
targets: [
"last 4 versions",
"ie >= 11",
"iOS >= 9"
]
targets: ["last 4 versions", "ie >= 11", "iOS >= 9"]
}
]
]
......
webpack.prod.js
View file @ 8ddad0f7
......@@ -26,11 +26,7 @@ module.exports = {
"@babel/preset-env",
{
useBuiltIns: "usage",
targets: [
"last 4 versions",
"ie >= 11",
"iOS >= 9"
]
targets: ["last 4 versions", "ie >= 11", "iOS >= 9"]
}
]
]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment