failed at scaling modules in index...
This commit is contained in:
Chris kerr
parent
954b2b0932
commit
68b6cfeaac
@ -70,4 +70,34 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
||||
@ -548,6 +548,14 @@ video {
|
||||
grid-column: span 1 / span 1;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.m-4 {
|
||||
margin: 1rem;
|
||||
}
|
||||
@ -568,6 +576,18 @@ video {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.mt-6 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.mt-8 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.mt-20 {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
@ -580,10 +600,52 @@ video {
|
||||
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 {
|
||||
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-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
@ -596,6 +658,14 @@ video {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
@ -636,6 +706,16 @@ video {
|
||||
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-weight: 900;
|
||||
}
|
||||
|
||||
@ -8,17 +8,15 @@
|
||||
<title>Breeding Combinations</title>
|
||||
<link rel="stylesheet" href="../static/style/output.css" />
|
||||
</head>
|
||||
<body class="bg-slate-700">
|
||||
<h1 class="font-bold text-blue-500">Breeding Combinations</h1>
|
||||
|
||||
<body class="bg-slate-700 font-mono text-white">
|
||||
<div id="breedingCombinations">
|
||||
{% if selected_monster %}
|
||||
<h2 class="font-bold text-blue-500 mt-4">
|
||||
Breeding Combinations for {{ selected_monster.name }}
|
||||
<h2 class="font-bold text-xl mt-4">
|
||||
Possible Breeding Pairs for {{ selected_monster.name }}
|
||||
</h2>
|
||||
<div class="grid grid-cols-2 gap-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>
|
||||
{% for combination in selected_monster.base_combinations %}
|
||||
<li>{{ combination }}</li>
|
||||
@ -26,7 +24,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-span-1">
|
||||
<h3 class="font-bold text-blue-500">Mate Combinations</h3>
|
||||
<h3 class="font-bold text-lg">Mates</h3>
|
||||
<ul>
|
||||
{% for combination in selected_monster.mate_combinations %}
|
||||
<li>{{ combination }}</li>
|
||||
|
||||
@ -26,22 +26,17 @@
|
||||
<iframe
|
||||
id="monsterIframe"
|
||||
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)"
|
||||
></iframe>
|
||||
|
||||
<iframe
|
||||
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)"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function resizeIframe(iframe) {
|
||||
iframe.style.height =
|
||||
iframe.contentWindow.document.body.scrollHeight + 4 + "px";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user