AverageMarcus/gopherss
1
0
Fork 0
Code Pull Requests Releases Activity

Improve darkmode

Browse Source
This commit is contained in:
Marcus Noble 2020-10-17 19:50:13 +01:00
parent 3f4a06f9ec
commit eb38440ee4
3 changed files with 41 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
views/index.html
View File

@ -6,12 +6,12 @@
<title>Gopherss</title> <title>Gopherss</title>
<script src="/static/feed-item.js" defer></script> <script src="/static/feed-item.js" defer></script>
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script> <script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js" integrity="sha256-T/f7Sju1ZfNNfBh7skWn0idlCBcI3RwdLSS4/I7NQKQ=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/hack@0.8.1/dist/hack.css"> <link rel="stylesheet" href="https://unpkg.com/hack@0.8.1/dist/hack.css">
<link rel="stylesheet" href="https://unpkg.com/hack@0.8.1/dist/dark.css"> <link rel="stylesheet" href="https://unpkg.com/hack@0.8.1/dist/dark.css">
<link rel="stylesheet" href="https://unpkg.com/hack@0.8.1/dist/dark-grey.css"> <link rel="stylesheet" href="https://unpkg.com/hack@0.8.1/dist/dark-grey.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/style.css"> <link rel="stylesheet" href="/static/style.css">
</head> </head>
@ -35,14 +35,12 @@
</div> </div>
<div class="feeds"> <div class="feeds">
<div :class="{ alert: true, 'alert-success': selectedFeed == ''}" v-on:click="loadFeed('')"> <div :class="{ strong: items.length, alert: true, 'alert-success': selectedFeed == ''}" v-on:click="loadFeed('')">
All All ({{items.length}})
<span :class="{ strong: items.length }">({{items.length}})</span>
</div> </div>
<div v-for="feed in feeds" :class="{'alert': true, 'alert-success': selectedFeed == feed.FeedURL }" :data-feed="feed.FeedURL" v-on:click="loadFeed(feed.ID)"> <div v-for="feed in feeds" :class="{strong: unreadCount(feed), 'alert': true, 'alert-success': selectedFeed == feed.FeedURL }" :data-feed="feed.FeedURL" v-on:click="loadFeed(feed.ID)">
{{feed.Title}} {{feed.Title}} ({{unreadCount(feed)}})
<span :class="{ strong: unreadCount(feed) }">({{unreadCount(feed)}})</span>
</div> </div>
<div class="menu"> <div class="menu">
@ -86,7 +84,7 @@
<div class="card item-content" :data-id="item.ID" v-show="item.ID == selectedItem"> <div class="card item-content" :data-id="item.ID" v-show="item.ID == selectedItem">
<div class="card-content"> <div class="card-content">
<div class="loading"></div> <div class="loading"></div>
<feed-item :item-id="item.ID"></feed-item> <feed-item :item-id="item.ID" :class="{ dark: isDark }"></feed-item>
</div> </div>
</div> </div>
</div> </div>
@ -112,6 +110,7 @@
newSiteURL: '', newSiteURL: '',
opml: '', opml: '',
isBusy: false, isBusy: false,
isDark: false,
}, },
computed: { computed: {
shownItems() { shownItems() {
@ -128,6 +127,7 @@
document.body.style.cursor = isBusy ? "wait" : ""; document.body.style.cursor = isBusy ? "wait" : "";
}, },
toggleDarkMode() { toggleDarkMode() {
this.isDark = !this.isDark;
document.body.classList.toggle('dark'); document.body.classList.toggle('dark');
document.body.classList.toggle('dark-grey'); document.body.classList.toggle('dark-grey');
}, },
@ -290,6 +290,10 @@
}; };
document.addEventListener('keydown', this._keyListener.bind(this)); document.addEventListener('keydown', this._keyListener.bind(this));
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
this.toggleDarkMode();
}
}, },
beforeDestroy() { beforeDestroy() {
document.removeEventListener('keydown', this._keyListener); document.removeEventListener('keydown', this._keyListener);

31
views/static/feed-item.js
View File

@ -9,21 +9,36 @@ class FeedItem extends HTMLElement {
const template = document.createElement('template'); const template = document.createElement('template');
template.innerHTML = ` template.innerHTML = `
<style> <style>
:root { :host {
width: 100%; width: 100% !important;
overflow: scroll; overflow: scroll !important;
overflow-x: auto; overflow-x: auto !important;
} }
* { * {
max-width: 100%; max-width: 100% !important;
height: auto; height: auto !important;
} }
table { table {
width: 100%; width: 100% !important;
} }
img { img {
margin: auto auto; margin: auto auto !important;
} }
p {
font-family: 'Roboto', sans-serif;
font-size: 14px;
line-height: 20px;
letter-spacing: 0em;
font-weight: 500;
}
a {
color: #333;
font-weight: bold;
}
:host(.dark) a {
color: #ccc;
}
</style> </style>
`; `;

6
views/static/style.css
View File

@ -9,7 +9,7 @@
.dark .strong { .dark .strong {
font-weight: bold; font-weight: bold;
color: #eee; color: #fefefe;
} }
.loading { .loading {
@ -114,3 +114,7 @@
max-width: 100em; max-width: 100em;
} }
} }
.dark {
background: #333;
}