3 changed files with 28 additions and 17 deletions
+ 1
- 0
web/index.html
View File
| @@ -4,6 +4,7 @@ | |||
| <meta charset="utf-8"> | |||
| <title>Shopping List</title> | |||
| <link rel="stylesheet" href="/style.css"> | |||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |||
| </head> | |||
| <body> | |||
| <div id="container"> | |||
+ 13
- 3
web/script.js
View File
| @@ -5,14 +5,15 @@ var elemList = document.querySelector("#list"); | |||
| elemSuggestions.show = function() { | |||
| elemSuggestions.className = "suggestions"; | |||
| elmeSuggestions.style.display = "block"; | |||
| elemSuggestions.style.display = "block"; | |||
| } | |||
| elemSuggestions.hide = function() { | |||
| elemSuggestions.className = "suggestions hidden"; | |||
| setTimeout(function() { | |||
| elmeSuggestions.style.display = "none"; | |||
| elemSuggestions.style.display = "none"; | |||
| }, 500); | |||
| } | |||
| elemSuggestions.hide(); | |||
| var events = WebEvents(); | |||
| var words = []; | |||
| @@ -84,7 +85,16 @@ function request(method, url, cb) { | |||
| var xhr = new XMLHttpRequest(); | |||
| xhr.addEventListener("load", function() { | |||
| cb(null, JSON.parse(xhr.responseText)); | |||
| var obj; | |||
| try { | |||
| obj = JSON.parse(xhr.responseText); | |||
| if (cb) | |||
| cb(null, JSON.parse(xhr.responseText)); | |||
| } catch (err) { | |||
| console.log(xhr.responseText); | |||
| if (cb) | |||
| cb(err); | |||
| } | |||
| }); | |||
| xhr.addEventListener("error", function(err) { | |||
| if (cb) | |||
+ 14
- 14
web/style.css
View File
| @@ -31,19 +31,17 @@ html, body { | |||
| } | |||
| #add .suggestions { | |||
| transition: opacity 0.2s; | |||
| display: none; | |||
| z-index: 2; | |||
| display: inline; | |||
| background: white; | |||
| box-shadow: 0px 0px 10px 1px black; | |||
| box-shadow: 0px 0px 10px 1px #ccc; | |||
| position: absolute; | |||
| width: 90%; | |||
| margin: auto; | |||
| left: 0px; | |||
| right: 0px; | |||
| margin-top: 45px; | |||
| padding-top: 12px; | |||
| padding-bottom: 12px; | |||
| margin-top: 15px; | |||
| padding-top: 6px; | |||
| padding-bottom: 6px; | |||
| max-height: 80%; | |||
| overflow-y: auto; | |||
| @@ -57,7 +55,7 @@ html, body { | |||
| #add .suggestions .suggestion { | |||
| padding: 12px; | |||
| cursor: pointer; | |||
| border-bottom: 1px solid #666; | |||
| border-bottom: 1px solid #ccc; | |||
| } | |||
| #list { | |||
| @@ -67,15 +65,14 @@ html, body { | |||
| transition: padding 0.3s, height 0.3s; | |||
| padding-left: 12px; | |||
| padding-top: 32px; | |||
| padding-bottom: 3px; | |||
| padding-top: 42px; | |||
| position: relative; | |||
| margin: auto; | |||
| text-align: left; | |||
| width: 100%; | |||
| height: 50px; | |||
| height: 70px; | |||
| overflow: hidden; | |||
| border-bottom: 1px solid #666; | |||
| border-bottom: 1px solid #ccc; | |||
| } | |||
| #list .elem.hidden { | |||
| transition: transform 0.3s ease-in, | |||
| @@ -86,14 +83,17 @@ html, body { | |||
| height: 0px; | |||
| padding: 0px; | |||
| } | |||
| #list .elem .name { | |||
| position: relative; | |||
| } | |||
| #list .elem .ok { | |||
| position: relative; | |||
| display: inline-block; | |||
| float: right; | |||
| margin-right: 6px; | |||
| height: 40px; | |||
| width: 40px; | |||
| bottom: 25px; | |||
| height: 50px; | |||
| width: 50px; | |||
| bottom: 33px; | |||
| background-image: url(/icon-check.svg); | |||
| background-size: 24px 24px; | |||
Loading…