Solving renatoliveira#11 and improving front-end structure (renatoliv…

…eira#20)

* Fix install order, adding start script

* Adding home page

* Adding logo and Github star link

* Fix typo

* Improving run script and making start typing button work

* Removing Android automatic changes in the home input

* Adding submit on enter at home page and adding auto-save feature to note page

* Merge upstream and improving README

* Fixing tooltip and html code

* Removing merge comments

* Adding favicon

* Fix ql-editor height

* Adding favicon to note page

* Improving front-end structure and solving issue renatoliveira#11

* Disabling debug in production

notto/nottoapp/static/css/home.css

@@ -0,0 +1,85 @@
+.title, .subtitle, .button {
+  font-family: 'Noto Sans', sans-serif;
+  text-align: center;
+}
+.title {
+  margin: 128px 0 0 0;
+  color: #444;
+  text-indent: -9999px;
+}
+.title img {
+  display: block;
+  width: 240px;
+  margin: 0 auto;
+}
+.subtitle {
+  margin: 32px;
+  font-size: 16px;
+  line-height: 26px;
+  color: #444;
+  font-weight: normal;
+}
+.input-group {
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.08);
+  transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
+  height: 44px;
+  line-height: 44px;
+  vertical-align: middle;
+}
+.input-group input {
+  height: 44px;
+  line-height: 44px;
+}
+.button {
+  height: 44px;
+  line-height: 35px;
+  vertical-align: middle;
+  background-color: #111;
+  color: #fafafa;
+  border: 0;
+  border-radius: 2px;
+  padding: 4px 16px;
+  cursor: pointer;
+}
+.button:hover {
+  text-decoration: none;
+  color: #fafafa;
+}
+.input-group .input-group-addon, .input-group input {
+  border: 0;
+  font-size: 18px;
+}
+.footer {
+  margin-top: -64px;
+  width: 100%;
+}
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+}
+.main {
+  min-height: 100vh;
+  padding-bottom: 64px;
+}
+.nav {
+  text-align: center;
+}
+.no-border {
+  border-radius: 0;
+}
+@media (max-device-width: 600px) {
+  .title {
+    margin: 32px 0 0 0;
+  }
+  .subtitle {
+    margin: 16px 0;
+  }
+  .input-group .input-group-addon, .input-group input{
+    font-size: 16px;
+  }
+  .button {
+    font-size: 16px;
+  }
+}

notto/nottoapp/static/css/master.css

@@ -0,0 +1,10 @@
+@media (max-device-width: 600px) {
+  .only-desktop {
+    display: none;
+  }
+}
+@media (min-width: 600px) {
+  .only-mobile {
+    display: none;
+  }
+}

notto/nottoapp/static/css/note.css

@@ -0,0 +1,44 @@
+body {
+  margin: 0;
+  padding: 0;
+  max-height: 100vh;
+  overflow-x: hidden;
+}
+form {
+  margin: 0;
+}
+.ql-toolbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2;
+  background-color: white;
+}
+.save-button {
+  margin-left: 5px;
+}
+#editor {
+  position: relative;
+  z-index: 1;
+  min-height: 100vh;
+}
+.ql-editor {
+  min-height: 100vh;
+}
+.ql-status {
+  opacity: 0;
+  transition: opacity .25s ease;
+  color: orange;
+}
+.ql-status.loading {
+  opacity: 1;
+}
+@media (max-device-width: 600px) {
+  .ql-toolbar {
+    font-size: 24px;
+  }
+  #editor {
+    font-size: 19px;
+  }
+}

notto/nottoapp/static/js/home.js

@@ -0,0 +1,17 @@
+var folders = ['my', 'what', 'some', 'secret', 'safe', 'chuck', 'norris', 'blank']
+var wordList = ["done","themselves","settle","wet","military","actual","frame","paid","came","moon","count","finest","bigger","rubbed","nearby","plain","disease","burn","market","they","nor","mouse","rays","choose","line","film","lonely","neighborhood","slave","hunt","quite","bent","construction","copy","thou","cat","characteristic","you","history","negative","which","continent","flew","fair","sport","balloon","give","forty","passage","fix"];
+var getAWord = function () {
+  return wordList[Math.floor(Math.random() * wordList.length)]
+}
+var input = document.querySelector('.form-control')
+var button = document.querySelector('.button')
+
+input.placeholder = getAWord() + '/' + getAWord()
+input.addEventListener('keyup', function (event) {
+  var key = event.which || event.keyCode
+  var ENTER = 13
+  button.href = input.value
+  if (key == ENTER) {
+    window.location = window.location.origin + '/' + input.value
+  }
+})

notto/nottoapp/static/js/note.js

@@ -0,0 +1,80 @@
+// Underscore.js debounce
+function debounce(func, wait, immediate) {
+  var timeout;
+  return function() {
+    var context = this, args = arguments;
+    var later = function() {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    var callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+};
+// Auto update
+var debounceStatus = null
+function save (status, content) {
+  var http = new XMLHttpRequest();
+  var url = "{{note_url}}";
+  var data = new FormData();
+  data.append('content', content);
+  data.append('csrfmiddlewaretoken', document.querySelector('[name=csrfmiddlewaretoken]').value);
+
+  http.open("POST", url, true);
+  http.onreadystatechange = function() {
+    if(http.readyState == 4 && http.status == 200) {
+      clearTimeout(debounceStatus);
+      debounceStatus = setTimeout(function () {
+        status.classList.remove('loading')
+      }, 300)
+    }
+  };
+  status.innerText = 'Loading...'
+  status.classList.add('loading')
+  http.send(data);
+}
+function updatePosition () {
+  var toolbar = document.querySelector('.ql-toolbar');
+  var editor = document.querySelector('.ql-editor');
+  var measures = toolbar.getBoundingClientRect()
+  editor.style.padding = measures.height + 'px 0px 0px 0px'
+}
+
+// reference: https://codepen.io/quill/pen/kXRjQJ
+Quill.prototype.getHtml = function () {
+  return this.container.querySelector('.ql-editor').innerHTML;
+}
+Quill.prototype.setHtml = function (val) {
+  return this.container.querySelector('.ql-editor').innerHTML = val;
+}
+var q = new Quill('#editor', {
+  modules: {
+    toolbar: {
+      container: [
+        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+        ['bold', 'italic', 'underline', 'link'],
+        [{ list: 'ordered' }, { list: 'bullet'}],
+        ['clean', 'status']
+      ],
+      handlers: {
+        'status': function (){}
+      }
+    },
+  },
+  theme: 'snow'
+});
+var parser = new DOMParser;
+var content = window.content
+if (content != '') {
+  q.setHtml(parser.parseFromString(content, 'text/html').body.textContent);
+}
+updatePosition()
+window.addEventListener('resize', updatePosition)
+
+setTimeout(function () {
+  q.on('text-change', debounce(function() {
+    save(document.querySelector('.ql-status'), q.getHtml());
+  }, 250));
+})

notto/nottoapp/templates/_header.html

@@ -0,0 +1,13 @@
+{% load static %}
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta http-equiv="X-UA-Compatible" content="ie=edge">
+<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
+<link rel="icon" href="{% static 'favicon.png' %}">
+<link rel="icon" href="{% static 'favicon.ico' %}">
+<style media="screen">
+@-ms-viewport{
+  width: device-width;
+}
+</style>
+<link rel="stylesheet" href="{% static 'css/master.css' %}">