fix smallSideBar and homeServer maxlength

add-admin-interface
adb 4 years ago
parent 7c1d994dc2
commit 9cc93109fc

@ -5,7 +5,7 @@
<form v-if="showLogin()" @submit.prevent="login()"> <form v-if="showLogin()" @submit.prevent="login()">
<input v-model="user" class="input" name="user" type="text" maxlength="30" placeholder="@user:adb.sh"><br> <input v-model="user" class="input" name="user" type="text" maxlength="30" placeholder="@user:adb.sh"><br>
<input v-model="password" class="input" name="password" type="password" maxlength="30" placeholder="password"><br> <input v-model="password" class="input" name="password" type="password" maxlength="30" placeholder="password"><br>
<input v-model="homeServer" class="input" name="homeserver" maxlength="50" placeholder="https://matrix.org"><br> <input v-model="homeServer" class="input" name="homeserver" placeholder="https://matrix.org"><br>
<div v-if="loginError" class="info">{{loginError}}</div> <div v-if="loginError" class="info">{{loginError}}</div>
<textbtn type="submit" text="login" /> <textbtn type="submit" text="login" />
</form> </form>

@ -4,8 +4,8 @@
</div> </div>
<div v-else> <div v-else>
<div id="roomList" class="roomList"> <div id="roomList" class="roomList">
<h1>[chat]</h1> <h1 class="wideElement">[chat]</h1><h1 class="smallElement">[c]</h1>
<input v-model="search" class="input" type="text" maxlength="50" placeholder="search"><br> <input v-model="search" class="input wideElement" type="text" maxlength="50" placeholder="search">
<div v-for="room in matrix.rooms" :key="room.roomId" @click="openChat(room)" > <div v-for="room in matrix.rooms" :key="room.roomId" @click="openChat(room)" >
<room-list-element <room-list-element
v-if="!search || room.name.toLowerCase().includes(search.toLowerCase().trim())" v-if="!search || room.name.toLowerCase().includes(search.toLowerCase().trim())"
@ -67,7 +67,7 @@ export default {
} }
</script> </script>
<style scoped> <style scoped lang="scss">
.roomList{ .roomList{
position: absolute; position: absolute;
left: 0; left: 0;
@ -94,53 +94,6 @@ export default {
cursor: pointer; cursor: pointer;
background-color: #222; background-color: #222;
} }
.roomListName{
position: absolute;
left: 4rem;
top: 0.25rem;
text-overflow: ellipsis;
white-space: nowrap;
width: calc(100% - 5rem);
text-align: left;
}
.preview{
position: absolute;
top: 1.5rem;
left: 4rem;
font-size: 0.8rem;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: calc(100% - 4.5rem);
}
.roomListSmall{
position: absolute;
left: 0;
top: 0;
width: 4rem;
height: 100%;
background-color: #222;
text-align: center;
display: none;
overflow-y: auto;
overflow-x: hidden;
animation: ease;
animation-duration: 0.2s;
scrollbar-width: none;
z-index: 20;
}
.roomListSmall:hover{
width: 18rem;
scrollbar-width: thin;
box-shadow: 0 0 20px #111;
}
.roomListSmall::-webkit-scrollbar {
width: 0;
}
.roomListSmall:hover::-webkit-scrollbar {
width: 0.5rem;
}
.noRoomSelected{ .noRoomSelected{
position: absolute; position: absolute;
width: calc(100% - 20rem); width: calc(100% - 20rem);
@ -148,15 +101,6 @@ export default {
left: 20rem; left: 20rem;
text-align: center; text-align: center;
} }
.roomImg{
position: absolute;
left: 0.5rem;
height: 3rem;
width: 3rem;
}
.roomImg.small{
margin-left: calc(50% - 2rem);
}
input{ input{
padding: 0 2rem 0 2rem; padding: 0 2rem 0 2rem;
height: 2.5rem; height: 2.5rem;
@ -172,19 +116,40 @@ input{
appearance: none; appearance: none;
outline: none; outline: none;
} }
.wideElement{
display: block;
}
.smallElement{
display: none;
}
@media (max-width: 48rem) { @media (max-width: 48rem) and (min-width: 30rem) {
.roomList{ .wideElement{
display: none; display: none;
} }
.chat{ .smallElement{
width: calc(100% - 4rem); display: block;
} }
.roomListSmall{ .roomList{
z-index: 30;
width: 4rem;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
}
.roomList:hover{
width: 18rem;
scrollbar-width: thin;
box-shadow: 0 0 20px #111;
.wideElement{
display: block; display: block;
} }
.roomImgPlaceholder{ .smallElement{
left: 0.5rem; display: none;
}
}
.chat{
width: calc(100% - 4rem);
} }
.noRoomSelected{ .noRoomSelected{
left: 4rem; left: 4rem;
@ -193,6 +158,12 @@ input{
} }
@media (max-width: 30rem) { @media (max-width: 30rem) {
.wideElement{
display: block;
}
.smallElement{
display: none;
}
.roomList{ .roomList{
width: 100%; width: 100%;
} }
@ -202,11 +173,5 @@ input{
.noRoomSelected{ .noRoomSelected{
display: none; display: none;
} }
.roomListSmall{
display: none;
}
.roomList{
display: block;
}
} }
</style> </style>
Loading…
Cancel
Save