open-source-mirrors
/
podgrab
mirror of https://github.com/akhilrex/podgrab
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

navbar changfews

Browse Source
pull/24/head
Akhil Gupta 4 years ago
parent 78e6806e2c
commit d2397e7c46
5 changed files with 132 additions and 21 deletions
Show Stats Download Patch File Download Diff File

5
client/addPodcast.html
Unescape View File

@ -16,10 +16,7 @@
<div class="container"> <div class="container">
<section class="header"> {{template "navbar" .}}
<h1>{{ .title }}</h1>
</section>
{{template "navbar"}}
<br> <br>
<div id="app" v-cloak> <div id="app" v-cloak>
<div class="row"> <div class="row">

8
client/episodes.html
Unescape View File

@ -39,12 +39,8 @@ hr{
</style> </style>
</head> </head>
<body> <body>
<div class="container"> {{template "navbar" .}}
<section class="header">
<h1>{{ .title }} ({{ .totalCount }})</h1>
</section>
{{template "navbar"}}
<br>{{$setting := .setting}} <br>{{$setting := .setting}}
{{range .podcastItems}} {{range .podcastItems}}

6
client/index.html
Unescape View File

@ -24,10 +24,8 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<section class="header"> {{template "navbar" .}}
<h1>{{ .title }}</h1>
</section>
{{template "navbar"}}
<div class="row" style="display: none;"> <div class="row" style="display: none;">
<form action="/" method="post"> <form action="/" method="post">
<div class="nine columns"> <div class="nine columns">

128
client/navbar.html
Unescape View File

@ -1,6 +1,7 @@
{{define "navbar"}} {{define "navbar"}}
<style> <style>
/* Larger than tablet */ /* Larger than tablet */
@media (min-width: 750px) {
.navbar + .docs-section { .navbar + .docs-section {
border-top-width: 0; } border-top-width: 0; }
@ -45,12 +46,103 @@
.has-docked-nav .navbar > .container { .has-docked-nav .navbar > .container {
width: 80%; } width: 80%; }
/* } */ /* } */
}
#overlay{
display: none;
}
@media (max-width: 750px) { @media (max-width: 750px) {
.navbar-link{
margin-right: 1.5em; .drawer {
} height: 100%;
width: 160px;
position: fixed;
z-index: 1000;
top: 0;
left: -160px;
background-color: #fff;
overflow-x: hidden;
padding-top: 20px;
overflow-x: hidden; /* Disable horizontal scroll */
display: block;
transition: 0.25s; /* 0.5 second transition effect to slide in the sidenav */
}
.drawer li{
list-style: none;
display: block;
}
.drawer li>a {
padding-top: 10px;
padding-left: 10px;
text-decoration: none;
display: block;
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
letter-spacing: .2rem;
line-height: 2.5rem;
color: #222;
}
div#overlay{
background-color: #ccc;
opacity: 0.5;
height: 100%;
width: 100%;
position: fixed;
z-index: 990;
top: 0;
left: 0;
display: none;
} }
#burger{
position: absolute;
margin-top:10px;
left: 10px;
}
#burger div{
width: 35px;
height: 2px;
background-color: black;
margin: 6px 0;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 2px;
background-color: #333;
margin: 6px 0;
}
#closeDrawer{
display: inline-block;
position: absolute;
top: 0;
right: 0;
}
#closeDrawer .bar1{
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
#closeDrawer .bar3{
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
}
</style> </style>
<section class="header">
<a id="burger" onclick="toggleMenu()" >
<div></div>
<div></div>
<div></div>
</a>
<h1>{{ .title }}</h1>
</section>
<nav class="navbar"> <nav class="navbar">
<div class="container"> <div class="container">
<ul class="navbar-list"> <ul class="navbar-list">
@ -62,4 +154,34 @@
</ul> </ul>
</div> </div>
</nav> </nav>
<div class="drawer" id="sideDrawer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/episodes">Episodes</a></li>
<li><a href="/add">Add Podcast</a></li>
<li><a href="/settings">Settings</a></li>
</ul>
<div id="closeDrawer" onclick="toggleMenu()" >
<div class="bar1"></div>
<div class="bar3"></div>
</div>
</div>
<div id="overlay" onclick="toggleMenu()"></div>
<script>
function toggleMenu(){
let sideDrawer= document.getElementById('sideDrawer')
let overlay= document.getElementById('overlay')
if(overlay.style.display==="block"){
sideDrawer.style.left="-160px"
overlay.style.display="none"
}else{
sideDrawer.style.left="0px"
overlay.style.display="block"
}
}
</script>
{{end}} {{end}}

6
client/settings.html
Unescape View File

@ -30,10 +30,8 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<section class="header">
<h1>{{ .title }}</h1> {{template "navbar" .}}
</section>
{{template "navbar"}}
<br> <br>
<div class="row" id="app"> <div class="row" id="app">
<div class="columns twelve"> <div class="columns twelve">

Write Preview
Loading…
Cancel
Save