Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixed fallback image zoom-in #50

Merged
merged 12 commits into from
Mar 6, 2018
Merged

fixed fallback image zoom-in #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
a899e0d
Merge branch 'master' into overview-tooltip-information
tasola Mar 5, 2018
b2fe3f7
Merge branch 'master' into overview-tooltip-information
tasola Mar 6, 2018
9cf897c
change layout on zoom-in
tasola Mar 6, 2018
0902778
changing the zoom style back
tasola Mar 6, 2018
c8b4c8f
Merge branch 'master' into overview-tooltip-information
tasola Mar 6, 2018
98ba6df
fix back btn
tasola Mar 6, 2018
9fe61f7
broken image zoomin
tasola Mar 6, 2018
ee625d0
better fallback img
tasola Mar 6, 2018
bb50e8f
Merge branch 'master' into overview-tooltip-information
tasola Mar 6, 2018
51631d6
fixed second title
tasola Mar 6, 2018
c848f9d
Merge branch 'master' into overview-tooltip-information
axelekwall Mar 6, 2018
5cb2744
Final fix
axelekwall Mar 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion client/src/assets/style/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ body {
overflow: visible;
}

#analytic {
margin-bottom: 5%;
}

/* .staticHeadline och .changingValues behöver nice */

.staticHeadline{
Expand All @@ -24,10 +28,12 @@ body {
font-size: 15px;
}
.changingValues{
position:relative;
color: #E81B5F;
font-family: Lato;
font-weight: 300;
font-size: 20px;
float: right;
}

.route_button {
Expand All @@ -52,7 +58,7 @@ body {
font-size: 1.2vw;
letter-spacing: 3px;
font-weight: 700;
text-align: right;
text-align: left;
float: right;
text-transform: uppercase;
}
Expand Down
9 changes: 6 additions & 3 deletions client/src/components/ScatterPlot.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,7 @@ export default {
.append('circle')
.merge(circleGroup)
.attr('class', function(d, i) {
return 'streamer ' + d.display_name;
return 'streamer a' + d.display_name;
})
.attr('cx', function(d) {
return xScale(d.view_count);
Expand All @@ -298,7 +298,7 @@ export default {
//Hide the tooltip when the mouse moves away
function removeTooltip(d, i) {
//Save the chosen circle (so not the voronoi)
const element = d3.selectAll('.streamer.' + d.display_name);
const element = d3.selectAll('.streamer.a' + d.display_name);

//Fade out the bubble again
element.style('opacity', opacityCircles);
Expand All @@ -322,8 +322,11 @@ export default {
//Show the tooltip on the hovered over slice
function showTooltip(d, i) {
//Save the chosen circle (so not the voronoi)
const element = d3.select('.streamer.' + d.display_name),
const element = d3.select('.streamer.a' + d.display_name),
el = element._groups[0];
if (d.offline_image_url == ""){
d.offline_image_url = 'https://static-cdn.jtvnw.net/ttv-boxart/404_boxart-80x112.jpg';
}
tooltip.html(
'<h2 id="zoom_tooltip">' +
d.display_name +
Expand Down
2 changes: 1 addition & 1 deletion client/src/views/About.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
</div>
<div class="teamContainer">
<div class="teamImageRight"><img class="image" src="../assets/img/petter.png"></div>
<div class="teamBioRight"><h2>Petter</h2><h4>FULL STACK DEVELOPER / HATER OF MERGING<br/><br/>A developer with a soft spot for details and affinity for structure, it was thanks to him that our team got a second wind as we neared the final stretch of this project. He basically forced us to allocate as much time as possible to this project. Moving from the back-end team to the front-end team he, on countless occasions, pushed his machine to the limit to make sure Plot Twitch navigation and routing makes as much sense to you as it made to us.</h4></div>
<div class="teamBioRight"><h2>Petter</h2><h4>FULL STACK DEVELOPER / VUE SURFER <br/><br/>A developer with a soft spot for details and affinity for structure, it was thanks to him that our team got a second wind as we neared the final stretch of this project. He basically forced us to allocate as much time as possible to this project. Moving from the back-end team to the front-end team he, on countless occasions, pushed his machine to the limit to make sure Plot Twitch navigation and routing makes as much sense to you as it made to us.</h4></div>
</div>
</div>
</template>
4 changes: 2 additions & 2 deletions client/src/views/Analytic.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<template><html>
<template><div>
<div class="about">
<h3>Analytic Trail</h3>
<div class="menuItems">
Expand All @@ -17,5 +17,5 @@ The top 100 streams are in a scatterplot-like view where the currently played ga
When you hover on a cluster you get information to your right about the game and the total amount of viewers. When you click on a cluster, you are zoomed in and focused on that particular game. Here you see another scatterplot, with its axes visible and a clear visual aid on hover
</div>
</div>
</html>
</div>
</template>