Style connect window without bootstrap
This commit is contained in:
Pavel Djundik
parent
0e8b9fdd5c
commit
b592657f7d
@ -4,193 +4,160 @@
|
||||
<SidebarToggle />
|
||||
</div>
|
||||
<form class="container" method="post" action="" @submit.prevent="onSubmit">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h1 class="title">
|
||||
<template v-if="defaults.uuid">
|
||||
<input type="hidden" name="uuid" :value="defaults.uuid" />
|
||||
Edit {{ defaults.name }}
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="config.public">The Lounge - </template>
|
||||
Connect
|
||||
<template v-if="!config.displayNetwork">
|
||||
<template v-if="config.lockNetwork">
|
||||
to {{ defaults.name }}
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</h1>
|
||||
</div>
|
||||
<template v-if="config.displayNetwork">
|
||||
<div>
|
||||
<div class="col-sm-12">
|
||||
<h2>Network settings</h2>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<label for="connect:name">Name</label>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
id="connect:name"
|
||||
class="input"
|
||||
name="name"
|
||||
:value="defaults.name"
|
||||
maxlength="100"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<label for="connect:host">Server</label>
|
||||
</div>
|
||||
<div class="col-sm-6 col-xs-8">
|
||||
<input
|
||||
id="connect:host"
|
||||
class="input"
|
||||
name="host"
|
||||
:value="defaults.host"
|
||||
aria-label="Server address"
|
||||
maxlength="255"
|
||||
required
|
||||
:disabled="config.lockNetwork ? true : false"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-sm-3 col-xs-4">
|
||||
<div class="port">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
min="1"
|
||||
max="65535"
|
||||
name="port"
|
||||
:value="defaults.port"
|
||||
aria-label="Server port"
|
||||
:disabled="config.lockNetwork ? true : false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix" />
|
||||
<div class="col-sm-9 col-sm-offset-3">
|
||||
<label class="tls">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="tls"
|
||||
:checked="defaults.tls ? true : false"
|
||||
:disabled="config.lockNetwork ? true : false"
|
||||
/>
|
||||
Use secure connection (TLS)
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-sm-9 col-sm-offset-3">
|
||||
<label class="tls">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="rejectUnauthorized"
|
||||
:checked="defaults.rejectUnauthorized ? true : false"
|
||||
:disabled="config.lockNetwork ? true : false"
|
||||
/>
|
||||
Only allow trusted certificates
|
||||
</label>
|
||||
</div>
|
||||
<div class="clearfix" />
|
||||
</div>
|
||||
<h1 class="title">
|
||||
<template v-if="defaults.uuid">
|
||||
<input type="hidden" name="uuid" :value="defaults.uuid" />
|
||||
Edit {{ defaults.name }}
|
||||
</template>
|
||||
<div class="col-sm-12">
|
||||
<h2>User preferences</h2>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<label for="connect:nick">Nick</label>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<template v-else>
|
||||
<template v-if="config.public">The Lounge - </template>
|
||||
Connect
|
||||
<template v-if="!config.displayNetwork">
|
||||
<template v-if="config.lockNetwork"> to {{ defaults.name }} </template>
|
||||
</template>
|
||||
</template>
|
||||
</h1>
|
||||
<template v-if="config.displayNetwork">
|
||||
<h2>Network settings</h2>
|
||||
<div class="connect-row">
|
||||
<label for="connect:name">Name</label>
|
||||
<input
|
||||
id="connect:nick"
|
||||
class="input nick"
|
||||
name="nick"
|
||||
:value="defaults.nick"
|
||||
id="connect:name"
|
||||
class="input"
|
||||
name="name"
|
||||
:value="defaults.name"
|
||||
maxlength="100"
|
||||
required
|
||||
@input="onNickChanged"
|
||||
/>
|
||||
</div>
|
||||
<template v-if="!config.useHexIp">
|
||||
<div class="col-sm-3">
|
||||
<label for="connect:username">Username</label>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<div class="connect-row">
|
||||
<label for="connect:host">Server</label>
|
||||
<div class="input-wrap">
|
||||
<input
|
||||
id="connect:username"
|
||||
ref="usernameInput"
|
||||
class="input username"
|
||||
name="username"
|
||||
:value="defaults.username"
|
||||
maxlength="512"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<div class="col-sm-3">
|
||||
<label for="connect:password">Password</label>
|
||||
</div>
|
||||
<div class="col-sm-9 password-container">
|
||||
<RevealPassword v-slot:default="slotProps">
|
||||
<input
|
||||
id="connect:password"
|
||||
v-model="defaults.password"
|
||||
id="connect:host"
|
||||
class="input"
|
||||
:type="slotProps.isVisible ? 'text' : 'password'"
|
||||
name="password"
|
||||
maxlength="512"
|
||||
name="host"
|
||||
:value="defaults.host"
|
||||
aria-label="Server address"
|
||||
maxlength="255"
|
||||
required
|
||||
:disabled="config.lockNetwork ? true : false"
|
||||
/>
|
||||
</RevealPassword>
|
||||
<span id="connect:portseparator">:</span>
|
||||
<input
|
||||
id="connect:port"
|
||||
class="input"
|
||||
type="number"
|
||||
min="1"
|
||||
max="65535"
|
||||
name="port"
|
||||
:value="defaults.port"
|
||||
aria-label="Server port"
|
||||
:disabled="config.lockNetwork ? true : false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<label for="connect:realname">Real name</label>
|
||||
<div class="connect-row">
|
||||
<label></label>
|
||||
<div class="input-wrap">
|
||||
<label class="tls">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="tls"
|
||||
:checked="defaults.tls ? true : false"
|
||||
:disabled="config.lockNetwork ? true : false"
|
||||
/>
|
||||
Use secure connection (TLS)
|
||||
</label>
|
||||
<label class="tls">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="rejectUnauthorized"
|
||||
:checked="defaults.rejectUnauthorized ? true : false"
|
||||
:disabled="config.lockNetwork ? true : false"
|
||||
/>
|
||||
Only allow trusted certificates
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
</template>
|
||||
|
||||
<h2>User preferences</h2>
|
||||
<div class="connect-row">
|
||||
<label for="connect:nick">Nick</label>
|
||||
<input
|
||||
id="connect:nick"
|
||||
class="input nick"
|
||||
name="nick"
|
||||
:value="defaults.nick"
|
||||
maxlength="100"
|
||||
required
|
||||
@input="onNickChanged"
|
||||
/>
|
||||
</div>
|
||||
<template v-if="!config.useHexIp">
|
||||
<div class="connect-row">
|
||||
<label for="connect:username">Username</label>
|
||||
<input
|
||||
id="connect:realname"
|
||||
class="input"
|
||||
name="realname"
|
||||
:value="defaults.realname"
|
||||
id="connect:username"
|
||||
ref="usernameInput"
|
||||
class="input username"
|
||||
name="username"
|
||||
:value="defaults.username"
|
||||
maxlength="512"
|
||||
/>
|
||||
</div>
|
||||
<template v-if="defaults.uuid">
|
||||
<div class="col-sm-3">
|
||||
<label for="connect:commands">Commands</label>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<textarea
|
||||
id="connect:commands"
|
||||
class="input"
|
||||
name="commands"
|
||||
placeholder="One raw command per line, each command will be executed on new connection"
|
||||
:value="defaults.commands ? defaults.commands.join('\n') : ''"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-sm-9 col-sm-offset-3">
|
||||
<button type="submit" class="btn" :disabled="disabled ? true : false">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="col-sm-3">
|
||||
<label for="connect:channels">Channels</label>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<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">
|
||||
Connect
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<div class="connect-row">
|
||||
<label for="connect:password">Password</label>
|
||||
<RevealPassword class="input-wrap password-container" v-slot:default="slotProps">
|
||||
<input
|
||||
id="connect:password"
|
||||
v-model="defaults.password"
|
||||
class="input"
|
||||
:type="slotProps.isVisible ? 'text' : 'password'"
|
||||
name="password"
|
||||
maxlength="512"
|
||||
/>
|
||||
</RevealPassword>
|
||||
</div>
|
||||
<div class="connect-row">
|
||||
<label for="connect:realname">Real name</label>
|
||||
<input
|
||||
id="connect:realname"
|
||||
class="input"
|
||||
name="realname"
|
||||
:value="defaults.realname"
|
||||
maxlength="512"
|
||||
/>
|
||||
</div>
|
||||
<template v-if="defaults.uuid">
|
||||
<div class="connect-row">
|
||||
<label for="connect:commands">Commands</label>
|
||||
<textarea
|
||||
id="connect:commands"
|
||||
class="input"
|
||||
name="commands"
|
||||
placeholder="One raw command per line, each command will be executed on new connection"
|
||||
:value="defaults.commands ? defaults.commands.join('\n') : ''"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit" class="btn" :disabled="disabled ? true : false">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="connect-row">
|
||||
<label for="connect:channels">Channels</label>
|
||||
<input id="connect:channels" class="input" name="join" :value="defaults.join" />
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit" class="btn" :disabled="disabled ? true : false">
|
||||
Connect
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -142,6 +142,7 @@ button {
|
||||
outline: none;
|
||||
padding: 0;
|
||||
user-select: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
code,
|
||||
@ -191,6 +192,10 @@ kbd {
|
||||
box-shadow: 0 2px 0 #bbb, inset 0 1px 1px #fff, inset 0 -1px 3px #ccc;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 2px solid var(--button-color);
|
||||
border-radius: 3px;
|
||||
@ -243,8 +248,10 @@ kbd {
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 15px;
|
||||
margin-bottom: 20px;
|
||||
max-width: 480px;
|
||||
width: 480px;
|
||||
align-self: center;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
@ -917,9 +924,10 @@ background on hover (unless active) */
|
||||
border-color: #84ce88;
|
||||
}
|
||||
|
||||
#user-specified-css-input {
|
||||
textarea.input {
|
||||
resize: vertical;
|
||||
height: 10em;
|
||||
height: 100px;
|
||||
min-height: 35px;
|
||||
padding: 6px 10px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@ -1769,30 +1777,48 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#connect .connect-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#connect .connect-row > .input,
|
||||
#connect .connect-row > .input-wrap {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#connect label {
|
||||
display: block;
|
||||
width: 25%;
|
||||
flex-shrink: 0;
|
||||
margin-top: 11px;
|
||||
}
|
||||
|
||||
#connect .port::before {
|
||||
content: ":";
|
||||
margin: 9px 0 0 -17px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#connect .tls {
|
||||
float: left;
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
#connect .tls input {
|
||||
float: left;
|
||||
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 {
|
||||
float: left;
|
||||
margin-top: 30px;
|
||||
margin-left: 25%;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#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 {
|
||||
top: 31px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.password-container .reveal-password {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 15px;
|
||||
right: 0;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.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) {
|
||||
.container {
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -2565,14 +2592,24 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#connect .tls {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input {
|
||||
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 {
|
||||
display: block;
|
||||
padding: 5px 0;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user