Kelder/feathermost
33
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages 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;

2
index.html
View file

@ -16,7 +16,6 @@
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>
@ -41,7 +40,6 @@
</div> </div>
<ul id="channel_list"></ul> <ul id="channel_list"></ul>
</div>
<div class="main-area"> <div class="main-area">
<div id="channel_header"></div> <div id="channel_header"></div>