Skip to content

Commit

Permalink
Move pseudo column class to the container div of submit buttons
Browse files Browse the repository at this point in the history 
Add new color classes to reduce inline CSS
  • Loading branch information
@SteveMicroNova
SteveMicroNova committed Dec 9, 2024
1 parent 001abbf commit 43e00c2
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 13 deletions.
22 changes: 22 additions & 0 deletions amplipi/updater/static/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,3 +134,25 @@ hr {
float: right;
}
}

.wide-button{
width: 100%;
}

/*
The following classes have a :hover counterpart to counter the buttons they're used
on having a default :hover that sets them back to the default blue when not overridden
*/
.error{
background-color: #DD0000;
}
.error:hover{
background-color: #DD0000;
}

.success{
background-color: #00AA00;
}
.success:hover{
background-color: #00AA00;
}
26 changes: 13 additions & 13 deletions amplipi/updater/static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,8 +102,8 @@ <h1><span class="text-white">Ampli</span><span class="text-danger">Pi</span></h1
<div class="tab-pane fade text-left column-container" id="admin-settings" role="tabpanel" aria-labelledby="admin-settings-tab">
<script>
function setVisibility(visible, ...others){
// Sets visibility of the first element to inline, the rest to none
visible.style.display = 'inline';
// Sets visibility of the first element to block, the rest to none
visible.style.display = 'block';
for(i=0; i < others.length; i++){
others[i].style.display = 'none';
}
Expand Down Expand Up @@ -218,13 +218,13 @@ <h6 class="card-header">
<label for="confirm-password" >Confirm Password:</label>
<input id="confirm-password" type="password" class="pseudo-column">
</div>
<div>
<a id="password-submit" role="button" class="btn btn-primary btn-sm text-center pseudo-column" onClick="set_password();">Update Password</a>
<a id="password-success" role="button" class="btn btn-primary btn-sm text-center pseudo-column" style="display: none; background-color: #00AA00;">Success!</a>
<a id="password-fail" role="button" class="btn btn-primary btn-sm text-center pseudo-column" style="display: none; background-color: #DD0000;">Failure...</a>
<a id="password-no-match" role="button" class="btn btn-primary btn-sm text-center pseudo-column" style="display: none; background-color: #DD0000;">Passwords do not match!</a>
<div class="pseudo-column">
<a id="password-submit" role="button" class="btn btn-primary btn-sm text-center wide-button" onClick="set_password();">Update Password</a>
<a id="password-success" role="button" class="btn btn-primary btn-sm text-center wide-button success" style="display: none;">Success!</a>
<a id="password-fail" role="button" class="btn btn-primary btn-sm text-center wide-button error" style="display: none;">Failure...</a>
<a id="password-no-match" role="button" class="btn btn-primary btn-sm text-center wide-button error" style="display: none;">Passwords do not match!</a>
<div id="password-spinner" style="display: none;">
<i class="fa fa-circle-o-notch fa-spin pseudo-column" style="font-size:24px"></i>
<i class="fa fa-circle-o-notch fa-spin" style="font-size:24px"></i>
</div>
</div>
</div>
Expand All @@ -251,12 +251,12 @@ <h6 class="card-header">
</label>
<input id="persist-input" class="pseudo-column"/>
</div>
<div>
<a id="persist-submit" role="button" class="btn btn-primary btn-sm text-center pseudo-column" onClick="setPersist()">Save Persistence & Delay</a>
<a id="persist-success" role="button" class="btn btn-primary btn-sm text-center pseudo-column" style="display: none; background-color: #00AA00;">Success!</a>
<a id="persist-fail" role="button" class="btn btn-primary btn-sm text-center pseudo-column" style="display: none; background-color: #DD0000;">Failure...</a>
<div class="pseudo-column">
<a id="persist-submit" role="button" class="btn btn-primary btn-sm text-center wide-button" onClick="setPersist()">Save Persistence & Delay</a>
<a id="persist-success" role="button" class="btn btn-primary btn-sm text-center wide-button success" style="display: none;">Success!</a>
<a id="persist-fail" role="button" class="btn btn-primary btn-sm text-center wide-button error" style="display: none;">Failure...</a>
<div id="persist-spinner" style="display: none;">
<i class="fa fa-circle-o-notch fa-spin pseudo-column" style="font-size:24px"></i>
<i class="fa fa-circle-o-notch fa-spin" style="font-size:24px"></i>
</div>
</div>
</div>
Expand Down

0 comments on commit 43e00c2

Please sign in to comment.