Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge branch 'feature/slicker-buttons' into 'develop'

Browse source 
Feature/slicker buttons

See merge request !90
This commit is contained in:
lambadalambda 2017-06-21 12:14:23 -04:00
commit e113d0a250
4 changed files with 26 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/App.scss
View file

@ -33,9 +33,14 @@ button{
border: none; border: none;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 2px black;
font-size: 14px;
font-family: sans-serif;
&:hover { &:hover {
opacity: 0.8; box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
} }
} }

4
src/App.vue
View file

@ -13,8 +13,8 @@
</nav> </nav>
<div class="container" id="content"> <div class="container" id="content">
<div class="panel-switcher"> <div class="panel-switcher">
<button @click="activatePanel('sidebar')">Sidebar</button> <button @click="activatePanel('sidebar')" class="base01-background base04">Sidebar</button>
<button @click="activatePanel('timeline')">Timeline</button> <button @click="activatePanel('timeline')" class="base01-background base04">Timeline</button>
</div> </div>
<div class="sidebar-flexer" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar'}"> <div class="sidebar-flexer" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar'}">
<div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }"> <div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }">

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

@ -4,7 +4,7 @@
<div class="panel-heading base01-background base04"> <div class="panel-heading base01-background base04">
<span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span> <span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span>
Notifications Notifications
<button @click.prevent="markAsSeen" class="base06 base02-background read-button">Read!</button> <button @click.prevent="markAsSeen" class="base05 base01-background read-button">Read!</button>
</div> </div>
<div class="panel-body base03-border"> <div class="panel-body base03-border">
<div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'> <div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>

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

@ -4,15 +4,15 @@
<div class="title"> <div class="title">
{{title}} {{title}}
</div> </div>
<button @click.prevent="showNewStatuses" class="base06 base02-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError"> <button @click.prevent="showNewStatuses" class="base05 base01-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
Show new ({{timeline.newStatusCount}}) Show new ({{timeline.newStatusCount}})
</button> </button>
<button @click.prevent class="base06 error no-press loadmore-button" v-if="timelineError"> <div @click.prevent class="base06 error loadmore-text" v-if="timelineError">
Error fetching updates Error fetching updates
</button> </div>
<button @click.prevent class="base04 base01-background no-press loadmore-button" v-if="!timeline.newStatusCount > 0 && !timelineError"> <div @click.prevent class="base04 base01-background loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError">
Up-to-date Up-to-date
</button> </div>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div class="timeline"> <div class="timeline">
@ -43,18 +43,26 @@
.loadmore-button { .loadmore-button {
position: absolute; position: absolute;
right: 0.6em; right: 0.6em;
font-size: 14px;
min-width: 6em; min-width: 6em;
height: 1.8em; height: 1.8em;
line-height: 100%; line-height: 100%;
} }
.loadmore-text {
position: absolute;
right: 0.6em;
font-size: 14px;
min-width: 6em;
border-radius: 5px;
font-family: sans-serif;
text-align: center;
padding: 0 0.5em 0 0.5em;
opacity: 0.8;
}
.error { .error {
background-color: rgba(255, 48, 16, 0.65); background-color: rgba(255, 48, 16, 0.65);
} }
.no-press {
opacity: 0.8;
cursor: default;
}
} }