Show annotations on overview of favorites
This commit is contained in:
parent
ba2e90386f
commit
a0480036bf
@ -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;
|
||||
}
|
||||
@ -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()
|
||||
|
||||
21
app/javascript/packs/custom.js
Normal file
21
app/javascript/packs/custom.js
Normal 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);
|
||||
});
|
||||
@ -1,6 +1,17 @@
|
||||
<%= render(:partial => "nav") %>
|
||||
|
||||
<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>
|
||||
|
||||
@ -1,6 +1,17 @@
|
||||
<%= render(:partial => "nav") %>
|
||||
|
||||
<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>
|
||||
|
||||
@ -1,6 +1,17 @@
|
||||
<%= render(:partial => "nav") %>
|
||||
|
||||
<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>
|
||||
|
||||
@ -1,6 +1,17 @@
|
||||
<%= render(:partial => "nav") %>
|
||||
|
||||
<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
0
bin/webpack
Normal file → Executable file
0
bin/webpack-dev-server
Normal file → Executable file
0
bin/webpack-dev-server
Normal file → Executable file
@ -10,6 +10,6 @@
|
||||
},
|
||||
"version": "0.1.0",
|
||||
"devDependencies": {
|
||||
"webpack-dev-server": "^3.10.3"
|
||||
"webpack-dev-server": "^3.11.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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==
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user