Commit 4d2cc213 authored by nursultan's avatar nursultan
Browse files

Merge branch 'features' into 'master'

Features

See merge request !2
parents 822df521 82341d8b
No preview for this file type
This diff is collapsed.
This diff is collapsed.
...@@ -595,7 +595,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o ...@@ -595,7 +595,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.posts { .posts {
overflow-x: hidden; /*overflow-x: hidden;*/
} }
.post-feed { .post-feed {
...@@ -612,7 +612,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o ...@@ -612,7 +612,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
flex: 1 1 301px; flex: 1 1 301px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; /*overflow: hidden;*/
margin: 0 0 40px; margin: 0 0 40px;
padding: 0 20px 40px; padding: 0 20px 40px;
min-height: 220px; min-height: 220px;
...@@ -639,6 +639,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o ...@@ -639,6 +639,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
position: relative; position: relative;
display: block; display: block;
color: var(--darkgrey); color: var(--darkgrey);
padding: 10px;
} }
.post-card-content-link:hover { .post-card-content-link:hover {
...@@ -680,6 +681,39 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o ...@@ -680,6 +681,39 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
visibility: hidden;
opacity: 0;
width: 350px;
height: auto;
min-height: 160px;
z-index: 3;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border-radius: 10px;
transition: width 1s, height 2s, background-color 2s, transform 2s;
border: 1px solid #e31f26;
}
.post-card-content::before{
content: "";
display: block;
position: relative;
width: 30px;
height: 30px;
background-color: #fff;
border-left: 1px solid #e31f26;
border-top: 1px solid #e31f26;
top: -16px;
left: 45%;
transform: rotate(45deg);
}
.post-card:hover .post-card-content {
transform: translate3d(0, -10%, 0);
visibility: visible;
opacity: 1;
} }
.post-card-excerpt { .post-card-excerpt {
...@@ -696,6 +730,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o ...@@ -696,6 +730,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
padding: 0; padding: 0;
margin-top: auto;
} }
.author-profile-image, .author-profile-image,
...@@ -735,7 +770,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o ...@@ -735,7 +770,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
margin: 0 0 0 -6px; margin: 0 0 0 -6px;
width: 34px; width: 34px;
height: 34px; height: 34px;
border: #fff 2px solid; border: #000000 2px solid;
border-radius: 100%; border-radius: 100%;
} }
...@@ -745,7 +780,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o ...@@ -745,7 +780,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
z-index: 999; z-index: 999;
display: block; display: block;
padding: 2px 8px; padding: 2px 8px;
color: white; color: black;
font-size: 1.2rem; font-size: 1.2rem;
letter-spacing: 0.2px; letter-spacing: 0.2px;
white-space: nowrap; white-space: nowrap;
...@@ -792,7 +827,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o ...@@ -792,7 +827,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
} }
.post-card-byline-date { .post-card-byline-date {
font-size: 1.2rem; font-size: 0.8rem;
} }
.post-card-byline-date .bull { .post-card-byline-date .bull {
...@@ -1869,12 +1904,12 @@ Usage (In Ghost editor): ...@@ -1869,12 +1904,12 @@ Usage (In Ghost editor):
} }
.read-next .post-card-primary-tag { .read-next .post-card-primary-tag {
color: #fff; color: #000000;
opacity: 0.6; opacity: 0.6;
} }
.read-next .post-card-title { .read-next .post-card-title {
color: #fff; color: #000000;
opacity: 0.8; opacity: 0.8;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
...@@ -1884,7 +1919,7 @@ Usage (In Ghost editor): ...@@ -1884,7 +1919,7 @@ Usage (In Ghost editor):
} }
.read-next .post-card-excerpt { .read-next .post-card-excerpt {
color: rgba(255, 255, 255, 0.6); color: rgba(0, 0, 0, 0.6);
} }
.read-next .static-avatar { .read-next .static-avatar {
...@@ -1892,11 +1927,11 @@ Usage (In Ghost editor): ...@@ -1892,11 +1927,11 @@ Usage (In Ghost editor):
} }
.read-next .post-card-byline-content { .read-next .post-card-byline-content {
color: rgba(255, 255, 255, 0.6); color: rgba(0, 0, 0, 0.6);
} }
.read-next .post-card-byline-content a { .read-next .post-card-byline-content a {
color: rgba(255, 255, 255, 0.8); color: rgba(0, 0, 0, 0.8);
} }
.read-next-card { .read-next-card {
...@@ -1921,7 +1956,7 @@ Usage (In Ghost editor): ...@@ -1921,7 +1956,7 @@ Usage (In Ghost editor):
.read-next-card-header h3 { .read-next-card-header h3 {
margin: 0; margin: 0;
color: rgba(255, 255, 255, 0.6); color: rgba(0, 0, 0, 0.6);
font-size: 1.2rem; font-size: 1.2rem;
line-height: 1em; line-height: 1em;
font-weight: 300; font-weight: 300;
...@@ -1930,7 +1965,7 @@ Usage (In Ghost editor): ...@@ -1930,7 +1965,7 @@ Usage (In Ghost editor):
} }
.read-next-card-header h3 a { .read-next-card-header h3 a {
color: #fff; color: #000000;
font-weight: 500; font-weight: 500;
text-decoration: none; text-decoration: none;
opacity: 0.8; opacity: 0.8;
...@@ -1975,7 +2010,7 @@ Usage (In Ghost editor): ...@@ -1975,7 +2010,7 @@ Usage (In Ghost editor):
.read-next-card-content li a { .read-next-card-content li a {
display: block; display: block;
color: #fff; color: #000000;
opacity: 0.8; opacity: 0.8;
} }
...@@ -2000,7 +2035,7 @@ Usage (In Ghost editor): ...@@ -2000,7 +2035,7 @@ Usage (In Ghost editor):
.read-next-card-meta p { .read-next-card-meta p {
margin: 0; margin: 0;
color: rgba(255, 255, 255, 0.6); color: rgba(0, 0, 0, 0.6);
} }
.read-next-card-footer { .read-next-card-footer {
...@@ -2011,7 +2046,7 @@ Usage (In Ghost editor): ...@@ -2011,7 +2046,7 @@ Usage (In Ghost editor):
.read-next-card-footer a { .read-next-card-footer a {
padding: 7px 12px 8px 14px; padding: 7px 12px 8px 14px;
border: 1px solid rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.6);
color: rgba(255, 255, 255, 0.6); color: rgba(0, 0, 0, 0.6);
font-size: 1.3rem; font-size: 1.3rem;
border-radius: 999px; border-radius: 999px;
transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out;
...@@ -2845,11 +2880,11 @@ Usage (In Ghost editor): ...@@ -2845,11 +2880,11 @@ Usage (In Ghost editor):
} }
.post-card-byline-content a { .post-card-byline-content a {
color: rgba(255, 255, 255, 0.75); color: rgba(0, 0, 0, 0.75);
} }
.post-card-byline-content a:hover { .post-card-byline-content a:hover {
color: #fff; color: #000000;
} }
.post-card-image { .post-card-image {
...@@ -2857,7 +2892,7 @@ Usage (In Ghost editor): ...@@ -2857,7 +2892,7 @@ Usage (In Ghost editor):
} }
.post-card-title { .post-card-title {
color: rgba(255, 255, 255, 0.85); color: rgba(0, 0, 0, 0.85);
} }
.post-card-excerpt { .post-card-excerpt {
...@@ -2886,11 +2921,11 @@ Usage (In Ghost editor): ...@@ -2886,11 +2921,11 @@ Usage (In Ghost editor):
} }
.post-full-byline-meta h4 a { .post-full-byline-meta h4 a {
color: rgba(255, 255, 255, 0.75); color: rgba(0, 0, 0, 0.75);
} }
.post-full-byline-meta h4 a:hover { .post-full-byline-meta h4 a:hover {
color: #fff; color: #000000;
} }
.author-list-item .author-card { .author-list-item .author-card {
...@@ -2911,25 +2946,25 @@ Usage (In Ghost editor): ...@@ -2911,25 +2946,25 @@ Usage (In Ghost editor):
.post-full-content h3, .post-full-content h3,
.post-full-content h4, .post-full-content h4,
.post-full-content h6 { .post-full-content h6 {
color: rgba(255, 255, 255, 0.9); color: rgba(0, 0, 0, 0.9);
} }
.post-full-content a { .post-full-content a {
color: #fff; color: #000000;
box-shadow: inset 0 -1px 0 #fff; box-shadow: inset 0 -1px 0 #000000;
} }
.post-full-content strong { .post-full-content strong {
color: #fff; color: #000000;
} }
.post-full-content em { .post-full-content em {
color: #fff; color: #000000;
} }
.post-full-content code { .post-full-content code {
color: #fff; color: #000000;
background: #000; background: #ffffff;
} }
hr { hr {
...@@ -2937,7 +2972,7 @@ Usage (In Ghost editor): ...@@ -2937,7 +2972,7 @@ Usage (In Ghost editor):
} }
.post-full-content figcaption { .post-full-content figcaption {
color: rgba(255, 255, 255, 0.6); color: rgba(0, 0, 0, 0.6);
} }
.post-full-content table td:first-child { .post-full-content table td:first-child {
......
const nav_hum = document.querySelector('.ham');
const main_nav = document.querySelector('#main-nav');
let nav_hum = document.querySelector('.ham'); const anchors = document.querySelectorAll('#main-nav a[href*="#"]');
let main_nav = document.querySelector('#main-nav'); const langs = document.querySelectorAll('.main-lang a[href*="#"]');
function active(){
const numbers = document.querySelectorAll('.statistic-block span');
let numberTop = document.querySelector('.statistic-block span');
const engBlocks = document.querySelectorAll('.eng');
const rusBlocks = document.querySelectorAll('.rus');
const qazBlocks = document.querySelectorAll('.qaz');
const navText = document.querySelectorAll('#main-nav a');
const mainBtn = document.querySelector('.main--btn');
const feedbackExpert = document.querySelector('.feedback-expert');
const benefitsDemoBtn = document.querySelector('.benefits-demo--btn');
const learnMore = document.querySelector('.cc-link');
function active() {
nav_hum.classList.toggle('active'); nav_hum.classList.toggle('active');
main_nav.classList.toggle('active'); main_nav.classList.toggle('active');
} }
let navHeight = document.querySelector('#header').scrollHeight; let navHeight = document.querySelector('#header').scrollHeight;
const anchors = document.querySelectorAll('#main-nav a[href*="#"]');
const yOffset = -navHeight + 30; const yOffset = -navHeight + 30;
for (let anchor of anchors) { for (let anchor of anchors) {
anchor.addEventListener('click', function (e) { anchor.addEventListener('click', function (e) {
...@@ -15,7 +32,7 @@ for (let anchor of anchors) { ...@@ -15,7 +32,7 @@ for (let anchor of anchors) {
anchor.classList.add('active'); anchor.classList.add('active');
const blockID = anchor.getAttribute('href').substr(1); const blockID = anchor.getAttribute('href').substr(1);
const yourElement = document.getElementById(blockID); const yourElement = document.getElementById(blockID);
if (!yourElement){ if (!yourElement) {
document.location.href = `/#${blockID}`; document.location.href = `/#${blockID}`;
} }
const yCoordinate = yourElement.getBoundingClientRect().top + window.pageYOffset; const yCoordinate = yourElement.getBoundingClientRect().top + window.pageYOffset;
...@@ -26,7 +43,7 @@ for (let anchor of anchors) { ...@@ -26,7 +43,7 @@ for (let anchor of anchors) {
}); });
} }
const hash = document.location.hash; const hash = document.location.hash;
if (hash){ if (hash) {
let topY = document.querySelector(hash).getBoundingClientRect().top + window.pageYOffset; let topY = document.querySelector(hash).getBoundingClientRect().top + window.pageYOffset;
window.scrollBy({ window.scrollBy({
top: topY + yOffset, top: topY + yOffset,
...@@ -34,104 +51,101 @@ if (hash){ ...@@ -34,104 +51,101 @@ if (hash){
}); });
} }
const langs = document.querySelectorAll('.main-lang a[href*="#"]'); for (let lang of langs) {
for (let lang of langs){
lang.addEventListener('click', function () { lang.addEventListener('click', function () {
localStorage['lang'] = this.text; localStorage['lang'] = this.text;
if (this.text==='rus'){ if (this.text === 'rus') {
window.location.replace("/"); window.location.replace("/");
}else { } else {
window.location.replace("/"+this.text); window.location.replace("/" + this.text);
} }
}) })
} }
const navText = document.querySelectorAll('#main-nav a'); const engText = ['Video', 'Faceplate in numbers', 'Manufacturing challenges', 'Faceplate solutions', 'Faceplate advantages', 'For whom', 'How it works', 'Contact', 'Posts and news'];
const engText = ['Video', 'Faceplate in numbers', 'Manufacturing challenges', 'Faceplate solutions', 'Faceplate advantages', 'For whom', 'How it works', 'Contact']; const qazText = ['Vıdeo', 'Faceplate sandarmen', 'Óndiris máseleleri', 'Faceplate sheshimderi', 'Faceplate artyqshylyǵy', 'Kim úshin arnalǵan', 'Qalaı jumys isteıdi', 'Baılanys málimetteri', 'Jańalyqtar jáne posttar'];
const qazText = ['Vıdeo', 'Faceplate sandarmen', 'Óndiris máseleleri', 'Faceplate sheshimderi', 'Faceplate artyqshylyǵy', 'Kim úshin arnalǵan', 'Qalaı jumys isteıdi', 'Baılanys málimetteri'];
const engBlocks = document.querySelectorAll('.eng');
const rusBlocks = document.querySelectorAll('.rus');
const qazBlocks = document.querySelectorAll('.qaz');
if (localStorage['lang'] === 'eng'){
if (localStorage['lang'] === 'eng') {
changeLang(engBlocks); changeLang(engBlocks);
translate(engText); translate(engText);
}else if (localStorage['lang'] === 'qaz'){ } else if (localStorage['lang'] === 'qaz') {
changeLang(qazBlocks); changeLang(qazBlocks);
translate(qazText); translate(qazText);
}else { } else {
changeLang(rusBlocks); changeLang(rusBlocks);
} }
function changeLang(values) { function changeLang(values) {
for (let value of values){ for (let value of values) {
value.style = 'display:block'; value.style = 'display:block';
} }
} }
function translate(array){
for (let i=0; i<array.length; i++){ function translate(array) {
for (let i = 0; i < array.length; i++) {
navText[i].innerHTML = array[i]; navText[i].innerHTML = array[i];
} }
} }
numberTop = numberTop ? numberTop.getBoundingClientRect().top : 0;
let numbers = document.querySelectorAll('.statistic-block span'); for (let number of numbers) {
let numberTop = document.querySelector('.statistic-block span').getBoundingClientRect().top;
for (let number of numbers){
let start = +number.innerHTML, let start = +number.innerHTML,
end = +number.dataset.max; end = +number.dataset.max;
window.addEventListener('scroll', function onScroll() { window.addEventListener('scroll', function onScroll() {
if(window.pageYOffset > numberTop - window.innerHeight / 2 || window.pageYOffset < numberTop - window.innerHeight / 2) { if (window.pageYOffset > numberTop - window.innerHeight / 2 || window.pageYOffset < numberTop - window.innerHeight / 2) {
this.removeEventListener('scroll', onScroll); this.removeEventListener('scroll', onScroll);
let interval = setInterval(function() { let interval = setInterval(function () {
number.innerHTML = ++start; number.innerHTML = ++start;
if(start === end) { if (start === end) {
number.innerHTML = end+'%'; number.innerHTML = end + '%';
clearInterval(interval); clearInterval(interval);
} }
}, 10); }, 10);
} }
}); });
} }
function showModal(){
function showModal() {
document.body.style = "overflow:hidden"; document.body.style = "overflow:hidden";
document.querySelector('.feedback-form').classList.toggle('active'); document.querySelector('.feedback-form').classList.toggle('active');
document.querySelector('.feedback-form iframe').setAttribute('scrolling', 'auto'); document.querySelector('.feedback-form iframe').setAttribute('scrolling', 'auto');
} }
function closeModal(value){ function closeModal(value) {
document.body.style = "overflow:inherit"; document.body.style = "overflow:inherit";
document.querySelector(value).classList.toggle('active'); document.querySelector(value).classList.toggle('active');
} }
document.querySelector('.main--btn').addEventListener('click', showModal); if (mainBtn) {
mainBtn.addEventListener('click', showModal);
document.querySelector('.feedback-expert').addEventListener('click', showModal); }
document.querySelector('.benefits-demo--btn').addEventListener('click', showModal); if (feedbackExpert) {
feedbackExpert.addEventListener('click', showModal);
}
document.querySelector('.footer-btn--'+localStorage['lang']).addEventListener('click',function () { if (benefitsDemoBtn) {
document.body.style = "overflow:hidden"; benefitsDemoBtn.addEventListener('click', showModal);
document.querySelector('.private-police').classList.toggle('active'); }
} );
const learnMore = document.querySelector('.cc-link'); if (learnMore) {
learnMore.removeAttribute('target'); learnMore.removeAttribute('target');
learnMore.addEventListener('click', function () { learnMore.addEventListener('click', function () {
document.body.style = "overflow:hidden"; document.body.style = "overflow:hidden";
document.querySelector('.cookie-modal').classList.toggle('active'); document.querySelector('.cookie-modal').classList.toggle('active');
}); });
}