supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Style connect window without bootstrap

Browse Source
This commit is contained in:
Pavel Djundik 2019-12-12 13:20:07 +02:00
parent 0e8b9fdd5c
commit b592657f7d
2 changed files with 196 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
client/components/NetworkForm.vue
View File

@ -4,8 +4,6 @@
<SidebarToggle /> <SidebarToggle />
</div> </div>
<form class="container" method="post" action="" @submit.prevent="onSubmit"> <form class="container" method="post" action="" @submit.prevent="onSubmit">
<div class="row">
<div class="col-sm-12">
<h1 class="title"> <h1 class="title">
<template v-if="defaults.uuid"> <template v-if="defaults.uuid">
<input type="hidden" name="uuid" :value="defaults.uuid" /> <input type="hidden" name="uuid" :value="defaults.uuid" />
@ -15,22 +13,14 @@
<template v-if="config.public">The Lounge - </template> <template v-if="config.public">The Lounge - </template>
Connect Connect
<template v-if="!config.displayNetwork"> <template v-if="!config.displayNetwork">
<template v-if="config.lockNetwork"> <template v-if="config.lockNetwork"> to {{ defaults.name }} </template>
to {{ defaults.name }}
</template>
</template> </template>
</template> </template>
</h1> </h1>
</div>
<template v-if="config.displayNetwork"> <template v-if="config.displayNetwork">
<div>
<div class="col-sm-12">
<h2>Network settings</h2> <h2>Network settings</h2>
</div> <div class="connect-row">
<div class="col-sm-3">
<label for="connect:name">Name</label> <label for="connect:name">Name</label>
</div>
<div class="col-sm-9">
<input <input
id="connect:name" id="connect:name"
class="input" class="input"
@ -39,10 +29,9 @@
maxlength="100" maxlength="100"
/> />
</div> </div>
<div class="col-sm-3"> <div class="connect-row">
<label for="connect:host">Server</label> <label for="connect:host">Server</label>
</div> <div class="input-wrap">
<div class="col-sm-6 col-xs-8">
<input <input
id="connect:host" id="connect:host"
class="input" class="input"
@ -53,10 +42,9 @@
required required
:disabled="config.lockNetwork ? true : false" :disabled="config.lockNetwork ? true : false"
/> />
</div> <span id="connect:portseparator">:</span>
<div class="col-sm-3 col-xs-4">
<div class="port">
<input <input
id="connect:port"
class="input" class="input"
type="number" type="number"
min="1" min="1"
@ -68,8 +56,9 @@
/> />
</div> </div>
</div> </div>
<div class="clearfix" /> <div class="connect-row">
<div class="col-sm-9 col-sm-offset-3"> <label></label>
<div class="input-wrap">
<label class="tls"> <label class="tls">
<input <input
type="checkbox" type="checkbox"
@ -79,8 +68,6 @@
/> />
Use secure connection (TLS) Use secure connection (TLS)
</label> </label>
</div>
<div class="col-sm-9 col-sm-offset-3">
<label class="tls"> <label class="tls">
<input <input
type="checkbox" type="checkbox"
@ -91,16 +78,12 @@
Only allow trusted certificates Only allow trusted certificates
</label> </label>
</div> </div>
<div class="clearfix" />
</div> </div>
</template> </template>
<div class="col-sm-12">
<h2>User preferences</h2> <h2>User preferences</h2>
</div> <div class="connect-row">
<div class="col-sm-3">
<label for="connect:nick">Nick</label> <label for="connect:nick">Nick</label>
</div>
<div class="col-sm-9">
<input <input
id="connect:nick" id="connect:nick"
class="input nick" class="input nick"
@ -112,10 +95,8 @@
/> />
</div> </div>
<template v-if="!config.useHexIp"> <template v-if="!config.useHexIp">
<div class="col-sm-3"> <div class="connect-row">
<label for="connect:username">Username</label> <label for="connect:username">Username</label>
</div>
<div class="col-sm-9">
<input <input
id="connect:username" id="connect:username"
ref="usernameInput" ref="usernameInput"
@ -126,11 +107,9 @@
/> />
</div> </div>
</template> </template>
<div class="col-sm-3"> <div class="connect-row">
<label for="connect:password">Password</label> <label for="connect:password">Password</label>
</div> <RevealPassword class="input-wrap password-container" v-slot:default="slotProps">
<div class="col-sm-9 password-container">
<RevealPassword v-slot:default="slotProps">
<input <input
id="connect:password" id="connect:password"
v-model="defaults.password" v-model="defaults.password"
@ -141,10 +120,8 @@
/> />
</RevealPassword> </RevealPassword>
</div> </div>
<div class="col-sm-3"> <div class="connect-row">
<label for="connect:realname">Real name</label> <label for="connect:realname">Real name</label>
</div>
<div class="col-sm-9">
<input <input
id="connect:realname" id="connect:realname"
class="input" class="input"
@ -154,10 +131,8 @@
/> />
</div> </div>
<template v-if="defaults.uuid"> <template v-if="defaults.uuid">
<div class="col-sm-3"> <div class="connect-row">
<label for="connect:commands">Commands</label> <label for="connect:commands">Commands</label>
</div>
<div class="col-sm-9">
<textarea <textarea
id="connect:commands" id="connect:commands"
class="input" class="input"
@ -166,31 +141,23 @@
:value="defaults.commands ? defaults.commands.join('\n') : ''" :value="defaults.commands ? defaults.commands.join('\n') : ''"
/> />
</div> </div>
<div class="col-sm-9 col-sm-offset-3"> <div>
<button type="submit" class="btn" :disabled="disabled ? true : false"> <button type="submit" class="btn" :disabled="disabled ? true : false">
Save Save
</button> </button>
</div> </div>
</template> </template>
<template v-else> <template v-else>
<div class="col-sm-3"> <div class="connect-row">
<label for="connect:channels">Channels</label> <label for="connect:channels">Channels</label>
<input id="connect:channels" class="input" name="join" :value="defaults.join" />
</div> </div>
<div class="col-sm-9"> <div>
<input
id="connect:channels"
class="input"
name="join"
:value="defaults.join"
/>
</div>
<div class="col-sm-9 col-sm-offset-3">
<button type="submit" class="btn" :disabled="disabled ? true : false"> <button type="submit" class="btn" :disabled="disabled ? true : false">
Connect Connect
</button> </button>
</div> </div>
</template> </template>
</div>
</form> </form>
</div> </div>
</template> </template>

77
client/css/style.css
View File

@ -142,6 +142,7 @@ button {
outline: none; outline: none;
padding: 0; padding: 0;
user-select: inherit; user-select: inherit;
cursor: pointer;
} }
code, code,
@ -191,6 +192,10 @@ kbd {
box-shadow: 0 2px 0 #bbb, inset 0 1px 1px #fff, inset 0 -1px 3px #ccc; box-shadow: 0 2px 0 #bbb, inset 0 1px 1px #fff, inset 0 -1px 3px #ccc;
} }
p {
margin: 0 0 10px;
}
.btn { .btn {
border: 2px solid var(--button-color); border: 2px solid var(--button-color);
border-radius: 3px; border-radius: 3px;
@ -243,8 +248,10 @@ kbd {
} }
.container { .container {
padding: 0 15px;
margin-bottom: 20px; margin-bottom: 20px;
max-width: 480px; width: 480px;
align-self: center;
touch-action: pan-y; touch-action: pan-y;
} }
@ -917,9 +924,10 @@ background on hover (unless active) */
border-color: #84ce88; border-color: #84ce88;
} }
#user-specified-css-input { textarea.input {
resize: vertical; resize: vertical;
height: 10em; height: 100px;
min-height: 35px;
padding: 6px 10px; padding: 6px 10px;
line-height: 1.5; line-height: 1.5;
} }
@ -1769,30 +1777,48 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
width: 100%; width: 100%;
} }
#connect .connect-row {
display: flex;
}
#connect .connect-row > .input,
#connect .connect-row > .input-wrap {
flex-grow: 1;
}
#connect label { #connect label {
display: block; width: 25%;
flex-shrink: 0;
margin-top: 11px; margin-top: 11px;
} }
#connect .port::before {
content: ":";
margin: 9px 0 0 -17px;
position: absolute;
}
#connect .tls { #connect .tls {
float: left; width: 100%;
display: block;
margin-top: 6px; margin-top: 6px;
} }
#connect .tls input { #connect .tls input {
float: left;
margin: 3px 10px 0 0; margin: 3px 10px 0 0;
} }
#connect\:host {
width: 70%;
}
#connect\:port {
width: 25%;
}
#connect\:portseparator {
width: 5%;
text-align: center;
display: inline-block;
}
#connect .btn { #connect .btn {
float: left; margin-left: 25%;
margin-top: 30px; margin-top: 15px;
} }
#settings .settings-sync-panel { #settings .settings-sync-panel {
@ -1889,13 +1915,13 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
#sign-in .password-container .reveal-password { #sign-in .password-container .reveal-password {
top: 31px; top: 31px;
right: 0;
} }
.password-container .reveal-password { .password-container .reveal-password {
position: absolute; position: absolute;
top: 2px; top: 2px;
right: 15px; right: 0;
appearance: none;
} }
.password-container .reveal-password span { .password-container .reveal-password span {
@ -2558,6 +2584,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
@media (max-width: 479px) { @media (max-width: 479px) {
.container { .container {
max-width: 100%;
margin: 0; margin: 0;
} }
@ -2565,14 +2592,24 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
width: 100%; width: 100%;
} }
#connect .tls {
margin: 20px 0;
}
.input { .input {
margin-bottom: 2px; margin-bottom: 2px;
} }
#connect .connect-row {
flex-direction: column;
}
#connect .connect-row > .input,
#connect .connect-row > .input-wrap {
flex-grow: 1;
}
#connect .btn {
margin-left: 0;
width: 100%;
}
#chat .messages { #chat .messages {
display: block; display: block;
padding: 5px 0; padding: 5px 0;