aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/desktop_nav/desktop_nav.js89
-rw-r--r--src/components/desktop_nav/desktop_nav.scss112
-rw-r--r--src/components/desktop_nav/desktop_nav.vue79
-rw-r--r--src/components/mobile_nav/mobile_nav.vue267
-rw-r--r--src/components/nav_panel/nav_panel.vue18
-rw-r--r--src/components/panel_loading/panel_loading.vue2
-rw-r--r--src/components/post_status_form/post_status_form.vue17
-rw-r--r--src/components/react_button/react_button.vue1
-rw-r--r--src/components/search_bar/search_bar.vue95
-rw-r--r--src/components/settings_modal/tabs/theme_tab/preview.vue2
-rw-r--r--src/components/status/status.scss5
-rw-r--r--src/components/still-image/still-image.vue11
-rw-r--r--src/components/tab_switcher/tab_switcher.scss3
-rw-r--r--src/components/user_avatar/user_avatar.vue11
-rw-r--r--src/components/user_card/user_card.vue16
15 files changed, 529 insertions, 199 deletions
diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
new file mode 100644
index 00000000..e048f53d
--- /dev/null
+++ b/src/components/desktop_nav/desktop_nav.js
@@ -0,0 +1,89 @@
+import SearchBar from 'components/search_bar/search_bar.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+ faSignInAlt,
+ faSignOutAlt,
+ faHome,
+ faComments,
+ faBell,
+ faUserPlus,
+ faBullhorn,
+ faSearch,
+ faTachometerAlt,
+ faCog,
+ faInfoCircle
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faSignInAlt,
+ faSignOutAlt,
+ faHome,
+ faComments,
+ faBell,
+ faUserPlus,
+ faBullhorn,
+ faSearch,
+ faTachometerAlt,
+ faCog,
+ faInfoCircle
+)
+
+export default {
+ components: {
+ SearchBar
+ },
+ data: () => ({
+ searchBarHidden: true,
+ supportsMask: window.CSS && window.CSS.supports && (
+ window.CSS.supports('mask-size', 'contain') ||
+ window.CSS.supports('-webkit-mask-size', 'contain') ||
+ window.CSS.supports('-moz-mask-size', 'contain') ||
+ window.CSS.supports('-ms-mask-size', 'contain') ||
+ window.CSS.supports('-o-mask-size', 'contain')
+ )
+ }),
+ computed: {
+ enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
+ logoStyle () {
+ return {
+ 'visibility': this.enableMask ? 'hidden' : 'visible'
+ }
+ },
+ logoMaskStyle () {
+ return this.enableMask ? {
+ 'mask-image': `url(${this.$store.state.instance.logo})`
+ } : {
+ 'background-color': this.enableMask ? '' : 'transparent'
+ }
+ },
+ logoBgStyle () {
+ return Object.assign({
+ 'margin': `${this.$store.state.instance.logoMargin} 0`,
+ opacity: this.searchBarHidden ? 1 : 0
+ }, this.enableMask ? {} : {
+ 'background-color': this.enableMask ? '' : 'transparent'
+ })
+ },
+ logo () { return this.$store.state.instance.logo },
+ sitename () { return this.$store.state.instance.name },
+ hideSitename () { return this.$store.state.instance.hideSitename },
+ logoLeft () { return this.$store.state.instance.logoLeft },
+ currentUser () { return this.$store.state.users.currentUser },
+ privateMode () { return this.$store.state.instance.private }
+ },
+ methods: {
+ scrollToTop () {
+ window.scrollTo(0, 0)
+ },
+ logout () {
+ this.$router.replace('/main/public')
+ this.$store.dispatch('logout')
+ },
+ onSearchBarToggled (hidden) {
+ this.searchBarHidden = hidden
+ },
+ openSettingsModal () {
+ this.$store.dispatch('openSettingsModal')
+ }
+ }
+}
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
new file mode 100644
index 00000000..028692a9
--- /dev/null
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -0,0 +1,112 @@
+@import '../../_variables.scss';
+
+.DesktopNav {
+ height: 50px;
+ width: 100%;
+ position: fixed;
+
+ .inner-nav {
+ display: grid;
+ grid-template-rows: 50px;
+ grid-template-columns: 2fr auto 2fr;
+ grid-template-areas: "sitename logo actions";
+ box-sizing: border-box;
+ padding: 0 1.2em;
+ margin: auto;
+ max-width: 980px;
+ }
+
+ &.-logoLeft {
+ grid-template-columns: auto 2fr 2fr;
+ grid-template-areas: "logo sitename actions";
+ }
+
+ button {
+ &, svg {
+ color: $fallback--text;
+ color: var(--btnTopBarText, $fallback--text);
+ }
+
+ &:active {
+ background-color: $fallback--fg;
+ background-color: var(--btnPressedTopBar, $fallback--fg);
+ color: $fallback--text;
+ color: var(--btnPressedTopBarText, $fallback--text);
+ }
+
+ &:disabled {
+ color: $fallback--text;
+ color: var(--btnDisabledTopBarText, $fallback--text);
+ }
+
+ &.toggled {
+ color: $fallback--text;
+ color: var(--btnToggledTopBarText, $fallback--text);
+ background-color: $fallback--fg;
+ background-color: var(--btnToggledTopBar, $fallback--fg)
+ }
+ }
+
+ .logo {
+ grid-area: logo;
+ position: relative;
+ transition: opacity;
+ transition-timing-function: ease-out;
+ transition-duration: 100ms;
+
+ @media all and (min-width: 800px) {
+ opacity: 1 !important;
+ }
+
+ .mask {
+ mask-repeat: no-repeat;
+ mask-position: center;
+ mask-size: contain;
+ background-color: $fallback--fg;
+ background-color: var(--topBarText, $fallback--fg);
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ }
+
+ img {
+ display: inline-block;
+ height: 50px;
+ }
+ }
+
+ .nav-icon {
+ margin-left: 0.2em;
+ width: 2em;
+ text-align: center;
+ }
+
+ a, a svg {
+ color: $fallback--link;
+ color: var(--topBarLink, $fallback--link);
+ }
+
+ .sitename {
+ grid-area: sitename;
+ }
+
+ .actions {
+ grid-area: actions;
+ }
+
+ .item {
+ flex: 1;
+ line-height: 50px;
+ height: 50px;
+ overflow: hidden;
+ display: flex;
+ flex-wrap: wrap;
+
+ &.right {
+ justify-content: flex-end;
+ text-align: right;
+ }
+ }
+}
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
new file mode 100644
index 00000000..3a6e4033
--- /dev/null
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -0,0 +1,79 @@
+<template>
+ <nav
+ id="nav"
+ class="DesktopNav"
+ :class="{ '-logoLeft': logoLeft }"
+ @click="scrollToTop()"
+ >
+ <div class="inner-nav">
+ <div class="item sitename">
+ <router-link
+ v-if="!hideSitename"
+ class="site-name"
+ :to="{ name: 'root' }"
+ active-class="home"
+ >
+ {{ sitename }}
+ </router-link>
+ </div>
+ <router-link
+ class="logo"
+ :to="{ name: 'root' }"
+ :style="logoBgStyle"
+ >
+ <div
+ class="mask"
+ :style="logoMaskStyle"
+ />
+ <img
+ :src="logo"
+ :style="logoStyle"
+ >
+ </router-link>
+ <div class="item right actions">
+ <search-bar
+ v-if="currentUser || !privateMode"
+ @toggled="onSearchBarToggled"
+ @click.stop.native
+ />
+ <a
+ href="#"
+ class="nav-icon"
+ @click.stop="openSettingsModal"
+ >
+ <FAIcon
+ fixed-width
+ class="fa-scale-110 fa-old-padding"
+ icon="cog"
+ :title="$t('nav.preferences')"
+ />
+ </a>
+ <a
+ v-if="currentUser && currentUser.role === 'admin'"
+ href="/pleroma/admin/#/login-pleroma"
+ class="nav-icon"
+ target="_blank"
+ ><FAIcon
+ fixed-width
+ class="fa-scale-110 fa-old-padding"
+ icon="tachometer-alt"
+ :title="$t('nav.administration')"
+ /></a>
+ <a
+ v-if="currentUser"
+ href="#"
+ class="nav-icon"
+ @click.prevent="logout"
+ ><FAIcon
+ fixed-width
+ class="fa-scale-110 fa-old-padding"
+ icon="sign-out-alt"
+ :title="$t('login.logout')"
+ /></a>
+ </div>
+ </div>
+ </nav>
+</template>
+<script src="./desktop_nav.js"></script>
+
+<style src="./desktop_nav.scss" lang="scss"></style>
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index d2bc65ab..6651fc8e 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -1,55 +1,53 @@
<template>
- <div>
+ <div
+ class="MobileNav"
+ >
<nav
id="nav"
- class="nav-bar container"
+ class="mobile-nav"
:class="{ 'mobile-hidden': isChat }"
+ @click="scrollToTop()"
>
- <div
- class="mobile-inner-nav"
- @click="scrollToTop()"
- >
- <div class="item">
- <a
- href="#"
- class="mobile-nav-button"
- @click.stop.prevent="toggleMobileSidebar()"
- >
- <FAIcon
- class="fa-scale-110 fa-old-padding"
- icon="bars"
- />
- <div
- v-if="unreadChatCount"
- class="alert-dot"
- />
- </a>
- <router-link
- v-if="!hideSitename"
- class="site-name"
- :to="{ name: 'root' }"
- active-class="home"
- >
- {{ sitename }}
- </router-link>
- </div>
- <div class="item right">
- <a
- v-if="currentUser"
- class="mobile-nav-button"
- href="#"
- @click.stop.prevent="openMobileNotifications()"
- >
- <FAIcon
- class="fa-scale-110 fa-old-padding"
- icon="bell"
- />
- <div
- v-if="unseenNotificationsCount"
- class="alert-dot"
- />
- </a>
- </div>
+ <div class="item">
+ <a
+ href="#"
+ class="mobile-nav-button"
+ @click.stop.prevent="toggleMobileSidebar()"
+ >
+ <FAIcon
+ class="fa-scale-110 fa-old-padding"
+ icon="bars"
+ />
+ <div
+ v-if="unreadChatCount"
+ class="alert-dot"
+ />
+ </a>
+ <router-link
+ v-if="!hideSitename"
+ class="site-name"
+ :to="{ name: 'root' }"
+ active-class="home"
+ >
+ {{ sitename }}
+ </router-link>
+ </div>
+ <div class="item right">
+ <a
+ v-if="currentUser"
+ class="mobile-nav-button"
+ href="#"
+ @click.stop.prevent="openMobileNotifications()"
+ >
+ <FAIcon
+ class="fa-scale-110 fa-old-padding"
+ icon="bell"
+ />
+ <div
+ v-if="unseenNotificationsCount"
+ class="alert-dot"
+ />
+ </a>
</div>
</nav>
<div
@@ -93,100 +91,113 @@
<style lang="scss">
@import '../../_variables.scss';
-.mobile-inner-nav {
- width: 100%;
- display: flex;
- align-items: center;
-}
+.MobileNav {
+ .mobile-nav {
+ display: grid;
+ line-height: 50px;
+ height: 50px;
+ grid-template-rows: 50px;
+ grid-template-columns: 2fr auto;
+ width: 100%;
+ position: fixed;
+ box-sizing: border-box;
+ }
-.mobile-nav-button {
- text-align: center;
- margin: 0 1em;
- position: relative;
- cursor: pointer;
-}
+ .mobile-inner-nav {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ }
-.alert-dot {
- border-radius: 100%;
- height: 8px;
- width: 8px;
- position: absolute;
- left: calc(50% - 4px);
- top: calc(50% - 4px);
- margin-left: 6px;
- margin-top: -6px;
- background-color: $fallback--cRed;
- background-color: var(--badgeNotification, $fallback--cRed);
-}
+ .mobile-nav-button {
+ text-align: center;
+ margin: 0 1em;
+ position: relative;
+ cursor: pointer;
+ }
+
+ .alert-dot {
+ border-radius: 100%;
+ height: 8px;
+ width: 8px;
+ position: absolute;
+ left: calc(50% - 4px);
+ top: calc(50% - 4px);
+ margin-left: 6px;
+ margin-top: -6px;
+ background-color: $fallback--cRed;
+ background-color: var(--badgeNotification, $fallback--cRed);
+ }
-.mobile-notifications-drawer {
- width: 100%;
- height: 100vh;
- overflow-x: hidden;
- position: fixed;
- top: 0;
- left: 0;
- box-shadow: 1px 1px 4px rgba(0,0,0,.6);
- box-shadow: var(--panelShadow);
- transition-property: transform;
- transition-duration: 0.25s;
- transform: translateX(0);
- z-index: 1001;
- -webkit-overflow-scrolling: touch;
+ .mobile-notifications-drawer {
+ width: 100%;
+ height: 100vh;
+ overflow-x: hidden;
+ position: fixed;
+ top: 0;
+ left: 0;
+ box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+ box-shadow: var(--panelShadow);
+ transition-property: transform;
+ transition-duration: 0.25s;
+ transform: translateX(0);
+ z-index: 1001;
+ -webkit-overflow-scrolling: touch;
- &.closed {
- transform: translateX(100%);
+ &.closed {
+ transform: translateX(100%);
+ }
}
-}
-.mobile-notifications-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- z-index: 1;
- width: 100%;
- height: 50px;
- line-height: 50px;
- position: absolute;
- color: var(--topBarText);
- background-color: $fallback--fg;
- background-color: var(--topBar, $fallback--fg);
- box-shadow: 0px 0px 4px rgba(0,0,0,.6);
- box-shadow: var(--topBarShadow);
+ .mobile-notifications-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ z-index: 1;
+ width: 100%;
+ height: 50px;
+ line-height: 50px;
+ position: absolute;
+ color: var(--topBarText);
+ background-color: $fallback--fg;
+ background-color: var(--topBar, $fallback--fg);
+ box-shadow: 0px 0px 4px rgba(0,0,0,.6);
+ box-shadow: var(--topBarShadow);
- .title {
- font-size: 1.3em;
- margin-left: 0.6em;
+ .title {
+ font-size: 1.3em;
+ margin-left: 0.6em;
+ }
}
-}
-.mobile-notifications {
- margin-top: 50px;
- width: 100vw;
- height: calc(100vh - 50px);
- overflow-x: hidden;
- overflow-y: scroll;
+ .mobile-notifications {
+ margin-top: 50px;
+ width: 100vw;
+ height: calc(100vh - 50px);
+ overflow-x: hidden;
+ overflow-y: scroll;
- color: $fallback--text;
- color: var(--text, $fallback--text);
- background-color: $fallback--bg;
- background-color: var(--bg, $fallback--bg);
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
+ background-color: $fallback--bg;
+ background-color: var(--bg, $fallback--bg);
- .notifications {
- padding: 0;
- border-radius: 0;
- box-shadow: none;
- .panel {
- border-radius: 0;
- margin: 0;
- box-shadow: none;
- }
- .panel:after {
- border-radius: 0;
- }
- .panel .panel-heading {
+ .notifications {
+ padding: 0;
border-radius: 0;
box-shadow: none;
+ .panel {
+ border-radius: 0;
+ margin: 0;
+ box-shadow: none;
+ }
+ .panel:after {
+ border-radius: 0;
+ }
+ .panel .panel-heading {
+ border-radius: 0;
+ box-shadow: none;
+ }
}
}
}
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 8b299bf2..0f02a681 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -91,6 +91,7 @@
}
li {
+ position: relative;
border-bottom: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
@@ -154,5 +155,22 @@
.fa-scale-110 {
margin-right: 0.8em;
}
+
+ .unread-chat-count {
+ font-size: 0.9em;
+ font-weight: bolder;
+ font-style: normal;
+ position: absolute;
+ right: 0.6rem;
+ top: 1.25em;
+ padding: 0 0.3em;
+ min-width: 1.3rem;
+ min-height: 1.3rem;
+ max-height: 1.3rem;
+ line-height: 1.3rem;
+ max-width: 10em;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
}
</style>
diff --git a/src/components/panel_loading/panel_loading.vue b/src/components/panel_loading/panel_loading.vue
index b15e7d38..d916d8a6 100644
--- a/src/components/panel_loading/panel_loading.vue
+++ b/src/components/panel_loading/panel_loading.vue
@@ -18,6 +18,8 @@ import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
library.add(
faCircleNotch
)
+
+export default {}
</script>
<style lang="scss">
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 284ce8df..2b57ea19 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -85,11 +85,16 @@
{{ $t('post_status.preview') }}
<FAIcon :icon="showPreview ? 'chevron-left' : 'chevron-right'" />
</a>
- <FAIcon
+ <div
v-show="previewLoading"
- spin
- icon="circle-notch"
- />
+ class="preview-spinner"
+ >
+ <FAIcon
+ class="fa-old-padding"
+ spin
+ icon="circle-notch"
+ />
+ </div>
</div>
<div
v-if="showPreview"
@@ -383,12 +388,12 @@
}
.preview-heading {
- padding-left: 0.5em;
display: flex;
- width: 100%;
+ padding-left: 0.5em;
}
.preview-toggle {
+ flex: 1;
cursor: pointer;
user-select: none;
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 694e6470..95d95b11 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -12,6 +12,7 @@
<div class="reaction-picker-filter">
<input
v-model="filterWord"
+ size="1"
:placeholder="$t('emoji.search_emoji')"
>
</div>
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index f1c3fd7a..89a601c8 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -1,46 +1,47 @@
<template>
- <div>
- <div class="search-bar-container">
- <a
- v-if="hidden"
- href="#"
- class="nav-icon"
- :title="$t('nav.search')"
- ><FAIcon
- fixed-width
- class="fa-scale-110 fa-old-padding"
- icon="search"
- @click.prevent.stop="toggleHidden"
- /></a>
- <template v-else>
- <input
- id="search-bar-input"
- ref="searchInput"
- v-model="searchTerm"
- class="search-bar-input"
- :placeholder="$t('nav.search')"
- type="text"
- @keyup.enter="find(searchTerm)"
- >
- <button
- class="btn search-button"
- @click="find(searchTerm)"
- >
- <FAIcon
- fixed-width
- icon="search"
- />
- </button>
- <span>
- <FAIcon
- fixed-width
- icon="times"
- class="cancel-icon fa-scale-110 fa-old-padding"
- @click.prevent.stop="toggleHidden"
- />
- </span>
- </template>
- </div>
+ <div
+ class="SearchBar"
+ :class="{ '-expanded': !hidden }"
+ >
+ <a
+ v-if="hidden"
+ href="#"
+ class="nav-icon"
+ :title="$t('nav.search')"
+ ><FAIcon
+ fixed-width
+ class="fa-scale-110 fa-old-padding"
+ icon="search"
+ @click.prevent.stop="toggleHidden"
+ /></a>
+ <template v-else>
+ <input
+ id="search-bar-input"
+ ref="searchInput"
+ v-model="searchTerm"
+ class="search-bar-input"
+ :placeholder="$t('nav.search')"
+ type="text"
+ @keyup.enter="find(searchTerm)"
+ >
+ <button
+ class="btn search-button"
+ @click="find(searchTerm)"
+ >
+ <FAIcon
+ fixed-width
+ icon="search"
+ />
+ </button>
+ <span>
+ <FAIcon
+ fixed-width
+ icon="times"
+ class="cancel-icon fa-scale-110 fa-old-padding"
+ @click.prevent.stop="toggleHidden"
+ />
+ </span>
+ </template>
</div>
</template>
@@ -49,21 +50,23 @@
<style lang="scss">
@import '../../_variables.scss';
-.search-bar-container {
- max-width: 100%;
+.SearchBar {
display: inline-flex;
align-items: baseline;
vertical-align: baseline;
justify-content: flex-end;
+ &.-expanded {
+ width: 100%;
+ }
+
.search-bar-input,
.search-button {
height: 29px;
}
.search-bar-input {
- // TODO: do this properly without a rough guesstimate of 2 icons + paddings
- max-width: calc(100% - 30px - 30px - 20px);
+ flex: 1 0 auto;
}
.cancel-icon {
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index 3174fd7c..02fea0b6 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -126,6 +126,8 @@ library.add(
faRetweet,
faReply
)
+
+export default {}
</script>
<style lang="scss">
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index ea9e538d..0a395086 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -7,8 +7,9 @@ $status-margin: 0.75em;
min-width: 0;
&:hover {
- --still-image-img: visible;
- --still-image-canvas: hidden;
+ --_still-image-img-visibility: visible;
+ --_still-image-canvas-visibility: hidden;
+ --_still-image-label-visibility: hidden;
}
&.-focused {
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index ad82210d..d3eb5925 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -42,7 +42,7 @@
width: 100%;
height: 100%;
object-fit: contain;
- visibility: var(--still-image-canvas, visible);
+ visibility: var(--_still-image-canvas-visibility, visible);
}
img {
@@ -66,16 +66,19 @@
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
z-index: 2;
- visibility: var(--still-image-label-visibility, visible);
+ visibility: var(--_still-image-label-visibility, visible);
}
&:hover canvas {
display: none;
}
- &:hover::before,
+ &:hover::before {
+ visibility: var(--_still-image-label-visibility, hidden);
+ }
+
img {
- visibility: var(--still-image-img, hidden);
+ visibility: var(--_still-image-img-visibility, hidden);
}
&:hover img {
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 1e963516..0ed614b7 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -4,8 +4,7 @@
display: flex;
.tab-icon {
- width: 100%;
- margin: 0.2em 0;
+ margin: 0.2em auto;
display: block;
}
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index eb3d375e..0f7c584b 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -20,11 +20,14 @@
@import '../../_variables.scss';
.Avatar {
- --still-image-label-visibility: hidden;
+ --_avatarShadowBox: var(--avatarStatusShadow);
+ --_avatarShadowFilter: var(--avatarStatusShadowFilter);
+ --_avatarShadowInset: var(--avatarStatusShadowInset);
+ --_still-image-label-visibility: hidden;
width: 48px;
height: 48px;
- box-shadow: var(--avatarStatusShadow);
+ box-shadow: var(--_avatarShadowBox);
border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
@@ -34,8 +37,8 @@
}
&.better-shadow {
- box-shadow: var(--avatarStatusShadowInset);
- filter: var(--avatarStatusShadowFilter)
+ box-shadow: var(--_avatarShadowInset);
+ filter: var(--_avatarShadowFilter);
}
&.animated::before {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 55e231d2..f916af9d 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -282,6 +282,11 @@
.user-card {
position: relative;
+ &:hover .Avatar {
+ --_still-image-img-visibility: visible;
+ --_still-image-canvas-visibility: hidden;
+ }
+
.panel-heading {
padding: .5em 0;
text-align: center;
@@ -382,20 +387,17 @@
max-height: 56px;
.Avatar {
+ --_avatarShadowBox: var(--avatarShadow);
+ --_avatarShadowFilter: var(--avatarShadowFilter);
+ --_avatarShadowInset: var(--avatarShadowInset);
+
flex: 1 0 100%;
width: 56px;
height: 56px;
- box-shadow: 0px 1px 8px rgba(0,0,0,0.75);
- box-shadow: var(--avatarShadow);
object-fit: cover;
}
}
- &:hover .Avatar {
- --still-image-img: visible;
- --still-image-canvas: hidden;
- }
-
&-avatar-link {
position: relative;
cursor: pointer;
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 19:47:13 +0000