diff --git a/app/assets/stylesheets/favorites.scss b/app/assets/stylesheets/favorites.scss index 2197538..3666287 100644 --- a/app/assets/stylesheets/favorites.scss +++ b/app/assets/stylesheets/favorites.scss @@ -33,11 +33,22 @@ } .thumb { - width: 3em; + display: inline-block; + max-width: 48px; + height: auto; + + img { + vertical-align: middle; + width: 48px; + height: 48px; + object-fit: cover; + border-radius: 50%; + } } .table_buttons { display: flex; + justify-content: flex-end; :nth-child(2) { -webkit-text-fill-color: #ffffff; @@ -82,4 +93,82 @@ color: black; text-decoration: none; } +} + +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; +} + +/* Hide default HTML checkbox */ +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +/* The slider */ +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .slider { + background-color: #2196F3; +} + +input:focus + .slider { + box-shadow: 0 0 1px #2196F3; +} + +input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +/* Rounded sliders */ +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} + +.header-button-container { + display: grid; + grid-template-columns: 1fr auto; + + .button { + margin-right: 8px; + text-align: right; + align-self: center; + line-height: 34px; + } +} + +#annotation { + display: none; } \ No newline at end of file diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index c47c9b2..4ceac5d 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -3,6 +3,8 @@ // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. +require("packs/custom") + require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() diff --git a/app/javascript/packs/custom.js b/app/javascript/packs/custom.js new file mode 100644 index 0000000..70b8630 --- /dev/null +++ b/app/javascript/packs/custom.js @@ -0,0 +1,21 @@ +function toggleAnnotations() { + var annotationCells = document.querySelectorAll("#annotation"); + if (document.getElementById("toggleAnnotations").checked === true) { + annotationCells.forEach(setVisible); + } else { + annotationCells.forEach(setInvisible); + } +} + +function setVisible(item) { + item.style.display = "block"; +} + +function setInvisible(item) { + item.style.display = "none"; +} + +/* First load all other scripts and then listen for click on checkbox */ +document.addEventListener('turbolinks:load', () => { + document.getElementById("toggleAnnotations").addEventListener("click", toggleAnnotations); +}); diff --git a/app/views/favorites/courses.html.erb b/app/views/favorites/courses.html.erb index 3bd3683..907c364 100644 --- a/app/views/favorites/courses.html.erb +++ b/app/views/favorites/courses.html.erb @@ -1,6 +1,17 @@ <%= render(:partial => "nav") %> -