logan/ThePlaceHolders
1
0
Fork 0
mirror of https://github.com/adanrsantos/ThePlaceHolders.git synced 2024-12-16 03:40:38 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

changed toolbar, not finished

Browse source
This commit is contained in:
th3keyboard 2024-11-13 18:31:14 -06:00
parent bc1fffe07d
commit 643e535a1f
2 changed files with 48 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
static/canvas.css
View file

@ -86,21 +86,26 @@ html, body {
bottom: 0;
}
.toolbarItems {
display: flex;
flex-direction: column;
justify-content: start;
font-weight: 900;
.toolbarItems label, input {
float: left;
padding: 8px;
font-size: 14px;
color: white;
text-align: center;
height: 20px;
width: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.strokePicker {
.toolbarItems button {
display: flex;
flex-direction: row;
justify-content: space-around;
float: right;
padding: 16px;
}
.strokePicker{
margin: 2px;
padding: 0;
margin: 0;
width: 100%;
}
.strokePicker:hover {
@ -149,4 +154,32 @@ canvas {
.toolbar {
font-size: 80%;
}
.toolbarItems label, input {
float: left;
padding: 4px;
font-size: 7.5px;
color: white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.toolbarItems button {
display: flex;
flex-direction: row;
justify-content: space-around;
float: right;
padding: 8px;
padding-left: 24px;
}
.strokePicker{
margin: 2px;
height: 16px;
width: 60px;
}
.strokePicker:hover {
cursor: pointer;
}
}

16
static/canvas.html
View file

@ -22,22 +22,14 @@
<!--note to self: below IS the canvas-->
<!--<div class="canvasCont">-->
<canvas id="canvas" width="500" height="500" style="border:1px solid #000000;" alt="canvas"></canvas>
<div id="toolbar" class="d-flex align-items-center toolbar">
<div class="toolbarItems">
<!--extra space for toolbar-->
</div>
<div class="toolbarItems">
<label for="stroke">Strokes</label>
<input id="stroke" name="stroke" type="color" class="strokePicker">
</div>
<div class="toolbarItems">
<!--extra space for toolbar-->
</div>
</div>
<!--</div>-->
<!--note to self: above IS the canvas-->
</div>
<div id="toolbar" class="d-flex toolbar flex-wrap">
<div class="toolbarItems">
<label for="stroke">Strokes</label>
<input id="stroke" name="stroke" type="color" class="strokePicker">
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(255, 255, 255);" type="button"></button>
</div>