Andrey
/
object-type-constructor-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css admin

master
Boris Voropaev 2023-12-14 10:50:51 +03:00
parent 41cdfe8732
commit e1801953c2
7 changed files with 126 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/_modules/users/list/item/users-list-item.component.html
View File

@ -6,11 +6,13 @@
</div>
</div>
<div class="middle">
<div class="name">{{user.name}} • <span class="role {{role.name}}">{{role.title}}</span></div>
<div class="user-data">
<span class="name">{{user.name}}</span>
<span class="role {{role.name}}">{{role.title}}</span></div>
<div class="position">{{user.position}}</div>
</div>
<div class="right">
<button class="btn icon edit" (click)="edit()" title="Редактировать"></button>
<button class="btn icon trash" (click)="delete()" title="Удалить"></button>
<ico ico="edit_24" (click)="edit()"></ico>
<ico ico="delete_24" (click)="delete()"></ico>
</div>
</div>

64
src/app/_modules/users/list/item/users-list-item.component.scss
View File

@ -1,66 +1,2 @@
.item {
display: flex;
flex-direction: row;
align-items: center;
.left {
margin-right: 8px;
flex-shrink: 0;
.avatar {
display: flex;
width: 40px;
height: 40px;
border-radius: 100px;
background-color: #167ABF;
overflow: hidden;
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.initials {
margin: auto;
color: #ffffff;
text-align: center;
}
}
}
.middle {
flex-grow: 1;
.name {
}
.role {
&.User {color: #20802D;}
&.Editor {color: #999926;}
&.Administrator {color: #D91519;}
}
.position {
color: #666666;
}
}
.right {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 24px;
margin-left: 24px;
}
}
@media screen and (max-width: 600px) {
.item {
.right {
gap: 12px;
margin-left: 12px;
}
}
}

2
src/app/_modules/users/list/users-list.component.html
View File

@ -1,5 +1,5 @@
<div class="bar">
<div class="title">Список сотрудников</div>
<div class="buttons"><button type="button" class="btn" (click)="add()" title="Создать сотрудника">+</button></div>
<ico ico="person_add_24" (click)="add()" title="Создать сотрудника"></ico>
</div>
<users-list-item [user]="user" [listId]="listId" *ngFor="let user of users"></users-list-item>

24
src/app/_modules/users/list/users-list.component.scss
View File

@ -1,25 +1 @@
.bar {
display: flex;
flex-direction: row;
align-items: stretch;
padding: 12px 0;
border-top: #E0E0E0 solid 1px;
border-bottom: #E0E0E0 solid 1px;
.title {
flex-grow: 1;
font-weight: bold;
}
.buttons {
display: flex;
flex-direction: row;
align-items: center;
gap: 24px;
flex-shrink: 0;
}
}
users-list-item {
display: block;
padding: 12px 0;
border-bottom: #E0E0E0 solid 1px;
}

2
src/app/_modules/users/users.module.ts
View File

@ -5,6 +5,7 @@ import {AuthGuard} from "@app/_helpers";
import {UserProfileComponent} from "@app/_modules/users/profile/user-profile.component";
import {UsersListComponent} from "@app/_modules/users/list/users-list.component";
import {UsersListItemComponent} from "@app/_modules/users/list/item/users-list-item.component";
import { WidjetModule } from '../widjet/widjet.module';
const routes = [
{path: 'profile', component: UserProfileComponent, canActivate: [AuthGuard]}
@ -13,6 +14,7 @@ const routes = [
@NgModule({
imports: [
CommonModule,
WidjetModule,
RouterModule.forRoot(routes)
],
declarations: [

106
src/vniigaz-v2/css/_admin.scss
View File

@ -8,6 +8,15 @@
color: var(--second-act);
margin-bottom: 48px;
}
button{
font-family: PT Sans;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 171.429% */
letter-spacing: 0.56px;
text-transform: uppercase;
}
}
@ -159,6 +168,10 @@ pages-tree{
}
}
@ -222,4 +235,97 @@ administrate-licence{
p{
font-size: 16px;
}
}
users-list{
.bar {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
border-top: var(--second-dis) solid 1px;
border-bottom: var(--second-dis) solid 1px;
ico{
cursor: pointer;
}
.title {
flex-grow: 1;
font-weight: bold;
}
.buttons {
display: flex;
flex-direction: row;
align-items: center;
gap: 24px;
flex-shrink: 0;
}
}
users-list-item {
display: flex;
align-items: center;
height: 72px;
border-bottom: var(--second-dis) solid 1px;
.item{
display: flex;
width: 100%;
.left{
.avatar{
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
width: 40px;
height: 40px;
margin-right: 16px;
border-radius: 100px;
background-color: var(--prime);
color: #ffffff;
}
}
.middle{
.user-data{
.name{
&::after{
content: '•';
color: var(--second);
margin: 0 8px;
}
}
.Administrator{
color: #E51F30;
}
.Editor{
color: #A39600
}
.User{
color: #14A92D;
}
}
.position{
color: var(--second);
}
}
.right{
flex-grow: 1;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 24px;
}
ico{
cursor: pointer;
svg{
color: var(--second) ;
}
&:hover{
svg{
color: var(--second-act) ;
}
}
}
}
}
}

12
src/vniigaz-v2/css/_slider.scss
View File

@ -187,6 +187,18 @@
padding: 16px 24px;
background: #F8F8F8;
box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.12);
button{
font-family: PT Sans;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 171.429% */
letter-spacing: 0.56px;
text-transform: uppercase;
border-radius: 4px;
padding: 8px 20px;
}
.left {
.reset {