fix the flow of android containers
This commit is contained in:
parent
4d0f140384
commit
a9d8564d62
@ -23,6 +23,19 @@
|
|||||||
gap: 20px;
|
gap: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Container for each type (thinker, worker, warrior) */
|
||||||
|
.typeContainer {
|
||||||
|
display: flex; /* Use flexbox for layout */
|
||||||
|
justify-content: space-between; /* Space out the child elements evenly */
|
||||||
|
margin-bottom: 20px; /* Add some bottom margin for separation between types */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Profile and abilities within each type */
|
||||||
|
.creature_profile,
|
||||||
|
.creature_abilities {
|
||||||
|
width: 45%; /* Give them each about half the container's width */
|
||||||
|
}
|
||||||
|
|
||||||
.creature_id { grid-area: 1 / 1 / 2 / 2; }
|
.creature_id { grid-area: 1 / 1 / 2 / 2; }
|
||||||
.creature_profile { grid-area: 1 / 2 / 2 / 3; }
|
.creature_profile { grid-area: 1 / 2 / 2 / 3; }
|
||||||
.creature_abilities { grid-area: 1 / 3 / 2 / 4; }
|
.creature_abilities { grid-area: 1 / 3 / 2 / 4; }
|
||||||
|
@ -67,11 +67,12 @@ document.getElementById('terrainForm').addEventListener('submit', function (even
|
|||||||
|
|
||||||
function androidResultTable(data) {
|
function androidResultTable(data) {
|
||||||
let container = document.createElement('div');
|
let container = document.createElement('div');
|
||||||
container.className = 'container android'; // Added 'android' class
|
container.className = 'container android';
|
||||||
|
|
||||||
let creatureTitle = document.createElement('h2');
|
let creatureTitle = document.createElement('h2');
|
||||||
creatureTitle.textContent = data.name.toUpperCase();
|
creatureTitle.textContent = data.name.toUpperCase();
|
||||||
container.appendChild(creatureTitle)
|
container.appendChild(creatureTitle)
|
||||||
|
|
||||||
let image = document.createElement('img');
|
let image = document.createElement('img');
|
||||||
image.src = 'img/android.jpg';
|
image.src = 'img/android.jpg';
|
||||||
image.onerror = () => { image.src = 'img/404.jpg' };
|
image.onerror = () => { image.src = 'img/404.jpg' };
|
||||||
@ -86,15 +87,22 @@ document.getElementById('terrainForm').addEventListener('submit', function (even
|
|||||||
|
|
||||||
if (key === 'thinker' || key === 'worker' || key === 'warrior') {
|
if (key === 'thinker' || key === 'worker' || key === 'warrior') {
|
||||||
let typeTitle = document.createElement('h2');
|
let typeTitle = document.createElement('h2');
|
||||||
typeTitle.textContent = key.toUpperCase(); // Display the type (worker, warrior, thinker)
|
typeTitle.textContent = key.toUpperCase();
|
||||||
container.appendChild(typeTitle);
|
container.appendChild(typeTitle);
|
||||||
|
|
||||||
|
// Create a div for each type (thinker, worker, or warrior)
|
||||||
|
let typeContainer = document.createElement('div');
|
||||||
|
typeContainer.className = 'typeContainer'; // we'll use this in css
|
||||||
|
|
||||||
let profile = createProfileSection(value);
|
let profile = createProfileSection(value);
|
||||||
let abilities = createAbilitiesSection(value);
|
let abilities = createAbilitiesSection(value);
|
||||||
|
|
||||||
container.appendChild(profile);
|
// Append profile and abilities to the typeContainer, instead of the main container
|
||||||
container.appendChild(abilities);
|
typeContainer.appendChild(profile);
|
||||||
|
typeContainer.appendChild(abilities);
|
||||||
|
|
||||||
|
// Finally, append the typeContainer to the main container.
|
||||||
|
container.appendChild(typeContainer);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user