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"
>
<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;

View File

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

View File

@ -51,7 +51,7 @@
}
}
.still-image.avatar {
.Avatar {
width: 23px;
height: 23px;
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-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>

View File

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

View File

@ -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 {

View File

@ -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"
>

View File

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

View File

@ -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 {

View File

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

View File

@ -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 {