Kelder/feathermost
26
0
Fork 0
Code Issues 8 Pull requests Packages Projects Releases Wiki Activity

Avoid sidebar resizing based on channel contents

Browse source
This commit is contained in:
Midgard 2021-02-17 17:42:02 +01:00
parent 745af7af5d
commit 26ebbcc190
Signed by: midgard
GPG key ID: 511C112F1331BBB4
2 changed files with 28 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
assets/main.css
View file

@ -11,7 +11,9 @@ body {
color: #222; color: #222;
line-height: 1.5; line-height: 1.5;
display: flex; display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 20vw 1fr;
} }
a button { a button {
@ -53,14 +55,10 @@ h1 img {
overflow-y: hidden; overflow-y: hidden;
display: grid; display: grid;
} }
.sidebar {
width: 300px;
overflow: hidden;
grid-template-rows: auto 1fr;
border-right: 1px solid #aaa;
}
.main-area { .main-area {
flex-grow: 1; grid-column: 2;
grid-row-start: 1;
grid-row-end: 3;
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
position: relative; position: relative;
} }
@ -69,6 +67,7 @@ h1 img {
background-color: #e5e5e5; background-color: #e5e5e5;
padding: 0.5em; padding: 0.5em;
border-bottom: 1px solid #aaa; border-bottom: 1px solid #aaa;
border-right: 1px solid #aaa;
} }
#channel_list { #channel_list {
@ -76,12 +75,12 @@ h1 img {
height: 100%; height: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
border-right: 1px solid #aaa;
} }
#channel_list a { #channel_list a {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
width: 300px;
display: block; display: block;
padding: 2px 10px; padding: 2px 10px;
color: #333; color: #333;

42
index.html
View file

@ -16,33 +16,31 @@
document.body.className = "yesscript"; document.body.className = "yesscript";
</script> </script>
<div class="sidebar"> <div class="sidebar-head">
<div class="sidebar-head"> <h1><img src="/assets/feathermost.svg" alt=""/> Feathermost</h1>
<h1><img src="/assets/feathermost.svg" alt=""/> Feathermost</h1>
<div id="server_selection"> <div id="server_selection">
<ul id="server_selection_list"></ul> <ul id="server_selection_list"></ul>
<button id="server_selection_add">Add a server</button> <button id="server_selection_add">Add a server</button>
</div>
<form id="login" action="#">
<h2>Add a server</h2>
<div class="login-form">
<input type="text" id="login_server" placeholder="Server URL" value="http://localhost:8080" required/>
<input type="text" id="login_login_id" placeholder="Username or email" required/>
<input type="password" id="login_password" placeholder="Password" required/>
</div>
<input type="submit" id="login_button" value="Log in"/>
<input type="button" id="login_no_button" value="Cancel"/>
<div id="login_message"></div>
</form>
</div> </div>
<ul id="channel_list"></ul> <form id="login" action="#">
<h2>Add a server</h2>
<div class="login-form">
<input type="text" id="login_server" placeholder="Server URL" value="http://localhost:8080" required/>
<input type="text" id="login_login_id" placeholder="Username or email" required/>
<input type="password" id="login_password" placeholder="Password" required/>
</div>
<input type="submit" id="login_button" value="Log in"/>
<input type="button" id="login_no_button" value="Cancel"/>
<div id="login_message"></div>
</form>
</div> </div>
<ul id="channel_list"></ul>
<div class="main-area"> <div class="main-area">
<div id="channel_header"></div> <div id="channel_header"></div>