aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/App.scss34
-rw-r--r--src/components/emoji_input/emoji_input.vue6
-rw-r--r--src/components/extra_buttons/extra_buttons.vue10
-rw-r--r--src/components/notifications/notifications.vue2
-rw-r--r--src/components/popover/popover.js2
-rw-r--r--src/components/popover/popover.vue5
-rw-r--r--src/components/react_button/react_button.vue13
-rw-r--r--src/components/scope_selector/scope_selector.vue24
-rw-r--r--src/components/side_drawer/side_drawer.vue5
-rw-r--r--src/components/timeline/timeline.vue2
-rw-r--r--src/components/timeline_menu/timeline_menu.vue1
-rw-r--r--src/hocs/with_load_more/with_load_more.js6
12 files changed, 63 insertions, 47 deletions
diff --git a/src/App.scss b/src/App.scss
index ef2a13b1..1d0abb51 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -163,6 +163,8 @@ a {
padding: 0;
line-height: unset;
cursor: pointer;
+ box-sizing: content-box;
+ color: inherit;
&.-link {
color: $fallback--link;
@@ -170,8 +172,12 @@ a {
}
&.-padded {
- padding: 5px;
- margin: -5px;
+ padding: 10px;
+ margin: -10px;
+ }
+
+ &.-fullwidth {
+ width: 100%;
}
}
@@ -468,6 +474,7 @@ main-router {
color: $fallback--faint;
color: var(--panelFaint, $fallback--faint);
}
+
.faint-link {
color: $fallback--faint;
color: var(--faintLink, $fallback--faint);
@@ -479,11 +486,8 @@ main-router {
overflow-x: hidden;
}
- button {
- flex-shrink: 0;
- }
-
- button, .alert {
+ .button-default,
+ .alert {
// height: 100%;
line-height: 21px;
min-height: 0;
@@ -494,8 +498,11 @@ main-router {
align-self: stretch;
}
- button {
- &, i[class*=icon-] {
+ .button-default {
+ flex-shrink: 0;
+
+ &,
+ i[class*=icon-] {
color: $fallback--text;
color: var(--btnPanelText, $fallback--text);
}
@@ -518,7 +525,8 @@ main-router {
}
}
- a {
+ a,
+ .-link {
color: $fallback--link;
color: var(--panelLink, $fallback--link)
}
@@ -533,15 +541,15 @@ main-router {
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
-
.faint {
color: $fallback--faint;
color: var(--panelFaint, $fallback--faint);
}
- a {
+ a,
+ .-link {
color: $fallback--link;
- color: var(--panelLink, $fallback--link)
+ color: var(--panelLink, $fallback--link);
}
}
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 224e72cf..d308bf86 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -6,13 +6,13 @@
>
<slot />
<template v-if="enableEmojiPicker">
- <div
+ <button
v-if="!hideEmojiButton"
- class="emoji-picker-icon"
+ class="button-unstyled emoji-picker-icon"
@click.prevent="togglePicker"
>
<FAIcon :icon="['far', 'smile-beam']" />
- </div>
+ </button>
<EmojiPicker
v-if="enableEmojiPicker"
ref="picker"
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 5c9e1963..1578267c 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -2,7 +2,7 @@
<Popover
trigger="click"
placement="top"
- class="extra-button-popover"
+ :offset="{ y: -5 }"
:bound-to="{ x: 'container' }"
>
<div
@@ -97,15 +97,15 @@
</button>
</div>
</div>
- <button
+ <span
slot="trigger"
- class="ExtraButtons button-unstyled -padded"
+ class="ExtraButtons"
>
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="ellipsis-h"
/>
- </button>
+ </span>
</Popover>
</template>
@@ -117,6 +117,8 @@
.ExtraButtons {
cursor: pointer;
position: static;
+ padding: 10px;
+ margin: -10px;
&:hover .svg-inline--fa {
color: $fallback--text;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 663f623b..725d1ad4 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -43,7 +43,7 @@
</div>
<button
v-else-if="!loading"
- class="button-unstyled -link"
+ class="button-unstyled -link -fullwidth"
@click.prevent="fetchOlderNotifications()"
>
<div class="new-status-notification text-center panel-footer">
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 695f73b9..db4a768b 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -99,7 +99,7 @@ const Popover = {
const yOffset = (this.offset && this.offset.y) || 0
const translateY = usingTop
? -anchorEl.offsetHeight - yOffset - content.offsetHeight
- : yOffset
+ : -yOffset
const xOffset = (this.offset && this.offset.x) || 0
const translateX = (anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset + xOffset
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 9b8680e5..3868ec96 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -3,12 +3,13 @@
@mouseenter="onMouseenter"
@mouseleave="onMouseleave"
>
- <div
+ <button
ref="trigger"
+ class="button-unstyled -fullwidth"
@click="onClick"
>
<slot name="trigger" />
- </div>
+ </button>
<div
v-if="!hidden"
ref="content"
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index ea4a8a9b..2e3cedd1 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -2,8 +2,7 @@
<Popover
trigger="click"
placement="top"
- :offset="{ y: 5 }"
- class="react-button-popover"
+ :offset="{ y: -5 }"
:bound-to="{ x: 'container' }"
>
<div
@@ -38,16 +37,16 @@
<div class="reaction-bottom-fader" />
</div>
</div>
- <button
+ <span
slot="trigger"
- class="add-reaction-button button-unstyled -padded"
+ class="AddReaction"
:title="$t('tool_tip.add_reaction')"
>
<FAIcon
class="fa-scale-110 fa-old-padding"
:icon="['far', 'smile-beam']"
/>
- </button>
+ </span>
</Popover>
</template>
@@ -105,8 +104,10 @@
}
}
-.add-reaction-button {
+.AddReaction {
cursor: pointer;
+ padding: 10px;
+ margin: -10px;
&:hover .svg-inline--fa {
color: $fallback--text;
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index a22a4fda..66ac612e 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -3,9 +3,9 @@
v-if="!showNothing"
class="ScopeSelector"
>
- <span
+ <button
v-if="showDirect"
- class="scope"
+ class="button-unstyled scope"
:class="css.direct"
:title="$t('post_status.scope.direct')"
@click="changeVis('direct')"
@@ -14,10 +14,10 @@
icon="envelope"
class="fa-scale-110 fa-old-padding"
/>
- </span>
- <span
+ </button>
+ <button
v-if="showPrivate"
- class="scope"
+ class="button-unstyled scope"
:class="css.private"
:title="$t('post_status.scope.private')"
@click="changeVis('private')"
@@ -26,10 +26,10 @@
icon="lock"
class="fa-scale-110 fa-old-padding"
/>
- </span>
- <span
+ </button>
+ <button
v-if="showUnlisted"
- class="scope"
+ class="button-unstyled scope"
:class="css.unlisted"
:title="$t('post_status.scope.unlisted')"
@click="changeVis('unlisted')"
@@ -38,10 +38,10 @@
icon="lock-open"
class="fa-scale-110 fa-old-padding"
/>
- </span>
- <span
+ </button>
+ <button
v-if="showPublic"
- class="scope"
+ class="button-unstyled scope"
:class="css.public"
:title="$t('post_status.scope.public')"
@click="changeVis('public')"
@@ -50,7 +50,7 @@
icon="globe"
class="fa-scale-110 fa-old-padding"
/>
- </span>
+ </button>
</div>
</template>
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 1c14c1ab..695ae03b 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -145,7 +145,7 @@
</li>
<li @click="toggleDrawer">
<button
- class="button-unstyled -link"
+ class="button-unstyled -link -fullwidth"
@click="openSettingsModal"
>
<FAIcon
@@ -184,7 +184,7 @@
@click="toggleDrawer"
>
<button
- class="button-unstyled -link"
+ class="button-unstyled -link -fullwidth"
@click="doLogout"
>
<FAIcon
@@ -337,7 +337,6 @@
height: 3em;
line-height: 3em;
padding: 0 0.7em;
- width: 100%;
&:hover {
background-color: $fallback--lightBg;
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 8ffa4499..52fd674e 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -63,7 +63,7 @@
</div>
<button
v-else-if="!timeline.loading"
- class="button-unstyled -link"
+ class="button-unstyled -link -fullwidth"
@click.prevent="fetchOlderStatuses()"
>
<div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div>
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index c46531be..f8f79be9 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -84,6 +84,7 @@
margin-right: auto;
min-width: 0;
width: 24rem;
+ height: 28px;
.timeline-menu-popover-wrap {
overflow: hidden;
diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
index afb51a0f..7df9dbb2 100644
--- a/src/hocs/with_load_more/with_load_more.js
+++ b/src/hocs/with_load_more/with_load_more.js
@@ -91,7 +91,11 @@ const withLoadMore = ({
{children}
</WrappedComponent>
<div class="with-load-more-footer">
- {this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>}
+ {this.error &&
+ <button onClick={this.fetchEntries} class="button-unstyled -link -fullwidth alert error">
+ {this.$t('general.generic_error')}
+ </button>
+ }
{!this.error && this.loading && <FAIcon spin icon="circle-notch"/>}
{!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 09:38:21 +0000