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"); const fab_wrapper = document.createElement("div");
fab_wrapper.setAttribute("id", "fab-wrapper"); 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.classList.add("fab-button");
fab_regress.setAttribute("id", "fab-regress"); 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.classList.add("fab-button");
fab_advance.setAttribute("id", "fab-advance"); fab_advance.setAttribute("id", "fab-advance");

45
style.css
View File

@ -152,19 +152,54 @@ html {
#fab-wrapper { #fab-wrapper {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: 20px; left: 50%;
transform: translateX(-50%);
z-index: 1000; z-index: 1000;
} }
#fab-wrapper .fab-button { #fab-wrapper .fab-button {
display: inline-block; display: inline-block;
white-space: pre-wrap; white-space: pre-wrap;
border: thin solid gray; border-radius: 50%;
border-radius: 0.5em;
font-size: 1em; font-size: 1em;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
margin: 0.5em; margin: 0;
padding: 0.5em; padding: 0;
cursor: pointer; 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);
}