Merge branch 'css-fixes' into 'develop'

Css fixes

See merge request pleroma/pleroma-fe!1211
This commit is contained in:
HJ 2020-08-19 10:20:38 +00:00
commit ddeeb240ac
12 changed files with 93 additions and 22 deletions

View file

@ -60,6 +60,7 @@
@click="openModal" @click="openModal"
> >
<StillImage <StillImage
class="image"
:referrerpolicy="referrerpolicy" :referrerpolicy="referrerpolicy"
:mimetype="attachment.mimetype" :mimetype="attachment.mimetype"
:src="attachment.large_thumb_url || attachment.url" :src="attachment.large_thumb_url || attachment.url"
@ -281,8 +282,11 @@
} }
.image-attachment { .image-attachment {
&,
& .image {
width: 100%; width: 100%;
height: 100%; height: 100%;
}
&.hidden { &.hidden {
display: none; display: none;

View file

@ -72,7 +72,7 @@
} }
} }
.avatar.still-image { .Avatar {
border-radius: $fallback--avatarAltRadius; border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
} }

View file

@ -51,7 +51,7 @@
} }
} }
.still-image.avatar { .Avatar {
width: 23px; width: 23px;
height: 23px; height: 23px;
margin-right: 0.5em; margin-right: 0.5em;

View file

@ -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;
}
}
}

View file

@ -7,7 +7,7 @@
<div v-else> <div v-else>
<div <div
v-if="needMute && !unmuted" v-if="needMute && !unmuted"
class="container muted" class="Notification container -muted"
> >
<small> <small>
<router-link :to="userProfileLink"> <router-link :to="userProfileLink">
@ -168,3 +168,4 @@
</template> </template>
<script src="./notification.js"></script> <script src="./notification.js"></script>
<style src="./notification.scss" lang="scss"></style>

View file

@ -143,6 +143,7 @@
v-model="newStatus.status" v-model="newStatus.status"
:placeholder="placeholder || $t('post_status.default')" :placeholder="placeholder || $t('post_status.default')"
rows="1" rows="1"
cols="1"
:disabled="posting" :disabled="posting"
class="form-post-body" class="form-post-body"
:class="{ 'scrollable-form': !!maxHeight }" :class="{ 'scrollable-form': !!maxHeight }"

View file

@ -6,7 +6,7 @@ $status-margin: 0.75em;
.Status { .Status {
min-width: 0; min-width: 0;
&:hover .avatar { &:hover {
--still-image-img: visible; --still-image-img: visible;
--still-image-canvas: hidden; --still-image-canvas: hidden;
} }
@ -133,6 +133,13 @@ $status-margin: 0.75em;
margin-right: 0.5em; margin-right: 0.5em;
max-width: 100%; max-width: 100%;
.reply-to-link {
white-space: nowrap;
word-break: break-word;
text-overflow: ellipsis;
overflow-x: hidden;
}
.icon-reply { .icon-reply {
// mirror the icon // mirror the icon
transform: scaleX(-1); transform: scaleX(-1);
@ -143,11 +150,18 @@ $status-margin: 0.75em;
& .reply-to-no-popover { & .reply-to-no-popover {
min-width: 0; min-width: 0;
margin-right: 0.4em; margin-right: 0.4em;
flex-shrink: 0;
} }
.reply-to-popover { .reply-to-popover {
&:hover { .reply-to:hover::before {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 100%;
border-bottom: 1px solid var(--faint); border-bottom: 1px solid var(--faint);
pointer-events: none;
} }
.faint-link:hover { .faint-link:hover {
@ -156,21 +170,21 @@ $status-margin: 0.75em;
} }
&.-strikethrough { &.-strikethrough {
position: relative; .reply-to::after {
&::after {
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
top: 50%; top: 50%;
width: 100%; width: 100%;
border-bottom: 1px solid var(--faint); border-bottom: 1px solid var(--faint);
pointer-events: none;
} }
} }
} }
.reply-to { .reply-to {
display: flex; display: flex;
position: relative;
} }
.reply-to-text { .reply-to-text {

View file

@ -234,6 +234,7 @@
<span class="reply-to-text">{{ $t('status.reply_to') }}</span> <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
</span> </span>
<router-link <router-link
class="reply-to-link"
:title="replyToName" :title="replyToName"
:to="replyProfileLink" :to="replyProfileLink"
> >

View file

@ -38,7 +38,8 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.status-popover { /* popover styles load on-demand, so we need to override */
.status-popover.popover {
font-size: 1rem; font-size: 1rem;
min-width: 15em; min-width: 15em;
max-width: 95%; max-width: 95%;

View file

@ -30,8 +30,6 @@
position: relative; position: relative;
line-height: 0; line-height: 0;
overflow: hidden; overflow: hidden;
width: 100%;
height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -68,6 +66,7 @@
border-radius: $fallback--tooltipRadius; border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius); border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
z-index: 2; z-index: 2;
visibility: var(--still-image-label-visibility, visible);
} }
&:hover canvas { &:hover canvas {

View file

@ -1,6 +1,6 @@
<template> <template>
<StillImage <StillImage
class="avatar" class="Avatar"
:alt="user.screen_name" :alt="user.screen_name"
:title="user.screen_name" :title="user.screen_name"
:src="imgSrc(user.profile_image_url_original)" :src="imgSrc(user.profile_image_url_original)"
@ -13,7 +13,9 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.avatar.still-image { .Avatar {
--still-image-label-visibility: hidden;
width: 48px; width: 48px;
height: 48px; height: 48px;
box-shadow: var(--avatarStatusShadow); box-shadow: var(--avatarStatusShadow);

View file

@ -364,13 +364,9 @@
} }
} }
&:hover .animated.avatar { &:hover .avatar {
canvas { --still-image-img: visible;
display: none; --still-image-canvas: hidden;
}
img {
visibility: visible;
}
} }
&-avatar-link { &-avatar-link {