fixed Label for Username overlaps the username

[grufocom]

On the settings page the label for username overlaps the username.
fixed it by disabling the transform css

checked signin.html template file where the label is also used - no side effects.

[donaldzou]

Hi! Thank you for doing these PR. I'll merge my dev branch to the main branch later this month, and I'll merge your PRs ;)

[grufocom]

Hi Donald, thanks - are only small changes, not worth mentioning ;-)

I am not familiar with python but would love to help more!
I tried to add two threads to dashboard.py - one that starts the webserver and another that does something every x-seconds. it worked, if i find time i will try to write values to rrd.

[donaldzou]

For sure!! I'm wondering which browser that you used caused the overlapping issue?

[grufocom]

I used chrome and brave browser

[donaldzou]

Hmm that's weird, because i use chrome to developed this and i have no problem

[grufocom]

Hi Donald,
when I checkout with "-b 3.0.5" I do not have the "label" in my dashboard.css.
Only when I checkout without "-b 3.0.5" the dashboard.css file has included the "label" style for username and password.
And then there is the username problem on both browsers chrome and brave. :-)

[vnetmx]

I have the same issue as @grufocom

[ghost]

It should perhaps be made in the line 414 (dashboard.css):

.login-container #username, #password{
   padding: 0.6rem calc( 0.9rem + 32px );
   height: inherit;
}

.login-container label[for="username"], label[for="password"]{
   font-size: 1rem;
   margin: 0 !important;
   transform: translateY(30px) translateX(16px);
   padding: 0;
}

[glory7sa]

I'm sorry I'm very poorly versed in this matter, so How could I write like that.
fixed the button
fix-Update Account
fix-Update Password
the path to the file - /root/wgdashboard/src/static/css/dashboard.css
contents of the corrected file - dashboard.css
`body {
font-size: .875rem;
/font-family: 'Poppins', sans-serif;/
}

.feather {
width: 16px;
height: 16px;
vertical-align: text-bottom;
}

/*

• Sidebar
  */

.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100; /* Behind the navbar /
padding: 48px 0 0; / Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

/@media (max-width: 767.98px) {/
/* .sidebar {/
/ top: 5rem;/
/ }/
/}*/

.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}

.sidebar .nav-link {
font-weight: 500;
color: #333;
transition: 0.2s cubic-bezier(0.82, -0.07, 0, 1.01);
}

.nav-link:hover {
padding-left: 30px;
background-color: #dfdfdf;
}

.sidebar .nav-link .feather {
margin-right: 4px;
color: #999;
}

.sidebar .nav-link.active {
color: #007bff;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
color: inherit;
}

.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;
}

/*

• Navbar
  */

.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
background-color: rgba(0, 0, 0, .25);
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .navbar-toggler {
top: .25rem;
right: 1rem;
}

.form-control{
transition: all 0.2s ease-in-out;
}

.form-control:disabled{
cursor: not-allowed;
}

.navbar .form-control {
padding: .75rem 1rem;
border-width: 0;
border-radius: 0;
}

.form-control-dark {
color: #fff;
background-color: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
border-color: transparent;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

.dot{
width: 10px;
height: 10px;
border-radius: 50px;
display: inline-block;
margin-left: 10px;
}

.dot-running{
background-color: #28a745!important;
box-shadow: 0 0 0 0.2rem #28a74545;
}

.h6-dot-running{
margin-left: 0.3rem;
}

.dot-stopped{
background-color: #6c757d!important;
}

.card-running{
border-color: #28a745;
}

.info h6{
line-break: anywhere;
transition: 0.2s ease-in-out;
}

.info .row .col-sm{
display: flex;
flex-direction: column;
}

.info .row .col-sm small{
display: flex;

}

.info .row .col-sm small strong:last-child(1){
margin-left: auto !important;
}

.btn-control{
border: none !important;
padding: 0 1rem 0 0;
}

.btn-control:active, .btn-control:focus{
background-color: transparent !important;
border: none !important;
box-shadow: none;
}

.btn-qrcode-peer{
padding: 0 !important;
}

.btn-qrcode-peer:active, .btn-qrcode-peer:hover{
transform: scale(0.9) rotate(180deg);
border: 0 !important;
}

.btn-download-peer:active, .btn-download-peer:hover{
color: #17a2b8 !important;
transform: translateY(5px);
}

.share_peer_btn_group .btn-control{
margin: 0 0 0 1rem;
padding: 0 !important;
transition: all 0.4s cubic-bezier(1, -0.43, 0, 1.37);
}

.btn-control:hover{
background: white;
}

.btn-delete-peer:hover{
color: #dc3545;
}

.btn-setting-peer:hover{
color:#007bff
}

.btn-download-peer:hover{
color: #17a2b8;
}

.login-container{
padding: 2rem;
}

@media (max-width: 992px){
.card-col{
margin-bottom: 1rem;
}
}

.switch{
font-size: 2rem;
}
.switch:hover{
text-decoration: none
}

.btn-group-label:hover{
color: #007bff;
border-color: #007bff;
background: white;
}

/.peer_data_group{/
/* text-align: right;/
/}*/

@media (max-width: 768px) {
.peer_data_group{
text-align: left;
}
}

.index-switch{
text-align: right;
}

main{
margin-bottom: 3rem;
}

.peer_list{
margin-bottom: 7rem
}

@media (max-width: 768px) {
.add_btn{
bottom: 1.5rem !important;
}

.peer_list{
    margin-bottom: 7rem !important;
}

}

.btn-manage-group{
z-index: 99;
position: fixed;
bottom: 3rem;
right: 2rem;
display: flex;
}

.btn-manage-group .setting_btn_menu{
position: absolute;
top: -124px;
background-color: white;
padding: 1rem 0;
right: 0;
box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
border-radius: 10px;
min-width: 200px;
display: none;
transform: translateY(-30px);
opacity: 0;
transition: all 0.3s cubic-bezier(0.58, 0.03, 0.05, 1.28);
}

.btn-manage-group .setting_btn_menu.show{
display: block;
}

.setting_btn_menu.showing{
transform: translateY(0px);
opacity: 1;
}

.setting_btn_menu a{
display: flex;
padding: 0.5rem 1rem;
transition: all 0.1s ease-in-out;
font-size: 1rem;
align-items: center;
cursor: pointer;
}

.setting_btn_menu a:hover{
background-color: #efefef;
text-decoration: none;
}

.setting_btn_menu a i{
margin-right: auto !important;
}

.add_btn{
height: 54px;
z-index: 99;
border-radius: 100px !important;
padding: 0 14px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
margin-right: 1rem;
font-size: 1.5rem;
}

.setting_btn{
height: 54px;
z-index: 99;
border-radius: 100px !important;
padding: 0 14px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
font-size: 1.5rem;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@Keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating::before {
-webkit-animation: rotating 0.75s linear infinite;
-moz-animation: rotating 0.75s linear infinite;
-ms-animation: rotating 0.75s linear infinite;
-o-animation: rotating 0.75s linear infinite;
animation: rotating 0.75s linear infinite;
}

.peer_private_key_textbox_switch{
position: absolute;
right: 2rem;
transform: translateY(-28px);
font-size: 1.2rem;
cursor: pointer;
}

#peer_private_key_textbox, #private_key, #public_key{
font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

.progress-bar{
transition: 0.3s ease-in-out;
}

.key{
transition: 0.2s ease-in-out;
cursor: pointer;
}

.key:hover{
color: #007bff;
}

.card{
border-radius: 10px;
}

.peer_list .card .button-group{
height: 22px;
}

.form-control{
border-radius: 10px;
}

.btn{
border-radius: 8px;
padding: 0.6rem 0.9em;
}

#username, #password{
padding: 0.6rem calc( 0.9rem + 32px );
height: inherit;
}

label[for="username"], label[for="password"]{
font-size: 1rem;
margin: 0 !important;
/* transform: translateY(30px) translateX(16px); */
padding: 0;
}

/label[for="password"]{/
/* transform: translateY(32px) translateX(16px);/
/}*/

.modal-content{
border-radius: 10px;
}

.tooltip-inner{
font-size: 0.8rem;
}

@-webkit-keyframes loading {
0%{
background-color: #dfdfdf;
}
50%{
background-color: #adadad;
}
100%{
background-color: #dfdfdf;
}
}
@-moz-keyframes loading {
0%{
background-color: #dfdfdf;
}
50%{
background-color: #adadad;
}
100%{
background-color: #dfdfdf;
}
}

.conf_card{
transition: 0.2s ease-in-out;
}

.conf_card:hover{
border-color: #007bff;
cursor: pointer;
}

.info_loading{
animation: loading 2s infinite ease-in-out;
border-radius: 5px;
height: 19px;
transition: 0.3s ease-in-out;
}

#conf_status_btn{
transition: 0.2s ease-in-out;
}

#conf_status_btn.info_loading{
height: 38px;
border-radius: 5px;
animation: loading 3s infinite ease-in-out;
}

#qrcode_img img{
width: 100%;
}

#selected_ip_list .badge, #selected_peer_list .badge{
margin: 0.1rem
}

#add_modal.ip_modal_open{
transition: filter 0.2s ease-in-out;
filter: brightness(0.5);
}

#delete_bulk_modal .list-group a.active{
background-color: #dc3545;
border-color: #dc3545;
}

#selected_peer_list{
max-height: 80px;
overflow-y: scroll;
overflow-x: hidden;
}

.no-response{
width: 100%;
height: 100%;
position: fixed;
background: #000000ba;
z-index: 10000;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 1s ease-in-out;
}

.no-response.active{
display: flex;
}

.no-response.active.show{
opacity: 100;
}

.no-response .container > *{
text-align: center;
}

.no-responding{
transition: all 1s ease-in-out;
filter: blur(10px);
}

pre.index-alert{
margin-bottom: 0;
padding: 1rem;
background-color: #343a40;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
margin-top: 1rem;
color: white;
}`

[glory7sa]

If there is a way to attach a file, please tell me how.

[glory7sa]