Skip to content

Commit 55250d1

Browse files
matowdevmatowdev
committed
[PROJ-18.12/compl] layout-pop-up-window
Layout "pop-up" window. Adaptive (up to @576px), overflow, styling. Worth noting: - adding "init/data" to the "habbits" array. FS-dev: B-3 / JS basic
1 parent 7b174c1 commit 55250d1

File tree

7 files changed

+309
-7
lines changed

7 files changed

+309
-7
lines changed

‎full-stack-dev/3-js-basic/18-proj-habit-tracker/18-12-layout-pop-up-window/css/pop-up.css‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
.pop-up_cover {
2+
position: fixed;
3+
top: 0;
4+
right: 0;
5+
bottom: 0;
6+
left: 0;
7+
display: flex;
8+
justify-content: center;
9+
align-items: flex-start;
10+
padding-top: 168px;
11+
background: var(--pop-up-cover, rgba(0, 0, 0, 0.25));
12+
overflow-y: auto;
13+
}
14+
15+
/* .pop-up_cover-hidden {
16+
display: none;
17+
} */
18+
19+
.pop-up__element {
20+
display: flex;
21+
flex-direction: column;
22+
row-gap: 20px;
23+
border-radius: var(--main-br-radius, 10px);
24+
padding: 25px;
25+
padding-bottom: 40px;
26+
width: 100%;
27+
max-width: 425px;
28+
background: var(--add-color-0, #fff);
29+
overflow: hidden;
30+
}
31+
32+
.pop-up__heading {
33+
position: relative;
34+
display: flex;
35+
flex-direction: column;
36+
justify-content: center;
37+
align-items: center;
38+
row-gap: 5px;
39+
}
40+
41+
.pop-up__title {
42+
font-size: 24px;
43+
line-height: normal;
44+
}
45+
46+
.pop-up__close-btn {
47+
position: absolute;
48+
bottom: 10px;
49+
right: -15px;
50+
border: none;
51+
border-radius: var(--main-br-radius, 10px);
52+
background: transparent;
53+
overflow: hidden;
54+
cursor: pointer;
55+
transition-property: border-radius, background;
56+
transition-duration: var(--short, 0.3s);
57+
transition-timing-function: ease-in-out;
58+
will-change: border-radius, background;
59+
}
60+
61+
.pop-up__close-btn:focus-visible {
62+
outline-color: var(--add-color-11, #a87ae4);
63+
}
64+
65+
.pop-up__icons-wrap {
66+
display: flex;
67+
flex-direction: column;
68+
row-gap: 10px;
69+
justify-content: center;
70+
align-items: center;
71+
}
72+
73+
.pop-up__icons-label {
74+
font-weight: var(--medium, 500);
75+
color: var(--add-color-3, #768396);
76+
}
77+
78+
.pop-up__icons-list {
79+
display: flex;
80+
justify-content: center;
81+
align-items: center;
82+
gap: 10px 25px;
83+
}
84+
85+
.pop-up__icons-btn {
86+
display: flex;
87+
justify-content: center;
88+
align-items: center;
89+
width: 46px;
90+
height: 46px;
91+
border: 1px solid var(--add-color-5, #5051F9);
92+
border-radius: var(--secondary-br, 14px);
93+
padding: 10px;
94+
background: var(--add-color-0, #fff);
95+
cursor: pointer;
96+
transition-property: background;
97+
transition-duration: var(--short, 0.3s);
98+
transition-timing-function: ease-in-out;
99+
will-change: background;
100+
}
101+
102+
.pop-up__icons-btn:focus-visible {
103+
outline-color: var(--add-color-11, #a87ae4);
104+
}
105+
106+
.pop-up__icons-btn_active {
107+
background: var(--add-color-5, #5051F9);
108+
}
109+
110+
.pop-up__icons-btn_active .pop-up__icons-icon {
111+
filter: brightness(0) invert(1);
112+
}
113+
114+
.pop-up__icons-icon {
115+
transition-property: filter;
116+
transition-duration: var(--short, 0.3s);
117+
transition-timing-function: ease-in-out;
118+
will-change: filter;
119+
}
120+
121+
.pop-up__form {
122+
display: flex;
123+
flex-direction: column;
124+
width: 100%;
125+
}
126+
127+
.pop-up__form-input {
128+
border: 1px solid var(--main-border-color, #E7EBFB);
129+
border-radius: var(--main-br-radius, 10px);
130+
padding: 12px 20px;
131+
width: 100%;
132+
font-family: var(--default-ff), sans-serif;
133+
font-size: 15px;
134+
color: var(--secondary-color, #23235F);
135+
caret-color: var(--add-color-11, #a87ae4);
136+
}
137+
138+
.pop-up__form-input:not(:last-of-type) {
139+
margin-bottom: 7px;
140+
}
141+
142+
.pop-up__form-input:last-of-type {
143+
margin-bottom: 17px;
144+
}
145+
146+
.pop-up__form-input::placeholder {
147+
font-weight: var(--regular, 400);
148+
font-size: 14px;
149+
color: var(--add-color-1, #8899A8);
150+
}
151+
152+
.pop-up__form-input:focus-visible {
153+
outline-color: var(--add-color-11, #a87ae4);
154+
}
155+
156+
.pop-up__form-btn {
157+
align-self: center;
158+
border: none;
159+
border-radius: var(--main-br-radius, 10px);
160+
padding: 15px 25px;
161+
width: 100%;
162+
max-width: 120px;
163+
font-family: var(--default-ff), sans-serif;
164+
font-weight: var(--medium, 500);
165+
font-size: 13px;
166+
line-height: normal;
167+
text-align: center;
168+
color: var(--add-color-5, #5051F9);
169+
background: var(--add-color-4, #EDECFE);
170+
cursor: pointer;
171+
transition-property: color, background;
172+
transition-duration: var(--short, 0.3s);
173+
transition-timing-function: ease-in-out;
174+
will-change: color, background;
175+
}
176+
177+
.pop-up__form-btn:not(:last-of-type) {
178+
margin-bottom: 5px;
179+
}
180+
181+
.pop-up__form-btn:focus-visible {
182+
outline-color: var(--add-color-11, #a87ae4);
183+
}
184+
185+
/* media queries, any-hover */
186+
187+
@media (max-width: 768px) {
188+
.pop-up_cover {
189+
padding-top: 190px;
190+
}
191+
192+
.pop-up__element {
193+
padding-bottom: 30px;
194+
max-width: 385px;
195+
}
196+
}
197+
198+
@media (any-hover: hover) {
199+
.pop-up__close-btn:hover {
200+
border-radius: var(--main-br-radius, 10px);
201+
background: var(--add-color-8, #E7EBFB);
202+
}
203+
204+
.pop-up__icons-btn:hover {
205+
background: var(--add-color-7, #6A6AFB);
206+
}
207+
208+
.pop-up__icons-btn:hover .pop-up__icons-icon {
209+
filter: brightness(0) invert(1);
210+
}
211+
212+
.pop-up__form-btn:hover {
213+
color: var(--add-color-0, #fff);
214+
background: var(--add-color-11, #a87ae4);
215+
}
216+
}

‎full-stack-dev/3-js-basic/18-proj-habit-tracker/18-12-layout-pop-up-window/css/style.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@
66
@import url("content.css");
77
@import url("progress-bar.css");
88
@import url("habbit-days.css");
9+
@import url("pop-up.css");

‎full-stack-dev/3-js-basic/18-proj-habit-tracker/18-12-layout-pop-up-window/css/variables.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
--default-br: 10px;
4343
--secondary-br: 14px;
4444
--icon-shadow: 0 8px 14px 0 rgba(62, 107, 224, 0.12);
45+
--pop-up-cover: rgba(0, 0, 0, 0.25);
4546
--pop-up-shadow: 0 8px 14px 12px rgba(56, 56, 56, 0.05);
4647

4748
/* transitions */

‎full-stack-dev/3-js-basic/18-proj-habit-tracker/18-12-layout-pop-up-window/data/demo.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
"target": 10,
1010
"days": [
1111
{ "comment": "Первый подход всегда даётся тяжело.." },
12-
{ "comment": "Второй день немного легче!" }
12+
{ "comment": "Второй день немного легче!" },
13+
{ "comment": "Продолжаем!" }
1314
]
1415
},
1516
{
@@ -20,7 +21,7 @@
2021
"width": 25,
2122
"height": 25,
2223
"target": 10,
23-
"days": [{ "comment": "Очень хотелось!" }]
24+
"days": [{ "comment": "Очень хотелось!" }, { "comment": "Супер!" }]
2425
},
2526
{
2627
"id": 3,

‎full-stack-dev/3-js-basic/18-proj-habit-tracker/18-12-layout-pop-up-window/images/close-icon.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎full-stack-dev/3-js-basic/18-proj-habit-tracker/18-12-layout-pop-up-window/index.html‎

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<div class="sidebar__logo-wrap">
2323
<img class="sidebar__logo" src="./images/logo.svg" width="66" height="71" alt="Логотип: Habit">
2424
</div>
25-
<nav class="sidebar__nav" aria-label="Навигация по привычкам" title="Навигация по привычкам">
25+
<nav class="sidebar__nav" aria-label="Навигация по привычкам">
2626
<ul class="sidebar__nav-list" id="sidebar-list"></ul>
2727
</nav>
2828
<div class="sidebar__add-btn-wrap">
@@ -51,6 +51,50 @@ <h1 class="content__title" id="header-title"></h1>
5151
<ul class="habbit-days__list" id="habbit-days-list"></ul>
5252
</div>
5353
</main>
54+
<div class="pop-up pop-up_cover pop-up_cover-hidden app__pop-up" id="pop-up-cover">
55+
<div class="pop-up__element" id="pop-up">
56+
<div class="pop-up__heading">
57+
<h2 class="pop-up__title">Новая привычка</h2>
58+
<button class="pop-up__close-btn" type="button" aria-label="Закрыть окно" title="Закрыть">
59+
<img class="pop-up__close-icon" src="./images/close-icon.svg" width="24" height="24"
60+
alt="Иконка: Перекрестие">
61+
</button>
62+
</div>
63+
<div class="pop-up__icons-wrap">
64+
<span class="pop-up__icons-label">Иконка</span>
65+
<ul class="pop-up__icons-list">
66+
<li class="pop-up__icons-item">
67+
<button class="pop-up__icons-btn" type="button" aria-label="Выбрать иконку" title="Спорт">
68+
<img class="pop-up__icons-icon" src="./images/gantel-icon.svg" width="23" height="23"
69+
alt="Иконка: Гантеля">
70+
</button>
71+
</li>
72+
<li class="pop-up__icons-item">
73+
<button class="pop-up__icons-btn pop-up__icons-btn_active" type="button" aria-label="Выбрать иконку"
74+
title="Жидкости">
75+
<img class="pop-up__icons-icon" src="./images/water-icon.svg" width="25" height="25"
76+
alt="Иконка: Бутылка с водой">
77+
</button>
78+
</li>
79+
<li class="pop-up__icons-item">
80+
<button class="pop-up__icons-btn" type="button" aria-label="Выбрать иконку" title="Питание">
81+
<img class="pop-up__icons-icon" src="./images/food-icon.svg" width="23" height="24"
82+
alt="Иконка: Тарелка с едой">
83+
</button>
84+
</li>
85+
</ul>
86+
</div>
87+
<div class="pop-up__form-wrap">
88+
<form class="pop-up__form" id="pop-up-form">
89+
<input class="pop-up__form-input" id="title-input" type="text" name="title-habbit" placeholder="Название"
90+
autocomplete="off">
91+
<input class="pop-up__form-input" id="target-input" type="number" name="target-habbit"
92+
placeholder="Цель/дней" autocomplete="off">
93+
<button class="pop-up__form-btn" type="submit">Добавить</button>
94+
</form>
95+
</div>
96+
</div>
97+
</div>
5498
</div>
5599
</body>
56100

‎full-stack-dev/3-js-basic/18-proj-habit-tracker/18-12-layout-pop-up-window/js/index.js‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,42 @@
11
'use strict';
22

3-
let habbits = [];
3+
let habbits = [
4+
{
5+
id: 1,
6+
icon: 'gantel-icon',
7+
name: 'Гантеля',
8+
title: 'Отжимания',
9+
width: 23,
10+
height: 23,
11+
target: 10,
12+
days: [
13+
{ comment: 'Первый подход всегда даётся тяжело..' },
14+
{ comment: 'Второй день немного легче!' },
15+
{ comment: 'Продолжаем!' },
16+
],
17+
},
18+
{
19+
id: 2,
20+
icon: 'water-icon',
21+
name: 'Бутылка с водой',
22+
title: 'Водный баланс',
23+
width: 25,
24+
height: 25,
25+
target: 10,
26+
days: [{ comment: 'Очень хотелось!' }, { comment: 'Супер!' }],
27+
},
28+
{
29+
id: 3,
30+
icon: 'food-icon',
31+
name: 'Тарелка с едой',
32+
title: 'Правильное питание',
33+
width: 23,
34+
height: 24,
35+
target: 10,
36+
days: [{ comment: 'Круто!' }],
37+
},
38+
];
39+
440
let globalActiveHabbitId;
541
const HABBITS_KEY = 'HABBITS';
642

@@ -22,7 +58,7 @@ function loadData() {
2258
const habbitsStr = localStorage.getItem(HABBITS_KEY);
2359
const habbitsArr = JSON.parse(habbitsStr);
2460

25-
if (Array.isArray(habbitsArr)) {
61+
if (Array.isArray(habbitsArr) && habbitsArr.length) {
2662
habbits = habbitsArr;
2763
}
2864
}
@@ -121,8 +157,8 @@ function rerenderHabbitDaysContentEl(activeHabbit) {
121157
activeHabbit.days.length + 1
122158
}</div>
123159
<form class="habbit-days__form" id="comment-form" onsubmit="addCommentDay(event)">
124-
<input class="habbit-days__form-input" id="comment-input" type="text" name="comment-day" placeholder="Комментарий">
125-
<button class="habbit-days__form-btn" type="submit" title="Добавить комментарий">Готово</button>
160+
<input class="habbit-days__form-input" id="comment-input" type="text" name="comment-day" placeholder="Комментарий" autocomplete="off">
161+
<button class="habbit-days__form-btn" type="submit">Готово</button>
126162
</form>`;
127163

128164
docFragment.append(habbitDaysCommentItem);

0 commit comments

Comments
 (0)