Anon/yandere_fe
1
0
Fork 0
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;
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);
}
}

6
src/components/emoji_input/emoji_input.vue
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -84,6 +84,7 @@
margin-right: auto;
min-width: 0;
width: 24rem;
height: 28px;
.timeline-menu-popover-wrap {
overflow: hidden;

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

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