sashakoshka/mintea
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move repo tabs to navbar

Browse Source
This commit is contained in:
Sasha Koshka 2022-10-08 20:07:20 -04:00
parent 15d79e4d44
commit e8451b8bed
2 changed files with 60 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
prototype/index.html
View File

@ -35,12 +35,27 @@ for the JavaScript code in this page.
<div id=stickyWrap> <div id=stickyWrap>
<nav> <nav>
<ul class=buttonList> <div class=buttonListWrap>
<li><a href="/">tebibyte</a></li> <ul class=buttonList>
<li><a href="/">dashboard</a></li> <li><a href="/">tebibyte</a></li>
<li><a href="/">profile</a></li> <li><a href="/">dashboard</a></li>
<li><a href="/">notifications</a></li> <li><a href="/">profile</a></li>
</ul> <li><a href="/">notifications</a></li>
</ul>
</div>
<div class=buttonListWrap>
<ul class=buttonList>
<li><a href="/">code</a></li>
<li><a href="/">history</a></li>
<li><a href="/">tags</a></li>
<li><a href="/">issues</a></li>
<li><a href="/">pull requests</a></li>
<li><a href="/">projects</a></li>
<li><a href="/">releases</a></li>
<li><a href="/">settings</a></li>
</ul>
</div>
</nav> </nav>
</div> </div>
@ -49,18 +64,6 @@ for the JavaScript code in this page.
<a href="/">owner</a>/<a href="/">repo</a>/<a href="/">branch</a> as user <a href="/">owner</a>/<a href="/">repo</a>/<a href="/">branch</a> as user
</header> </header>
<div class=tabs id=mainTabs>
<ul class=buttonList>
<li><a href="/">code</a></li>
<li><a href="/">history</a></li>
<li><a href="/">tags</a></li>
<li><a href="/">issues</a></li>
<li><a href="/">pull requests</a></li>
<li><a href="/">projects</a></li>
<li><a href="/">releases</a></li>
<li><a href="/">settings</a></li>
</ul>
</div>
<div id=contentWrap> <div id=contentWrap>
<aside> <aside>

66
prototype/style.css
View File

@ -56,7 +56,7 @@ h3 {
margin: 1em 0; margin: 1em 0;
} }
#contentWrap, #mainTabs, header, nav, footer { #contentWrap, header, nav, footer {
max-width: 90rem; max-width: 90rem;
margin: auto; margin: auto;
} }
@ -88,7 +88,7 @@ nav {
display: inline; display: inline;
} }
.buttonList a { .buttonList li:not(:last-child) a {
margin-right: 1em; margin-right: 1em;
} }
@ -100,18 +100,53 @@ header {
padding: 1rem; padding: 1rem;
} }
@media screen and not (min-width: 60rem) { @media screen and not (min-width: 66rem) {
aside { aside {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
nav .buttonListWrap {
position: relative;
}
nav .buttonListWrap .buttonList {
overflow-x: auto;
white-space: nowrap;
scrollbar-width: thin;
width: 100%;
}
nav .buttonListWrap::after {
position: absolute;
display: block;
width: 1rem;
height: 100%;
top: 0;
right: 0;
content: "";
background-image: linear-gradient(
to right,
transparent 0%,
var(--background) 100%);
}
} }
@media screen and (min-width: 60rem) { @media screen and (min-width: 66rem) {
#contentWrap { #contentWrap {
display: grid; display: grid;
grid-gap: 1rem; grid-gap: 1rem;
grid-template-columns: 24rem auto; grid-template-columns: 24rem auto;
} }
nav {
display: grid;
grid-grid: 1rem;
grid-template-columns: auto auto;
}
nav > .buttonListWrap:last-child {
text-align: right;
}
} }
@media screen and (min-width: 80rem) { @media screen and (min-width: 80rem) {
@ -120,29 +155,6 @@ header {
} }
} }
.tabs {
padding: 1rem 1rem 0 1rem;
position: relative;
}
.tabs::after {
position: absolute;
display: block;
width: 1rem;
height: 100%;
top: 0;
right: 1rem;
content: "";
background-image: linear-gradient(to right, transparent 0%, var(--background) 100%);
}
.tabs ul {
overflow-x: auto;
white-space: nowrap;
scrollbar-width: thin;
width: 100%;
}
.files { .files {
border-collapse:collapse; border-collapse:collapse;
border: none; border: none;