From d42283ecf2f28eb6adc8b8b837dd79eff7e0f752 Mon Sep 17 00:00:00 2001 From: jgerstbe Date: Sun, 1 Nov 2020 23:21:08 +0100 Subject: [PATCH] [U] channel.comp styling, message class --- src/app/api/supabase/message.ts | 12 ++- src/app/channel/channel.component.html | 126 ++++++------------------- src/app/channel/channel.component.scss | 37 ++++++-- 3 files changed, 65 insertions(+), 110 deletions(-) diff --git a/src/app/api/supabase/message.ts b/src/app/api/supabase/message.ts index 9e09841..157b720 100644 --- a/src/app/api/supabase/message.ts +++ b/src/app/api/supabase/message.ts @@ -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; + } } \ No newline at end of file diff --git a/src/app/channel/channel.component.html b/src/app/channel/channel.component.html index 899e9d5..cf55bb2 100644 --- a/src/app/channel/channel.component.html +++ b/src/app/channel/channel.component.html @@ -1,106 +1,34 @@ -
-
- #{{ channel.name }} -
-
-
- - +
+
+
+ #{{ channel.name }} +
+
+
+ + +
+
+
+ {{ channel.description }}
-
- {{ channel.description }} -
-
-
-
-
    -
  • Cras justo odio
    • -
  • Dapibus ac facilisis in
    • -
  • Morbi leo risus
    • -
  • Porta ac consectetur ac
    • -
  • Vestibulum at eros
    • -
  • Cras justo odio
    • -
  • Dapibus ac facilisis in
    • -
  • Morbi leo risus
    • -
  • Porta ac consectetur ac
    • -
  • Vestibulum at eros
    • -
  • Cras justo odio
    • -
  • Dapibus ac facilisis in
    • -
  • Morbi leo risus
    • -
  • Porta ac consectetur ac
    • -
  • Vestibulum at eros
    • -
  • Cras justo odio
    • -
  • Dapibus ac facilisis in
    • -
  • Morbi leo risus
    • -
  • Porta ac consectetur ac
    • -
  • Vestibulum at eros
    • -
  • Cras justo odio
    • -
  • Dapibus ac facilisis in
    • -
  • Morbi leo risus
    • -
  • Porta ac consectetur ac
    • -
  • Vestibulum at eros
    • -
  • Cras justo odio
    • -
  • Dapibus ac facilisis in
    • -
  • Morbi leo risus
    • -
  • Porta ac consectetur ac
    • -
  • Vestibulum at eros
    • -
  • Cras justo odio
    • -
  • Dapibus ac facilisis in
    • -
  • Morbi leo risus
    • -
  • Porta ac consectetur ac
    • -
  • Vestibulum at eros
    • -
  • Cras justo odio
    • -
  • Dapibus ac facilisis in
    • -
  • Morbi leo risus
    • -
  • Porta ac consectetur ac
    • -
  • Vestibulum at eros
    • -
  • Cras justo odio
    • -
  • Dapibus ac facilisis in
    • -
  • Morbi leo risus
    • -
  • Porta ac consectetur ac
    • -
  • Vestibulum at eros
    • -
  • Cras justo odio
    • -
  • Dapibus ac facilisis in
    • -
  • Morbi leo risus
    • -
  • Porta ac consectetur ac
    • -
  • Vestibulum at eros
    • -
  • Cras justo odio
    • -
  • Dapibus ac facilisis in
    • -
  • Morbi leo risus
    • -
  • Porta ac consectetur ac
    • -
  • Vestibulum at eros
    • -
  • Cras justo odio
    • -
  • Dapibus ac facilisis in
    • -
  • Morbi leo risus
    • -
  • Porta ac consectetur ac
    • -
  • Vestibulum at eros
    • -
  • Cras justo odio
    • -
  • Dapibus ac facilisis in
    • -
  • Morbi leo risus
    • -
  • Porta ac consectetur ac
    • -
  • Vestibulum at eros
    • -
  • Cras justo odio
    • -
  • Dapibus ac facilisis in
    • -
  • Morbi leo risus
    • -
  • Porta ac consectetur ac
    • -
  • Vestibulum at eros
    • -
  • Cras justo odio
    • -
  • Dapibus ac facilisis in
    • -
  • Morbi leo risus
    • -
  • Porta ac consectetur ac
    • -
  • Vestibulum at eros
    • -
-
-
- -
-
- -
- +
+
+
    +
  • {{m.message}}
    • +
+ +
+
+ +
+ +
+
+
diff --git a/src/app/channel/channel.component.scss b/src/app/channel/channel.component.scss index 78bc529..54bbb5b 100644 --- a/src/app/channel/channel.component.scss +++ b/src/app/channel/channel.component.scss @@ -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 @@ } } } -} \ No newline at end of file +}