mirror/galene
1
Fork 0
mirror of https://github.com/jech/galene.git synced 2024-11-12 19:55:59 +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 {
display: inline-block;
font-weight: 400;
font-size: 1em;
text-align: center;
white-space: nowrap;
vertical-align: middle;
@ -557,15 +558,21 @@ textarea.form-reply {
.login-container {
height: calc(var(--vh, 1vh) * 100 - 56px);
position: relative;
display: block;
display: flex;
justify-content: center;
}
.login-box {
position: absolute;
top: 15%;
left: 25%;
width: 35em;
padding: 2em;
width: 20em;
padding: 1em;
margin: 5em auto;
height: 23em;
background: #fcfcfc;
}
.login-box .connect {
width: 100%;
text-align: center;
}
.login-box h2 {
@ -674,6 +681,20 @@ h1 {
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 {
display: none;
}
@ -786,8 +807,8 @@ h1 {
}
#connectbutton {
margin-left: 80px;
margin-top: 15px;
margin-top: 1em;
padding: 0.37rem 1.5rem;
}
#input {
@ -1211,7 +1232,7 @@ header .collapse {
}
.login-box {
left: calc(100vw / 2 - 10.5em);
background: transparent;
}
.coln-left {

22
static/galene.html
View file

@ -110,21 +110,31 @@
<div class="login-container invisible" id="login-container">
<div class="login-box">
<form id="userform" class="userform">
<label for="username">Username:</label>
<label for="username">Username</label>
<input id="username" type="text" name="username"
autocomplete="username" class="form-control"/>
<label for="password">Password:</label>
<label for="password">Password</label>
<input id="password" type="password" name="password"
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/>
<label for="presentoff">nothing</label>
<label for="presentoff">Disabled</label>
</p>
<p class="switch-radio">
<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"/>
<label for="presentboth">camera and microphone</label>
<label for="presentboth">Enable camera and microphone</label>
</p>
</div>
<div class="clear"></div>
<div class="connect">
<input id="connectbutton" type="submit" class="btn btn-blue" value="Connect"/>
</div>
</form>
<div class="clear"></div>
</div>