Skip to content

Commit

Permalink
added users page
Browse files Browse the repository at this point in the history
  • Loading branch information
Alekseevich-psk committed Oct 11, 2024
1 parent 73ea211 commit feda0cd
Show file tree
Hide file tree
Showing 21 changed files with 506 additions and 19 deletions.
Empty file removed app/images/.gitkeep
Empty file.
Binary file added app/images/no-user-photo.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file removed app/images/svg/.gitkeep
Empty file.
3 changes: 3 additions & 0 deletions app/images/svg/ico-filter-close.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions app/images/svg/ico-filter.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 38 additions & 0 deletions app/pages/components/ch-button/_ch-button.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
.ch-button {
&__input {
display: none;

&:checked ~ label {
background-color: $black;
color: $white;
}
}

&__label {
cursor: pointer;
display: block;
text-align: center;
padding: 12px 32px;
border-radius: 12px;
background-color: $bgNSearch;
font-weight: 500;
font-size: 16px;
line-height: 150%;
text-transform: uppercase;
transition: $transition;

@include for-sm-desktop {
font-size: 14px;
}

@include for-mobile {
font-size: 12px;
padding: 10px 20px;
}

&:hover {
background-color: $black;
color: $white;
}
}
}
21 changes: 21 additions & 0 deletions app/pages/components/ch-button/ch-button.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
(function () {
const selects = document.querySelectorAll("[data-ch-button-wrapper]") as NodeList;
if (selects.length > 0) {
selects.forEach((select: HTMLElement) => {
const options: NodeList = select.querySelectorAll(".ch-button__input");

function offOptions() {
options.forEach((option: HTMLInputElement) => {
option.checked = false;
});
}

options.forEach((option: HTMLInputElement, index: number) => {
option.addEventListener("click", () => {
offOptions();
option.checked = true;
});
});
});
}
})();
95 changes: 95 additions & 0 deletions app/pages/elements/sidebars/sb-users/_sb-users.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
.sb-users {
position: relative;

@include for-tablet {
margin-top: -8px;
}

&.active {
.sb-users {
&__wrapper {
transition: $transition;
position: relative;
z-index: 1;
opacity: 1;
visibility: visible;
height: auto;
}

&__button {
position: absolute;
z-index: 2;
top: 20px;
right: 20px;
background-image: url('../images/svg/ico-filter-close.svg');
}
}
}

&__wrapper {
position: relative;
padding: 24px;
border-radius: var(--brWrapper);
border: var(--borderElem);

@include for-tablet {
opacity: 0;
visibility: hidden;
height: 0;
position: absolute;
z-index: -1;
}

@include for-mobile {
padding: 22px 16px;
}
}

&__inner {
margin-bottom: 32px;

&:last-child {
margin-bottom: 0;
}
}

&__title {
display: block;
font-weight: 700;
font-size: 20px;
line-height: 160%;
color: $black;
margin-bottom: 24px;

@include for-sm-desktop {
margin-bottom: 18px;
font-size: 18px;
}
}

&__align {
display: flex;
justify-content: space-between;

&-button {
text-align: right;
}
}

&__ch-button {
width: 48%;
}

&__button {
display: none;
width: 42px;
height: 42px;
border: 4px solid var(--colorBorder);
border-radius: 8px;
background: url('../images/svg/ico-filter.svg') no-repeat center /60%;

@include for-tablet {
display: inline-block;
}
}
}
22 changes: 22 additions & 0 deletions app/pages/elements/sidebars/sb-users/sb-users.pug
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
.document__sb-users.sb-users
.sb-users__align-button
button(type="button").sb-users__button
.sb-users__wrapper
.sb-users__inner
.sb-users__title Принимает заказы?
.sb-users__align(data-ch-button-wrapper)
.sb-users__ch-button.ch-button
input(type="checkbox" name="take-orders" id="take-orders" class="ch-button__input")
label(for="take-orders" class="ch-button__label") Да
.sb-users__ch-button.ch-button
input(type="checkbox" name="no-take-orders" id="no-take-orders" class="ch-button__input")
label(for="no-take-orders" class="ch-button__label") Нет
.sb-users__inner
.sb-users__title Положительный рейтинг?
.sb-users__align(data-ch-button-wrapper)
.sb-users__ch-button.ch-button
input(type="checkbox" name="pos-rating" id="pos-rating" class="ch-button__input")
label(for="pos-rating" class="ch-button__label") Да
.sb-users__ch-button.ch-button
input(type="checkbox" name="neg-rating" id="neg-rating" class="ch-button__input")
label(for="neg-rating" class="ch-button__label") Нет
12 changes: 12 additions & 0 deletions app/pages/elements/sidebars/sb-users/sb-users.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
(function () {
const parent = document.querySelector(".sb-users") as HTMLElement | null;
if (parent === null) return;

const button = parent.querySelector(".sb-users__button") as HTMLElement | null;

if (button !== null) {
button.addEventListener("click", () => {
parent.classList.toggle("active");
});
}
})();
26 changes: 26 additions & 0 deletions app/pages/sections/document/_document.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
.document {

&__wrapper {
@include flex-wrap();
}

&__inner {
&--content {
width: 68%;
}

&--sidebar {
width: 30%;

@include for-tablet {
order: -1;
margin-bottom: 24px;
}
}

@include for-tablet {
width: 100%;
}
}

}
18 changes: 9 additions & 9 deletions app/pages/sections/users/data.pug
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
-
const users = [
{
avatar: '',
avatar: 'https://i.pinimg.com/736x/8f/d7/ee/8fd7ee35917bb06b9b5bfcdb7a93e833.jpg',
name: 'Василий Наумкин',
registration: '08.12.2012',
registrationTime: '17:43',
Expand All @@ -14,7 +14,7 @@
ratingPositive: true,
},
{
avatar: '',
avatar: './images/no-user-photo.jpg',
name: 'Павел Гвоздь',
registration: '08.12.2012',
registrationTime: '17:43',
Expand All @@ -27,7 +27,7 @@
ratingPositive: true,
},
{
avatar: '',
avatar: 'https://i.pinimg.com/736x/8f/d7/ee/8fd7ee35917bb06b9b5bfcdb7a93e833.jpg',
name: 'Сергей Шлоков',
registration: '08.12.2012',
registrationTime: '17:43',
Expand All @@ -40,7 +40,7 @@
ratingPositive: false,
},
{
avatar: '',
avatar: 'https://i.pinimg.com/736x/8f/d7/ee/8fd7ee35917bb06b9b5bfcdb7a93e833.jpg',
name: 'Володя',
registration: '08.12.2012',
registrationTime: '17:43',
Expand All @@ -53,7 +53,7 @@
ratingPositive: true,
},
{
avatar: '',
avatar: 'https://i.pinimg.com/736x/8f/d7/ee/8fd7ee35917bb06b9b5bfcdb7a93e833.jpg',
name: 'Николай Савин',
registration: '08.12.2012',
registrationTime: '17:43',
Expand All @@ -66,7 +66,7 @@
ratingPositive: false,
},
{
avatar: '',
avatar: 'https://i.pinimg.com/736x/8f/d7/ee/8fd7ee35917bb06b9b5bfcdb7a93e833.jpg',
name: 'Иван Климчук',
registration: '08.12.2012',
registrationTime: '17:43',
Expand All @@ -79,7 +79,7 @@
ratingPositive: true,
},
{
avatar: '',
avatar: 'https://i.pinimg.com/736x/8f/d7/ee/8fd7ee35917bb06b9b5bfcdb7a93e833.jpg',
name: 'Андрей Степаненко',
registration: '08.12.2012',
registrationTime: '17:43',
Expand All @@ -92,7 +92,7 @@
ratingPositive: true,
},
{
avatar: '',
avatar: 'https://i.pinimg.com/736x/8f/d7/ee/8fd7ee35917bb06b9b5bfcdb7a93e833.jpg',
name: 'Илья Уткин',
registration: '08.12.2012',
registrationTime: '17:43',
Expand All @@ -105,7 +105,7 @@
ratingPositive: true,
},
{
avatar: '',
avatar: './images/no-user-photo.jpg',
name: 'Fi1osof',
registration: '08.12.2012',
registrationTime: '17:43',
Expand Down
32 changes: 29 additions & 3 deletions app/pages/sections/users/users.pug
Original file line number Diff line number Diff line change
@@ -1,5 +1,31 @@
include data.pug
include ./data.pug

section.users#users
.users__container.container
.document__users.users
.users__table
each user, index in users
.users__card-user.card-user
.card-user__body
.card-user__count=`# ${index}`
.card-user__photo
img(src=user.avatar, alt="")
.card-user__text
.card-user__name=user.name
.card-user__info
span Регистрация:
span=user.registration
.card-user__info
span Активность:
span=user.activity
.card-user__info.card-user__info--order
span Принимает заказы:
span(class=`${user.ratingPositive ? 'get-order' : ''}`)=`${user.ratingPositive ? 'Да' : 'Нет'}`
.card-user__statistic.card-user__statistic--comments
span Комментариев
span=user.comments
.card-user__statistic
span Заметок
span=user.articles
.card-user__statistic.card-user__statistic--rating
span Рейтинг
span(class=`${user.ratingPositive ? 'rating-pos' : 'rating-neg'}`)=user.rating

15 changes: 14 additions & 1 deletion app/pages/sections/users/users.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
.users {

}
&__table {
border-radius: var(--brWrapper);
padding: 4px;
border: var(--borderElem);
}

&__card-user {
border-bottom: var(--borderElem);

&:last-child {
border-bottom: none;
}
}
}
9 changes: 8 additions & 1 deletion app/pages/users.pug
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,11 @@ block variables
- const title = "Пользователи"

block content
include sections/users/users.pug
section.document
.document__container.container
h1.document__s-title.s-title Пользователи
.document__wrapper
.document__inner.document__inner--content
include sections/users/users.pug
.document__inner.document__inner--sidebar
include elements/sidebars/sb-users/sb-users.pug
7 changes: 5 additions & 2 deletions app/scripts/main.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
// import './swiper.ts';

import "Components/header/header.ts";
import "Components/n-search/n-search.ts";
import "Elements/sidebars/sb-users/sb-users";

import "Components/header/header";
import "Components/n-search/n-search";
import "Components/ch-button/ch-button";
Loading

0 comments on commit feda0cd

Please sign in to comment.