yanchan09/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Packages Projects Releases Wiki Activity

more fixes, add fullwidth

Browse source
This commit is contained in:
Shpuld Shpuldson 2020-11-24 14:52:01 +02:00
parent 7b99d98c55
commit 8b775f94a9
12 changed files with 63 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/App.scss
View file

@ -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
src/components/emoji_input/emoji_input.vue
View file

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

10
src/components/extra_buttons/extra_buttons.vue
View file

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

2
src/components/notifications/notifications.vue
View file

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

2
src/components/popover/popover.js
View file

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

5
src/components/popover/popover.vue
View file

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

13
src/components/react_button/react_button.vue
View file

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

24
src/components/scope_selector/scope_selector.vue
View file

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

5
src/components/side_drawer/side_drawer.vue
View file

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

2
src/components/timeline/timeline.vue
View file

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

1
src/components/timeline_menu/timeline_menu.vue
View file

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

6
src/hocs/with_load_more/with_load_more.js
View file

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