Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2025-12-26 07:47:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix tooltip on mobile, set dynamic width, add info svg

Browse Source
This commit is contained in:
Alec Maier
2020-04-19 15:15:09 -04:00
parent 6c6025f511
commit f682e3eef4
3 changed files with 56 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
assets/images/info.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg width="223" height="223" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="none" id="canvas_background" height="225" width="225" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>Layer 1</title>
<path id="svg_1" d="m111.499982,3.500023c-59.646658,0 -107.999967,48.353386 -107.999967,107.999967c0,59.647903 48.353308,107.999993 107.999967,107.999993c59.647946,0 107.999993,-48.352082 107.999993,-107.999993c0,-59.646581 -48.352047,-107.999967 -107.999993,-107.999967zm-9.236728,48.553238l17.983007,0l0,19.128161l-17.983007,0l0,-19.128161zm29.760957,116.085726l-19.780144,0c-7.684691,0 -10.961591,-3.269729 -10.961591,-11.117474l0,-51.012233c0,-2.452006 -1.306774,-3.597168 -3.595768,-3.597168l-6.539459,0l0,-17.662679l19.781535,0c7.690393,0 10.953072,3.432714 10.953072,11.116049l0,51.176601c0,2.296157 1.306782,3.597237 3.595768,3.597237l6.539537,0l0,17.499659l0.00705,0l0,0.000009z" stroke-width="1.5" stroke="#000" fill="#bbb8b8"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

2
static/game.js
View File

@@ -234,7 +234,7 @@ function renderDeadAndAliveInformation() {
alivePlayers.forEach((player) => {
const alivePlayer = document.createElement("div");
alivePlayer.setAttribute("class", "alive-player");
alivePlayer.innerText = player.card.role;
alivePlayer.innerHTML = "<p>" + player.card.role + "</p><img src='../assets/images/info.svg'/>";
//Add hidden description span - RTM 4/18/2020
let playerCardInfo=document.createElement("span");
playerCardInfo.setAttribute("class","tooltiptext");

60
static/styles.css
View File

@@ -115,6 +115,14 @@
margin: 0 0.5em;
font-size: 2em;
}
#game-container .alive-player .tooltiptext {
width: 12em;
right: 45%;
bottom: 80%;
font-size: 12px;
}
}
@media(min-width: 750.01px) {
@@ -229,6 +237,13 @@
align-items: center;
}
#game-container .alive-player .tooltiptext {
width: 15em;
font-size: 14px;
right: 106%;
bottom: -36%;
}
}
@media(max-width: 1225px) and (min-width: 750.01px) {
@@ -1066,8 +1081,16 @@ label {
background-color: #494f52;
border-radius: 5px;
padding: 5px;
filter: drop-shadow(3px 10px 10px rgba(0,0,0,0.6));
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 3px 10px 10px rgba(0,0,0,0.6);
margin: 0.3em;
position: relative;
}
#game-container .killed-player p, #game-container .alive-player p {
margin: 0;
}
#play-pause {
@@ -1446,26 +1469,25 @@ color: #333243;
text-decoration: none;
cursor: pointer;
}
/*Tooltip styles. Taken from w3schools*/
#game-container .alive-player .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 50%;
left: 150%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
/*opacity: 0;*/
/*transition: opacity 1s;*/
visibility: hidden;
background-color: black;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
}
#game-container .alive-player:hover .tooltiptext {
visibility: visible;
opacity: 1;
#game-container .alive-player img {
width: 25px;
height: 25px;
}
#game-container .alive-player:hover .tooltiptext, #game-container .alive-player:focus .tooltiptext {
visibility: visible;
opacity: 1;
}