diff options
| author | Adam Mathes <adam@trenchant.org> | 2018-04-27 09:59:16 -0700 |
|---|---|---|
| committer | Adam Mathes <adam@trenchant.org> | 2018-04-27 09:59:16 -0700 |
| commit | 4b3f852a009a1582b40250e9c78cb412d7523936 (patch) | |
| tree | 68b5dc48cbb1c0a2909de18789398d92df5b3b62 | |
| parent | eb3112116ae926921fbefd3677ed16a6da65f645 (diff) | |
| download | neko-4b3f852a009a1582b40250e9c78cb412d7523936.tar.gz neko-4b3f852a009a1582b40250e9c78cb412d7523936.tar.bz2 neko-4b3f852a009a1582b40250e9c78cb412d7523936.zip | |
wip filter ui
| -rw-r--r-- | static/style.css | 136 | ||||
| -rw-r--r-- | static/ui.html | 6 | ||||
| -rw-r--r-- | static/ui.js | 9 |
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) { |