jeirmeister/Cockatrice
1
0
Fork 0
mirror of https://github.com/Cockatrice/Cockatrice.git synced 2026-06-09 15:54:47 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 15

Add left nav (#4705)

Browse source 
* Automated translation update ( bf08a04cda )

* Add Layout component wip

* finish layout implementation

* convert header to left nav

* better nav item spacing

* return source files to original glory

* lint fix

* Remove height limit on login screen

* fix top spacing on 3-panel layout

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Brent Clark <brent@backboneiq.com>
This commit is contained in:
Brent Clark 2023-03-15 22:45:55 -05:00 • committed by GitHub
parent cab5f29b57
commit cef99cba71
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 280 additions and 201 deletions
Download patch file Download diff file Expand all files Collapse all files

128
webclient/src/containers/Layout/LeftNav.css Normal file
View file

@ -0,0 +1,128 @@
.LeftNav__container {
background: #7033DB;
width: 100px;
min-width: 100px;
height: 100%;
}
.LeftNav__logo {
display: flex;
align-items: center;
justify-content: center;
padding: 16px 0;
}
.LeftNav__logo a {
line-height: 1;
}
.LeftNav__logo img {
height: 32px;
}
.LeftNav-content {
color: white;
}
.LeftNav-serverDetails {
font-size: 12px;
}
.LeftNav-server__indicator {
display: inline-block;
height: 12px;
width: 12px;
background: red;
border: 1px solid;
border-radius: 50%;
margin-left: 10px;
}
.LeftNav-nav {
}
.LeftNav-nav__links {
display: flex;
flex-flow: column;
align-items: center;
gap: 16px;
}
.LeftNav-nav__link {
position: relative;
height: 100%;
}
.LeftNav-nav__link:hover {
background: rgba(0, 0, 0, .125);
}
.LeftNav-nav__link:hover .LeftNav-nav__link-menu {
display: block;
}
.LeftNav-nav__link-btn {
display: flex;
height: 100%;
width: 100%;
align-items: center;
padding: 5px 20px;
font-weight: bold;
}
.LeftNav-nav__link-btn__icon {
margin-left: 5px;
}
.LeftNav-nav__link-menu {
display: none;
position: absolute;
bottom: 0;
transform: translateY(100%);
min-width: 150px;
background: #3f51b5;
box-shadow: 1px 1px 2px 0px black;
z-index: 1;
}
.LeftNav-nav__link-menu__item {
padding: 0 !important;
}
.LeftNav-nav__link-menu__btn {
padding: 6px 16px;
width: 100%;
color: white;
display: flex;
justify-content: space-between;
}
.LeftNav-nav__actions {
display: flex;
justify-content: center;
}
.LeftNav-nav__action {
}
.LeftNav-nav__action button {
color: white;
}
.temp-subnav__rooms {
display: flex;
align-items: center;
font-size: 10px;
padding: 5px;
}
.temp-chip {
margin-left: 5px;
text-decoration: none;
}
.temp-chip > div {
cursor: inherit;
}