CringeStudios/IRC_Client
5
0
Fork 0
forked from CringeStudios/gamja
Code Pull Requests Activity

Improve buffer header layout on mobile

Browse Source 
Put buffer title above buffer description.
This commit is contained in:
Simon Ser 2021-06-06 17:27:05 +02:00
parent a419e660c0
commit 5b7ab2652b
2 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/buffer-header.js
View File

@ -160,8 +160,8 @@ export default function BufferHeader(props) {
} }
return html` return html`
<span class="title">${name}</span> <div class="title">${name}</div>
<span class="description">${description}</span> ${description ? html`<div class="description">${description}</div>` : null}
<span class="actions">${actions}</span> <div class="actions">${actions}</div>
`; `;
} }

22
style.css
View File

@ -177,19 +177,28 @@ button.danger:hover {
grid-row: 1; grid-row: 1;
grid-column: 2; grid-column: 2;
display: flex; display: grid;
flex-direction: row; grid-template-rows: auto auto;
grid-template-columns: 1fr auto;
} }
#buffer-header .title { #buffer-header .title {
display: none; display: none;
padding: 5px 10px; padding: 5px 10px;
align-self: center; font-weight: bold;
grid-row: 1;
grid-column: 1;
} }
#buffer-header .description { #buffer-header .description {
flex-grow: 1;
padding: 5px 10px; padding: 5px 10px;
grid-row: 2;
grid-column: 1;
}
#buffer-header .actions {
grid-row: 1 / 3;
grid-column: 2;
} }
#buffer-header .status-here { #buffer-header .status-here {
@ -651,9 +660,12 @@ kbd {
border-left: none; border-left: none;
} }
#buffer-header {
grid-template-columns: 1fr min-content;
}
#buffer-header .title { #buffer-header .title {
display: block; display: block;
font-weight: bold;
} }
} }