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

failed at scaling modules in index...

Browse Source
This commit is contained in:
Chris kerr 2024-01-30 21:27:02 -05:00
parent 954b2b0932
commit 68b6cfeaac
4 changed files with 118 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
static/js/index.js
View File

@ -70,4 +70,34 @@ document.addEventListener("DOMContentLoaded", function () {
breedingIframe.src = breedingIframeSrc; breedingIframe.src = breedingIframeSrc;
} }
//I was trying to get rid of the scroll bars but h-auto/fit wasn't working
// This works to resize but still leaves some scrollbar
//to-do:fix
// Function to resize iframe
//function resizeIframe(iframe) {
// const body = iframe.contentDocument.body;
// const html = iframe.contentDocument.documentElement;
//
// const height = Math.max(
// body.scrollHeight,
// body.offsetHeight,
// html.clientHeight,
// html.scrollHeight,
// html.offsetHeight
// );
//
// iframe.style.height = height + "px";
//}
// Add event listeners for iframe load
monsterIframe.addEventListener("load", function () {
resizeIframe(monsterIframe);
});
breedingIframe.addEventListener("load", function () {
resizeIframe(breedingIframe);
});
}); });

80
static/style/output.css
View File

@ -548,6 +548,14 @@ video {
grid-column: span 1 / span 1; grid-column: span 1 / span 1;
} }
.float-right {
float: right;
}
.float-left {
float: left;
}
.m-4 { .m-4 {
margin: 1rem; margin: 1rem;
} }
@ -568,6 +576,18 @@ video {
margin-top: 1rem; margin-top: 1rem;
} }
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-20 {
margin-top: 5rem;
}
.flex { .flex {
display: flex; display: flex;
} }
@ -580,10 +600,52 @@ video {
height: auto; height: auto;
} }
.h-fit {
height: -moz-fit-content;
height: fit-content;
}
.h-10 {
height: 2.5rem;
}
.h-96 {
height: 24rem;
}
.h-1\/2 {
height: 50%;
}
.h-3\/4 {
height: 75%;
}
.h-max {
height: -moz-max-content;
height: max-content;
}
.w-auto { .w-auto {
width: auto; width: auto;
} }
.flex-1 {
flex: 1 1 0%;
}
.flex-auto {
flex: 1 1 auto;
}
.flex-initial {
flex: 0 1 auto;
}
.resize {
resize: both;
}
.grid-cols-1 { .grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr));
} }
@ -596,6 +658,14 @@ video {
gap: 0.25rem; gap: 0.25rem;
} }
.gap-4 {
gap: 1rem;
}
.overflow-hidden {
overflow: hidden;
}
.rounded-md { .rounded-md {
border-radius: 0.375rem; border-radius: 0.375rem;
} }
@ -636,6 +706,16 @@ video {
line-height: 2rem; line-height: 2rem;
} }
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.font-black { .font-black {
font-weight: 900; font-weight: 900;
} }

12
templates/breeding.html
View File

@ -8,17 +8,15 @@
<title>Breeding Combinations</title> <title>Breeding Combinations</title>
<link rel="stylesheet" href="../static/style/output.css" /> <link rel="stylesheet" href="../static/style/output.css" />
</head> </head>
<body class="bg-slate-700"> <body class="bg-slate-700 font-mono text-white">
<h1 class="font-bold text-blue-500">Breeding Combinations</h1>
<div id="breedingCombinations"> <div id="breedingCombinations">
{% if selected_monster %} {% if selected_monster %}
<h2 class="font-bold text-blue-500 mt-4"> <h2 class="font-bold text-xl mt-4">
Breeding Combinations for {{ selected_monster.name }} Possible Breeding Pairs for {{ selected_monster.name }}
</h2> </h2>
<div class="grid grid-cols-2 gap-1"> <div class="grid grid-cols-2 gap-1">
<div class="col-span-1"> <div class="col-span-1">
<h3 class="font-bold text-blue-500">Base Combinations</h3> <h3 class="font-bold text-lg">Base</h3>
<ul> <ul>
{% for combination in selected_monster.base_combinations %} {% for combination in selected_monster.base_combinations %}
<li>{{ combination }}</li> <li>{{ combination }}</li>
@ -26,7 +24,7 @@
</ul> </ul>
</div> </div>
<div class="col-span-1"> <div class="col-span-1">
<h3 class="font-bold text-blue-500">Mate Combinations</h3> <h3 class="font-bold text-lg">Mates</h3>
<ul> <ul>
{% for combination in selected_monster.mate_combinations %} {% for combination in selected_monster.mate_combinations %}
<li>{{ combination }}</li> <li>{{ combination }}</li>

11
templates/index.html
View File

@ -26,22 +26,17 @@
<iframe <iframe
id="monsterIframe" id="monsterIframe"
src="" src=""
class="w-auto mt-4 ml-4 border-2 border-teal-500 rounded-md" class="w-auto h-max mt-4 ml-4 border-2 border-teal-500 rounded-md"
onload="resizeIframe(this)" onload="resizeIframe(this)"
></iframe> ></iframe>
<iframe <iframe
id="breedingIframe" id="breedingIframe"
class="w-auto mt-4 ml-4 h-auto border-2 border-teal-500 rounded-md" src=""
class="w-auto mt-4 ml-4 p-2 border-2 border-teal-500 rounded-md"
onload="resizeIframe(this)" onload="resizeIframe(this)"
></iframe> ></iframe>
</div> </div>
</div> </div>
<script>
function resizeIframe(iframe) {
iframe.style.height =
iframe.contentWindow.document.body.scrollHeight + 4 + "px";
}
</script>
</body> </body>
</html> </html>