From 2f2e687a189d900cdf6bbd1285d3b55085c8805b Mon Sep 17 00:00:00 2001 From: JC Brand Date: Mon, 5 Mar 2018 18:37:18 +0100 Subject: [PATCH] Use flex column for occupant sidebar --- css/converse.css | 14 ++++-- css/inverse.css | 26 +++++------ mockup/chatroom.html | 81 +++++++++++++++++++++++++---------- sass/_chatrooms.scss | 23 ++++++++-- sass/_controlbox.scss | 1 - sass/inverse/_chatrooms.scss | 10 ----- sass/inverse/_controlbox.scss | 4 -- 7 files changed, 99 insertions(+), 60 deletions(-) diff --git a/css/converse.css b/css/converse.css index 5f24da561..7ad1a45f2 100644 --- a/css/converse.css +++ b/css/converse.css @@ -5915,7 +5915,6 @@ body.reset { font-size: 14px; left: 0; text-align: left; - overflow-y: scroll; overflow-x: hidden; border-radius: 4px; } #conversejs #controlbox .controlbox-pane .add-converse-contact { @@ -6169,6 +6168,7 @@ body.reset { width: 100%; } } #converse-embedded-chat .chatroom .box-flyout, #conversejs .chatroom .box-flyout { + overflow-y: hidden; width: 100%; } @media screen and (max-height: 450px) { #converse-embedded-chat .chatroom .box-flyout, @@ -6235,6 +6235,9 @@ body.reset { min-width: 100%; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants, #conversejs .chatroom .box-flyout .chatroom-body .occupants { + display: flex; + flex-direction: column; + justify-content: space-between; overflow-x: hidden; overflow-y: hidden; vertical-align: top; @@ -6246,9 +6249,12 @@ body.reset { #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading { padding: 0.3em 0; font-weight: bold; } + #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature, + #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature { + font-size: 12px; + width: 100%; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features, #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features { - bottom: 0.5em; width: 100%; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature, #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature { @@ -6273,8 +6279,8 @@ body.reset { #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list, #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list { overflow-y: auto; - height: -webkit-calc(100% - 220px); - height: calc(100% - 220px); } + flex-basis: 0; + flex-grow: 1; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list, #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list { padding-top: 0; } diff --git a/css/inverse.css b/css/inverse.css index 421472dcf..5239a8e34 100644 --- a/css/inverse.css +++ b/css/inverse.css @@ -5981,7 +5981,6 @@ body { font-size: 16px; left: 0; text-align: left; - overflow-y: scroll; overflow-x: hidden; border-radius: 4px; } #conversejs #controlbox .controlbox-pane .add-converse-contact { @@ -6033,8 +6032,6 @@ body { display: block; } } #conversejs.fullscreen #controlbox { margin: 0; } - #conversejs.fullscreen #controlbox .controlbox-panes { - overflow-y: hidden; } #conversejs.fullscreen #controlbox .controlbox-pane { border-radius: 0; } #conversejs.fullscreen #controlbox .flyout { @@ -6288,6 +6285,7 @@ body { width: 100%; } } #converse-embedded-chat .chatroom .box-flyout, #conversejs .chatroom .box-flyout { + overflow-y: hidden; width: 100%; } @media screen and (max-height: 450px) { #converse-embedded-chat .chatroom .box-flyout, @@ -6354,6 +6352,9 @@ body { min-width: 100%; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants, #conversejs .chatroom .box-flyout .chatroom-body .occupants { + display: flex; + flex-direction: column; + justify-content: space-between; overflow-x: hidden; overflow-y: hidden; vertical-align: top; @@ -6365,9 +6366,12 @@ body { #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading { padding: 0.3em 0; font-weight: bold; } + #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature, + #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature { + font-size: 14px; + width: 100%; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features, #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features { - bottom: 0.5em; width: 100%; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature, #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature { @@ -6392,8 +6396,8 @@ body { #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list, #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list { overflow-y: auto; - height: -webkit-calc(100% - 220px); - height: calc(100% - 220px); } + flex-basis: 0; + flex-grow: 1; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list, #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list { padding-top: 0; } @@ -6518,15 +6522,7 @@ body { padding: 1em; } #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants .occupants-heading { font-size: 18px; } - #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants .chatroom-features { - bottom: 1em; } - #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list { - height: -webkit-calc(100% - 212px); - height: calc(100% - 212px); } - #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li { - font-size: 14px; - width: 100%; } - #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants ul li.feature { + #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li { font-size: 14px; } #conversejs.fullscreen .chatroom .room-invite span .invited-contact { margin: 0 0 0.5em -1px; } diff --git a/mockup/chatroom.html b/mockup/chatroom.html index 0137dc49c..dcb783faf 100644 --- a/mockup/chatroom.html +++ b/mockup/chatroom.html @@ -8,7 +8,7 @@ - +
@@ -88,32 +88,69 @@

Occupants:

-
+
-
    -
  • -
    luke
    • -
  • -
    leia
    • -
  • -
    Obi-wan Kenobi, Jedi Master
    • -
  • -
    jabber the hut
    • -
-
-

Features

-
    -
  •  
    • -
  •  
    • -
  •  
    • -
  •  
    • -
  •  
    • -
  •  
    • +
      +
    • +
      luke
      • +
    • +
      leia
      • +
    • +
      Obi-wan Kenobi, Jedi Master
      • +
    • +
      jabber the hut
      • +
    • +
      jabber the hut
      • +
    • +
      jabber the hut
      • +
    • +
      jabber the hut
      • +
    • +
      jabber the hut
      • +
    • +
      jabber the hut
      • +
    • +
      jabber the hut
      • +
    • +
      jabber the hut
      • +
    • +
      jabber the hut
      • +
    • +
      jabber the hut
      • +
    • +
      jabber the hut
      • +
    • +
      jabber the hut
      • +
    • +
      jabber the hut
      • +
    • +
      jabber the hut
      • +
    • +
      jabber the hut
      • +
    • +
      jabber the hut
      • +
    • +
      jabber the hut
      • +
    • +
      jabber the hut
      • +
    • +
      jabber the hut
    -
+
+

Features

+
    +
  •  Password required
    • +
  •  Public
    • +
  •  Open
    • +
  •  Persistent
    • +
  •  Non-anonymous
    • +
  •  Unmoderated
    • +
+
+
diff --git a/sass/_chatrooms.scss b/sass/_chatrooms.scss index 4881d5c98..08a4665f8 100644 --- a/sass/_chatrooms.scss +++ b/sass/_chatrooms.scss @@ -68,6 +68,8 @@ } .box-flyout { + overflow-y: hidden; + width: 100%; @media screen and (max-height: $mobile-landscape-height) { height: $mobile-chat-height; @@ -135,6 +137,9 @@ } } .occupants { + display: flex; + flex-direction: column; + justify-content: space-between; overflow-x: hidden; overflow-y: hidden; vertical-align: top; @@ -142,14 +147,23 @@ border-left: 1px solid $text-color; border-bottom-right-radius: $chatbox-border-radius; padding: 0.5em; + .occupants-heading { padding: 0.3em 0; font-weight: bold; } - .chatroom-features { - bottom: 0.5em; - width: 100%; + ul { + li { + &.feature { + font-size: $font-size-small; + width: 100%; + } + } + } + + .chatroom-features { + width: 100%; .feature { float: left; margin-right: 0.5em; @@ -175,7 +189,8 @@ &.occupant-list { overflow-y: auto; - @include calc(height, '100% - 220px'); + flex-basis: 0; + flex-grow: 1; } &.features-list { padding-top: 0; diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss index 325970ac7..218d8192c 100644 --- a/sass/_controlbox.scss +++ b/sass/_controlbox.scss @@ -371,7 +371,6 @@ font-size: $font-size; left: 0; text-align: left; - overflow-y: scroll; overflow-x: hidden; border-radius: $chatbox-border-radius; diff --git a/sass/inverse/_chatrooms.scss b/sass/inverse/_chatrooms.scss index 0f585e9d2..570635052 100644 --- a/sass/inverse/_chatrooms.scss +++ b/sass/inverse/_chatrooms.scss @@ -45,20 +45,10 @@ .occupants-heading { font-size: $font-size-large; } - .chatroom-features { - bottom: $padding; - } ul { &.occupant-list { - @include calc(height, '100% - 212px'); li { font-size: $font-size-small; - width: 100%; - } - } - li { - &.feature { - font-size: $font-size-small; } } } diff --git a/sass/inverse/_controlbox.scss b/sass/inverse/_controlbox.scss index fab6ccbe9..db6f4898d 100644 --- a/sass/inverse/_controlbox.scss +++ b/sass/inverse/_controlbox.scss @@ -2,10 +2,6 @@ #controlbox { margin: 0; - .controlbox-panes { - overflow-y: hidden; - } - .controlbox-pane { border-radius: 0; }