From bf84a87821e63774340cbff9e4356d1b30d415b7 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Wed, 21 Jun 2017 17:15:45 +0300
Subject: [PATCH 1/4] Make buttons stand out with some shading.
---
src/App.scss | 8 ++++--
.../notifications/notifications.vue | 2 +-
src/components/timeline/timeline.vue | 26 ++++++++++++-------
3 files changed, 24 insertions(+), 12 deletions(-)
diff --git a/src/App.scss b/src/App.scss
index a5f190cb..3ba79f3f 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -33,9 +33,13 @@ button{
border: none;
border-radius: 5px;
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 {
- opacity: 0.8;
+ box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
}
}
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index f5950ac9..6c0419a5 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -4,7 +4,7 @@
<div class="panel-heading base01-background base04">
<span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span>
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 class="panel-body base03-border">
<div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 08733f4f..9c13fd99 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -4,15 +4,15 @@
<div class="title">
{{title}}
</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}})
</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
- </button>
- <button @click.prevent class="base04 base01-background no-press loadmore-button" v-if="!timeline.newStatusCount > 0 && !timelineError">
+ </div>
+ <div @click.prevent class="base04 base01-background loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError">
Up-to-date
- </button>
+ </div>
</div>
<div class="panel-body">
<div class="timeline">
@@ -43,18 +43,26 @@
.loadmore-button {
position: absolute;
right: 0.6em;
+ font-size: 14px;
min-width: 6em;
height: 1.8em;
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 {
background-color: rgba(255, 48, 16, 0.65);
}
- .no-press {
- opacity: 0.8;
- cursor: default;
- }
}
From 97bb03a00c6c200ad0cfe6b1b4bf11a9b4352514 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Wed, 21 Jun 2017 17:19:56 +0300
Subject: [PATCH 2/4] Fix consistency in font families between chromium and ff
---
src/App.scss | 3 ++-
src/components/timeline/timeline.vue | 2 +-
2 files changed, 3 insertions(+), 2 deletions(-)
diff --git a/src/App.scss b/src/App.scss
index 3ba79f3f..39bb34de 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -37,7 +37,8 @@ button{
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 2px black;
font-size: 14px;
-
+ font-family: sans;
+
&:hover {
box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
}
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 9c13fd99..dbd0d948 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -55,7 +55,7 @@
font-size: 14px;
min-width: 6em;
border-radius: 5px;
- font-family: arial;
+ font-family: sans;
text-align: center;
padding: 0 0.5em 0 0.5em;
opacity: 0.8;
From c1f1599f2fdf90dd0cfcfefe2359884ad1a5f668 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Wed, 21 Jun 2017 17:32:41 +0300
Subject: [PATCH 3/4] Another minor consistency fix.
---
src/App.scss | 2 +-
src/components/timeline/timeline.vue | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/App.scss b/src/App.scss
index 39bb34de..15c908d9 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -37,7 +37,7 @@ button{
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 2px black;
font-size: 14px;
- font-family: sans;
+ font-family: sans-serif;
&:hover {
box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index dbd0d948..a9162120 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -55,7 +55,7 @@
font-size: 14px;
min-width: 6em;
border-radius: 5px;
- font-family: sans;
+ font-family: sans-serif;
text-align: center;
padding: 0 0.5em 0 0.5em;
opacity: 0.8;
From 2d5fd21558c6c3341db31fe0bc2ff7babd986c55 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Wed, 21 Jun 2017 17:43:59 +0300
Subject: [PATCH 4/4] Make mobile panel switcher buttons obey the colors of the
current style.
---
src/App.vue | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index b2d8df8b..79eded08 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,8 +13,8 @@
</nav>
<div class="container" id="content">
<div class="panel-switcher">
- <button @click="activatePanel('sidebar')">Sidebar</button>
- <button @click="activatePanel('timeline')">Timeline</button>
+ <button @click="activatePanel('sidebar')" class="base01-background base04">Sidebar</button>
+ <button @click="activatePanel('timeline')" class="base01-background base04">Timeline</button>
</div>
<div class="sidebar-flexer" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar'}">
<div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }">