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 0000000..7d4e661 Binary files /dev/null and b/notto/nottoapp/static/img/logo.png differ 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)); }) +