From dc711077ab98fb2640eabbc92e77f1e7c71b2bc1 Mon Sep 17 00:00:00 2001 From: Filipe Date: Mon, 11 Dec 2017 17:40:34 -0200 Subject: [PATCH] Solving #11 and improving front-end structure (#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 #11 * Disabling debug in production --- notto/nottoapp/static/css/home.css | 85 ++++++++++++ notto/nottoapp/static/css/master.css | 10 ++ notto/nottoapp/static/css/note.css | 44 ++++++ notto/nottoapp/static/img/logo.png | Bin 0 -> 4457 bytes notto/nottoapp/static/js/home.js | 17 +++ notto/nottoapp/static/js/note.js | 80 +++++++++++ notto/nottoapp/templates/_header.html | 13 ++ notto/nottoapp/templates/index.html | 188 +++++++------------------- notto/nottoapp/templates/note.html | 48 +------ 9 files changed, 302 insertions(+), 183 deletions(-) create mode 100644 notto/nottoapp/static/css/home.css create mode 100644 notto/nottoapp/static/css/master.css create mode 100644 notto/nottoapp/static/css/note.css create mode 100644 notto/nottoapp/static/img/logo.png create mode 100644 notto/nottoapp/static/js/home.js create mode 100644 notto/nottoapp/static/js/note.js create mode 100644 notto/nottoapp/templates/_header.html diff --git a/notto/nottoapp/static/css/home.css b/notto/nottoapp/static/css/home.css new file mode 100644 index 0000000..96f05ed --- /dev/null +++ b/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; + } +} diff --git a/notto/nottoapp/static/css/master.css b/notto/nottoapp/static/css/master.css new file mode 100644 index 0000000..9f04cfc --- /dev/null +++ b/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; + } +} diff --git a/notto/nottoapp/static/css/note.css b/notto/nottoapp/static/css/note.css new file mode 100644 index 0000000..91f285d --- /dev/null +++ b/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; + } +} diff --git a/notto/nottoapp/static/img/logo.png b/notto/nottoapp/static/img/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..7d4e6619c464c88df9e314c04c94074c66a5ab7c GIT binary patch literal 4457 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 literal 0 HcmV?d00001 diff --git a/notto/nottoapp/static/js/home.js b/notto/nottoapp/static/js/home.js new file mode 100644 index 0000000..3c2a52b --- /dev/null +++ b/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 + } +}) diff --git a/notto/nottoapp/static/js/note.js b/notto/nottoapp/static/js/note.js new file mode 100644 index 0000000..fd1bb4f --- /dev/null +++ b/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)); +}) diff --git a/notto/nottoapp/templates/_header.html b/notto/nottoapp/templates/_header.html new file mode 100644 index 0000000..f024960 --- /dev/null +++ b/notto/nottoapp/templates/_header.html @@ -0,0 +1,13 @@ +{% load static %} + + + + + + + + diff --git a/notto/nottoapp/templates/index.html b/notto/nottoapp/templates/index.html index 85fdc53..42c28a1 100644 --- a/notto/nottoapp/templates/index.html +++ b/notto/nottoapp/templates/index.html @@ -1,142 +1,54 @@ {% load static %} - - - notto.io - - - - - - - -
-
-
-

- Notto.io -

-

- Notto.io is a simple online text editor
- that enables anyone to save and edit notes using rich text
- Simply access an URL on the site and start typing! -

-
-
-
-
-
- notto.io/ - -
-
- Start typing -
-
-
+ + notto.io + {% include '_header.html' %} + + + + + +
+
+
+

+ Notto.io +

+
+
+
+
+

+ Notto.io is a simple online text editor
+ that enables anyone to save and edit notes using rich text
+ Simply access an URL on the site
and start typing! +

+
+
+
+
+
+ notto.io/ +
-
-
-
- -
-
-
- - - +
+ Start typing +
+
+
+
+
+
+
+ +
+
+
+ + + diff --git a/notto/nottoapp/templates/note.html b/notto/nottoapp/templates/note.html index d041245..03320a8 100644 --- a/notto/nottoapp/templates/note.html +++ b/notto/nottoapp/templates/note.html @@ -2,53 +2,10 @@ - - - {{note_url}} - notto.io + {% include '_header.html' %} - - - - - + {% csrf_token %} @@ -139,5 +96,6 @@ }, 250)); }) +