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

Make buttons stand out with some shading.

Browse source
This commit is contained in:
Shpuld Shpuldson 2017-06-21 17:15:45 +03:00
parent 8e5d17a659
commit bf84a87821
3 changed files with 24 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/App.scss
View file

@ -33,9 +33,13 @@ 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;
&:hover { &:hover {
opacity: 0.8; box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
} }
} }

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: arial;
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;
}
} }