The_Great_Archive/RSNewWebUI
1
0
Fork 0
mirror of https://github.com/RetroShare/RSNewWebUI.git synced 2026-09-14 11:05:47 +05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #63 from zelfroster/improve-sidebar-ui

Browse Source 
Improve sidebar UI
This commit is contained in:
csoler 2023-03-10 21:24:24 +01:00 committed by GitHub
commit a593b9c808
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 46 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
webui-src/app/main.js
View File

@ -27,9 +27,16 @@ const navIcon = {
const navbar = () => {
return {
view: (vnode) =>
m(
'nav.tab-menu',
view: (vnode) => m(
'nav.tab-menu',
[
m('.nav-logo', [
m('img', {
src: '../data/retroshare.svg',
alt: 'retroshare_icon',
}),
m('h4', 'Retroshare'),
]),
Object.keys(vnode.attrs.links).map((linkName, i) => {
const active = m.route.get().split('/')[1] === linkName;
return m(
@ -38,10 +45,11 @@ const navbar = () => {
href: vnode.attrs.links[linkName],
class: (active ? 'selected-tab-item' : '') + ' tab-menu-item',
},
[navIcon[linkName], linkName]
[navIcon[linkName], m('p[style="margin: 0; align-self: end"]', linkName)]
);
})
),
]
),
};
};

41
webui-src/app/theme.css
View File

@ -359,40 +359,61 @@ Target specific sections
}
/* Navbar */
.nav-logo {
width: 9rem;
padding: 1.2rem 0;
display: flex;
gap: 0.3rem;
align-items: center;
}
.nav-logo img {
width: 1.6rem;
}
.nav-logo h4 {
margin: 0;
color: white;
align-self: end;
}
nav.tab-menu {
border-right: 5px solid #3ba4d7;
background-color: #333;
border-right: 4px solid #3ba4d7;
background-color: #14141B;
box-shadow: 0 5px 5px #aaa;
float: left;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
padding: 0.5rem 0.4rem;
margin-right: 0rem;
}
.tab-menu-item {
width: 6rem;
width: 10rem;
border-radius: 8px;
display: flex;
align-items: center;
}
a.tab-menu-item {
padding: 1em;
margin: 0.2rem;
padding: 0.7rem 0.4rem;
text-align: center;
text-decoration: none;
color: #ccc;
font-size: 1em;
/* CSS capitalization is magical! */
text-transform: capitalize;
transition: all 0.5s;
transition: all 300ms;
/* To vertically stack child nodes */
display: inline-flex;
flex-direction: row;
}
.tab-menu-item:hover {
background-color: #999;
background-color: #FFFFFF15;
}
.tab-menu-item.selected-tab-item {
background-color: #3ba4d7;
color: white;
background-color: #FFFFFF20;
font-weight: medium;
}
.sidebar {
height: 30%;
@ -450,5 +471,9 @@ a.tab-menu-item {
}
i.sidenav-icon {
padding-right: 1rem;
width: 2.5rem;
height: 1.4rem;
display: grid;
place-items: center;
padding-right: 0.5rem;
}