styled iframes width and height

This commit is contained in:
0ceanSlim 2024-01-31 17:02:18 -05:00
parent 8841a01869
commit 42a6691714
15 changed files with 36 additions and 17 deletions

BIN
static/img/family/beast.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 884 B

BIN
static/img/family/bird.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/img/family/boss.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 981 B

BIN
static/img/family/bug.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 590 B

BIN
static/img/family/devil.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 727 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 957 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 919 B

BIN
static/img/family/plant.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 921 B

BIN
static/img/family/slime.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 473 B

BIN
static/img/family/water.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 691 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 809 B

View File

@ -552,10 +552,6 @@ video {
margin: 1rem; margin: 1rem;
} }
.mb-2 {
margin-bottom: 0.5rem;
}
.ml-4 { .ml-4 {
margin-left: 1rem; margin-left: 1rem;
} }
@ -576,15 +572,14 @@ video {
display: grid; display: grid;
} }
.h-max {
height: -moz-max-content;
height: max-content;
}
.h-96 { .h-96 {
height: 24rem; height: 24rem;
} }
.h-auto {
height: auto;
}
.w-auto { .w-auto {
width: auto; width: auto;
} }
@ -594,6 +589,10 @@ video {
width: fit-content; width: fit-content;
} }
.flex-1 {
flex: 1 1 0%;
}
.cursor-pointer { .cursor-pointer {
cursor: pointer; cursor: pointer;
} }
@ -606,6 +605,10 @@ video {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
.justify-center {
justify-content: center;
}
.gap-1 { .gap-1 {
gap: 0.25rem; gap: 0.25rem;
} }
@ -641,6 +644,18 @@ video {
padding: 1rem; padding: 1rem;
} }
.pl-2 {
padding-left: 0.5rem;
}
.pr-2 {
padding-right: 0.5rem;
}
.text-center {
text-align: center;
}
.font-mono { .font-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
} }

View File

@ -12,15 +12,15 @@
<body class="font-mono text-white bg-slate-700"> <body class="font-mono text-white bg-slate-700">
<div id="breedingCombinations"> <div id="breedingCombinations">
{% if selected_monster %} {% if selected_monster %}
<h2 class="mt-4 text-xl font-bold"> <h2 class="text-xl font-bold text-center">
Possible Breeding Pairs for {{ selected_monster.name }} Breeding Pairs
</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="text-lg font-bold">Base</h3> <h3 class="text-lg font-bold">Base</h3>
<ul> <ul>
{% for combination in selected_monster.base_combinations %} {% for combination in selected_monster.base_combinations %}
<li class="cursor-pointer hover:text-red-700 w-fit"> <li class="text-center cursor-pointer hover:text-red-700 w-fit">
<!-- Add a class to make the monster name clickable --> <!-- Add a class to make the monster name clickable -->
<span class="monster-name" data-name="{{ combination }}">{{ combination }}</span> <span class="monster-name" data-name="{{ combination }}">{{ combination }}</span>
</li> </li>

View File

@ -22,18 +22,22 @@
<select id="monsterDropdown" class="p-2 rounded-md bg-slate-800"> <select id="monsterDropdown" class="p-2 rounded-md bg-slate-800">
<option value="">All Monsters</option> <option value="">All Monsters</option>
</select> </select>
<div id="modules" class="flex"> <div id="modules" class="flex mt-4">
<iframe <iframe
id="monsterIframe" id="monsterIframe"
src="" src=""
class="w-auto mt-4 ml-4 border-2 border-teal-500 rounded-md h-96" class="pl-2 pr-2 ml-4 border-2 border-teal-500 rounded-md"
height="456"
width="272"
></iframe> ></iframe>
<iframe <iframe
id="breedingIframe" id="breedingIframe"
src="" src=""
class="w-auto p-2 mt-4 ml-4 border-2 border-teal-500 rounded-md" class="p-2 ml-4 border-2 border-teal-500 rounded-md"
></iframe> height="200"
width="272">
</iframe>
</div> </div>
</div> </div>
<script src="{{ url_for('static', filename='js/index.js') }}"></script> <script src="{{ url_for('static', filename='js/index.js') }}"></script>

View File

@ -11,7 +11,7 @@
<div> <div>
<h2>{{ monster.name }}</h2> <h2>{{ monster.name }}</h2>
<p><strong>Family:</strong> {{ monster.family }}</p> <p><strong>Family:</strong> {{ monster.family }}</p>
<div class="mt-2 mb-2 stats"> <div class="Stats">
<p><strong>Stats:</strong></p> <p><strong>Stats:</strong></p>
<ul> <ul>
<div class="grid grid-cols-2 gap-1"> <div class="grid grid-cols-2 gap-1">