Skip to content

Commit

Permalink
style(MessagesList): extend chat width to 70em (W3C recommendation)
Browse files Browse the repository at this point in the history
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
  • Loading branch information
Antreesy committed Mar 27, 2024
1 parent 0afabde commit 46ca100
Show file tree
Hide file tree
Showing 8 changed files with 32 additions and 17 deletions.
1 change: 1 addition & 0 deletions src/assets/markdown.scss
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
}

pre {
width: calc(100% - var(--default-clickable-area));
padding: 4px;
margin: 2px 0;
border-radius: var(--border-radius);
Expand Down
13 changes: 8 additions & 5 deletions src/assets/variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,14 @@
*
*/

//messages list max width
$messages-list-max-width: 800px;

//message utils width
$message-utils-width: 100px;
/** Messages list dimensions:
* - text max width: 70em (recommended by W3C standard)
* - utils-width: 52px (group avatar with paddings) + 120px (date and checkmark) + 4*4px (date paddings)
* - list max width: text width + utils width + 4 + 8 (paddings)
*/
$messages-text-max-width: calc(70 * var(--default-font-size));
$message-utils-width: calc(52px + 4 * var(--default-grid-baseline) + 120px);
$messages-list-max-width: calc($messages-text-max-width + $message-utils-width + 3 * var(--default-grid-baseline));

// background color of call container
$color-call-background: rgba(34, 34, 34, 0.8);
Expand Down
5 changes: 3 additions & 2 deletions src/components/MessagesList/MessagesGroup/Message/Message.vue
Original file line number Diff line number Diff line change
Expand Up @@ -573,7 +573,8 @@ export default {
}

.message-body {
padding: 4px 4px 4px 8px;
padding: var(--default-grid-baseline);
padding-left: calc(2 * var(--default-grid-baseline));
font-size: var(--default-font-size);
line-height: var(--default-line-height);
position: relative;
Expand Down Expand Up @@ -626,7 +627,7 @@ export default {
background-color: var(--color-main-background);
border-radius: calc(var(--default-clickable-area) / 2);
box-shadow: 0 0 4px 0 var(--color-box-shadow);
height: 44px;
height: var(--default-clickable-area);
z-index: 1;

& h6 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -426,6 +426,7 @@ export default {

<style lang="scss" scoped>
@import '../../../../../assets/markdown';
@import '../../../../../assets/variables';

.message-main {
display: flex;
Expand All @@ -434,10 +435,10 @@ export default {
min-width: 100%;

&__text {
flex: 0 1 600px;
flex: 0 1 $messages-text-max-width;
width: 100%;
min-width: 0;
max-width: 600px;
max-width: $messages-text-max-width;
color: var(--color-text-light);

& > .single-emoji {
Expand Down Expand Up @@ -475,7 +476,7 @@ export default {
.message-copy-code {
position: absolute;
top: 0;
right: 4px;
right: calc(4px + var(--default-clickable-area));
margin-top: 4px;
background-color: var(--color-background-dark);
}
Expand All @@ -496,7 +497,7 @@ export default {
color: var(--color-text-maxcontrast);
font-size: var(--default-font-size);
flex: 1 0 auto;
padding: 0 8px 0 8px;
padding: 0 calc(2 * var(--default-grid-baseline));

.date:last-child {
margin-right: var(--default-clickable-area);
Expand All @@ -520,4 +521,9 @@ export default {
:deep(.rich-text--component) {
direction: ltr;
}

// Hardcode to restrict size of message images for the chat
:deep(.widget-default--image) {
max-width: 240px;
}
</style>
4 changes: 2 additions & 2 deletions src/components/MessagesList/MessagesGroup/MessagesGroup.vue
Original file line number Diff line number Diff line change
Expand Up @@ -196,8 +196,8 @@ export default {
&__author {
display: flex;
gap: 4px;
max-width: 600px;
padding: 4px 0 0 8px;
max-width: $messages-text-max-width;
padding: var(--default-grid-baseline) 0 0 calc(2 * var(--default-grid-baseline));
color: var(--color-text-maxcontrast);

&-name {
Expand Down
4 changes: 3 additions & 1 deletion src/components/NewMessage/NewMessage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -1044,6 +1044,8 @@ export default {
</script>

<style lang="scss" scoped>
@import '../../assets/variables';

.wrapper {
padding: 12px 12px 12px 0;
min-height: 69px;
Expand All @@ -1054,7 +1056,7 @@ export default {
display: flex;
gap: 4px;
position: relative;
max-width: 700px;
max-width: calc($messages-list-max-width - 100px);
margin: 0 auto;

&__emoji-picker {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Quote.vue
Original file line number Diff line number Diff line change
Expand Up @@ -294,7 +294,7 @@ export default {
margin: 4px 0;
padding: 6px 6px 6px 24px;
display: flex;
max-width: $messages-list-max-width - $message-utils-width;
max-width: $messages-text-max-width;
border-radius: var(--border-radius-large);
border: 2px solid var(--color-border);
background-color: var(--color-main-background);
Expand Down
6 changes: 4 additions & 2 deletions src/components/UIShared/LoadingPlaceholder.vue
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,8 @@ export default {
</script>

<style lang="scss" scoped>
@import '../../assets/variables';

.placeholder-list {
width: 100%;
transform: translateZ(0); // enable hardware acceleration
Expand Down Expand Up @@ -131,7 +133,7 @@ export default {

// Messages placeholder ruleset
.placeholder-list--messages {
max-width: 800px;
max-width: $messages-list-max-width;
margin: auto;

.placeholder-item {
Expand All @@ -148,7 +150,7 @@ export default {
}

&__content {
max-width: 600px;
max-width: $messages-text-max-width;
padding: 12px 0;

&-line {
Expand Down

0 comments on commit 46ca100

Please sign in to comment.