discourse/plugins/chat/assets/stylesheets/mobile/chat-footer.scss

.full-page-chat {
  #main-chat-outlet.chat-view {
    display: grid;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "list"
      "footer";
  }

  .channels-list {
    grid-area: list;
    padding-bottom: 0;
  }
}

.c-footer {
  &__item {
    .c-unread-indicator,
    .c-unread-indicator.-urgent {
      margin-left: 1rem;
    }

    &.--active {
      .full-page-chat & {
        .d-icon,
        .d-button-label {
          color: var(--d-nav-color--active);
        }
      }
    }
  }
}
FEATURE: Mobile Chat Footer Redesign (#25161) This update adds three tabs to the bottom of the chat overlay to make it easier for users to navigate chat on mobile. As a result of this change: - Direct Messages are now shown separately from public channels on mobile - My Threads has now moved from the channel list to it's own tab on mobile - My Threads can still be accessed on desktop via the sidebar and within the drawer channel list - Chat back button has been updated to navigate to the correct tab (for both channels and threads) Some special cases: - If DMs are not used then the tab is not rendered - If the user has no threads then the tab is not rendered - If both the tabs for DMs and Threads aren't available then the whole footer will not be rendered - Chat footer is only shown on the listing pages (DMs, Channels, My Threads) --------- Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com> Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com> 2024-01-16 14:29:33 +08:00			`.full-page-chat {`
			`#main-chat-outlet.chat-view {`
UX: chat index mini refactor (#29082) 2024-10-04 14:10:36 +02:00			`display: grid;`
			`grid-template-rows: 1fr auto;`
FEATURE: Mobile Chat Footer Redesign (#25161) This update adds three tabs to the bottom of the chat overlay to make it easier for users to navigate chat on mobile. As a result of this change: - Direct Messages are now shown separately from public channels on mobile - My Threads has now moved from the channel list to it's own tab on mobile - My Threads can still be accessed on desktop via the sidebar and within the drawer channel list - Chat back button has been updated to navigate to the correct tab (for both channels and threads) Some special cases: - If DMs are not used then the tab is not rendered - If the user has no threads then the tab is not rendered - If both the tabs for DMs and Threads aren't available then the whole footer will not be rendered - Chat footer is only shown on the listing pages (DMs, Channels, My Threads) --------- Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com> Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com> 2024-01-16 14:29:33 +08:00			`grid-template-areas:`
			`"list"`
			`"footer";`
			`}`

			`.channels-list {`
			`grid-area: list;`
			`padding-bottom: 0;`
			`}`
			`}`
UX: hide draft post notice on mobile chat (#25297) 2024-01-17 16:45:25 +08:00
UX: Chat footer unread indicator (#27244) A few follup changes after changing to the chat footer split for drawer: * Fixing a bug that stretched the unread indicator on mobile * Minor style changes in hover/focus behaviour for chat drawer * Repositioning of unread indicator so it has more space at the top of the footer * Using the `c-unread-indicator` mixin 2024-05-29 17:16:03 +02:00			`.c-footer {`
			`&__item {`
			`.c-unread-indicator,`
			`.c-unread-indicator.-urgent {`
			`margin-left: 1rem;`
			`}`
UX: revert chat footer changes partially (#27591) 2024-06-24 17:46:54 +02:00
			`&.--active {`
			`.full-page-chat & {`
			`.d-icon,`
			`.d-button-label {`
			`color: var(--d-nav-color--active);`
			`}`
			`}`
			`}`
UX: Chat footer unread indicator (#27244) A few follup changes after changing to the chat footer split for drawer: * Fixing a bug that stretched the unread indicator on mobile * Minor style changes in hover/focus behaviour for chat drawer * Repositioning of unread indicator so it has more space at the top of the footer * Using the `c-unread-indicator` mixin 2024-05-29 17:16:03 +02:00			`}`
			`}`