From a0480036bfeb7bad58bd41ed1defa9465fe7da7e Mon Sep 17 00:00:00 2001 From: Tobias Eidelpes Date: Wed, 10 Jun 2020 15:05:41 +0200 Subject: [PATCH] Show annotations on overview of favorites --- app/assets/stylesheets/favorites.scss | 91 ++++++++++++++++++++++++++- app/javascript/packs/application.js | 2 + app/javascript/packs/custom.js | 21 +++++++ app/views/favorites/courses.html.erb | 20 +++++- app/views/favorites/people.html.erb | 27 +++++--- app/views/favorites/projects.html.erb | 19 +++++- app/views/favorites/theses.html.erb | 19 +++++- bin/webpack | 0 bin/webpack-dev-server | 0 bin/yarn | 0 package.json | 2 +- yarn.lock | 2 +- 12 files changed, 186 insertions(+), 17 deletions(-) create mode 100644 app/javascript/packs/custom.js mode change 100644 => 100755 bin/webpack mode change 100644 => 100755 bin/webpack-dev-server mode change 100644 => 100755 bin/yarn 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") %> -

Favorite Courses

+
+
+

Favorite Courses

+
+
+ Annotations + +
+
<% if !@favorite_courses[0].blank? %>
@@ -19,14 +30,17 @@ + + <% if course['personal_annotation'] != nil %> +
Annotation: <%= course['personal_annotation'] %>
+ <% end %> +
<%= button_to 'Details', crawlers_courses_crawler_show_detail_url(:number => course['number'], :semester => course['semester']) %> <%= button_to 'Delete', {:action => "delete_course", :number => course['number'], :semester => course['semester']}, :method => 'delete' %>
- - <% end %> diff --git a/app/views/favorites/people.html.erb b/app/views/favorites/people.html.erb index 7fcd78d..76f2e41 100644 --- a/app/views/favorites/people.html.erb +++ b/app/views/favorites/people.html.erb @@ -1,6 +1,17 @@ <%= render(:partial => "nav") %> -

Favorite People

+
+
+

Favorite People

+
+
+ Annotations + +
+
<% if !@favorite_people[0].blank? %>
@@ -13,11 +24,11 @@ <% for person in @favorite_people %> - + <%= link_to crawlers_people_crawler_show_detail_url(:tiss_id => person['tiss_id']) do %> - + <% if person['picture_uri'] != nil %> - <%= image_tag @host + person['picture_uri'], class: 'thumb' %> + <%= image_tag @host + person['picture_uri'] %> <% else %> <%= show_svg('account_circle-black-48dp.svg') %> <% end %> @@ -35,15 +46,17 @@ + + <% if person['personal_annotation'] != nil %> +
Annotation: <%= person['personal_annotation'] %>
+ <% end %> +
<%= button_to 'Details', crawlers_people_crawler_show_detail_url(:tiss_id => person['tiss_id']) %> <%= button_to "Delete", {:action => "delete_person", :tiss_id => person['tiss_id']}, :method => 'delete' %>
- - - <% end %> diff --git a/app/views/favorites/projects.html.erb b/app/views/favorites/projects.html.erb index d458f9a..3642e58 100644 --- a/app/views/favorites/projects.html.erb +++ b/app/views/favorites/projects.html.erb @@ -1,6 +1,17 @@ <%= render(:partial => "nav") %> -

Favorite Projects

+
+
+

Favorite Projects

+
+
+ Annotations + +
+
<% if !@favorite_projects[0].blank? %>
@@ -19,13 +30,17 @@ + + <% if project['personal_annotation'] != nil %> +
Annotation: <%= project['personal_annotation'] %>
+ <% end %> +
<%= button_to 'Details', crawlers_projects_crawler_show_detail_url(:id => project['id']) %> <%= button_to 'Delete', {:action => "delete_project", :id => project['id']}, :method => 'delete' %>
- <% end %> diff --git a/app/views/favorites/theses.html.erb b/app/views/favorites/theses.html.erb index bc14c31..5315803 100644 --- a/app/views/favorites/theses.html.erb +++ b/app/views/favorites/theses.html.erb @@ -1,6 +1,17 @@ <%= render(:partial => "nav") %> -

Favorite Theses

+
+
+

Favorite Theses

+
+
+ Annotations + +
+
<% if !@favorite_theses[0].blank? %>
@@ -20,13 +31,17 @@ + + <% if thesis['personal_annotation'] != nil %> +
Annotation: <%= thesis['personal_annotation'] %>
+ <% end %> +
<%= button_to 'Details', crawlers_theses_crawler_show_detail_url(:id => thesis['id']) %> <%= button_to 'Delete', {:action => "delete_thesis", :id => thesis['id']}, :method => 'delete' %>
- <% end %> diff --git a/bin/webpack b/bin/webpack old mode 100644 new mode 100755 diff --git a/bin/webpack-dev-server b/bin/webpack-dev-server old mode 100644 new mode 100755 diff --git a/bin/yarn b/bin/yarn old mode 100644 new mode 100755 diff --git a/package.json b/package.json index 80e0f44..a546d3a 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,6 @@ }, "version": "0.1.0", "devDependencies": { - "webpack-dev-server": "^3.10.3" + "webpack-dev-server": "^3.11.0" } } diff --git a/yarn.lock b/yarn.lock index f7230d6..c4fa1da 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7269,7 +7269,7 @@ webpack-dev-middleware@^3.7.2: range-parser "^1.2.1" webpack-log "^2.0.0" -webpack-dev-server@^3.10.3: +webpack-dev-server@^3.11.0: version "3.11.0" resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.11.0.tgz#8f154a3bce1bcfd1cc618ef4e703278855e7ff8c" integrity sha512-PUxZ+oSTxogFQgkTtFndEtJIPNmml7ExwufBZ9L2/Xyyd5PnOL5UreWe5ZT7IU25DSdykL9p1MLQzmLh2ljSeg==