+ 1
- 0
web/index.html
ファイルの表示
| <meta charset="utf-8"> | <meta charset="utf-8"> | ||||
| <title>Shopping List</title> | <title>Shopping List</title> | ||||
| <link rel="stylesheet" href="/style.css"> | <link rel="stylesheet" href="/style.css"> | ||||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |||||
| </head> | </head> | ||||
| <body> | <body> | ||||
| <div id="container"> | <div id="container"> |
+ 13
- 3
web/script.js
ファイルの表示
| elemSuggestions.show = function() { | elemSuggestions.show = function() { | ||||
| elemSuggestions.className = "suggestions"; | elemSuggestions.className = "suggestions"; | ||||
| elmeSuggestions.style.display = "block"; | |||||
| elemSuggestions.style.display = "block"; | |||||
| } | } | ||||
| elemSuggestions.hide = function() { | elemSuggestions.hide = function() { | ||||
| elemSuggestions.className = "suggestions hidden"; | elemSuggestions.className = "suggestions hidden"; | ||||
| setTimeout(function() { | setTimeout(function() { | ||||
| elmeSuggestions.style.display = "none"; | |||||
| elemSuggestions.style.display = "none"; | |||||
| }, 500); | }, 500); | ||||
| } | } | ||||
| elemSuggestions.hide(); | |||||
| var events = WebEvents(); | var events = WebEvents(); | ||||
| var words = []; | var words = []; | ||||
| var xhr = new XMLHttpRequest(); | var xhr = new XMLHttpRequest(); | ||||
| xhr.addEventListener("load", function() { | 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) { | xhr.addEventListener("error", function(err) { | ||||
| if (cb) | if (cb) |
+ 14
- 14
web/style.css
ファイルの表示
| } | } | ||||
| #add .suggestions { | #add .suggestions { | ||||
| transition: opacity 0.2s; | transition: opacity 0.2s; | ||||
| display: none; | |||||
| z-index: 2; | z-index: 2; | ||||
| display: inline; | |||||
| background: white; | background: white; | ||||
| box-shadow: 0px 0px 10px 1px black; | |||||
| box-shadow: 0px 0px 10px 1px #ccc; | |||||
| position: absolute; | position: absolute; | ||||
| width: 90%; | width: 90%; | ||||
| margin: auto; | margin: auto; | ||||
| left: 0px; | left: 0px; | ||||
| right: 0px; | right: 0px; | ||||
| margin-top: 45px; | |||||
| padding-top: 12px; | |||||
| padding-bottom: 12px; | |||||
| margin-top: 15px; | |||||
| padding-top: 6px; | |||||
| padding-bottom: 6px; | |||||
| max-height: 80%; | max-height: 80%; | ||||
| overflow-y: auto; | overflow-y: auto; | ||||
| #add .suggestions .suggestion { | #add .suggestions .suggestion { | ||||
| padding: 12px; | padding: 12px; | ||||
| cursor: pointer; | cursor: pointer; | ||||
| border-bottom: 1px solid #666; | |||||
| border-bottom: 1px solid #ccc; | |||||
| } | } | ||||
| #list { | #list { | ||||
| transition: padding 0.3s, height 0.3s; | transition: padding 0.3s, height 0.3s; | ||||
| padding-left: 12px; | padding-left: 12px; | ||||
| padding-top: 32px; | |||||
| padding-bottom: 3px; | |||||
| padding-top: 42px; | |||||
| position: relative; | position: relative; | ||||
| margin: auto; | margin: auto; | ||||
| text-align: left; | text-align: left; | ||||
| width: 100%; | width: 100%; | ||||
| height: 50px; | |||||
| height: 70px; | |||||
| overflow: hidden; | overflow: hidden; | ||||
| border-bottom: 1px solid #666; | |||||
| border-bottom: 1px solid #ccc; | |||||
| } | } | ||||
| #list .elem.hidden { | #list .elem.hidden { | ||||
| transition: transform 0.3s ease-in, | transition: transform 0.3s ease-in, | ||||
| height: 0px; | height: 0px; | ||||
| padding: 0px; | padding: 0px; | ||||
| } | } | ||||
| #list .elem .name { | |||||
| position: relative; | |||||
| } | |||||
| #list .elem .ok { | #list .elem .ok { | ||||
| position: relative; | position: relative; | ||||
| display: inline-block; | display: inline-block; | ||||
| float: right; | float: right; | ||||
| margin-right: 6px; | margin-right: 6px; | ||||
| height: 40px; | |||||
| width: 40px; | |||||
| bottom: 25px; | |||||
| height: 50px; | |||||
| width: 50px; | |||||
| bottom: 33px; | |||||
| background-image: url(/icon-check.svg); | background-image: url(/icon-check.svg); | ||||
| background-size: 24px 24px; | background-size: 24px 24px; |
読み込み中…