[U] channel.comp styling, message class
This commit is contained in:
parent
57306fe7bf
commit
d42283ecf2
3 changed files with 65 additions and 110 deletions
|
|
@ -1,3 +1,13 @@
|
|||
export class Message {
|
||||
|
||||
id: number;
|
||||
channel_id: number;
|
||||
user_id: string;
|
||||
message: string;
|
||||
inserted_at: string | Date;
|
||||
|
||||
constructor(channel_id: number, user_id: string, message: string) {
|
||||
this.channel_id = channel_id;
|
||||
this.user_id = user_id;
|
||||
this.message = message;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,106 +1,34 @@
|
|||
<ng-container *ngIf="channel">
|
||||
<div class="row headerRow">
|
||||
<div class="col-7 col-sm-10">
|
||||
<strong>#</strong><strong #name contenteditable="true" (click)="dataUpdated=true">{{ channel.name }}</strong>
|
||||
</div>
|
||||
<div class="col-5 col-sm-2">
|
||||
<div class="text-right">
|
||||
<button class="btn btn-sm btn-primary mb-1" [disabled]="!dataUpdated" (click)="updateChannel(name.innerText, desc.innerText)">Save</button>
|
||||
<button class="btn btn-sm btn-danger ml-1 mb-1" (click)="deleteChannel()">Delete</button>
|
||||
<div class="d-flex flex-column justify-content-between channelContainer">
|
||||
<div class="row headerRow">
|
||||
<div class="col-7 col-sm-10">
|
||||
<strong>#</strong><strong #name contenteditable="true" (click)="dataUpdated=true">{{ channel.name }}</strong>
|
||||
</div>
|
||||
<div class="col-5 col-sm-2">
|
||||
<div class="text-right">
|
||||
<button class="btn btn-sm btn-primary mb-1" [disabled]="!dataUpdated" (click)="updateChannel(name.innerText, desc.innerText)">Save</button>
|
||||
<button class="btn btn-sm btn-danger ml-1 mb-1" (click)="deleteChannel()">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<span #desc contenteditable="true" (click)="dataUpdated=true">{{ channel.description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<span #desc contenteditable="true" (click)="dataUpdated=true">{{ channel.description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row messageRow">
|
||||
<div class="col-12 p-0">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- send msg -->
|
||||
<div class="row inputRow">
|
||||
<div class="card w-100 m-3 d-flex flex-row">
|
||||
<input [(ngModel)]="messageInput" type="text" class="input flex-grow-1">
|
||||
<div class="optionRow">
|
||||
<button class="btn btn-sm btn-primary btnSend ml-1">Send</button>
|
||||
<div class="row messageRow">
|
||||
<div class="col-12 p-0">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li *ngFor="let m of messages" class="list-group-item">{{m.message}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- send msg -->
|
||||
<div class="inputRow">
|
||||
<div class="card w-100 d-flex flex-row">
|
||||
<input [(ngModel)]="messageInput" type="text" class="input flex-grow-1">
|
||||
<div class="optionRow">
|
||||
<button class="btn btn-sm btn-primary btnSend ml-1">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -3,24 +3,41 @@
|
|||
padding-bottom: 10px;
|
||||
border-bottom: 1px dashed #343a40;
|
||||
}
|
||||
.channelContainer {
|
||||
height: calc(100vh - 71px);
|
||||
}
|
||||
.messageRow {
|
||||
margin-bottom: 60px;
|
||||
max-height: calc(100vh - 200px);
|
||||
overflow: hidden scroll;
|
||||
overflow: hidden auto;
|
||||
height: 100%;
|
||||
// scrollbar
|
||||
&::-webkit-scrollbar {
|
||||
width: 12px; /* width of the entire scrollbar */
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
// background: lightgray; /* color of the tracking area */
|
||||
border: solid 3px white;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: lightseagreen; /* color of the scroll thumb */
|
||||
border-radius: 20px; /* roundness of the scroll thumb */
|
||||
// border: 10px solid green; /* creates padding around scroll thumb */;
|
||||
border: solid 3px white;
|
||||
}
|
||||
&::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.inputRow {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
// width: calc(100vw - 300px);
|
||||
width: 100%;
|
||||
.card {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.input {
|
||||
border: 0;
|
||||
// width: 100%;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.optionRow {
|
||||
// background-color: lightgray;
|
||||
// width: 100%;
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
.btnSend {
|
||||
|
|
@ -32,4 +49,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue