Skip to content

Dev js #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
evgdudareff wants to merge 30 commits into
base: master
Choose a base branch
from
Open

Dev js #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
a3d21b1
Updated .gitignore. Started js
evgdudareff Dec 22, 2019
1a83e88
Removed _popup modifier from product-card
evgdudareff Dec 23, 2019
e7f4f6a
Started with popup for product-card
evgdudareff Dec 23, 2019
0d629f5
Added disabled style for labels and style fot popup
evgdudareff Dec 26, 2019
adb1a35
Designed js-model scheme for products
evgdudareff Dec 26, 2019
507716f
Designed js-function for rendering product-card-tempalte
evgdudareff Dec 26, 2019
84d5a12
Added styles for popup and button
evgdudareff Dec 27, 2019
8f8286b
Reorganized structure of js-folders and did following:
evgdudareff Dec 27, 2019
5f0e896
Added order form template and did improvments:
evgdudareff Dec 30, 2019
472bc5d
Improved hideOrderForm and configured .babelrc file
evgdudareff Jan 1, 2020
4cfd73c
Did orderForm inputs validation
evgdudareff Jan 3, 2020
aee6a5a
Added select logic and async function for getting data from server
evgdudareff Jan 4, 2020
08e14d6
Added textarea validation
evgdudareff Jan 4, 2020
4ccb95b
Added common class for field validation
evgdudareff Jan 4, 2020
402903e
Did MVP-project
evgdudareff Jan 5, 2020
9275aef
Improved options-container for select and fixed bugs
evgdudareff Jan 5, 2020
3c3e4d5
Prepared to deploy GP
evgdudareff Jan 6, 2020
8023186
Improved popup.js and related popup files
evgdudareff Jan 9, 2020
ec7dc57
Improved select-element
evgdudareff Jan 9, 2020
26e22b9
Did dynamic position calculation for popup for all platforms
evgdudareff Jan 10, 2020
57fa41b
Added error validation popup to show actual error messages for user
evgdudareff Jan 11, 2020
284c364
Improved orderForm code and files structure
evgdudareff Jan 12, 2020
08f3676
Improved form preparations
evgdudareff Jan 12, 2020
c0cda05
Merge branch 'dev-js-fixes' into dev-js
evgdudareff Jan 12, 2020
ad10bab
Fixed bug with popup
evgdudareff Jan 13, 2020
67e4f10
Added background blur for mobile popup
evgdudareff Jan 13, 2020
14f2c78
Improved select
evgdudareff Jan 13, 2020
59482cf
Did hiding of address section if self pickup is checked
evgdudareff Jan 13, 2020
41fdb4b
Improved thing with scroll-bar
evgdudareff Jan 14, 2020
75d08ee
did all corrections and ready for deploy
evgdudareff Jan 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions .babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{

@xnimorz xnimorz Jan 6, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Заметки по недоработкам визуальным:

  1. Сейчас, если выбрать один товар, потом кликнуть на другой — на другом выпадашка не появится, пока не исчезнет предыдущая. поэтому приходится кликать дважды.

  2. У тебя не убрано базовое поведение селекта (выбора города) — за счет чего на айфоне выбрать город практически нельзя.

  3. Было бы хорошо для формы иметь поддержку клавиатуры (например в том же селекте выбор сделать возможным с помощью клавиатуры)

@xnimorz xnimorz Jan 6, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

При ресайзе выпадашка "едет"
image

@xnimorz xnimorz Jan 6, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

При скролле также элемент не остается на выбранном месте, а бегает за тобой, что не очень вписывается в макет

@xnimorz xnimorz Jan 6, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

Сейчас не очень понятна какая ошибка — лучше сообщать это пользователю хоть как-то

@evgdudareff evgdudareff Jan 12, 2020

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

По пунктам:

  1. Исправлено. Также упростил код, доработал структуру кода и файлов js.
  2. Теперь доступно и по Tab (с ios тоже доступно переключение, но каретку там не победил). Также упростил код, доработал структуру кода и файлов js.
  3. Смотри пункт 2.
  4. При ресайзе выпадашка "едет" - исправил. Для Tablet/Desktop использую только css position. При пересечении границы для Mobile один раз перерисовываются.
    При resize в границе Mobile - динамически меняется положение.
  5. При скролле также элемент не остается на выбранном месте, а бегает за тобой, что не очень вписывается в макет -исправил.
  6. Сейчас не очень понятна какая ошибка — лучше сообщать это пользователю хоть как-то - добавил. Теперь если пользователь не верно ввел данные в поле и ушел с него, то показывается попап с ошибками.

@xnimorz xnimorz Jan 13, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

  1. попап лучше держать с описанием ошибки до момента, пока пользователь не поставит фокус на поле или уйдет с него. Иначе получается как на скриншоте.

  2. Если вызвать селект и убрать с поля фокус, лучше, чтобы выпадашка пропадала. Иначе она загораживает пространство и мешает работать с сайтом

@xnimorz xnimorz Jan 13, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

А зачем при самовывозе адрес? :)

@xnimorz xnimorz Jan 13, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Пока ситуация с resize еще не решилась
image

@evgdudareff evgdudareff Jan 14, 2020 •
edited
Loading

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. Теперь предупреждение показывается только тогда, когда пользователь работает с полем.
  2. Сделал, чтобы пропадал select при клике не на него.
  3. А зачем при самовывозе адрес? :) - теперь при самовывозе секция адреса скрывается.
  4. с resize решили, что по это по макету

"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 2
}
]
]
}
4 changes: 2 additions & 2 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
/node_modules
/dist

notes.txt
yarn-error.log
.idea
.cache
.DS_Store

js/dev/hhApiAreas.json
.vscode/
66 changes: 51 additions & 15 deletions css/blocks/form/form.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,44 @@
.form {
background-color: @color-light;
position: relative;

@media @screen-gt-s {
margin: 5px auto;
max-width: 768px;
}

@media @screen-gt-m {
max-width: 1010px;
}

&__heading {
margin-top: 20px;
text-align: left;
}

&__input-text {
position: relative;
margin: 10px 0;
}

&__input-tel {
display: flex;
margin-top: 5px;
position: relative;
}

&__delivery-method {
display: flex;
}

&__delivery-address {
&_hide {
display: none;
}
}

&__textarea {
position: relative;
margin-top: 10px;
}

Expand Down Expand Up @@ -59,21 +78,38 @@
}
}

.form-pug {
/* Заглушка, будет popup */
width: 290px;
height: 450px;
background-color: black;
opacity: 0.1;
font-size: 50px;
float: right;
margin-top: 136px;
color: white;
justify-content: center;
align-items: center;
display: none;
.orderForm {

@xnimorz xnimorz Jan 6, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

где-то стили в-таком-стиле-описаны, где-то вСовершенноДругом. Лучше держать единый стиль, так как это структурирует код прививает его единое восприятие

@evgdudareff evgdudareff Jan 12, 2020

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

У меня часть блоков "осталась" от Леонида Феськова. Посыл понял.

position: absolute;
top: 0;
z-index: 100;
overflow: hidden;
opacity: 0;
transition: all 300ms linear;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);

@media @screen-gt-s {
display: flex;
&_active {
opacity: 1;
}
}

.form-error-block {
display: block;
position: absolute;
top: 0;
left: 0;
padding: 5px 10px 5px 5px;
margin: 0;
color: @color-dark;
background-color: @color-light;
border: 1px solid @color-light-grey;
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.5);
z-index: 1000;
box-sizing: border-box;
font: 14px/ (@control-height - 18px) Arial, sans-serif;
text-align: left;

&__item {
list-style: none;
}
}
26 changes: 25 additions & 1 deletion css/blocks/popup/popup.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,15 @@
.popup {
width: 280px;
border: 1px solid;
margin: 40px auto;
position: absolute;
opacity: 0;
transition: all 100ms linear;
background-color: @color-light;
z-index: 100;

&_active {
opacity: 1;
}

@media @screen-gt-s {
width: 242px;
Expand Down Expand Up @@ -30,5 +38,21 @@
z-index: 100;
right: -10px;
top: -10px;

@media @screen-gt-m {
display: none;
}
}
}

.js-mobile-outer {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
height: 100vh;
overflow: hidden;

&__popup {
position: relative;
}
}
16 changes: 7 additions & 9 deletions css/blocks/product-card/product-card.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,17 @@
cursor: pointer;

&__image-container {
margin-bottom: 10px;
font-size: 0;
position: relative;

&_popup {
width: 212px;
height: 212px;
margin: 0 auto 10px auto;
//width: 212px;
//height: 212px;
min-height: 212px;
margin: 0 auto 10px auto;

@media @screen-gt-m {
width: 290px;
height: 290px;
}
@media @screen-gt-m {
width: 290px;
height: 290px;
}

&_form {
Expand Down
6 changes: 4 additions & 2 deletions css/common/button/button.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,10 @@
.button();
width: 100%;

&_disabled {
opacity: 0.5;
}

@media @screen-gt-s {
width: 138px;
}
Expand All @@ -49,9 +53,7 @@
cursor: pointer;
text-indent: -9999px;
background-image: url("close.svg");
}

.button-close {
&:hover,
&:focus {
outline: none;
Expand Down
36 changes: 33 additions & 3 deletions css/common/input/input.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,15 @@
.input-tel {
.default-input();

&__country-code {
&_country-code {
width: 38px;
}

&__operator-code {
&_operator-code {
width: 62px;
}

&__number {
&_number {
width: 100%;
}

Expand All @@ -58,3 +58,33 @@
border-color: @color-red;
}
}

.input {
&_invalid {
border-color: @color-red;
}
}

.input-select {
.default-input();
padding: 9px 30px 9px 10px;
background-color: @color-light-1;
caret-color: transparent;

&:hover {
cursor: pointer;
}

-webkit-text-fill-color: @color-dark-1;
opacity: 1; /* required on iOS */
}

::-webkit-input-placeholder {
color: @color-dark-1; /* Chrome, Safari, Opera */
}
::-moz-placeholder {
color: @color-dark-1; /* Firefox */
}
:-ms-input-placeholder {
color: @color-dark-1; /* IE */
}
4 changes: 4 additions & 0 deletions css/common/label/label.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,8 @@

.label {
.label-default();

&_disabled {
opacity: 0.7;
}
}
3 changes: 2 additions & 1 deletion css/common/radio-button/radio-button.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@
.radio-button-default();

&__button {
display: none;
position: absolute;
clip: rect(0 0 0 0);
}

&:checked + .radio-button-sqared__label {
Expand Down
58 changes: 38 additions & 20 deletions css/common/select/select.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,6 @@
.select {
position: relative;

&__select-field {
width: 100%;
height: @control-height;
display: inline-block;
box-sizing: border-box;
background-color: @color-light-1;
padding: 9px 10px;
border: 1px solid #c5c9ca;
font: 14px/ (@control-height - 18px) Arial, sans-serif;
color: @color-dark-1;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

&:hover {
cursor: pointer;
}
}

&:before {
content: "";
position: absolute;
Expand All @@ -41,9 +22,46 @@
border-width: 5px 5px 0 5px;
border-color: #c5c9ca transparent transparent transparent;
position: absolute;
top: 50%;
top: 45%;
right: 10px;
z-index: 1;
pointer-events: none;
}
}

.select_active {
&:after {
transform: matrix(1, 0, 0, -1, 0, 0);
}
}

.select_active > .input-select {

@xnimorz xnimorz Jan 13, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

В БЭМ не рекомендуется модифицировать один блок через другой

background-color: @color-grey;
}

.options-container {
position: absolute;
padding: 23px 0px;
height: 290px;
width: 100%;
background-color: @color-light;
z-index: 1000;
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
overflow: hidden;
box-sizing: border-box;

&__item {
padding: 11px 12px;
height: 38px;
line-height: 16px;
box-sizing: border-box;
font-size: 14px;
display: block;

&:hover {
background-color: @color-primary;
color: white;
cursor: pointer;
}
}
}
4 changes: 4 additions & 0 deletions css/common/textarea/textarea.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
color: #333333;
resize: none;

&_invalid {
border: 1px solid #c52929;
}

::-webkit-input-placeholder {
color: #aeb5b9; /* Chrome, Safari, Opera */
}
Expand Down
6 changes: 6 additions & 0 deletions css/global.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ body {
font: 14px/1.43 Arial, sans-serif;
color: #333;
}
::-webkit-scrollbar {
display: none;
-webkit-appearance: none;
width: 0;
height: 0;
}

a {
color: #609fcf;
Expand Down
Loading