more fixes, add fullwidth
This commit is contained in:
parent
7b99d98c55
commit
8b775f94a9
34
src/App.scss
34
src/App.scss
|
@ -163,6 +163,8 @@ a {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
line-height: unset;
|
line-height: unset;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
box-sizing: content-box;
|
||||||
|
color: inherit;
|
||||||
|
|
||||||
&.-link {
|
&.-link {
|
||||||
color: $fallback--link;
|
color: $fallback--link;
|
||||||
|
@ -170,8 +172,12 @@ a {
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-padded {
|
&.-padded {
|
||||||
padding: 5px;
|
padding: 10px;
|
||||||
margin: -5px;
|
margin: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.-fullwidth {
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -468,6 +474,7 @@ main-router {
|
||||||
color: $fallback--faint;
|
color: $fallback--faint;
|
||||||
color: var(--panelFaint, $fallback--faint);
|
color: var(--panelFaint, $fallback--faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.faint-link {
|
.faint-link {
|
||||||
color: $fallback--faint;
|
color: $fallback--faint;
|
||||||
color: var(--faintLink, $fallback--faint);
|
color: var(--faintLink, $fallback--faint);
|
||||||
|
@ -479,11 +486,8 @@ main-router {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
.button-default,
|
||||||
flex-shrink: 0;
|
.alert {
|
||||||
}
|
|
||||||
|
|
||||||
button, .alert {
|
|
||||||
// height: 100%;
|
// height: 100%;
|
||||||
line-height: 21px;
|
line-height: 21px;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
@ -494,8 +498,11 @@ main-router {
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
.button-default {
|
||||||
&, i[class*=icon-] {
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
&,
|
||||||
|
i[class*=icon-] {
|
||||||
color: $fallback--text;
|
color: $fallback--text;
|
||||||
color: var(--btnPanelText, $fallback--text);
|
color: var(--btnPanelText, $fallback--text);
|
||||||
}
|
}
|
||||||
|
@ -518,7 +525,8 @@ main-router {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a,
|
||||||
|
.-link {
|
||||||
color: $fallback--link;
|
color: $fallback--link;
|
||||||
color: var(--panelLink, $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 $fallback--panelRadius $fallback--panelRadius;
|
||||||
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
|
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
|
||||||
|
|
||||||
|
|
||||||
.faint {
|
.faint {
|
||||||
color: $fallback--faint;
|
color: $fallback--faint;
|
||||||
color: var(--panelFaint, $fallback--faint);
|
color: var(--panelFaint, $fallback--faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a,
|
||||||
|
.-link {
|
||||||
color: $fallback--link;
|
color: $fallback--link;
|
||||||
color: var(--panelLink, $fallback--link)
|
color: var(--panelLink, $fallback--link);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -6,13 +6,13 @@
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
<template v-if="enableEmojiPicker">
|
<template v-if="enableEmojiPicker">
|
||||||
<div
|
<button
|
||||||
v-if="!hideEmojiButton"
|
v-if="!hideEmojiButton"
|
||||||
class="emoji-picker-icon"
|
class="button-unstyled emoji-picker-icon"
|
||||||
@click.prevent="togglePicker"
|
@click.prevent="togglePicker"
|
||||||
>
|
>
|
||||||
<FAIcon :icon="['far', 'smile-beam']" />
|
<FAIcon :icon="['far', 'smile-beam']" />
|
||||||
</div>
|
</button>
|
||||||
<EmojiPicker
|
<EmojiPicker
|
||||||
v-if="enableEmojiPicker"
|
v-if="enableEmojiPicker"
|
||||||
ref="picker"
|
ref="picker"
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<Popover
|
<Popover
|
||||||
trigger="click"
|
trigger="click"
|
||||||
placement="top"
|
placement="top"
|
||||||
class="extra-button-popover"
|
:offset="{ y: -5 }"
|
||||||
:bound-to="{ x: 'container' }"
|
:bound-to="{ x: 'container' }"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
@ -97,15 +97,15 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<span
|
||||||
slot="trigger"
|
slot="trigger"
|
||||||
class="ExtraButtons button-unstyled -padded"
|
class="ExtraButtons"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
icon="ellipsis-h"
|
icon="ellipsis-h"
|
||||||
/>
|
/>
|
||||||
</button>
|
</span>
|
||||||
</Popover>
|
</Popover>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -117,6 +117,8 @@
|
||||||
.ExtraButtons {
|
.ExtraButtons {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: static;
|
position: static;
|
||||||
|
padding: 10px;
|
||||||
|
margin: -10px;
|
||||||
|
|
||||||
&:hover .svg-inline--fa {
|
&:hover .svg-inline--fa {
|
||||||
color: $fallback--text;
|
color: $fallback--text;
|
||||||
|
|
|
@ -43,7 +43,7 @@
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
v-else-if="!loading"
|
v-else-if="!loading"
|
||||||
class="button-unstyled -link"
|
class="button-unstyled -link -fullwidth"
|
||||||
@click.prevent="fetchOlderNotifications()"
|
@click.prevent="fetchOlderNotifications()"
|
||||||
>
|
>
|
||||||
<div class="new-status-notification text-center panel-footer">
|
<div class="new-status-notification text-center panel-footer">
|
||||||
|
|
|
@ -99,7 +99,7 @@ const Popover = {
|
||||||
const yOffset = (this.offset && this.offset.y) || 0
|
const yOffset = (this.offset && this.offset.y) || 0
|
||||||
const translateY = usingTop
|
const translateY = usingTop
|
||||||
? -anchorEl.offsetHeight - yOffset - content.offsetHeight
|
? -anchorEl.offsetHeight - yOffset - content.offsetHeight
|
||||||
: yOffset
|
: -yOffset
|
||||||
|
|
||||||
const xOffset = (this.offset && this.offset.x) || 0
|
const xOffset = (this.offset && this.offset.x) || 0
|
||||||
const translateX = (anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset + xOffset
|
const translateX = (anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset + xOffset
|
||||||
|
|
|
@ -3,12 +3,13 @@
|
||||||
@mouseenter="onMouseenter"
|
@mouseenter="onMouseenter"
|
||||||
@mouseleave="onMouseleave"
|
@mouseleave="onMouseleave"
|
||||||
>
|
>
|
||||||
<div
|
<button
|
||||||
ref="trigger"
|
ref="trigger"
|
||||||
|
class="button-unstyled -fullwidth"
|
||||||
@click="onClick"
|
@click="onClick"
|
||||||
>
|
>
|
||||||
<slot name="trigger" />
|
<slot name="trigger" />
|
||||||
</div>
|
</button>
|
||||||
<div
|
<div
|
||||||
v-if="!hidden"
|
v-if="!hidden"
|
||||||
ref="content"
|
ref="content"
|
||||||
|
|
|
@ -2,8 +2,7 @@
|
||||||
<Popover
|
<Popover
|
||||||
trigger="click"
|
trigger="click"
|
||||||
placement="top"
|
placement="top"
|
||||||
:offset="{ y: 5 }"
|
:offset="{ y: -5 }"
|
||||||
class="react-button-popover"
|
|
||||||
:bound-to="{ x: 'container' }"
|
:bound-to="{ x: 'container' }"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
@ -38,16 +37,16 @@
|
||||||
<div class="reaction-bottom-fader" />
|
<div class="reaction-bottom-fader" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<span
|
||||||
slot="trigger"
|
slot="trigger"
|
||||||
class="add-reaction-button button-unstyled -padded"
|
class="AddReaction"
|
||||||
:title="$t('tool_tip.add_reaction')"
|
:title="$t('tool_tip.add_reaction')"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
:icon="['far', 'smile-beam']"
|
:icon="['far', 'smile-beam']"
|
||||||
/>
|
/>
|
||||||
</button>
|
</span>
|
||||||
</Popover>
|
</Popover>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -105,8 +104,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.add-reaction-button {
|
.AddReaction {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
padding: 10px;
|
||||||
|
margin: -10px;
|
||||||
|
|
||||||
&:hover .svg-inline--fa {
|
&:hover .svg-inline--fa {
|
||||||
color: $fallback--text;
|
color: $fallback--text;
|
||||||
|
|
|
@ -3,9 +3,9 @@
|
||||||
v-if="!showNothing"
|
v-if="!showNothing"
|
||||||
class="ScopeSelector"
|
class="ScopeSelector"
|
||||||
>
|
>
|
||||||
<span
|
<button
|
||||||
v-if="showDirect"
|
v-if="showDirect"
|
||||||
class="scope"
|
class="button-unstyled scope"
|
||||||
:class="css.direct"
|
:class="css.direct"
|
||||||
:title="$t('post_status.scope.direct')"
|
:title="$t('post_status.scope.direct')"
|
||||||
@click="changeVis('direct')"
|
@click="changeVis('direct')"
|
||||||
|
@ -14,10 +14,10 @@
|
||||||
icon="envelope"
|
icon="envelope"
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
/>
|
/>
|
||||||
</span>
|
</button>
|
||||||
<span
|
<button
|
||||||
v-if="showPrivate"
|
v-if="showPrivate"
|
||||||
class="scope"
|
class="button-unstyled scope"
|
||||||
:class="css.private"
|
:class="css.private"
|
||||||
:title="$t('post_status.scope.private')"
|
:title="$t('post_status.scope.private')"
|
||||||
@click="changeVis('private')"
|
@click="changeVis('private')"
|
||||||
|
@ -26,10 +26,10 @@
|
||||||
icon="lock"
|
icon="lock"
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
/>
|
/>
|
||||||
</span>
|
</button>
|
||||||
<span
|
<button
|
||||||
v-if="showUnlisted"
|
v-if="showUnlisted"
|
||||||
class="scope"
|
class="button-unstyled scope"
|
||||||
:class="css.unlisted"
|
:class="css.unlisted"
|
||||||
:title="$t('post_status.scope.unlisted')"
|
:title="$t('post_status.scope.unlisted')"
|
||||||
@click="changeVis('unlisted')"
|
@click="changeVis('unlisted')"
|
||||||
|
@ -38,10 +38,10 @@
|
||||||
icon="lock-open"
|
icon="lock-open"
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
/>
|
/>
|
||||||
</span>
|
</button>
|
||||||
<span
|
<button
|
||||||
v-if="showPublic"
|
v-if="showPublic"
|
||||||
class="scope"
|
class="button-unstyled scope"
|
||||||
:class="css.public"
|
:class="css.public"
|
||||||
:title="$t('post_status.scope.public')"
|
:title="$t('post_status.scope.public')"
|
||||||
@click="changeVis('public')"
|
@click="changeVis('public')"
|
||||||
|
@ -50,7 +50,7 @@
|
||||||
icon="globe"
|
icon="globe"
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
/>
|
/>
|
||||||
</span>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -145,7 +145,7 @@
|
||||||
</li>
|
</li>
|
||||||
<li @click="toggleDrawer">
|
<li @click="toggleDrawer">
|
||||||
<button
|
<button
|
||||||
class="button-unstyled -link"
|
class="button-unstyled -link -fullwidth"
|
||||||
@click="openSettingsModal"
|
@click="openSettingsModal"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
|
@ -184,7 +184,7 @@
|
||||||
@click="toggleDrawer"
|
@click="toggleDrawer"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
class="button-unstyled -link"
|
class="button-unstyled -link -fullwidth"
|
||||||
@click="doLogout"
|
@click="doLogout"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
|
@ -337,7 +337,6 @@
|
||||||
height: 3em;
|
height: 3em;
|
||||||
line-height: 3em;
|
line-height: 3em;
|
||||||
padding: 0 0.7em;
|
padding: 0 0.7em;
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $fallback--lightBg;
|
background-color: $fallback--lightBg;
|
||||||
|
|
|
@ -63,7 +63,7 @@
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
v-else-if="!timeline.loading"
|
v-else-if="!timeline.loading"
|
||||||
class="button-unstyled -link"
|
class="button-unstyled -link -fullwidth"
|
||||||
@click.prevent="fetchOlderStatuses()"
|
@click.prevent="fetchOlderStatuses()"
|
||||||
>
|
>
|
||||||
<div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div>
|
<div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div>
|
||||||
|
|
|
@ -84,6 +84,7 @@
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
width: 24rem;
|
width: 24rem;
|
||||||
|
height: 28px;
|
||||||
|
|
||||||
.timeline-menu-popover-wrap {
|
.timeline-menu-popover-wrap {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
|
@ -91,7 +91,11 @@ const withLoadMore = ({
|
||||||
{children}
|
{children}
|
||||||
</WrappedComponent>
|
</WrappedComponent>
|
||||||
<div class="with-load-more-footer">
|
<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 && <FAIcon spin icon="circle-notch"/>}
|
||||||
{!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
|
{!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue