left sidebar
This commit is contained in:
parent
c21518bd2b
commit
e4f0aa7679
@ -6,7 +6,7 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
title {
|
||||
head, title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -16,6 +16,7 @@ header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #444;
|
||||
}
|
||||
header .header-section {
|
||||
@ -78,6 +79,130 @@ header .header-section.header-right a:hover {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sidebar-right {
|
||||
width: 250px;
|
||||
background-color: #1a1a1a;
|
||||
color: #f0f0f0;
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sidebar-right .repo-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0 12px 10px;
|
||||
border-bottom: 2px solid cadetblue;
|
||||
}
|
||||
.sidebar-right .repo-info .repo-logo {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
border: 2px solid #7390df;
|
||||
}
|
||||
.sidebar-right .repo-info .repo-logo img {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
font-size: 23px;
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("../fonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fa-regular-400.ttf") format("truetype");
|
||||
}
|
||||
.sidebar-right .repo-info .repo-details .repo-author {
|
||||
font-size: 0.9rem;
|
||||
color: #bfbfbf;
|
||||
display: block;
|
||||
}
|
||||
.sidebar-right .repo-info .repo-details .repo-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
.sidebar-right .repo-info:hover .repo-logo {
|
||||
border: 2px solid #9b9b9b;
|
||||
}
|
||||
.sidebar-right .repo-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sidebar-right .repo-nav .nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #f0f0f0;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
padding: 0.5em 12px;
|
||||
border-right: 2px solid rgba(0, 0, 0, 0);
|
||||
height: 3em;
|
||||
}
|
||||
.sidebar-right .repo-nav .nav-link:hover {
|
||||
background-color: #333;
|
||||
border-right: 2px solid wheat;
|
||||
}
|
||||
.sidebar-right .repo-nav .nav-link i {
|
||||
font-size: 1em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
.sidebar-right .repo-stats {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
.sidebar-right .repo-stats .stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
background-color: #333;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-radius: 1rem;
|
||||
color: #f0f0f0;
|
||||
font-size: 0.8rem;
|
||||
height: 1.4rem;
|
||||
}
|
||||
.sidebar-right .repo-stats .stat-item .stat-icon {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.sidebar-right .repo-stats .stat-item .stat-count {
|
||||
color: #f0f0f0;
|
||||
min-width: 4ch;
|
||||
text-align: right;
|
||||
}
|
||||
.sidebar-right .repo-stats .stat-item:hover {
|
||||
background-color: #444;
|
||||
color: #1b97ff;
|
||||
}
|
||||
.sidebar-right .settings-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #f0f0f0;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
padding: 0.5em 12px;
|
||||
border-right: 2px solid rgba(0, 0, 0, 0);
|
||||
height: 3em;
|
||||
margin-top: auto;
|
||||
}
|
||||
.sidebar-right .settings-link:hover {
|
||||
background-color: #333;
|
||||
border-right: 2px solid wheat;
|
||||
}
|
||||
.sidebar-right .settings-link i {
|
||||
font-size: 1em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*!
|
||||
* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
@ -217,83 +342,6 @@ header .header-section.header-right a:hover {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.fa-border {
|
||||
border-color: var(--fa-border-color, #eee);
|
||||
border-radius: var(--fa-border-radius, 0.1em);
|
||||
border-style: var(--fa-border-style, solid);
|
||||
border-width: var(--fa-border-width, 0.08em);
|
||||
padding: var(--fa-border-padding, 0.2em 0.25em 0.15em);
|
||||
}
|
||||
|
||||
.fa-pull-left {
|
||||
float: left;
|
||||
margin-right: var(--fa-pull-margin, 0.3em);
|
||||
}
|
||||
|
||||
.fa-pull-right {
|
||||
float: right;
|
||||
margin-left: var(--fa-pull-margin, 0.3em);
|
||||
}
|
||||
|
||||
.fa-rotate-90 {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.fa-rotate-180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.fa-rotate-270 {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
.fa-flip-horizontal {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
.fa-flip-vertical {
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
|
||||
.fa-flip-both,
|
||||
.fa-flip-horizontal.fa-flip-vertical {
|
||||
transform: scale(-1, -1);
|
||||
}
|
||||
|
||||
.fa-rotate-by {
|
||||
transform: rotate(var(--fa-rotate-angle, 0));
|
||||
}
|
||||
|
||||
.fa-stack {
|
||||
display: inline-block;
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
width: 2.5em;
|
||||
}
|
||||
|
||||
.fa-stack-1x,
|
||||
.fa-stack-2x {
|
||||
left: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: var(--fa-stack-z-index, auto);
|
||||
}
|
||||
|
||||
.fa-stack-1x {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.fa-stack-2x {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.fa-inverse {
|
||||
color: var(--fa-inverse, #fff);
|
||||
}
|
||||
|
||||
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
|
||||
readers do not read off random characters that represent icons */
|
||||
.fa-0::before {
|
||||
@ -8188,4 +8236,21 @@ readers do not read off random characters that represent icons */
|
||||
|
||||
body {
|
||||
background-color: #232323;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
body .body-content main.main-content {
|
||||
flex: 1;
|
||||
background-color: #535153;
|
||||
}
|
||||
body .body-content .sidebar-left {
|
||||
width: 250px;
|
||||
background-color: #747272;
|
||||
/* Left sidebar styles */
|
||||
}
|
||||
body > *:not(header) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@ -25,5 +25,94 @@
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="body-content">
|
||||
<aside class="sidebar-left">
|
||||
<!-- Left sidebar content, to be added later -->
|
||||
</aside>
|
||||
|
||||
<main class="main-content">
|
||||
<!-- Main content here -->
|
||||
</main>
|
||||
|
||||
<!-- Right sidebar content -->
|
||||
<aside class="sidebar-right">
|
||||
<!-- Repo Info -->
|
||||
<div class="repo-info">
|
||||
<div class="repo-logo">
|
||||
<img src="../images/repo-icon.png" alt="" />
|
||||
</div>
|
||||
<div class="repo-details">
|
||||
<a class="repo-author" href="/author_page">Author Name</a>
|
||||
<a class="repo-name" href="/repo_home">Repository Name</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="repo-nav">
|
||||
<a href="/repo_home" class="nav-link">
|
||||
<i class="fa-solid fa-house"></i>
|
||||
Home
|
||||
</a>
|
||||
<a href="/code" class="nav-link">
|
||||
<i class="fa-solid fa-code"></i>
|
||||
Code
|
||||
</a>
|
||||
<a href="/issues" class="nav-link">
|
||||
<i class="fa-solid fa-exclamation-circle"></i>
|
||||
Issues
|
||||
</a>
|
||||
<a href="/pulls" class="nav-link">
|
||||
<i class="fa-solid fa-code-branch"></i>
|
||||
Pull Requests
|
||||
</a>
|
||||
<a href="/actions" class="nav-link">
|
||||
<i class="fa-solid fa-play"></i>
|
||||
Actions
|
||||
</a>
|
||||
<a href="/packages" class="nav-link">
|
||||
<i class="fa-solid fa-box"></i>
|
||||
Packages
|
||||
</a>
|
||||
<a href="/projects" class="nav-link">
|
||||
<i class="fa-solid fa-tasks"></i>
|
||||
Projects
|
||||
</a>
|
||||
<a href="/releases" class="nav-link">
|
||||
<i class="fa-solid fa-tag"></i>
|
||||
Releases
|
||||
</a>
|
||||
<a href="/wiki" class="nav-link">
|
||||
<i class="fa-solid fa-book"></i>
|
||||
Wiki
|
||||
</a>
|
||||
<a href="/activity" class="nav-link">
|
||||
<i class="fa-solid fa-chart-line"></i>
|
||||
Activity
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<!-- Repo Stats (Watch, Star, Fork) -->
|
||||
<div class="repo-stats">
|
||||
<button class="stat-item" title="Watch">
|
||||
<i class="stat-icon fa-regular fa-eye"></i>
|
||||
<span class="stat-count">123</span>
|
||||
</button>
|
||||
<button class="stat-item" title="Star">
|
||||
<i class="stat-icon fa-regular fa-star"></i>
|
||||
<span class="stat-count">456</span>
|
||||
</button>
|
||||
<button class="stat-item" title="Fork">
|
||||
<i class="stat-icon fa-solid fa-code-branch"></i>
|
||||
<span class="stat-count">789</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Repo Settings -->
|
||||
<a href="/settings" class="nav-link settings-link">
|
||||
<i class="fa-solid fa-gear"></i> Repo Settings
|
||||
</a>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -6,6 +6,6 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
title {
|
||||
head, title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -13,8 +13,5 @@
|
||||
@import 'sizing';
|
||||
@import 'fixed-width';
|
||||
@import 'list';
|
||||
@import 'bordered-pulled';
|
||||
@import 'rotated-flipped';
|
||||
@import 'stacked';
|
||||
@import 'icons';
|
||||
@import 'screen-reader';
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
@use "common";
|
||||
@use "repo-home/header";
|
||||
@use "repo-home/sidebar-right";
|
||||
@use "fontawesome6/scss/fontawesome";
|
||||
@use "fontawesome6/scss/regular";
|
||||
@use "fontawesome6/scss/solid";
|
||||
@ -7,4 +8,29 @@
|
||||
|
||||
body {
|
||||
background-color: #232323;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
|
||||
.body-content {
|
||||
main.main-content {
|
||||
flex: 1;
|
||||
//display: flex;
|
||||
background-color: #535153; // bg-color for testing purposes
|
||||
}
|
||||
|
||||
// Left sidebar (if applicable)
|
||||
.sidebar-left {
|
||||
width: 250px;
|
||||
background-color: #747272; // bg-color for testing purposes
|
||||
/* Left sidebar styles */
|
||||
}
|
||||
}
|
||||
|
||||
& > *:not(header) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1; // Expands to fill remaining height of body
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -15,6 +15,7 @@ header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $repo-home-header-border-color;
|
||||
|
||||
.header-section {
|
||||
|
||||
147
test/scss/repo-home/_sidebar-right.scss
Normal file
147
test/scss/repo-home/_sidebar-right.scss
Normal file
@ -0,0 +1,147 @@
|
||||
// Color Variables
|
||||
$sidebar-bg-color: #1a1a1a;
|
||||
$sidebar-text-color: #f0f0f0;
|
||||
$sidebar-link-hover-bg-color: #333;
|
||||
$sidebar-border-color: #444;
|
||||
$sidebar-author-color: #bfbfbf;
|
||||
$stat-bg-color: #333;
|
||||
$stat-text-color: #f0f0f0;
|
||||
$stat-count-color: #f0f0f0;
|
||||
$settings-link-hover-bg-color: #333;
|
||||
|
||||
@mixin sidbar-left-nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: $sidebar-text-color;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
padding: 0.5em 12px;
|
||||
border-right: 2px solid rgba(0,0,0,0);
|
||||
height: 3em;
|
||||
|
||||
&:hover {
|
||||
background-color: $sidebar-link-hover-bg-color;
|
||||
border-right: 2px solid wheat;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 1em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-right {
|
||||
width: 250px;
|
||||
background-color: $sidebar-bg-color;
|
||||
color: $sidebar-text-color;
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//gap: 1rem;
|
||||
|
||||
.repo-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0 12px 10px;
|
||||
border-bottom: 2px solid cadetblue;
|
||||
|
||||
.repo-logo {
|
||||
//background-color: #f0f0f0;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
border: 2px solid #7390df;
|
||||
|
||||
img {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
//color: green;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
font-size: 23px;
|
||||
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url('../fonts/fa-regular-400.woff2') format('woff2'),
|
||||
url('../fonts/fa-regular-400.ttf') format('truetype');
|
||||
}
|
||||
}
|
||||
|
||||
.repo-details {
|
||||
.repo-author {
|
||||
font-size: 0.9rem;
|
||||
color: $sidebar-author-color;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.repo-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.repo-logo {
|
||||
border: 2px solid #9b9b9b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.repo-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//gap: 0.3rem;
|
||||
|
||||
.nav-link {
|
||||
@include sidbar-left-nav-links;
|
||||
}
|
||||
}
|
||||
|
||||
.repo-stats {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 7px 12px;
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
background-color: $stat-bg-color;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-radius: 1rem;
|
||||
color: $stat-text-color;
|
||||
font-size: 0.8rem;
|
||||
height: 1.4rem;
|
||||
|
||||
.stat-icon {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.stat-count {
|
||||
color: $stat-count-color;
|
||||
min-width: 4ch;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #444;
|
||||
color:#1b97ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-link {
|
||||
@include sidbar-left-nav-links;
|
||||
margin-top: auto;
|
||||
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user