From 4822f47aac4fd5d5259878c621751ae498fbfd17 Mon Sep 17 00:00:00 2001 From: Chris kerr Date: Mon, 26 Feb 2024 06:54:52 -0500 Subject: [PATCH] Styling Changes --- static/js/updateBreedingPairs.js | 4 +- static/js/updateBreedingUsage.js | 2 +- static/style/output.css | 53 ++++++++++++++++++++++ templates/.layout.html | 22 +++++---- templates/app.html | 76 +++++++++++++++++--------------- 5 files changed, 106 insertions(+), 51 deletions(-) diff --git a/static/js/updateBreedingPairs.js b/static/js/updateBreedingPairs.js index f5067b2..784a6f4 100644 --- a/static/js/updateBreedingPairs.js +++ b/static/js/updateBreedingPairs.js @@ -11,7 +11,7 @@ function updateBreedingPairs() { breedingPairsContainer.innerHTML = `

Breeding Pairs:

-
+
(

base

 + 

mate

)
@@ -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"); diff --git a/static/js/updateBreedingUsage.js b/static/js/updateBreedingUsage.js index 31a5972..45e639a 100644 --- a/static/js/updateBreedingUsage.js +++ b/static/js/updateBreedingUsage.js @@ -28,7 +28,7 @@ function renderOffspringList(usageData) { // Create and append HTML for each unique offspring uniqueOffspringSet.forEach(offspring => { - var offspringHTML = `
  • + var offspringHTML = `
  • ${offspring}
    • `; offspringContainer.innerHTML += offspringHTML; diff --git a/static/style/output.css b/static/style/output.css index 0894072..1d1264e 100644 --- a/static/style/output.css +++ b/static/style/output.css @@ -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; } diff --git a/templates/.layout.html b/templates/.layout.html index 60c69cc..0b29a4c 100644 --- a/templates/.layout.html +++ b/templates/.layout.html @@ -8,22 +8,19 @@ {% block head %}{% endblock %} {% block body %} {% endblock %} -
    -

    About The App

    -

    - Dragon Warrior Monsters 2 App, an open-source project where you can explore - information about monsters, breeding pairs, and more. +

    +

    About The App

    +

    + 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.

    -

    - 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. -

    -
    +

    +
    +
    {% for file in js_files %} {% endfor %} diff --git a/templates/app.html b/templates/app.html index 88dfbf9..9b7f5ff 100644 --- a/templates/app.html +++ b/templates/app.html @@ -1,14 +1,12 @@ {% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %} -

    - Welcome to the Dragon Warrior Monsters 2 App -

    +

    Dragon Warrior Monsters 2 App


    - +
    - +