left sidebar
This commit is contained in:
parent
c21518bd2b
commit
e4f0aa7679
@ -6,7 +6,7 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
title {
|
head, title {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -16,6 +16,7 @@ header {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
border-bottom: 1px solid #444;
|
border-bottom: 1px solid #444;
|
||||||
}
|
}
|
||||||
header .header-section {
|
header .header-section {
|
||||||
@ -78,6 +79,130 @@ header .header-section.header-right a:hover {
|
|||||||
border-radius: 50%;
|
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
|
* 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)
|
* 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;
|
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
|
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
|
||||||
readers do not read off random characters that represent icons */
|
readers do not read off random characters that represent icons */
|
||||||
.fa-0::before {
|
.fa-0::before {
|
||||||
@ -8188,4 +8236,21 @@ readers do not read off random characters that represent icons */
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #232323;
|
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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -6,6 +6,6 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
title {
|
head, title {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -13,8 +13,5 @@
|
|||||||
@import 'sizing';
|
@import 'sizing';
|
||||||
@import 'fixed-width';
|
@import 'fixed-width';
|
||||||
@import 'list';
|
@import 'list';
|
||||||
@import 'bordered-pulled';
|
|
||||||
@import 'rotated-flipped';
|
|
||||||
@import 'stacked';
|
|
||||||
@import 'icons';
|
@import 'icons';
|
||||||
@import 'screen-reader';
|
@import 'screen-reader';
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
@use "common";
|
@use "common";
|
||||||
@use "repo-home/header";
|
@use "repo-home/header";
|
||||||
|
@use "repo-home/sidebar-right";
|
||||||
@use "fontawesome6/scss/fontawesome";
|
@use "fontawesome6/scss/fontawesome";
|
||||||
@use "fontawesome6/scss/regular";
|
@use "fontawesome6/scss/regular";
|
||||||
@use "fontawesome6/scss/solid";
|
@use "fontawesome6/scss/solid";
|
||||||
@ -7,4 +8,29 @@
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #232323;
|
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;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
border-bottom: 1px solid $repo-home-header-border-color;
|
border-bottom: 1px solid $repo-home-header-border-color;
|
||||||
|
|
||||||
.header-section {
|
.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