Styling Changes
This commit is contained in:
parent
d6565acc7f
commit
4822f47aac
@ -11,7 +11,7 @@ function updateBreedingPairs() {
|
||||
breedingPairsContainer.innerHTML = `
|
||||
<div class='text-center '>
|
||||
<h3 class='text-xl font-bold mb-0.5'>Breeding Pairs:</h3>
|
||||
<div class='text-xs mb-2 flex justify-center'>
|
||||
<div class='text-xs mb-2 flex justify-center text-left'>
|
||||
(<p class='text-red-300'>base</p> + <p class='text-blue-300'>mate</p>)
|
||||
</div>
|
||||
</div>
|
||||
@ -19,7 +19,7 @@ function updateBreedingPairs() {
|
||||
|
||||
if (data.breeding_pairs.length > 0) {
|
||||
var pairsList = document.createElement("ul");
|
||||
pairsList.classList.add('m-2','p-2','list-disc', 'marker:text-slate-300');
|
||||
pairsList.classList.add('m-2','p-2','list-disc', 'marker:text-slate-300','text-left');
|
||||
|
||||
data.breeding_pairs.forEach(pair => {
|
||||
var listItem = document.createElement("li");
|
||||
|
||||
@ -28,7 +28,7 @@ function renderOffspringList(usageData) {
|
||||
|
||||
// Create and append HTML for each unique offspring
|
||||
uniqueOffspringSet.forEach(offspring => {
|
||||
var offspringHTML = `<li class='font-bold marker:text-slate-400 text-purple-300'>
|
||||
var offspringHTML = `<li class='font-bold text-left marker:text-slate-400 text-purple-300'>
|
||||
${offspring}
|
||||
</li>`;
|
||||
offspringContainer.innerHTML += offspringHTML;
|
||||
|
||||
@ -617,10 +617,51 @@ video {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-fit {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.w-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.w-1\/2 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.max-w-lg {
|
||||
max-width: 32rem;
|
||||
}
|
||||
|
||||
.max-w-md {
|
||||
max-width: 28rem;
|
||||
}
|
||||
|
||||
.max-w-sm {
|
||||
max-width: 24rem;
|
||||
}
|
||||
|
||||
.max-w-xs {
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
.max-w-xl {
|
||||
max-width: 36rem;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
.border-collapse {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
@ -637,6 +678,14 @@ video {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.place-content-center {
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.content-center {
|
||||
align-content: center;
|
||||
}
|
||||
@ -704,6 +753,10 @@ video {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -8,22 +8,19 @@
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body
|
||||
class="content-center justify-center p-2 m-2 font-mono text-white bg-neutral-800"
|
||||
class="content-center justify-center p-2 m-2 font-mono text-white bg-neutral-800 w-auto text-center"
|
||||
>
|
||||
{% block body %} {% endblock %}
|
||||
</body>
|
||||
<div class="mx-auto footer">
|
||||
<h2 class="m-2 text-2xl font-bold">About The App</h2>
|
||||
<p class="leading-7">
|
||||
Dragon Warrior Monsters 2 App, an open-source project where you can explore
|
||||
information about monsters, breeding pairs, and more.
|
||||
<div class="mx-auto footer max-w-lg">
|
||||
<h2 class="m-2 text-xl font-bold">About The App</h2>
|
||||
<p class="text-md">
|
||||
Dragon Warrior Monsters 2 App, an open-source project. You can contribute
|
||||
to the development and improvement of this app on our Git repository. Feel
|
||||
free to explore the code, report issues, and submit pull requests.
|
||||
</p>
|
||||
<p class="mt-4 leading-7">
|
||||
You can contribute to the development and improvement of this app on our Git
|
||||
repository. Feel free to explore the code, report issues, and submit pull
|
||||
requests.
|
||||
</p>
|
||||
<div class="mt-4">
|
||||
<p class="mt-4 leading-7"></p>
|
||||
<div class="mt-4 text-md">
|
||||
<a
|
||||
href="https://git.happytavern.co/oceanslim/dwm-app"
|
||||
target="_blank"
|
||||
@ -32,6 +29,7 @@
|
||||
View the git repository
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% for file in js_files %}
|
||||
<script src="{{ url_for('static', filename='js/' + file) }}"></script>
|
||||
{% endfor %}
|
||||
|
||||
@ -1,14 +1,12 @@
|
||||
{% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %}
|
||||
<h1 class="text-2xl font-black text-white">
|
||||
Welcome to the Dragon Warrior Monsters 2 App
|
||||
</h1>
|
||||
<h1 class="text-2xl font-black text-white">Dragon Warrior Monsters 2 App</h1>
|
||||
<br />
|
||||
<label for="familyDropdown">Select Family:</label>
|
||||
<label for="familyDropdown">Family:</label>
|
||||
<select id="familyDropdown" class="p-2 bg-gray-900 rounded-md">
|
||||
<option value="">All Families</option>
|
||||
</select>
|
||||
<br />
|
||||
<label for="monsterDropdown">Select Monster:</label>
|
||||
<label for="monsterDropdown">Monster:</label>
|
||||
<select
|
||||
id="monsterDropdown"
|
||||
class="p-2 mt-2 rounded-md bg-slate-900"
|
||||
@ -19,21 +17,28 @@
|
||||
|
||||
<br />
|
||||
|
||||
<div id="modules" class="flex mt-4">
|
||||
|
||||
<div class="p-2 m-2 border-2 rounded-md border-slate-400">
|
||||
<div id="monsterNameContainer" class="text-center">
|
||||
<!-- Monster name will be displayed here -->
|
||||
</div>
|
||||
<div id="modules" class="mt-4 justify-center items-center flex flex-col">
|
||||
<div id="monsterNameContainer" class="text-center">
|
||||
<!-- Monster name will be displayed here -->
|
||||
</div>
|
||||
<iframe
|
||||
id="monsterSpriteIframe"
|
||||
src=""
|
||||
class="p-2 m-2 border-2 rounded-md border-slate-400"
|
||||
height="200"
|
||||
width="200"
|
||||
>
|
||||
</iframe>
|
||||
|
||||
<div class="p-2 mt-2 border-2 rounded-md border-slate-400 w-full max-w-xs">
|
||||
<div id="monsterFamilyContainer" class="mt-1">
|
||||
<!-- Monster Family will be displayed here-->
|
||||
</div>
|
||||
|
||||
|
||||
<div id="monsterStatsContainer" class="mt-2">
|
||||
<!-- Monster stats will be displayed here -->
|
||||
</div>
|
||||
|
||||
|
||||
<div id="monsterSkillsContainer" class="mt-2">
|
||||
<!-- Monster Skills will be displayed here-->
|
||||
</div>
|
||||
@ -42,30 +47,29 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="breedingPairsContainer" class="p-2 m-2 border-2 rounded-md border-slate-400">
|
||||
<!-- Breeding pairs will be displayed here -->
|
||||
</div>
|
||||
|
||||
<div id="offspringContainer" class="p-2 m-2 border-2 rounded-md border-slate-400"></div>
|
||||
|
||||
<div class="grid items-center justify-center grid-cols-1 ml-4">
|
||||
<iframe
|
||||
id="monsterSpriteIframe"
|
||||
src=""
|
||||
class="p-2 ml-8 border-2 rounded-md border-slate-400"
|
||||
height="200"
|
||||
width="200"
|
||||
<div class="flex m-2 w-full max-w-xl">
|
||||
<div
|
||||
id="breedingPairsContainer"
|
||||
class="p-2 m-2 border-2 rounded-md border-slate-400 w-full"
|
||||
>
|
||||
<!-- Breeding pairs will be displayed here -->
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="offspringContainer"
|
||||
class="p-2 m-2 border-2 rounded-md border-slate-400 w-full"
|
||||
></div>
|
||||
|
||||
<div class="grid items-center justify-center grid-cols-1 ml-4"></div>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<a
|
||||
href="/skills"
|
||||
class="float-left text-2xl font-bold text-purple-400 hover:underline"
|
||||
>Go to Skills Data Page</a
|
||||
>
|
||||
</iframe>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<a
|
||||
href="/skills"
|
||||
class="float-left text-2xl font-bold text-purple-400 hover:underline"
|
||||
>Go to Skills Data Page</a
|
||||
>
|
||||
</div>
|
||||
</br>
|
||||
|
||||
<br />
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user