diff --git a/app/assets/stylesheets/settings.scss b/app/assets/stylesheets/settings.scss index 3f0237ddf..ed13be3bc 100755 --- a/app/assets/stylesheets/settings.scss +++ b/app/assets/stylesheets/settings.scss @@ -176,14 +176,20 @@ .color-select-textbox{ flex:1; min-width:70px; + border-radius: 0px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } input[type="color"] { box-sizing:border-box; - border: none; - border-radius:0px; + border-radius: 0px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; padding:3px; width:50px; height:48px; + margin-left: -1px; + border: 1px solid rgb(222, 230, 233); cursor:pointer; } } diff --git a/app/javascript/packs/colorPreview.js b/app/javascript/packs/colorPreview.js index c4309e356..066ddc02a 100644 --- a/app/javascript/packs/colorPreview.js +++ b/app/javascript/packs/colorPreview.js @@ -1,61 +1,64 @@ -const colorField = { - // input type="color" - bgColor: document.getElementById('bg-color-colorfield'), - textColor: document.getElementById('text-color-colorfield'), -}; - -const textField = { - // input type="text" - bgColor: document.getElementById('bg-color-textfield'), - textColor: document.getElementById('text-color-textfield'), -}; - -const preview = document.getElementById('color-select-preview-logo'); - -// Assigns input[type='text'] values to input[type='color'] -function updateColorFields() { - colorField.bgColor.value = textField.bgColor.value; - colorField.textColor.value = textField.textColor.value; -} - -// Updating text fields when color fields are changed -function updateTextFields() { - textField.bgColor.value = colorField.bgColor.value; - textField.textColor.value = colorField.textColor.value; -} - -// Updates Preview Colors -function updatePreview() { - preview.style.backgroundColor = textField.bgColor.value; - preview.style.fill = textField.textColor.value; -} - -// Event Watchers -// When color fields change -> updateTextField values and refresh preview -function watchColorFields() { - updateTextFields(); - updatePreview(); -} - -// When text fields change -> updateColorField values and refresh preview -function watchTextFields(e) { - if (e.target.value.match(/#[0-9a-f]{6}/gi)) { - updateColorFields(); - updatePreview(); - } -} function initPreview() { - // Event Listeners - colorField.bgColor.addEventListener('input', watchColorFields); - colorField.textColor.addEventListener('input', watchColorFields); - textField.bgColor.addEventListener('keyup', watchTextFields); - textField.textColor.addEventListener('keyup', watchTextFields); + const colorField = { + // input type="color" + bgColor: document.getElementById('bg-color-colorfield'), + textColor: document.getElementById('text-color-colorfield'), + }; + + const textField = { + // input type="text" + bgColor: document.getElementById('bg-color-textfield'), + textColor: document.getElementById('text-color-textfield'), + }; + + const preview = document.getElementById('color-select-preview-logo'); + + // Assigns input[type='text'] values to input[type='color'] + function updateColorFields() { + colorField.bgColor.value = textField.bgColor.value; + colorField.textColor.value = textField.textColor.value; + } + + // Updating text fields when color fields are changed + function updateTextFields() { + textField.bgColor.value = colorField.bgColor.value; + textField.textColor.value = colorField.textColor.value; + } + + // Updates Preview Colors + function updatePreview() { + preview.style.backgroundColor = textField.bgColor.value; + preview.style.fill = textField.textColor.value; + } + + // Event Watchers + // When color fields change -> updateTextField values and refresh preview + function watchColorFields() { + updateTextFields(); + updatePreview(); + } + + // When text fields change -> updateColorField values and refresh preview + function watchTextFields(e) { + if (e.target.value.match(/#[0-9a-f]{6}/gi)) { + updateColorFields(); + updatePreview(); + } + } + + if (preview) { + // Event Listeners + colorField.bgColor.addEventListener('input', watchColorFields); + colorField.textColor.addEventListener('input', watchColorFields); + textField.bgColor.addEventListener('keyup', watchTextFields); + textField.textColor.addEventListener('keyup', watchTextFields); - // on init - updateColorFields(); - updatePreview(); - preview.style.display = 'inline-block'; + // on init + updateColorFields(); + updatePreview(); + preview.style.display = 'inline-block'; + } } initPreview(); diff --git a/docs/getting-started/architecture.md b/docs/getting-started/architecture.md index 451a6e385..d29c58ac7 100644 --- a/docs/getting-started/architecture.md +++ b/docs/getting-started/architecture.md @@ -38,6 +38,21 @@ The home feed is based on a combination of collective recent posts that are cach Currently, the top post on the home feed, which must have a cover image, is shared among all users. +## Inter-page navigation + +DEV uses a variation of "instant click" which swaps out content instead of full page requests. It is similar to the Rails gem Turbolinks, but more lightweight. The library is modified to work specifically with the Rails app, and does not swap the nav bar or footer when a page is changed. The code for this functionality can be found in `app/assets/javascripts/base.js.erb`. + +There are gotchas in terms of JavaScript not loading from a fully blank slate. This means that a lot of functionality needs to be loaded on page change, as well as `window.InstantClick.on('change', someFunction)`. This means lines like this exist in the app... + +```javascript +initPreview(); +window.InstantClick.on('change', initPreview); +``` + +This can change how variables need to be defined in certain contexts and orders, differently than if they were loaded freshly, or within the context of a truly integrated single page app. + +Of course, it would be possible to abstract away some of these gotchas in the future. + # General app concepts ## Articles (or posts)