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

[frontend] responsive test

Browse source
This commit is contained in:
Lilian 2024-04-29 21:00:39 +02:00
parent 23792e1b87
commit a661599edc
No known key found for this signature in database
GPG key ID: 007CA12D692829E1
3 changed files with 136 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
Iceshrimp.Frontend/Layout/MainLayout.razor.css
View file

@ -6,4 +6,18 @@
}
.main {
width: 100%;
}
.widget-panel{
}
.sidebar {
}
@media (max-width: 700px) {
.widget-panel {
display: none;
}
}

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

@ -1,23 +1,54 @@
@using Iceshrimp.Frontend.Components
@using Iceshrimp.Assets.PhosphorIcons
<div class="sidebar">
<div class="header">
<account-dropdown />
<account-dropdown />
</div>
<div class="nav">
<div class="sidebar-btn">
<NavLink href="/">
Timeline
<Icon Name="Icons.House" />
<span class="text">Timeline</span>
</NavLink>
</div>
<div class="sidebar-btn">
<NavLink href="/notifications">
Notifications
<Icon Name="Icons.Bell"/>
<span class="text">Notifications</span>
</NavLink>
</div>
<button @onclick="Open" class="sidebar-btn">
<Icon Name="Icons.Pencil"/>
<span class="text">Open!</span>
<Compose @ref="_compose"/>
@* <button @onclick="Open">Open!</button> *@
</button>
</div>
</div>
<div class="bottom-bar">
<div class="nav">
<button class="sidebar-btn">
<Icon Name="Icons.List" />
</button>
<div class="sidebar-btn">
<NavLink href="/">
<Icon Name="Icons.House"/>
<span class="text">Timeline</span>
</NavLink>
</div>
<div class="sidebar-btn">
<Compose @ref="_compose" />
<button @onclick="Open">Open!</button>
<NavLink href="/notifications">
<Icon Name="Icons.Bell"/>
<span class="text">Notifications</span>
</NavLink>
</div>
<button @onclick="Open" class="sidebar-btn">
<Icon Name="Icons.Pencil"/>
<span class="text">Open!</span>
<Compose @ref="_compose"/>
@* <button @onclick="Open">Open!</button> *@
</button>
</div>
</div>
@code {

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

@ -1,37 +1,91 @@
.sidebar {
display: flex;
flex-direction: column;
height: 100vh;
max-width: 15rem;
min-width: 15rem;
flex-grow: 1;
background-color: var(--foreground-color);
@media (min-width: 701px) {
.sidebar {
display: flex;
flex-direction: column;
height: 100vh;
max-width: 15rem;
min-width: 15rem;
flex-grow: 1;
background-color: var(--foreground-color);
}
.header {
height: 5rem;
}
.sidebar-btn {
display: flex;
height: 2.5rem;
align-items: center;
justify-content: start;
border-radius: 1.25rem;
padding-inline: 0.5rem;
margin-bottom: 0.5rem;
margin-inline: 1rem;
color: black;
font-size: 0.9em;
background: var(--accent-color)
}
.btn:hover {
background-color: var(--hover-color);
}
.icon {
display: flex;
margin: 0.5rem;
align-items: center;
color: black;
}
.bottom-bar {
display: none;
}
}
.header {
height: 5rem;
}
.sidebar-btn {
display: flex;
height: 2.5rem;
align-items: center;
justify-content: start;
border-radius: 1.25rem;
padding-inline: 0.5rem;
margin-bottom: 0.5rem;
margin-inline: 1rem;
color: black;
font-size: 0.9em;
background: var(--accent-color)
}
@media (max-width: 700px) {
.sidebar {
display: none;
}
.bottom-bar {
width: 100vw;
position: fixed;
bottom: 0;
left: 0;
background-color: var(--foreground-color);
}
.nav {
display: flex;
justify-content: space-around;
}
.sidebar-btn {
display: inline-flex;
height: 3rem;
width: 4rem;
min-width: 4rem;
max-width: 4rem;
align-items: center;
justify-content: center;
border-radius: 1.25rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
color: black;
background: var(--accent-color);
.text {
display: none;
}
}
.btn:hover {
background-color: var(--hover-color);
}
.btn:hover {
background-color: var(--hover-color);
}
.icon {
display: flex;
margin: 0.5rem;
align-items: center;
color: black;
.icon {
display: flex;
margin: 0.5rem;
align-items: center;
color: black;
}
}