mirror/galene
1
Fork 0
mirror of https://github.com/jech/galene.git synced 2024-11-14 12:45:58 +01:00
Code Activity

Improve design of login box

Browse source 
Reorganize radio buttons also.
This commit is contained in:
Alain Takoudjou 2020-12-02 11:15:36 +01:00 committed by Juliusz Chroboczek
parent 50ba4d97f7
commit 6b4d351295
2 changed files with 50 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
static/galene.css
View file

@ -138,6 +138,7 @@
.btn { .btn {
display: inline-block; display: inline-block;
font-weight: 400; font-weight: 400;
font-size: 1em;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
@ -557,15 +558,21 @@ textarea.form-reply {
.login-container { .login-container {
height: calc(var(--vh, 1vh) * 100 - 56px); height: calc(var(--vh, 1vh) * 100 - 56px);
position: relative; position: relative;
display: block; display: flex;
justify-content: center;
} }
.login-box { .login-box {
position: absolute; width: 20em;
top: 15%; padding: 1em;
left: 25%; margin: 5em auto;
width: 35em; height: 23em;
padding: 2em; background: #fcfcfc;
}
.login-box .connect {
width: 100%;
text-align: center;
} }
.login-box h2 { .login-box h2 {
@ -674,6 +681,20 @@ h1 {
display: inline display: inline
} }
.userform label {
min-width: 3em;
display: inline-block;
padding-top: 10px;
}
.userform input[type="text"], .userform input[type="password"] {
width: 100%;
}
.switch-radio {
margin: 0;
}
.invisible { .invisible {
display: none; display: none;
} }
@ -786,8 +807,8 @@ h1 {
} }
#connectbutton { #connectbutton {
margin-left: 80px; margin-top: 1em;
margin-top: 15px; padding: 0.37rem 1.5rem;
} }
#input { #input {
@ -1211,7 +1232,7 @@ header .collapse {
} }
.login-box { .login-box {
left: calc(100vw / 2 - 10.5em); background: transparent;
} }
.coln-left { .coln-left {

22
static/galene.html
View file

@ -110,21 +110,31 @@
<div class="login-container invisible" id="login-container"> <div class="login-container invisible" id="login-container">
<div class="login-box"> <div class="login-box">
<form id="userform" class="userform"> <form id="userform" class="userform">
<label for="username">Username:</label> <label for="username">Username</label>
<input id="username" type="text" name="username" <input id="username" type="text" name="username"
autocomplete="username" class="form-control"/> autocomplete="username" class="form-control"/>
<label for="password">Password:</label> <label for="password">Password</label>
<input id="password" type="password" name="password" <input id="password" type="password" name="password"
autocomplete="current-password" class="form-control"/> autocomplete="current-password" class="form-control"/>
<label>Present:</label> <label>Auto ready</label>
<div class="present-switch">
<p class="switch-radio">
<input id="presentoff" type="radio" name="presentradio" value="" checked/> <input id="presentoff" type="radio" name="presentradio" value="" checked/>
<label for="presentoff">nothing</label> <label for="presentoff">Disabled</label>
</p>
<p class="switch-radio">
<input id="presentmike" type="radio" name="presentradio" value="mike"/> <input id="presentmike" type="radio" name="presentradio" value="mike"/>
<label for="presentmike">microphone</label> <label for="presentmike">Enable microphone</label>
</p>
<p class="switch-radio">
<input id="presentboth" type="radio" name="presentradio" value="both"/> <input id="presentboth" type="radio" name="presentradio" value="both"/>
<label for="presentboth">camera and microphone</label> <label for="presentboth">Enable camera and microphone</label>
</p>
</div>
<div class="clear"></div> <div class="clear"></div>
<div class="connect">
<input id="connectbutton" type="submit" class="btn btn-blue" value="Connect"/> <input id="connectbutton" type="submit" class="btn btn-blue" value="Connect"/>
</div>
</form> </form>
<div class="clear"></div> <div class="clear"></div>
</div> </div>