asolkar/web-workout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesigned buttons

Browse Source 
Using CSS icons instead of text
This commit is contained in:
Mahesh Asolkar 2025-03-29 19:31:53 -07:00
parent 7d7c89a0c9
commit 115728fe58
Signed by: asolkar
GPG Key ID: 371CA8164433BDCC
2 changed files with 42 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Workout.js
View File

@ -401,10 +401,10 @@ render_fab() {
const fab_wrapper = document.createElement("div");
fab_wrapper.setAttribute("id", "fab-wrapper");
const fab_regress = this.text_element("button", "<< Regress");
const fab_regress = this.text_element("button", " ");
fab_regress.classList.add("fab-button");
fab_regress.setAttribute("id", "fab-regress");
const fab_advance = this.text_element("button", "Advance >>");
const fab_advance = this.text_element("button", " ");
fab_advance.classList.add("fab-button");
fab_advance.setAttribute("id", "fab-advance");

45
style.css
View File

@ -152,19 +152,54 @@ html {
#fab-wrapper {
position: fixed;
bottom: 20px;
right: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}
#fab-wrapper .fab-button {
display: inline-block;
white-space: pre-wrap;
border: thin solid gray;
border-radius: 0.5em;
border-radius: 50%;
font-size: 1em;
text-align: center;
vertical-align: middle;
margin: 0.5em;
padding: 0.5em;
margin: 0;
padding: 0;
cursor: pointer;
}
#fab-wrapper #fab-regress {
border: 0.4em solid gray;
width: 3em;
height: 3em;
}
#fab-wrapper #fab-regress:after {
content: '';
display: inline-block;
width: 0.8em;
height: 0.8em;
margin-top: 0.2em;
margin-left: 0.2em;
border-top: 0.4em solid gray;
border-right: 0.4em solid gray;
transform: rotate(-135deg);
}
#fab-wrapper #fab-advance {
border: 0.4em solid gray;
width: 4em;
height: 4em;
margin-left: 1em;
}
#fab-wrapper #fab-advance:after {
content: '';
display: inline-block;
width: 1.2em;
height: 1.2em;
margin-bottom: -0.2em;
margin-right: 0.6em;
border-top: 0.4em solid gray;
border-right: 0.4em solid gray;
transform: rotate(45deg);
}