Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Made the Nav again and enhanced other comp. #33 #34

Merged
merged 1 commit into from
Aug 13, 2020
+54 −158
Merged

Made the Nav again and enhanced other comp. #33 #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion routes/api/cart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const getPrice = require("../../helpers/getPrice");
router.get("/:symbol", ensureAuth, async (req, res) => {
const symbol = req.params.symbol;
const price = await getPrice(symbol);
res.status(200).render("cart", { layout: "layouts/app", symbol, price });
res.status(200).render("cart", { layout: "layouts/app", symbol, price, href: '/market' });
});

// @desc To buy
Expand Down
4 changes: 2 additions & 2 deletions routes/api/market.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const { ensureAuth, ensureGuest } = require("../../middleware/auth");
// @route GET /Market
// @access Private
router.get("/", ensureAuth, async (req, res) => {
res.status(200).render("market", { layout: "layouts/app", jsonData });
res.status(200).render("market", { layout: "layouts/app", jsonData, href: '/market' });
});

module.exports = router;
2 changes: 1 addition & 1 deletion routes/api/portfolio.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const { ensureAuth, ensureGuest } = require("../../middleware/auth");
// @access Private
router.get("/", ensureAuth, (req, res) => {
let avatar = req.user.image;
res.status(200).render("portfolio", { layout: "layouts/app", avatar });
res.status(200).render("portfolio", { layout: "layouts/app", avatar, href: '/portfolio' });
});

module.exports = router;
2 changes: 1 addition & 1 deletion views/layouts/app.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
</head>

<body>
<div class="grid md:grid-cols-5">
<div class="md:flex flex-col md:flex-row md:min-h-screen w-full">
<%- include('../partials/_nav.ejs') %> <%- body %>
</div>
<script src="javascript/script.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion views/market.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<section class="text-gray-700 body-font">
<section class="text-gray-700 body-font md:pl-64 md:mx-auto">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap -m-4">
<% for(var i=0; i < jsonData.length; i++) { %>
Expand Down
198 changes: 47 additions & 151 deletions views/partials/_nav.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,156 +1,52 @@
<div class="md:col-span-1 md:flex">
<!-- nav bar -->

<nav class="text-right fixed mx-3">
<div class="flex justify-between items-center">
<!-- tarde byte heading -->

<h1 class="font-bold uppercase p-4 border-b border-gray-100">
<a
href="/"
class="hover:text-gray-900 tracking-widest border-b-2 border-grey-100 text-3xl pb-2 pt-32"
>TRADEBYTE
</a>
</h1>

<!-- burger icon for nav bar -->

<div class="px-4 cursor-pointer md:hidden" id="burger">
<svg
class="w-6 h-6"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</div>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<div @click.away="open = false"
class="flex flex-col w-full md:w-64 text-gray-700 bg-white flex-shrink-0 md:h-screen md:z-50 md:fixed md:left-0 md:top-0"
x-data="{ open: false }">
<div class="flex-shrink-0 px-6 py-4 flex flex-row items-center justify-between ">
<h1 class="font-bold uppercase border-b border-gray-100 w-full text-center">
<a href="/" class="hover:text-gray-900 tracking-widest text-2xl md:text-3xl pb-2 pt-32">Tradebyte</a>
</h1>
<button class="rounded-lg md:hidden rounded-lg focus:outline-none focus:shadow-outline" @click="open = !open">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path x-show="!open" fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
clip-rule="evenodd"></path>
<path x-show="open" fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
</div>
<nav :class="{'block': open, 'hidden': !open}" class="flex-grow md:block px-4 pb-4 md:pb-0 ">
<div class="flex justify-center align-center rounded-full">
<img class="mx-20 h-20 w-20 border-8 border-blue-600 box-1 rounded-full" src="images/profile.jpg" alt=" " />
</div>

<!-- unordered list of dashboard and market -->

<div class="flex-col gap-20">
<div>
<ul class="text-sm mt-6 hidden md:block" id="menu">
<!-- profile picture of the user -->

<li>
<div class="flex-shrink-0 w-20 h-20 align-bottom">
<img
class="mx-20 h-full w-full border-4 box-1"
style="
border: 10px solid rounded;
border-image-source: linear-gradient(45deg, #266fea, #41d7aa);
border-image-slice: 1;
"
src=""
alt=" "
/>
</div>
</li>

<!-- trading status -->

<li class="pb-8 pt-4 py-1">
<a
href="# "
class="block px-4 flex justify-center bg-green-200 rounded-full text-green-900 text-xl font-bold ml-2"
><svg
class="w-5 ml-2 mr-1"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path d="M5 13l4 4L19 7"></path>
</svg>
Active</a
>
</li>

<li class="py-1">
<a
href="/portfolio"
class="block px-4 flex justify-start border-l-4 border-tempc-400 text-xl font-bold"
>
<svg
class="w-5 ml-2 mr-1"
fill="none "
stroke-linecap="round "
stroke-linejoin="round "
stroke-width="2 "
viewBox="0 0 24 24 "
stroke="currentColor "
>
<path
d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4
13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z "
></path>
</svg>
<span>Dashboard</span>
</a>
</li>

<li class="py-1">
<a
href="/market"
class="block px-4 flex justify-start border-l-4 border-white text-xl font-bold"
>
<svg
class="w-5 ml-2 mr-1"
fill="none "
stroke-linecap="round "
stroke-linejoin="round "
stroke-width="2 "
viewBox="0 0 24 24 "
stroke="currentColor "
>
<path
d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z "
></path>
</svg>
<span>Market</span>
</a>
</li>
</ul>
</div>

<!-- bottom navbar -->

<!-- time left progress bar box -->

<div
class="bg-transparent border border-gray-200 py-3 rounded relative font-smaller lg:mt-32 mr-4"
>
<div class="w-full h-1">
<div class="fluentProgressBar-normal pr-2" style="width: 80%;"></div>
</div>
<strong class="font-bold text-tempc-400">2 hours, 20 min</strong>
<span class="block sm:inline">left for today</span>
</div>

<!-- log out button -->

<div
class="flex justify-center block px-4 ml-8 mr-12 flex bg-gray-200 rounded-md mt-4 text-tempc-400 text-2xl font-bold ml-2 align-bottom"
>
<svg class="w-6 ml-2 mr-1" fill="currentColor" viewBox="0 0 20 20">
<a class="block w-2/4 max-w-xs md:w-3/5 p-2 mt-4 mb-8 mx-auto text-xs font-bold text-gray-900 focus:shadow-outline flex justify-center bg-green-200 rounded-full text-green-900 font-bold"
href="#"><svg class="w-5 mr-1 " fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
viewBox="0 0 24 24" stroke="currentColor">
<path d="M5 13l4 4L19 7"></path>
</svg>Trading Active</a>
<div class="nav-box h-full flex flex-col justify-start">

<a class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline flex <%= href === '/portfolio' ? 'bg-gray-200 border border-purple-700 border-l-8': '' %>"
href="/portfolio"> <svg class="w-5 ml-2 mr-1 " fill="none " stroke-linecap="round " stroke-linejoin="round "
stroke-width="2 " viewBox="0 0 24 24 " stroke="currentColor ">
<path
fill-rule="evenodd"
d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4
13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z ">
</path>
</svg>Dashboard</a>
<a class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline flex <%= href === '/market' ? 'bg-gray-200 border border-purple-700 border-l-8': '' %>"
href="/market"><svg class="w-5 ml-2 mr-1 " fill="none " stroke-linecap="round " stroke-linejoin="round "
stroke-width="2 " viewBox="0 0 24 24 " stroke="currentColor ">
<path d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z "></path>
</svg>Market</a>
<a class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline flex"
href="/auth/logout"><svg class="w-6 ml-2 mr-1 " fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<a href="/auth/logout">LogOut</a>
</div>
clip-rule="evenodd"></path>
</svg>Logout</a>
</div>

<%- include('./_footer.ejs') %>
</nav>
<!-- navbar closed -->
</div>
</div>
2 changes: 1 addition & 1 deletion views/portfolio.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<main class="relative px-16 py-6 md:col-span-4 bg-gray-300 ">
<main class="relative px-16 py-6 md:col-span-4 bg-gray-300 md:pl-64 md:mx-auto">

<!-- header -->

Expand Down