ui: add features (#504)

packages/ui-default/components/messagepad/MessagePad.page.styl

@@ -20,11 +20,21 @@ $send-button-width = 50px
   overflow: auto
   height: rem($list-height)
 
-.messagepad__content
+.messagepad__header
   position: absolute
   left: rem($sidebar-width)
   right: 0
   top: 0
+  height: rem(30px)
+  padding: rem(5px)
+  text-align: center
+  border-bottom: 1px solid #eee;
+
+.messagepad__content
+  position: absolute
+  left: rem($sidebar-width)
+  right: 0
+  top: rem(30px)
   bottom: rem($input-height)
   overflow: auto
   padding: rem(30px)

packages/ui-default/components/messagepad/MessagePadDialogueContentContainer.jsx

@@ -90,9 +90,19 @@ export default connect(mapStateToProps)(class MessagePadDialogueContentContainer
 
   render() {
     return (
-      <ol className="messagepad__content" ref="list">
-        {this.renderInner()}
-      </ol>
+      <>
+        <div className="messagepad__header">
+          { this.props.item
+          && (
+            <a className="messagepad__content__header__title" href={`/user/${this.props.item.udoc._id}`}>
+              {`${this.props.item.udoc.uname}(UID: ${this.props.item.udoc._id})`}
+            </a>
+          )}
+        </div>
+        <ol className="messagepad__content" ref="list">
+          {this.renderInner()}
+        </ol>
+      </>
     );
   }
 });

packages/ui-default/pages/home_messages.page.jsx

@@ -29,6 +29,7 @@ const page = new NamedPage('home_messages', () => {
     const { Provider, store } = await loadReactRedux(MessagePadReducer);
 
     reduxStore = store;
+    window.store = reduxStore;
 
     const sock = new WebSocket(`${UiContext.ws_prefix}home/messages-conn`);
     sock.onmessage = (message) => {

packages/ui-default/pages/homepage.page.styl

@@ -0,0 +1,12 @@
+.page--homepage
+    .more
+        text-align: center
+        a
+            color: #a7a7a7
+            font-size: rem($font-size-secondary)
+            text-decoration: none
+            border-bottom: 2px solid $pager-border-color
+            transition: border-bottom .2s linear, color .2s linear
+            &:hover
+                color: #666;
+                border-color: #5f9fd6

packages/ui-default/templates/partials/homepage/contest.html

@@ -41,5 +41,8 @@
         </li>
       {%- endfor -%}
     </ol>
+    <div class="section__footer more">
+      <a href="{{ url('contest_main') }}">{{ _('More') }} ></a>
+    </div>
   </div>
 {% endif %}

packages/ui-default/templates/partials/homepage/discussion.html

@@ -6,5 +6,8 @@
       <h1 class="section__title">{{ _('Discussion') }}</h1>
     </div>
     {% include "partials/discussion_list.html" %}
+    <div class="section__footer more">
+      <a href="{{ url('discussion_main') }}">{{ _('More') }} ></a>
+    </div>
   </div>
 {% endif %}

packages/ui-default/templates/partials/homepage/homework.html

@@ -38,5 +38,8 @@
         </li>
       {%- endfor -%}
     </ol>
+    <div class="section__footer more">
+      <a href="{{ url('homework_main') }}">{{ _('More') }} ></a>
+    </div>
   </div>
 {% endif %}

packages/ui-default/templates/partials/homepage/ranking.html

@@ -34,5 +34,8 @@
         </table>
       </div>
     </div>
+    <div class="section__footer more">
+      <a href="{{ url('ranking') }}">{{ _('More') }} ></a>
+    </div>
   </div>
 {% endif %}

packages/ui-default/templates/partials/homepage/training.html

@@ -43,5 +43,8 @@
         </li>
       {%- endfor -%}
     </ol>
+    <div class="section__footer more">
+      <a href="{{ url('training_main') }}">{{ _('More') }} ></a>
+    </div>
   </div>
 {% endif %}