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

fixed navbar and toolbar (again)

Browse source
This commit is contained in:
th3keyboard 2024-11-12 17:34:20 -06:00
parent b85edc2ca1
commit 51d48b69c3
2 changed files with 14 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
static/canvas.css
View file

@ -21,16 +21,18 @@ html, body {
} }
.navbarCont { .navbarCont {
position: relative;
background-color: var(--utsa-blue); background-color: var(--utsa-blue);
width: 100%; width: 100%;
text-align: center; text-align: center;
margin-bottom: 10vh; position: fixed;
top: 0;
} }
.navbarCont a { .navbarCont a {
display: flex;
flex-direction: row;
float: left; float: left;
text-align: center; justify-content: space-around;
padding: 12px; padding: 12px;
text-decoration: none; text-decoration: none;
color: var(--utsa-orange); color: var(--utsa-orange);
@ -77,7 +79,8 @@ html, body {
background-color: var(--utsa-blue); background-color: var(--utsa-blue);
width: 100%; width: 100%;
height: auto; height: auto;
margin-top: 11vh; position: fixed;
bottom: 0;
} }
.toolbarItems { .toolbarItems {
@ -122,11 +125,9 @@ canvas {
} }
.navbarCont { .navbarCont {
position: relative;
background-color: var(--utsa-blue); background-color: var(--utsa-blue);
width: 100%; width: 100%;
text-align: center; text-align: center;
margin-bottom: 11vh;
} }
.navbarCont a { .navbarCont a {
@ -140,5 +141,9 @@ canvas {
align-self: center; align-self: center;
height: 500px; height: 500px;
width: 500px; width: 500px;
} }
.toolbar {
font-size: 80%;
}
} }

4
static/canvas.html
View file

@ -24,14 +24,14 @@
<canvas id="canvas" width="500" height="500" style="border:1px solid #000000;" alt="canvas"></canvas> <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 id="toolbar" class="d-flex align-items-center toolbar">
<div class="toolbarItems"> <div class="toolbarItems">
<button id="zoomOut">-</button> <!--extra space for toolbar-->
</div> </div>
<div class="toolbarItems"> <div class="toolbarItems">
<label for="stroke">Strokes</label> <label for="stroke">Strokes</label>
<input id="stroke" name="stroke" type="color" class="strokePicker"> <input id="stroke" name="stroke" type="color" class="strokePicker">
</div> </div>
<div class="toolbarItems"> <div class="toolbarItems">
<button onclick="zoomIn"id="zoomIn">+</button> <!--extra space for toolbar-->
</div> </div>
</div> </div>
<!--</div>--> <!--</div>-->