Show annotations on overview of favorites

This commit is contained in:
Tobias Eidelpes 2020-06-10 15:05:41 +02:00
parent ba2e90386f
commit a0480036bf
12 changed files with 186 additions and 17 deletions

View File

@ -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;
@ -83,3 +94,81 @@
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;
}

View File

@ -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()

View File

@ -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);
});

View File

@ -1,6 +1,17 @@
<%= render(:partial => "nav") %>
<h2>Favorite Courses</h2>
<div class="header-button-container">
<div class="header">
<h2>Favorite Courses</h2>
</div>
<div class="button">
<span>Annotations</span>
<label class="switch">
<input type="checkbox" id="toggleAnnotations">
<span class="slider round"></span>
</label>
</div>
</div>
<% if !@favorite_courses[0].blank? %>
<div class="table_wrapper">
@ -19,14 +30,17 @@
</td>
</tr>
<tr>
<td>
<% if course['personal_annotation'] != nil %>
<div id="annotation"><strong>Annotation:</strong> <%= course['personal_annotation'] %></div>
<% end %>
</td>
<td>
<div class="table_buttons">
<%= 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' %>
</div>
</td>
<td>
</td>
</tr>
<% end %>
</table>

View File

@ -1,6 +1,17 @@
<%= render(:partial => "nav") %>
<h2>Favorite People</h2>
<div class="header-button-container">
<div class="header">
<h2>Favorite People</h2>
</div>
<div class="button">
<span>Annotations</span>
<label class="switch">
<input type="checkbox" id="toggleAnnotations">
<span class="slider round"></span>
</label>
</div>
</div>
<% if !@favorite_people[0].blank? %>
<div class="table_wrapper">
@ -13,11 +24,11 @@
</tr>
<% for person in @favorite_people %>
<tr>
<td>
<td rowspan="2">
<%= link_to crawlers_people_crawler_show_detail_url(:tiss_id => person['tiss_id']) do %>
<span>
<span class="thumb">
<% 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 @@
</td>
</tr>
<tr>
<td colspan="2">
<% if person['personal_annotation'] != nil %>
<div id="annotation"><strong>Annotation:</strong> <%= person['personal_annotation'] %></div>
<% end %>
</td>
<td>
<div class="table_buttons">
<%= 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' %>
</div>
</td>
<td></td>
<td></td>
<td></td>
</tr>
<% end %>
</table>

View File

@ -1,6 +1,17 @@
<%= render(:partial => "nav") %>
<h2>Favorite Projects</h2>
<div class="header-button-container">
<div class="header">
<h2>Favorite Projects</h2>
</div>
<div class="button">
<span>Annotations</span>
<label class="switch">
<input type="checkbox" id="toggleAnnotations">
<span class="slider round"></span>
</label>
</div>
</div>
<% if !@favorite_projects[0].blank? %>
<div class="table_wrapper">
@ -19,13 +30,17 @@
</td>
</tr>
<tr>
<td>
<% if project['personal_annotation'] != nil %>
<div id="annotation"><strong>Annotation:</strong> <%= project['personal_annotation'] %></div>
<% end %>
</td>
<td>
<div class="table_buttons">
<%= button_to 'Details', crawlers_projects_crawler_show_detail_url(:id => project['id']) %>
<%= button_to 'Delete', {:action => "delete_project", :id => project['id']}, :method => 'delete' %>
</div>
</td>
<td></td>
</tr>
<% end %>
</table>

View File

@ -1,6 +1,17 @@
<%= render(:partial => "nav") %>
<h2>Favorite Theses</h2>
<div class="header-button-container">
<div class="header">
<h2>Favorite Theses</h2>
</div>
<div class="button">
<span>Annotations</span>
<label class="switch">
<input type="checkbox" id="toggleAnnotations">
<span class="slider round"></span>
</label>
</div>
</div>
<% if !@favorite_theses[0].blank? %>
<div class="table_wrapper">
@ -20,13 +31,17 @@
</tr>
<tr>
<td>
<% if thesis['personal_annotation'] != nil %>
<div id="annotation"><strong>Annotation:</strong> <%= thesis['personal_annotation'] %></div>
<% end %>
</td>
<td>
<div class="table_buttons">
<%= button_to 'Details', crawlers_theses_crawler_show_detail_url(:id => thesis['id']) %>
<%= button_to 'Delete', {:action => "delete_thesis", :id => thesis['id']}, :method => 'delete' %>
</div>
</td>
<td></td>
</tr>
<% end %>
</table>

0
bin/webpack Normal file → Executable file
View File

0
bin/webpack-dev-server Normal file → Executable file
View File

0
bin/yarn Normal file → Executable file
View File

View File

@ -10,6 +10,6 @@
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.10.3"
"webpack-dev-server": "^3.11.0"
}
}

View File

@ -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==