click targets on unread/all/star to li element instead of a for bigger tap targets

2 files changed, 11 insertions, 11 deletions

diff --git a/static/ui.html b/static/ui.html
index 84d6629..13d102e 100644
--- a/static/ui.html
+++ b/static/ui.html
@@ -89,18 +89,18 @@
 
     <script id="controls_template" type="text/jqtmp">
       <ul>
-        <li>
+        <li class="unread_filter">
           <a {{if app.unreadFilter}}style="font-weight: bold;"{{/if}} 
-             class="unread_filter">unread</a>
+             >unread</a>
         </li>
-        <li>
+        <li class="all_filter">
           <a 
              {{if app.allFilter}}style="font-weight: bold;"{{/if}} 
-             class="all_filter">all</a> 
+             >all</a> 
         </li>
-        <li>
+        <li class="starred_filter">
          <a {{if app.starredFilter}}style="font-weight: bold;"{{/if}}
-            class="starred_filter">★ starred</a>
+            >★ starred</a>
         </li>
         <li>
           <button class="new_feed"> + new </button>
diff --git a/web/rice-box.go b/web/rice-box.go
index 7a52f0e..088d7c6 100644
--- a/web/rice-box.go
+++ b/web/rice-box.go
@@ -55,13 +55,13 @@ func init() {
 	}
 	fileb := &embedded.EmbeddedFile{
 		Filename:    "style.css",
-		FileModTime: time.Unix(1529169528, 0),
+		FileModTime: time.Unix(1537395729, 0),
 		Content:     string("html {\n    font-size: 18px;\n}\nbody {\n    font-size: 1.0000rem;\n    line-height: 1.500rem;\n    min-width: 45rem;\n}\nh1 {\n    font-size: 3.1875rem;\n    line-height: 3.7500rem;\n    margin-top: 1.25rem;\n    margin-bottom: 2.5rem;\n}\nh2 {\n    font-size: 1.7500rem;\n    line-height: 2.5000rem;\n    margin-top: 2.5rem;\n    margin-bottom: 1.25rem;\n}\nh3 {\n    font-size: 1.3125rem;\n    line-height: 2.5000rem;\n    margin-top: 1.25rem;\n    margin-bottom: 0rem;\n}\np, ul {\n    margin-top: 0rem;\n    margin-bottom: 1.25rem;\n}\n\n#filters h4 {\n    margin-bottom: 0;\n}\n\nblockquote {\n    padding: 1rem 1rem 0 1rem;\n}\n\nbody {\n    font-family: Palatino, Georgia;\n}\n\nh1, h2, h3, h4, h5, #controls {\n    font-family: 'Helvetica Neue';\n    font-weight: 'bold';\n}\n\n#controls, .control {\n    font-variant: small-caps;\n    text-transform: lowercase;\n}\n\n\n#controls ul {\n    margin-top: 1em;\n    padding: 0;\n}\n\n#controls li {\n    width: 100%;\n    list-style: none;\n    margin-left: 0;\n    text-align: center;\n    margin-top: 10px;\n    background-color: whitesmoke;\n}\n\nh2 {\n    margin: 0;\n    padding: 0;\n}\n\na, a:hover, a:active {\n    text-decoration: none;\n    color: blue;\n}\n\nimg {\n    max-width: 100%;\n    height: auto;\n}\n\np {\n    margin-top: 1em;\n}\n\np.dateline {\n    margin-top: 0;\n    font-weight: normal;\n    font-size: .75em;\n    color: #ccc;\n}\n\np.dateline a {\n    color: #ccc;\n}\n\n.item {\n    padding: 1rem;\n    margin-top: 5rem;\n}\n\nh3 {\n    padding: 0;\n    margin: 0;\n}\n\n#items {\n    margin: 2rem auto;\n    max-width: 35rem;\n    overflow: hidden;\n}\n\n\n#filters {\n    position: fixed;\n    top: 0;\n    left: 0;\n    padding: 3rem 1rem 0 1rem;\n    width: 10rem;\n    cursor: pointer;\n    color: #777;\n    height: 100%;\n    overflow-y: auto;\n    background-color: #ccc;\n    transition-property: left;\n    transition-duration: .4s;\n}\n\n#filters.hidden {\n    left: -13rem;\n}\n\n#tags, #feeds {\n    font-family: 'Helvetica Neue';\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n\n#tags li, #feeds li {\n    font-size: .75em;\n    padding-bottom: .25em;\n}\n\npre {\n    display: none;\n}\n\n.read {\n}\n\n.selected {\n}\n\n.newFilter {\n    color: black;\n}\n\n\n.all .newFilter {\n    color: #777;\n}\n\n.logo {\n    margin: 0;\n    padding: 1rem;\n    position: fixed;\n    top: 0;\n    left: 0;\n    color: white;\n    line-height: 1em;\n    z-index: 1;\n    cursor: pointer;\n    width: 10rem;\n    font-size: 2rem;\n}\n\n.hasunread {\n    color: blue;\n}\n\n.active, .all .everythingFilter {\n    color: black;\n}\n\n.full {\n    cursor: pointer;\n}\n\n.star {\n    color: black;\n    cursor: pointer;\n}\n\n.unstar {\n    color: blue;\n    cursor: pointer;\n}\n\n#loading {\n    width: 100%;\n    font-size: 24px;\n    background-color: #ccc;\n}\n\nbutton {\n    font-family: 'Helvetica Neue';\n    font-size: 16px;\n    padding: 3px 10px;\n    background: whitesmoke;\n    color: blue;\n    font-weight: bold;\n    border: none;\n    width: 100%;\n}\n\n\n@media only screen and (max-device-width: 768px) {\n    html {\n        width: 100%;\n        font-size: 22px;\n    }\n\n    body {\n        min-width: 0;\n        width: 100%;\n        max-width: 100%;\n        /* overflow: hidden; */\n    }\n\n    .logo {\n        width: 100%;\n    }\n\n    #filters li, #filters h4 {\n        font-size: 1.5rem;\n    }\n\n   /* #filters h4, #filters h1 { */\n   /*      display: none; */\n   /*  } */\n\n    /* #controls { */\n    /*     width: 100%; */\n    /*     font-size: 1.5rem; */\n    /* } */\n\n    /* #controls ul { */\n    /*     padding: 0; */\n    /*     margin: 0; */\n    /*     text-align: center; */\n    /* } */\n\n    /* #controls li { */\n    /*     display: inline; */\n    /* } */\n\n    /* #filters { */\n    /*     width: 100%; */\n    /*     height: 50px; */\n    /*     position: fixed; */\n    /*     top: 0; */\n    /*     left: 0; */\n    /*     background: #ccc; */\n    /* } */\n\n\n     #items { */\n        margin: 0 auto;\n        max-width: 100%;\n    }\n}\n\n@media only screen and (max-device-width: 400px) {\n    html {\n        font-size: 16px;\n    }\n\n    body {\n        min-width: 0;\n        width: 100%;\n    }\n}\n"),
 	}
 	filec := &embedded.EmbeddedFile{
 		Filename:    "ui.html",
-		FileModTime: time.Unix(1530741472, 0),
-		Content:     string("<!DOCTYPE html>\n<html>\n  <head>\n    <title>neko rss mode</title>\n    <link rel=\"stylesheet\" href=\"/static/style.css\" />\n    <script src=\"/static/jquery-3.3.1.min.js\"></script>\n    <script src=\"/static/jquery.tmpl.min.js\"></script>\n    <script src=\"/static/underscore-1.8.3.min.js\"></script>\n    <script src=\"/static/backbone-1.3.3.min.js\"></script>\n    <script>\n      PUBLIC_VERSION = false;\n    </script>\n    <script src=\"/static/ui.js\"></script>\n    <meta name=\"viewport\" content=\"width=device-width,height=device-height, initial-scale=1, maximum-scale=1\" />\n    <base target=\"_blank\">\n  </head>\n  <body>\n      <h1 class=\"logo\" onclick=\"$('#filters').toggleClass('hidden');\">🐱</h1>\n\n      <div id=\"filters\">\n\n        <div id=\"controls\"></div>\n        <h4 onclick=\"$('#tags').toggle();\">Tags</h4>        \n        <ul id=\"tags\" style=\"display: none;\">\n        </ul>\n        \n        <h4 onclick=\"$('#feeds').toggle();\">Feeds</h4>        \n        <ul id=\"feeds\" style=\"display: none;\">\n        </ul>\n\n        <h4 onclick=\"$('#export').toggle();\">Export</h4>\n        <ul id=\"export\" style=\"display: none;\">\n            <li><a href=\"/export/opml\">opml</a></li>\n            <li><a href=\"/export/text\">text</a></li>\n            <li><a href=\"/export/json\">json</a></li>\n        </ul>\n\n      </div>\n        \n    </div>\n\n   <div id=\"c\">\n      <div id=\"items\">\n      </div>      \n    </div>\n    \n    <script id=\"item_template\" type=\"text/jqtmp\">\n      <h2><a class=\"i\" id=\"i_${item_id}\" href=\"${item.url}\">${item.title }</a> \n    <span class={{if item.starred}}\"unstar\"{{else}}\"star\"{{/if}}>★</span>\n    </h2>\n      <p class=\"dateline\" style=\"clear: both;\">\n        <a href=\"${item.feed_url}\">${item.feed_title}</a> | <a href=\"${item.url}\">${item.p_url}</a>\n    | ${item.feed_category} |\n    <span class=\"full\">{{if item.full}}hide{{else}}scrape{{/if}} full text</span>\n    \n    </p>\n      {{if item.header_image}}\n      <div class=\"img\"><img src=\"${item.header_image}\" /></div>\n      {{/if}}\n      <div class=\"description\">\n        {{if item.full}}\n           {{html item.full_content}}\n        {{else}}\n           {{html item.description}}\n        {{/if}}\n      </div>\n    </script>\n\n    <script id=\"tag_template\" type=\"text/jqtmp\">\n      {{if tag.selected}}<b>{{/if}}\n      ${tag.title}\n      {{if tag.selected}}</b>{{/if}}\n    </script>\n\n    <script id=\"feed_template\" type=\"text/jqtmp\">\n      {{if feed.selected}}<b>{{/if}}\n      <span class=\"txt\">\n      {{if feed.title}}\n      ${feed.title}\n      {{else}}\n      ${feed.url}\n      {{/if}}\n\n      </span>\n      <span class=\"edit\">[e]</span>\n      <span class=\"delete\">[x]</span>\n      {{if feed.selected}}</b>{{/if}}\n    </script>\n\n    <script id=\"controls_template\" type=\"text/jqtmp\">\n      <ul>\n        <li>\n          <a {{if app.unreadFilter}}style=\"font-weight: bold;\"{{/if}} \n             class=\"unread_filter\">unread</a>\n        </li>\n        <li>\n          <a \n             {{if app.allFilter}}style=\"font-weight: bold;\"{{/if}} \n             class=\"all_filter\">all</a> \n        </li>\n        <li>\n         <a {{if app.starredFilter}}style=\"font-weight: bold;\"{{/if}}\n            class=\"starred_filter\">★ starred</a>\n        </li>\n        <li>\n          <button class=\"new_feed\"> + new </button>\n        </li>\n        <li>\n           <input id=\"search\" type=\"search\" /><button class=\"search_go\">search</button>\n        </li>\n\t\t<li>\n\t\t</li>\n\n\t  </ul>\n   </script>  \n   \n</body>\n</html>  \n"),
+		FileModTime: time.Unix(1537395793, 0),
+		Content:     string("<!DOCTYPE html>\n<html>\n  <head>\n    <title>neko rss mode</title>\n    <link rel=\"stylesheet\" href=\"/static/style.css\" />\n    <script src=\"/static/jquery-3.3.1.min.js\"></script>\n    <script src=\"/static/jquery.tmpl.min.js\"></script>\n    <script src=\"/static/underscore-1.8.3.min.js\"></script>\n    <script src=\"/static/backbone-1.3.3.min.js\"></script>\n    <script>\n      PUBLIC_VERSION = false;\n    </script>\n    <script src=\"/static/ui.js\"></script>\n    <meta name=\"viewport\" content=\"width=device-width,height=device-height, initial-scale=1, maximum-scale=1\" />\n    <base target=\"_blank\">\n  </head>\n  <body>\n      <h1 class=\"logo\" onclick=\"$('#filters').toggleClass('hidden');\">🐱</h1>\n\n      <div id=\"filters\">\n\n        <div id=\"controls\"></div>\n        <h4 onclick=\"$('#tags').toggle();\">Tags</h4>        \n        <ul id=\"tags\" style=\"display: none;\">\n        </ul>\n        \n        <h4 onclick=\"$('#feeds').toggle();\">Feeds</h4>        \n        <ul id=\"feeds\" style=\"display: none;\">\n        </ul>\n\n        <h4 onclick=\"$('#export').toggle();\">Export</h4>\n        <ul id=\"export\" style=\"display: none;\">\n            <li><a href=\"/export/opml\">opml</a></li>\n            <li><a href=\"/export/text\">text</a></li>\n            <li><a href=\"/export/json\">json</a></li>\n        </ul>\n\n      </div>\n        \n    </div>\n\n   <div id=\"c\">\n      <div id=\"items\">\n      </div>      \n    </div>\n    \n    <script id=\"item_template\" type=\"text/jqtmp\">\n      <h2><a class=\"i\" id=\"i_${item_id}\" href=\"${item.url}\">${item.title }</a> \n    <span class={{if item.starred}}\"unstar\"{{else}}\"star\"{{/if}}>★</span>\n    </h2>\n      <p class=\"dateline\" style=\"clear: both;\">\n        <a href=\"${item.feed_url}\">${item.feed_title}</a> | <a href=\"${item.url}\">${item.p_url}</a>\n    | ${item.feed_category} |\n    <span class=\"full\">{{if item.full}}hide{{else}}scrape{{/if}} full text</span>\n    \n    </p>\n      {{if item.header_image}}\n      <div class=\"img\"><img src=\"${item.header_image}\" /></div>\n      {{/if}}\n      <div class=\"description\">\n        {{if item.full}}\n           {{html item.full_content}}\n        {{else}}\n           {{html item.description}}\n        {{/if}}\n      </div>\n    </script>\n\n    <script id=\"tag_template\" type=\"text/jqtmp\">\n      {{if tag.selected}}<b>{{/if}}\n      ${tag.title}\n      {{if tag.selected}}</b>{{/if}}\n    </script>\n\n    <script id=\"feed_template\" type=\"text/jqtmp\">\n      {{if feed.selected}}<b>{{/if}}\n      <span class=\"txt\">\n      {{if feed.title}}\n      ${feed.title}\n      {{else}}\n      ${feed.url}\n      {{/if}}\n\n      </span>\n      <span class=\"edit\">[e]</span>\n      <span class=\"delete\">[x]</span>\n      {{if feed.selected}}</b>{{/if}}\n    </script>\n\n    <script id=\"controls_template\" type=\"text/jqtmp\">\n      <ul>\n        <li class=\"unread_filter\">\n          <a {{if app.unreadFilter}}style=\"font-weight: bold;\"{{/if}} \n             >unread</a>\n        </li>\n        <li class=\"all_filter\">\n          <a \n             {{if app.allFilter}}style=\"font-weight: bold;\"{{/if}} \n             >all</a> \n        </li>\n        <li class=\"starred_filter\">\n         <a {{if app.starredFilter}}style=\"font-weight: bold;\"{{/if}}\n            >★ starred</a>\n        </li>\n        <li>\n          <button class=\"new_feed\"> + new </button>\n        </li>\n        <li>\n           <input id=\"search\" type=\"search\" /><button class=\"search_go\">search</button>\n        </li>\n\t\t<li>\n\t\t</li>\n\n\t  </ul>\n   </script>  \n   \n</body>\n</html>  \n"),
 	}
 	filed := &embedded.EmbeddedFile{
 		Filename:    "ui.js",
@@ -82,7 +82,7 @@ func init() {
 	// define dirs
 	dir1 := &embedded.EmbeddedDir{
 		Filename:   "",
-		DirModTime: time.Unix(1530741472, 0),
+		DirModTime: time.Unix(1537395793, 0),
 		ChildFiles: []*embedded.EmbeddedFile{
 			file2, // ".DS_Store"
 			file3, // "backbone-1.3.3.min.js"
@@ -108,7 +108,7 @@ func init() {
 	// register embeddedBox
 	embedded.RegisterEmbeddedBox(`../static`, &embedded.EmbeddedBox{
 		Name: `../static`,
-		Time: time.Unix(1530741472, 0),
+		Time: time.Unix(1537395793, 0),
 		Dirs: map[string]*embedded.EmbeddedDir{
 			"": dir1,
 		},