ENSEEIHT/projet-application-web
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: début des descriptions des pixels

Browse source
This commit is contained in:
gdamms 2022-04-23 21:10:32 +02:00
parent 2259efb048
commit 8422886f91
2 changed files with 21 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/front/index.html
View file

@ -85,7 +85,12 @@
<div class="pixel-container"> <div class="pixel-container">
<table> <table>
<tr> <tr>
<td class="pixel" id="r0c0"></td> <td class="pixel" id="r0c0">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
</td>
<td class="pixel" id="r0c1"></td> <td class="pixel" id="r0c1"></td>
<td class="pixel" id="r0c2"></td> <td class="pixel" id="r0c2"></td>
<td class="pixel" id="r0c3"></td> <td class="pixel" id="r0c3"></td>
@ -205,9 +210,6 @@
<td class="pixel" id="r9c9"></td> <td class="pixel" id="r9c9"></td>
</tr> </tr>
</table> </table>
<div class="pixel-description">
Description
</div>
</div> </div>
</body> </body>

17
src/front/pixels.css
View file

@ -6,11 +6,17 @@
height: 1000px; height: 1000px;
} }
table {
--side: 80px;
table-layout: fixed;
width: calc(10 * var(--side));
height: calc(10 * var(--side));
}
.pixel { .pixel {
background: #fff; background: #fff;
width: 80px; width: var(--side);
height: 80px; height: var(--side);
} }
.pixel:hover { .pixel:hover {
@ -25,3 +31,10 @@ table {
.pixel-description { .pixel-description {
position: absolute; position: absolute;
} }
.info-pixel {
position: relative;
width: 200px;
height: 200px;
left: var(--side);
}