OceanSlim/dwm-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Styling Changes

Browse Source
This commit is contained in:
Chris kerr 2024-02-26 06:54:52 -05:00
parent d6565acc7f
commit 4822f47aac
5 changed files with 106 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
static/js/updateBreedingPairs.js
View File

@ -11,7 +11,7 @@ function updateBreedingPairs() {
breedingPairsContainer.innerHTML = ` breedingPairsContainer.innerHTML = `
<div class='text-center '> <div class='text-center '>
<h3 class='text-xl font-bold mb-0.5'>Breeding Pairs:</h3> <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> &nbsp;+&nbsp; <p class='text-blue-300'>mate</p>) (<p class='text-red-300'>base</p> &nbsp;+&nbsp; <p class='text-blue-300'>mate</p>)
</div> </div>
</div> </div>
@ -19,7 +19,7 @@ function updateBreedingPairs() {
if (data.breeding_pairs.length > 0) { if (data.breeding_pairs.length > 0) {
var pairsList = document.createElement("ul"); 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 => { data.breeding_pairs.forEach(pair => {
var listItem = document.createElement("li"); var listItem = document.createElement("li");

2
static/js/updateBreedingUsage.js
View File

@ -28,7 +28,7 @@ function renderOffspringList(usageData) {
// Create and append HTML for each unique offspring // Create and append HTML for each unique offspring
uniqueOffspringSet.forEach(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} ${offspring}
</li>`; </li>`;
offspringContainer.innerHTML += offspringHTML; offspringContainer.innerHTML += offspringHTML;

53
static/style/output.css
View File

@ -617,10 +617,51 @@ video {
display: grid; display: grid;
} }
.h-screen {
height: 100vh;
}
.w-full { .w-full {
width: 100%; 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 {
border-collapse: collapse; border-collapse: collapse;
} }
@ -637,6 +678,14 @@ video {
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
} }
.flex-col {
flex-direction: column;
}
.place-content-center {
place-content: center;
}
.content-center { .content-center {
align-content: center; align-content: center;
} }
@ -704,6 +753,10 @@ video {
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
.text-left {
text-align: left;
}
.text-center { .text-center {
text-align: center; text-align: center;
} }

22
templates/.layout.html
View File

@ -8,22 +8,19 @@
{% block head %}{% endblock %} {% block head %}{% endblock %}
</head> </head>
<body <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 %} {% block body %} {% endblock %}
</body> </body>
<div class="mx-auto footer"> <div class="mx-auto footer max-w-lg">
<h2 class="m-2 text-2xl font-bold">About The App</h2> <h2 class="m-2 text-xl font-bold">About The App</h2>
<p class="leading-7"> <p class="text-md">
Dragon Warrior Monsters 2 App, an open-source project where you can explore Dragon Warrior Monsters 2 App, an open-source project. You can contribute
information about monsters, breeding pairs, and more. 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>
<p class="mt-4 leading-7"> <p class="mt-4 leading-7"></p>
You can contribute to the development and improvement of this app on our Git <div class="mt-4 text-md">
repository. Feel free to explore the code, report issues, and submit pull
requests.
</p>
<div class="mt-4">
<a <a
href="https://git.happytavern.co/oceanslim/dwm-app" href="https://git.happytavern.co/oceanslim/dwm-app"
target="_blank" target="_blank"
@ -32,6 +29,7 @@
View the git repository View the git repository
</a> </a>
</div> </div>
</div>
{% for file in js_files %} {% for file in js_files %}
<script src="{{ url_for('static', filename='js/' + file) }}"></script> <script src="{{ url_for('static', filename='js/' + file) }}"></script>
{% endfor %} {% endfor %}

50
templates/app.html
View File

@ -1,14 +1,12 @@
{% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %} {% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %}
<h1 class="text-2xl font-black text-white"> <h1 class="text-2xl font-black text-white">Dragon Warrior Monsters 2 App</h1>
Welcome to the Dragon Warrior Monsters 2 App
</h1>
<br /> <br />
<label for="familyDropdown">Select Family:</label> <label for="familyDropdown">Family:</label>
<select id="familyDropdown" class="p-2 bg-gray-900 rounded-md"> <select id="familyDropdown" class="p-2 bg-gray-900 rounded-md">
<option value="">All Families</option> <option value="">All Families</option>
</select> </select>
<br /> <br />
<label for="monsterDropdown">Select Monster:</label> <label for="monsterDropdown">Monster:</label>
<select <select
id="monsterDropdown" id="monsterDropdown"
class="p-2 mt-2 rounded-md bg-slate-900" class="p-2 mt-2 rounded-md bg-slate-900"
@ -19,13 +17,20 @@
<br /> <br />
<div id="modules" class="flex mt-4"> <div id="modules" class="mt-4 justify-center items-center flex flex-col">
<div class="p-2 m-2 border-2 rounded-md border-slate-400">
<div id="monsterNameContainer" class="text-center"> <div id="monsterNameContainer" class="text-center">
<!-- Monster name will be displayed here --> <!-- Monster name will be displayed here -->
</div> </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"> <div id="monsterFamilyContainer" class="mt-1">
<!-- Monster Family will be displayed here--> <!-- Monster Family will be displayed here-->
</div> </div>
@ -42,30 +47,29 @@
</div> </div>
</div> </div>
<div id="breedingPairsContainer" class="p-2 m-2 border-2 rounded-md border-slate-400"> <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 --> <!-- Breeding pairs will be displayed here -->
</div> </div>
<div id="offspringContainer" class="p-2 m-2 border-2 rounded-md border-slate-400"></div> <div
id="offspringContainer"
<div class="grid items-center justify-center grid-cols-1 ml-4"> class="p-2 m-2 border-2 rounded-md border-slate-400 w-full"
<iframe ></div>
id="monsterSpriteIframe"
src=""
class="p-2 ml-8 border-2 rounded-md border-slate-400"
height="200"
width="200"
>
</iframe>
<div class="grid items-center justify-center grid-cols-1 ml-4"></div>
</div> </div>
</div> <div class="mt-4 text-center">
<div class="mt-4 text-center">
<a <a
href="/skills" href="/skills"
class="float-left text-2xl font-bold text-purple-400 hover:underline" class="float-left text-2xl font-bold text-purple-400 hover:underline"
>Go to Skills Data Page</a >Go to Skills Data Page</a
> >
</div>
</div> </div>
</br>
<br />
{% endblock %} {% endblock %}