notfire/Iceshrimp.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[frontend/components] Rework bottom bar

Browse source
This commit is contained in:
Jeder 2024-10-18 22:24:46 +02:00 • committed by Lilian
parent 1e2880cdca
commit eafbb9a35b
No known key found for this signature in database
3 changed files with 30 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Iceshrimp.Frontend/Components/Compose.razor.css
View file

@ -54,6 +54,7 @@
} }
.cw-field { .cw-field {
padding: unset;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
width: 100%; width: 100%;
} }

12
Iceshrimp.Frontend/Layout/Sidebar.razor
View file

@ -56,21 +56,21 @@
<div class="bottom-bar"> <div class="bottom-bar">
<div class="bottom-nav"> <div class="bottom-nav">
<button @onclick="ToggleSidebar" class="bottom-bar-btn"> <button @onclick="ToggleSidebar" class="bottom-bar-btn">
<Icon Name="Icons.List"/> <Icon Name="Icons.List" class="bottom-bar-icon"/>
</button> </button>
<NavLink href="/"> <NavLink href="/" Match="NavLinkMatch.All">
<div class="bottom-bar-btn"> <div class="bottom-bar-btn">
<Icon Name="Icons.House"/> <Icon Name="Icons.House" class="bottom-bar-icon"/>
</div> </div>
</NavLink> </NavLink>
<NavLink href="/notifications"> <NavLink href="/notifications">
<div class="bottom-bar-btn"> <div class="bottom-bar-btn">
<Icon Name="Icons.Bell"/> <Icon Name="Icons.Bell" class="bottom-bar-icon"/>
</div> </div>
</NavLink> </NavLink>
<div> <div>
<button @onclick="Open" class="bottom-bar-btn"> <button @onclick="Open" class="bottom-bar-btn post-btn">
<Icon Name="Icons.Pencil"/> <Icon Name="Icons.Pencil" class="bottom-bar-icon"/>
</button> </button>
</div> </div>
</div> </div>

36
Iceshrimp.Frontend/Layout/Sidebar.razor.css
View file

@ -10,22 +10,32 @@
> .sidebar-btn { > .sidebar-btn {
background: var(--highlight-color); background: var(--highlight-color);
} }
> .bottom-bar-btn {
background: var(--highlight-color);
}
}
}
::deep {
.bottom-bar-icon {
font-size: 20px !important;
} }
} }
.bottom-bar-btn { .bottom-bar-btn {
display: inline-flex; display: inline-flex;
height: 3rem; height: 3rem;
width: 4rem; width: 5rem;
min-width: 4rem; min-width: 5rem;
max-width: 4rem; max-width: 5rem;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 1.25rem; border-radius: 0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
margin-top: 0.5rem; margin-top: 0.5rem;
color: black; color: white;
background: var(--accent-color); background: var(--background-color);
.text { .text {
display: none; display: none;
@ -33,7 +43,7 @@
} }
.btn:hover { .btn:hover {
background-color: var(--hover-color); background: var(--hover-color);
} }
.icon { .icon {
@ -49,6 +59,8 @@
.sidebar-btn { .sidebar-btn {
display: flex; display: flex;
/* This is possibly the jankiest parameter i have ever written (it should be percents but this works), it looks okay anyway */
width: 13rem;
height: 2.5rem; height: 2.5rem;
align-items: center; align-items: center;
justify-content: start; justify-content: start;
@ -71,8 +83,6 @@
.post-btn { .post-btn {
background: var(--accent-color); background: var(--accent-color);
justify-self: start;
width: auto;
} }
.rule { .rule {
@ -92,7 +102,7 @@
position: fixed; position: fixed;
width: 15rem; width: 15rem;
height: 100vh; height: 100vh;
z-index: +23; z-index: +25;
background-color: var(--foreground-color); background-color: var(--foreground-color);
} }
@ -101,8 +111,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
max-width: 15rem; width: 15rem;
min-width: 15rem;
position: sticky; position: sticky;
top: 0; top: 0;
background-color: var(--foreground-color); background-color: var(--foreground-color);
@ -123,7 +132,8 @@
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: var(--foreground-color); background-color: var(--background-color);
z-index: +24; z-index: +24;
border-top: 0.1rem var(--highlight-color) solid;
} }
} }