aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAdam Mathes <adam@trenchant.org>2018-04-27 09:59:16 -0700
committerAdam Mathes <adam@trenchant.org>2018-04-27 09:59:16 -0700
commit4b3f852a009a1582b40250e9c78cb412d7523936 (patch)
tree68b5dc48cbb1c0a2909de18789398d92df5b3b62
parenteb3112116ae926921fbefd3677ed16a6da65f645 (diff)
downloadneko-4b3f852a009a1582b40250e9c78cb412d7523936.tar.gz
neko-4b3f852a009a1582b40250e9c78cb412d7523936.tar.bz2
neko-4b3f852a009a1582b40250e9c78cb412d7523936.zip
wip filter ui
-rw-r--r--static/style.css136
-rw-r--r--static/ui.html6
-rw-r--r--static/ui.js9
3 files changed, 80 insertions, 71 deletions
diff --git a/static/style.css b/static/style.css
index b7ad1e9..4305e56 100644
--- a/static/style.css
+++ b/static/style.css
@@ -111,13 +111,15 @@ h3 {
#filters {
position: fixed;
- top: 0em;
- left: 1em;
+ top: 0;
+ left: 0;
+ padding: 3rem 1rem 0 1rem;
width: 10rem;
cursor: pointer;
color: #777;
- height: 95%;
+ height: 100%;
overflow-y: auto;
+ background-color: #ccc;
}
#tags, #feeds {
@@ -151,10 +153,16 @@ pre {
}
.logo {
- font-size: 14px;
- margin: 1em 0 0 0;
+ position: fixed;
+ top: 0;
+ left: 0;
+ font-size: 36px;
+ text-align: center;
color: black;
line-height: 1em;
+ z-index: 1;
+ cursor: pointer;
+ width: 10rem;
}
.hasunread {
@@ -196,62 +204,62 @@ button {
}
-@media only screen and (max-device-width: 768px) {
- html {
- width: 100%;
- font-size: 22px;
- }
-
- body {
- min-width: 0;
- width: 100%;
- max-width: 100%;
- overflow: hidden;
- }
-
-
- #filters h4, #filters h1 {
- display: none;
- }
-
- #controls {
- width: 100%;
- font-size: 1.5rem;
- }
-
- #controls ul {
- padding: 0;
- margin: 0;
- text-align: center;
- }
-
- #controls li {
- display: inline;
- }
-
- #filters {
- width: 100%;
- height: 50px;
- position: fixed;
- top: 0;
- left: 0;
- background: #ccc;
- }
-
-
- #items {
- margin: 0 auto;
- max-width: 100%;
- }
-}
-
-@media only screen and (max-device-width: 400px) {
- html {
- font-size: 16px;
- }
-
- body {
- min-width: 0;
- width: 100%;
- }
-}
+/* @media only screen and (max-device-width: 768px) { */
+/* html { */
+/* width: 100%; */
+/* font-size: 22px; */
+/* } */
+
+/* body { */
+/* min-width: 0; */
+/* width: 100%; */
+/* max-width: 100%; */
+/* overflow: hidden; */
+/* } */
+
+
+/* #filters h4, #filters h1 { */
+/* display: none; */
+/* } */
+
+/* #controls { */
+/* width: 100%; */
+/* font-size: 1.5rem; */
+/* } */
+
+/* #controls ul { */
+/* padding: 0; */
+/* margin: 0; */
+/* text-align: center; */
+/* } */
+
+/* #controls li { */
+/* display: inline; */
+/* } */
+
+/* #filters { */
+/* width: 100%; */
+/* height: 50px; */
+/* position: fixed; */
+/* top: 0; */
+/* left: 0; */
+/* background: #ccc; */
+/* } */
+
+
+/* #items { */
+/* margin: 0 auto; */
+/* max-width: 100%; */
+/* } */
+/* } */
+
+/* @media only screen and (max-device-width: 400px) { */
+/* html { */
+/* font-size: 16px; */
+/* } */
+
+/* body { */
+/* min-width: 0; */
+/* width: 100%; */
+/* } */
+/* } */
diff --git a/static/ui.html b/static/ui.html
index 8071364..06be649 100644
--- a/static/ui.html
+++ b/static/ui.html
@@ -11,15 +11,14 @@
PUBLIC_VERSION = false;
</script>
<script src="/static/ui.js"></script>
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+ <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1, maximum-scale=1" />
</head>
<body>
+ <h1 class="logo" onclick="$('#filters').toggle();">neko</h1>
<div id="filters">
- <h1 class="logo">neko</h1>
<div id="controls"></div>
-
<h4 onclick="$('#tags').toggle();">Tags</h4>
<ul id="tags" style="display: none;">
</ul>
@@ -27,6 +26,7 @@
<h4 onclick="$('#feeds').toggle();">Feeds</h4>
<ul id="feeds" style="display: none;">
</ul>
+ </div>
</div>
diff --git a/static/ui.js b/static/ui.js
index 0cf37e5..0c60630 100644
--- a/static/ui.js
+++ b/static/ui.js
@@ -576,10 +576,11 @@ function boot() {
App.items.reboot();
});
- $('.logo').on('click', function() {
- App.set('feedFilter', undefined);
- App.items.reboot();
- });
+// $('.logo').on('click', function() {
+ // App.set('feedFilter', undefined);
+ // App.items.reboot();
+
+// });
// keyboard shortcuts
$('body').keydown(function(event) {