@social-mail/social-mail-client 1.2.91 → 1.2.92

package/src/public/channel/ChannelMessage.tsx

@@ -17,15 +17,29 @@ export default class ChannelMessage extends AtomControl {
     @InjectProperty
     blogService: BlogService;
 
+    constructor(app, e = document.createElement("section")) {
+        super(app, e);
+        this.runAfterInit(() => this.app.runAsync(() => this.init()));
+    }
+
     async init() {
-        const { items: [ email ]} = await this.blogService.getEmails({ channelID,  start: 0, size: 1, cancelToken: null});
+
+        const channel = await this.blogService.getChannel(void 0, channelID, void 0);
+
+        const email = await this.blogService.getEmail(emailID);
 
         this.renderer = <section data-element="blog-item">
+            <header>
+                <div styler-display="flex" styler-gap="size-default">
+                    <span text={channel.emailAddress.name}/>
+                    <a href={`mailto:subscribe-${channel.emailAddress.emailAddress}?subject=subscribe`}><button>Follow</button></a>
+                </div>
+            </header>
             <h4 data-element="title">
                 <label text={email.subject}/>
             </h4>
             <h6 data-element="date" text={DateFormats.relative.short(email.dateSent)}/>
-            <h6 text={email.senderName}/>
+            <h5 text={email.senderName}/>
             <section
                 data-element="content">
                 <section { ... renderMail({ email })}/>

package/src/public/channel/ChannelMessageList.tsx

@@ -60,11 +60,11 @@ export default class ChannelView extends AtomControl {
         this.element.className = channelViewStyle;
         this.renderer = <section>
             <header>
-                <div>
+                <div styler-display="flex" styler-gap="size-default">
                     <span text={this.channel.emailAddress.name}/>
                     <a href={`mailto:subscribe-${this.channel.emailAddress.emailAddress}?subject=subscribe`}><button>Follow</button></a>
                 </div>
-                <div>
+                <div styler-display="flex" styler-gap="size-default">
                     <input
                         placeholder="Search..."
                         value={Bind.twoWaysImmediate(() => this.search)}/>
@@ -89,7 +89,7 @@ export default class ChannelView extends AtomControl {
                                 <a href={UrlService.toBlogUrl(channelID, email.emailID, email.subject)} text={email.subject}></a>
                             </h4>
                             <h6 data-element="date" text={DateFormats.relative.short(email.dateSent)}/>
-                            <h6 text={email.senderName}/>
+                            <h5 text={email.senderName}/>
                             <section
                                 data-element="content">
                                 <LimitedText height={200}>

package/src/public/channel/ChannelView.tsx

@@ -16,7 +16,7 @@ import styled from "@web-atoms/core/dist/style/styled";
             border: solid 1px lightgray;
             border-radius: 10px;
             display: grid;
-            grid-template-columns: 1fr auto;
+            grid-template-columns: 1fr auto auto;
             grid-template-rows: auto 1fr;
 
             background-color: gray;
@@ -37,19 +37,26 @@ import styled from "@web-atoms/core/dist/style/styled";
                 }
             }
 
-            & > h6 {
+            & > h5 {
                 grid-row: 1;
                 grid-column: 2;
                 margin-block-start: 0;
                 margin-block-end: 0;
                 padding: 10px;
             }
+            & > h6 {
+                grid-row: 1;
+                grid-column: 3;
+                margin-block-start: 0;
+                margin-block-end: 0;
+                padding: 10px;
+            }
             & > section {
                 padding: 10px;
                 border-bottom-left-radius: 10px;
                 border-bottom-right-radius: 10px;
                 grid-row: 2;
-                grid-column: 1 / span 2;
+                grid-column: 1 / span 3;
                 background-color: canvas;
             }
         }