Skip to content

Popup Content Alignment #203

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

Merged
versx merged 2 commits into from
Sep 19, 2020
Merged

Popup Content Alignment #203

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d9efb8b
Fix pokemon popup content alignment on smaller devices
versx Sep 18, 2020
695018e
Fix gym popup content alignment on smaller devices
versx Sep 18, 2020
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
20 changes: 10 additions & 10 deletions static/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2611,10 +2611,10 @@ function getPokemonPopupContent (pokemon) {

content +=
'<div class="row">' + // START 1ST ROW
'<div class="col-12 col-md-8 center-vertical text-nowrap">' +
'<div class="col-8 center-vertical text-nowrap">' +
'<h6><b>' + pokemonName + ' ' + getGenderIcon(pokemon.gender) + '</b></h6>' +
'</div>' +
'<div class="col-6 col-md-4 center-vertical">' +
'<div class="col-4 center-vertical">' +
'<div style="float:right; margin-right:5px;">';
if (!(pokemon.display_pokemon_id > 0) && pokemon.weather !== 0 && pokemon.weather !== null) {
content += `<img src="/img/weather/${pokemon.weather}.png" height="32" width="32">`;
Expand All @@ -2625,7 +2625,7 @@ function getPokemonPopupContent (pokemon) {
'</div>' + // END 1ST ROW

'<div class="row">' + // START 2ND ROW
'<div class="' + (hasIV ? 'col-6 col-md-4' : 'col text-center') + '">' +
'<div class="' + (hasIV ? 'col-4' : 'col text-center') + '">' +
'<div class="row pokemon-popup-image-holder">' +
`<img src="${availableIconStyles[selectedIconStyle].path}/${pokemonIcon}.png">` +
'</div>' + // END POKEMON ROW
Expand All @@ -2647,7 +2647,7 @@ function getPokemonPopupContent (pokemon) {
content +=
'</div>' + // END TYPE ROW
'</div>' + // END COLUMN
'<div class="col-12 col-md-8 text-nowrap">';
'<div class="col-8 text-nowrap">';
if (hasIV) {
const ivPercent = Math.round((pokemon.atk_iv + pokemon.def_iv + pokemon.sta_iv) / 45 * 1000) / 10;
content += '<b>IV:</b> ' + ivPercent + '% (A' + pokemon.atk_iv + '|D' + pokemon.def_iv + '|S' + pokemon.sta_iv + ')<br>';
Expand Down Expand Up @@ -3027,10 +3027,10 @@ function getGymPopupContent (gym) {

let content =
'<div class="row">' + // START 1ST ROW
'<div class="col-12 col-md-8 center-vertical">' +
'<div class="col-8 center-vertical">' +
`<span class="text-nowrap" style="font-size:${titleSize}px;"><b>${gymName}</b></span>` +
'</div>' +
'<div class="col-6 col-md-4 center-vertical">' +
'<div class="col-4 center-vertical">' +
'<div style="float:right; margin: auto;">' +
`<img src="/img/team/${gym.team_id}.png" height="32" width="32">` +
'</div>' +
Expand All @@ -3055,7 +3055,7 @@ function getGymPopupContent (gym) {
const pokemonIcon = getPokemonIcon(gym.raid_pokemon_id, gym.raid_pokemon_form, gym.raid_pokemon_evolution, gym.raid_pokemon_gender, gym.raid_pokemon_costume);
content +=
'<div class="row" style="margin:auto;">' + // START 1ST ROW
'<div class="col-6 col-md-4">' + // START 1ST COL
'<div class="col-4">' + // START 1ST COL
'<div class="row pokemon-popup-image-holder">';
if (hasRaidBoss && isRaidBattle) {
content += `<img src="${availableIconStyles[selectedIconStyle].path}/${pokemonIcon}.png">`;
Expand Down Expand Up @@ -3084,7 +3084,7 @@ function getGymPopupContent (gym) {
content +=
'</div>' + // END TYPE ROW
'</div>' + // END 1ST COLUMN
'<div class="col-12 col-md-8 text-nowrap">' + // START 2ND COL
'<div class="col-8 text-nowrap">' + // START 2ND COL
'<h7><b>' + pokemonName + '</b></h7><br>';
if (hasRaidBoss && isRaidBattle) {
if (gym.raid_pokemon_evolution) {
Expand Down Expand Up @@ -3140,14 +3140,14 @@ function getGymPopupContent (gym) {
: '';
let url = gym.url.replace('http://', 'https://');
content +=
'<div class="col-6 col-md-4">' + // START 1ST COL
'<div class="col-4">' + // START 1ST COL
// '<a href="' + url + '" target="_blank"><img src="' + url + '" style="border-radius:50%; height:96px; width:96px;"></a>' +
`<a href="${url}" target="_blank"><img src="${url}" class="circle-image ${teamClass}" style="height:72px; width:72px;"></a>` +
'</div>'; // END 1ST COL
}
content +=
// '<div class="col-12 col-md-8 ' + (hasGymUrl ? 'text-center' : '') + ' center-vertical">' + //START 2ND COL
'<div class="col-12 col-md-8 center-vertical p-4">' + // START 2ND COL
'<div class="col-8 center-vertical p-4">' + // START 2ND COL
'<b>Team:</b> ' + getTeamName(gym.team_id) + '<br>' +
'<b>Slots Available:</b> ' + (gym.availble_slots === 0 ? 'Full' : gym.availble_slots === 6 ? 'Empty' : gym.availble_slots) + '<br>';
if (gym.guarding_pokemon_id !== null) {
Expand Down