diff options
author | Christoph Wurst <christoph@winzerhof-wurst.at> | 2022-09-06 15:52:28 +0300 |
---|---|---|
committer | Christoph Wurst <christoph@winzerhof-wurst.at> | 2022-09-08 11:50:02 +0300 |
commit | 56bc6a829219c317ec2c1ac7e32b08120fb30d27 (patch) | |
tree | 39141882a68a236b11c0d9d850d773fc3631e3b7 | |
parent | 93efef04f3766a4f50095a801ea6f7400dd9b31b (diff) |
Fix element alignment of thread message
Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
-rw-r--r-- | src/components/Imip.vue | 1 | ||||
-rw-r--r-- | src/components/MessageHTMLBody.vue | 4 | ||||
-rw-r--r-- | src/components/Thread.vue | 4 | ||||
-rw-r--r-- | src/components/ThreadEnvelope.vue | 15 | ||||
-rw-r--r-- | src/components/imip/EventData.vue | 8 |
5 files changed, 14 insertions, 18 deletions
diff --git a/src/components/Imip.vue b/src/components/Imip.vue index 252e30bb3..a60d6e2b9 100644 --- a/src/components/Imip.vue +++ b/src/components/Imip.vue @@ -171,6 +171,7 @@ export default { &__type { display: flex; gap: 5px; + margin-left: 36px; } &__actions { diff --git a/src/components/MessageHTMLBody.vue b/src/components/MessageHTMLBody.vue index f91f79956..e4f6b5827 100644 --- a/src/components/MessageHTMLBody.vue +++ b/src/components/MessageHTMLBody.vue @@ -158,7 +158,7 @@ export default { <style lang="scss" scoped> // account for 8px margin on iframe body #mail-content { - margin-left: 48px; + margin-left: 50px; margin-top: 2px; display: flex; flex-direction: column; @@ -166,7 +166,7 @@ export default { background-color: #FFFFFF; } #mail-message-has-blocked-content { - margin-left: 8px; + margin-left: 10px; color: var(--color-text-maxcontrast) !important; } diff --git a/src/components/Thread.vue b/src/components/Thread.vue index c0ab3410f..272c6c486 100644 --- a/src/components/Thread.vue +++ b/src/components/Thread.vue @@ -301,7 +301,7 @@ export default { #mail-thread-header-fields { // initial width width: 0; - padding-left: 60px; + padding-left: 70px; // grow and try to fill 100% flex: 1 1 auto; h2, @@ -332,7 +332,7 @@ export default { } #mail-content { - margin: 10px 38px 0 60px; + margin: 10px 38px 0 59px; } #mail-content iframe { diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue index 423008e5e..0e215bd67 100644 --- a/src/components/ThreadEnvelope.vue +++ b/src/components/ThreadEnvelope.vue @@ -57,8 +57,7 @@ class="left" :class="{seen: envelope.flags.seen}" @click.native.prevent="$emit('toggle-expand', $event)"> - <div class="sender" - :class="{ 'centered-sender': centeredSender }"> + <div class="sender"> {{ envelope.from && envelope.from[0] ? envelope.from[0].label : '' }} </div> <div v-if="showSubline" class="subline"> @@ -266,9 +265,6 @@ export default { showSubline() { return !this.expanded && !!this.envelope.previewText }, - centeredSender() { - return !this.showSubline && this.tags.length === 0 - }, junkFavoritePosition() { return this.showSubline && this.tags.length > 0 }, @@ -411,9 +407,6 @@ export default { .sender { margin-left: 8px; } - .centered-sender { - margin-top: 8px; - } .right { display: flex; @@ -447,10 +440,6 @@ export default { } } } - .avatardiv { - display: inline-block; - margin-bottom: -23px; - } .subline { margin-left: 8px; color: var(--color-text-maxcontrast); @@ -483,8 +472,10 @@ export default { .envelope--header { position: relative; display: flex; + align-items: center; padding: 10px; border-radius: var(--border-radius); + min-height: 68px; /* prevents jumping between open/collapsed */ } .left { flex-grow: 1; diff --git a/src/components/imip/EventData.vue b/src/components/imip/EventData.vue index 86907e5de..ab5afe0c3 100644 --- a/src/components/imip/EventData.vue +++ b/src/components/imip/EventData.vue @@ -22,7 +22,7 @@ <template> <div class="event-data"> - <h2>{{ title }}</h2> + <h2 class="event-data__heading">{{ title }}</h2> <div class="event-data__row event-data__row--date"> <CalendarIcon class="event-data__row__icon" :size="20" /> @@ -202,12 +202,16 @@ export default { flex-direction: column; gap: 5px; + &__heading { + margin-left: 36px; + } + &__row { display: flex; &__icon { align-self: start; - margin: 0 10px; + margin: 0 8px; // Fix slight misalignment caused by align-self: start padding-top: 2px; |