commit: ddeeb240acf229d159e7f85f508a9d92213e2be4
parent 1a8840c7c3bb698f3984028db5c1b71025d9d6a1
Author: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Wed, 19 Aug 2020 10:20:38 +0000
Merge branch 'css-fixes' into 'develop'
Css fixes
See merge request pleroma/pleroma-fe!1211
Diffstat:
12 files changed, 93 insertions(+), 22 deletions(-)
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
@@ -60,6 +60,7 @@
@click="openModal"
>
<StillImage
+ class="image"
:referrerpolicy="referrerpolicy"
:mimetype="attachment.mimetype"
:src="attachment.large_thumb_url || attachment.url"
@@ -281,8 +282,11 @@
}
.image-attachment {
- width: 100%;
- height: 100%;
+ &,
+ & .image {
+ width: 100%;
+ height: 100%;
+ }
&.hidden {
display: none;
diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
@@ -72,7 +72,7 @@
}
}
- .avatar.still-image {
+ .Avatar {
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
}
diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
@@ -51,7 +51,7 @@
}
}
- .still-image.avatar {
+ .Avatar {
width: 23px;
height: 23px;
margin-right: 0.5em;
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
@@ -0,0 +1,52 @@
+// TODO Copypaste from Status, should unify it somehow
+.Notification {
+ &.-muted {
+ padding: 0.25em 0.6em;
+ height: 1.2em;
+ line-height: 1.2em;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ display: flex;
+ flex-wrap: nowrap;
+
+ & .status-username,
+ & .mute-thread,
+ & .mute-words {
+ word-wrap: normal;
+ word-break: normal;
+ white-space: nowrap;
+ }
+
+ & .status-username,
+ & .mute-words {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+
+ .status-username {
+ font-weight: normal;
+ flex: 0 1 auto;
+ margin-right: 0.2em;
+ font-size: smaller;
+ }
+
+ .mute-thread {
+ flex: 0 0 auto;
+ }
+
+ .mute-words {
+ flex: 1 0 5em;
+ margin-left: 0.2em;
+
+ &::before {
+ content: ' ';
+ }
+ }
+
+ .unmute {
+ flex: 0 0 auto;
+ margin-left: auto;
+ display: block;
+ }
+ }
+}
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
@@ -7,7 +7,7 @@
<div v-else>
<div
v-if="needMute && !unmuted"
- class="container muted"
+ class="Notification container -muted"
>
<small>
<router-link :to="userProfileLink">
@@ -168,3 +168,4 @@
</template>
<script src="./notification.js"></script>
+<style src="./notification.scss" lang="scss"></style>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
@@ -143,6 +143,7 @@
v-model="newStatus.status"
:placeholder="placeholder || $t('post_status.default')"
rows="1"
+ cols="1"
:disabled="posting"
class="form-post-body"
:class="{ 'scrollable-form': !!maxHeight }"
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
@@ -6,7 +6,7 @@ $status-margin: 0.75em;
.Status {
min-width: 0;
- &:hover .avatar {
+ &:hover {
--still-image-img: visible;
--still-image-canvas: hidden;
}
@@ -133,6 +133,13 @@ $status-margin: 0.75em;
margin-right: 0.5em;
max-width: 100%;
+ .reply-to-link {
+ white-space: nowrap;
+ word-break: break-word;
+ text-overflow: ellipsis;
+ overflow-x: hidden;
+ }
+
.icon-reply {
// mirror the icon
transform: scaleX(-1);
@@ -143,11 +150,18 @@ $status-margin: 0.75em;
& .reply-to-no-popover {
min-width: 0;
margin-right: 0.4em;
+ flex-shrink: 0;
}
.reply-to-popover {
- &:hover {
+ .reply-to:hover::before {
+ content: '';
+ display: block;
+ position: absolute;
+ bottom: 0;
+ width: 100%;
border-bottom: 1px solid var(--faint);
+ pointer-events: none;
}
.faint-link:hover {
@@ -156,21 +170,21 @@ $status-margin: 0.75em;
}
&.-strikethrough {
- position: relative;
-
- &::after {
+ .reply-to::after {
content: '';
display: block;
position: absolute;
top: 50%;
width: 100%;
border-bottom: 1px solid var(--faint);
+ pointer-events: none;
}
}
}
.reply-to {
display: flex;
+ position: relative;
}
.reply-to-text {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
@@ -234,6 +234,7 @@
<span class="reply-to-text">{{ $t('status.reply_to') }}</span>
</span>
<router-link
+ class="reply-to-link"
:title="replyToName"
:to="replyProfileLink"
>
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
@@ -38,7 +38,8 @@
<style lang="scss">
@import '../../_variables.scss';
-.status-popover {
+/* popover styles load on-demand, so we need to override */
+.status-popover.popover {
font-size: 1rem;
min-width: 15em;
max-width: 95%;
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
@@ -30,8 +30,6 @@
position: relative;
line-height: 0;
overflow: hidden;
- width: 100%;
- height: 100%;
display: flex;
align-items: center;
@@ -68,6 +66,7 @@
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
z-index: 2;
+ visibility: var(--still-image-label-visibility, visible);
}
&:hover canvas {
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
@@ -1,6 +1,6 @@
<template>
<StillImage
- class="avatar"
+ class="Avatar"
:alt="user.screen_name"
:title="user.screen_name"
:src="imgSrc(user.profile_image_url_original)"
@@ -13,7 +13,9 @@
<style lang="scss">
@import '../../_variables.scss';
-.avatar.still-image {
+.Avatar {
+ --still-image-label-visibility: hidden;
+
width: 48px;
height: 48px;
box-shadow: var(--avatarStatusShadow);
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
@@ -364,13 +364,9 @@
}
}
- &:hover .animated.avatar {
- canvas {
- display: none;
- }
- img {
- visibility: visible;
- }
+ &:hover .avatar {
+ --still-image-img: visible;
+ --still-image-canvas: hidden;
}
&-avatar-link {
