jackz/storage
1
0
Fork 0
mirror of https://github.com/Jackzmc/storage.git synced 2025-05-08 21:53:21 +00:00
Code Issues Projects 1 Releases Packages Wiki Activity Actions

Switch to <a> for sidebar

Browse source
This commit is contained in:
Jackzie 2025-04-15 00:30:03 -05:00
parent 86bcabd1fc
commit de9a0225a7
2 changed files with 39 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

21
server/static/css/main.css
View file

@ -5,28 +5,33 @@
color: hsl(0, 0%, 48%); color: hsl(0, 0%, 48%);
padding-left: 8px; padding-left: 8px;
} }
.sidebar-list { ul.sidebar-list {
/* margin-top: 2px; */ /* margin-top: 2px; */
padding-top: 10px; padding-top: 10px;
padding-left: 5px; padding-left: 5px;
margin-bottom: 25px; margin-bottom: 25px;
width: 100%;
} }
.sidebar-list li button { ul.sidebar-list li {
padding-left: 8px; cursor: pointer;
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
padding-right: 5px; padding-right: 5px;
border-radius: 2.5px; border-radius: 2.5px;
/* margin-top: 4px; */ }
width: 100%; ul.sidebar-list li a {
padding-left: 8px;
text-align: left; text-align: left;
color: black;
text-decoration: none;
}
ul.sidebar-list li:hover,
ul.sidebar-list li.is-active {
background-color: rgb(235, 235, 235);
} }
.sidebar i { .sidebar i {
padding-right: 4px; padding-right: 4px;
} }
.sidebar-list li button:hover, .sidebar-list li button.is-active {
background-color: lightgray;
}
.sidebar-column { .sidebar-column {
height: 100%; height: 100%;

38
server/templates/partials/sidebar.html.hbs
View file

@ -1,18 +1,18 @@
<aside class="sidebar pl-0 mb-0"> <aside class="sidebar pl-0 mb-0">
<p class="sidebar-header">Workspace</p> <p class="sidebar-header">Workspace</p>
<ul class="sidebar-list"> <ul class="sidebar-list">
<li class="is-active"><button><i class="fa fa-file"></i> Files</button></li> <li class="is-active"><a href="#"><i class="fa fa-file"></i> Files</a></li>
<li><button><i class="fas fa-heart"></i> Favorites</button></li> <li><a href="#"><i class="fas fa-heart"></i> Favorites</a></li>
<li><button><i class="fas fa-clock"></i> Activities</button></li> <li><a href="#"><i class="fas fa-clock"></i> Activities</a></li>
</ul> </ul>
<p class="sidebar-header">Help</p> <p class="sidebar-header">Help</p>
<ul class="sidebar-list"> <ul class="sidebar-list">
<li><button>Help</button></li> <li><a href="#">Help</a></li>
<li><button>About</button></li> <li><a href="#">About</a></li>
</ul> </ul>
</aside> </aside>
<style> {{!-- <style>
.sidebar { .sidebar {
} }
@ -20,13 +20,26 @@
color: hsl(0, 0%, 48%); color: hsl(0, 0%, 48%);
padding-left: 8px; padding-left: 8px;
} }
.sidebar-list { ul.sidebar-list {
/* margin-top: 2px; */ /* margin-top: 2px; */
padding-top: 10px; padding-top: 10px;
padding-left: 5px; padding-left: 5px;
margin-bottom: 25px; margin-bottom: 25px;
li a {
padding-left: 8px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 5px;
border-radius: 2.5px;
/* margin-top: 4px; */
width: 100%;
text-align: left;
}
li a:hover, li a.is-active {
background-color: lightgray;
}
} }
.sidebar-list li button { ul.sidebar-list li a {
padding-left: 8px; padding-left: 8px;
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
@ -35,11 +48,12 @@
/* margin-top: 4px; */ /* margin-top: 4px; */
width: 100%; width: 100%;
text-align: left; text-align: left;
}
ul.sidebar-list li a:hover, ul.sidebar-list li a.is-active {
background-color: lightgray;
} }
.sidebar i { .sidebar i {
margin-left: 2px; margin-left: 2px;
} }
.sidebar-list li button:hover, .sidebar-list li button.is-active {
background-color: lightgray; </style> --}}
}
</style>