yvachot/chatless
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

add css for message.componenet and private.component - error when insert group icon for general room

Browse source
This commit is contained in:
vankhaiphan 2021-06-02 09:23:16 +02:00
parent febf812963
commit ae3c3456c5
5 changed files with 29 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/message/message.component.html
View file

@ -1,5 +1,5 @@
<div class="chat-container">
<div class="chat-header">
<div class="chat-header bg-primary">
<p class="username" *ngIf="room !== 'general'">{{room}}</p>
<p class="username" *ngIf="room === 'general'">General</p>
<p class="username" *ngIf="room === ''">PLEASE CHOOSE A ROOM</p>

5
frontend/src/app/message/message.component.scss
View file

@ -1,3 +1,6 @@
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages > li { padding: 0.5rem 1rem; }
#messages > li:nth-child(odd) { background: #efefef; }
#messages > li:nth-child(odd) { background: #007bff; }
.chat-container .chat-header {
height: 60px;
}

19
frontend/src/app/private/private.component.html
View file

@ -1,16 +1,23 @@
<div class="container col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-3 col-3">
<input *ngIf="privateRoomActivate === false" class="btn btn-sm btn-primary" name="button-change-private" (click)="changeListPrivate()" type="submit" value="Private Room">
<input *ngIf="privateRoomActivate === false" class="btn btn-sm btn-primary" name="button-change-private" (click)="changeListGeneral()" type="submit" value="Actualiser">
<input *ngIf="privateRoomActivate === true" class="btn btn-sm btn-primary" name="button-change-private" (click)="changeListGeneral()" type="submit" value="Home Room">
<input *ngIf="privateRoomActivate === true" class="btn btn-sm btn-primary" name="button-change-private" (click)="newRoom()" type="submit" value="New Room">
<input *ngIf="privateRoomActivate === true" class="btn btn-sm btn-primary" name="button-change-private" (click)="changeListPrivate()" type="submit" value="Actualiser">
<br>
<div class="btn-group">
<input *ngIf="privateRoomActivate === false" class="btn btn-sm btn-primary" name="button-change-private" (click)="changeListPrivate()" type="submit" value="Private Room">
<input *ngIf="privateRoomActivate === false" class="btn btn-sm btn-primary" name="button-change-private" (click)="changeListGeneral()" type="submit" value="Actualiser">
<input *ngIf="privateRoomActivate === true" class="btn btn-sm btn-primary" name="button-change-private" (click)="changeListGeneral()" type="submit" value="Home Room">
<input *ngIf="privateRoomActivate === true" class="btn btn-sm btn-primary" name="button-change-private" (click)="newRoom()" type="submit" value="New Room">
<input *ngIf="privateRoomActivate === true" class="btn btn-sm btn-primary" name="button-change-private" (click)="changeListPrivate()" type="submit" value="Actualiser">
</div>
<div #userList class="user-list-card" id="userList" (click)="selectRoom($event)">
<div class="user-card"><p class="username">General</p></div>
<div class="user-card">
<img src="./assets/image/group.png" height="25" width="25"/>
<p class="username">General</p>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-8 col-md-8 col-sm-9 col-9">
<br>
<app-message [room]="roomSelected" [typeRoom]="privateRoomActivate"></app-message>
</div>
</div>

9
frontend/src/app/private/private.component.scss
View file

@ -0,0 +1,9 @@
.btn-group{
height: 60px;
padding-bottom: 10px;
display: flex;
flex-direction: row;
}
.user-list-card{
height: calc(100% - 80px);
}