Skip to content

Commit

Permalink
Merge pull request #53 from somyaranjan26/fix/#52
Browse files Browse the repository at this point in the history 
Updated UI of the app
  • Loading branch information
@iampavangandhi
iampavangandhi authored Aug 23, 2020
2 parents 0b99ae5 + 901fb3a commit 8264157
Show file tree
Hide file tree
Showing 9 changed files with 833 additions and 971 deletions.
52 changes: 52 additions & 0 deletions public/css/tailwind.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,58 @@ body {
width: 75vw;
}

.tradebyte-logo {
color: #1955E4;
text-shadow: 1px 2px 40px rgba(0, 0, 0, 0.5)
}

.line {
border: 1.5px solid #8e9aad;
}

.user-profile {
border-radius: 100px;
border: 10px solid #1955E4;
width: 130px;
height: 130px;
}

.tick {
height: 22px;
width: 22px;
border-radius: 50%;
background-color: #38cda0;
color: white;
}

.tick-background {
background: #a9f7e6;
border-radius: 29px;
color: #1b9b7f;
}

.tab-color {
border-radius: 10px;
border-color: #1955E4;
color: #1955E4;
}

.view-link {
color: #1955E4;
}

.table-content {
overflow: scroll;
overflow-x: scroll;
overflow-y: auto;
}

.transaction-companySymbol {
color: rgb(0, 0, 0);
font-weight: 700;
font-size: 1.1rem;
}

@tailwind components;

.symbolicon {
Expand Down
7 changes: 4 additions & 3 deletions routes/api/addBalance.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,11 @@ const User = require("../../models/User");
// @access Private
router.get("/", ensureAuth, (req, res) => {
let user = req.user;
res.status(200).render("addBalance"),
{
res.status(200).render("addBalance", {
layout: "layouts/app",
href: "/addBalance",
user,
};
});
});

// TODO
Expand Down
4 changes: 2 additions & 2 deletions routes/api/portfolio.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ const { ensureAuth, ensureGuest } = require("../../middleware/auth");
// @route GET /portfolio
// @access Private
router.get("/", ensureAuth, (req, res) => {
let avatar = req.user.image;
let user = req.user;
res
.status(200)
.render("portfolio", { layout: "layouts/app", avatar, href: "/portfolio" });
.render("portfolio", { layout: "layouts/app", user, href: "/portfolio" });
});

module.exports = router;
49 changes: 23 additions & 26 deletions views/addBalance.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,24 @@
<h1>ADD BALANCE</h1>
<hr />
<h3>Your Current Balance: <%= user.balance%></h3>
<hr />
<br />
<form
action="/addBalance"
method="POST"
class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
>
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2">
Enter amount
</label>
<input
type="number"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
name="addAmount"
placeholder="amount"
/>
<input
type="submit"
value="Add"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
/>
<section class="text-gray-700 body-font md:ml-56 lg:ml-64 md:mx-auto md:pr-14 w-screen inline">
<div class="container px-5 py-10 mx-auto md:px-auto">
<div class="my-4 absolute-center">
<h2 class="text-gray-700 lg:text-6xl text-5xl font-semibold leading-none tracking-wider px-5">Add Balance</h2>
</div>
</form>
<hr class="line">
<div class="container py-16 mx-auto">
<h3>Your Current Balance: <%= user.balance%></h3>
<form action="/addBalance" method="POST" class="bg-white shadow-md rounded px-8 pt-6 pb-8 my-6">
<div class=" mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2">
Enter amount
</label>
<input type="number"
class="shadow appearance-none border rounded w-4/5 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
name="addAmount" placeholder="amount" />
<input type="submit" value="Add"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" />
</div>
</form>
</div>
</div>
</section>

115 changes: 40 additions & 75 deletions views/cart.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,97 +1,66 @@
<div class="relative md:ml-56 lg:ml-64 py-6 px-3 w-full">
<div
class="mx-auto max-w-6xl flex flex-col w-full px-4 md:py-12 md:px-8 text-gray-800"
>
<div class="relative bg-white mx-auto max-w-6xl text-gray-600 mt-6 shadow-xl rounded-lg">
<lable type="submit" class="absolute left-0 top-0 mt-3 ml-4">
<svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 56.966 56.966"
style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve" width="512px" height="512px">
<path
d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z" />
</svg>
</lable>
<input
class="bg-white focus:outline-none focus:outline-none border border-gray-300 rounded-lg mr-6 pl-10 pr-4 py-2 px-4 block w-full appearance-none leading-normal"
type="search" placeholder="Search">
</div>
<div class="mx-auto max-w-6xl flex flex-col w-full px-4 md:py-12 md:px-8 text-gray-800">
<form action="/cart/buy" method="POST">
<h1 class="text-2xl lg:text-4xl font-bold mt-8 mb-4 flex">
Buy Stock :<input
class="bg-gray-300 max-w-sm w-24 ml-2"
type="text"
readonly
value="<%= symbol %>"
id="companySymbol"
name="companySymbol"
/>
Buy Stock :<input class="bg-gray-300 max-w-sm w-24 ml-2" type="text" readonly value="<%= symbol %>"
id="companySymbol" name="companySymbol" />
</h1>
<div class="w-full text-sm lg:text-base border-4"></div>
<div
class="new grid grid-flow-col grid-cols-3 md:grid-cols-4 grid-rows-2 grig-gap-0 md:gap-4 lg:grid-rows-3 bg-white shadow-md p-2 lg:p-6 text-center"
>
<div
class="text-xs text-left lg:text-lg font-bold uppercase flex items-center lg:justify-center"
>
class="new grid grid-flow-col grid-cols-3 md:grid-cols-4 grid-rows-2 grig-gap-0 md:gap-4 lg:grid-rows-3 bg-white shadow-md p-2 lg:p-6 text-center">

<div class="text-xs text-left lg:text-lg font-bold uppercase flex items-center lg:justify-center">
Company Name
</div>
<div
class="text-xs lg:text-lg font-bold flex items-center lg:items-center lg:row-span-2"
>
<div class="text-xs lg:text-lg font-bold flex items-center lg:items-center lg:row-span-2">
<div class="flex flex-col items-center justify-center w-full">
<img
class="hidden lg:block h-16"
src="<%= logoSrc %> "
alt="<%= companyName %>"
/>
<p
class="font-medium text-left text-xs md:text-sm lg:text-center lg:text-lg w-full md:break-all"
>
<img class="hidden lg:block h-16" src="<%= logoSrc %> " alt="<%= companyName %>" />
<p class="font-medium text-left text-xs md:text-sm lg:text-center lg:text-lg w-full md:break-all">
<%= companyName %>
</p>
</div>
</div>
<div
class="hidden md:block text-xs lg:text-lg font-bold uppercase md:flex md:items-center md:justify-center lg:items-start"
>
class="hidden md:block text-xs lg:text-lg font-bold uppercase md:flex items-center justify-center">
Unit Price
</div>
<div
class="hidden md:block md:flex md:justify-center text-xs lg:text-lg font-bold uppercase lg:row-span-2"
>
<input
class="text-sm lg:text-center font-medium text-xs lg:text-lg w-full text-center"
value="<%= latestPrice %>"
name="stockPrice"
id="stockPrice"
readonly
/>
<div class="hidden md:block md:flex md:justify-center text-xs lg:text-lg font-bold uppercase lg:row-span-2">
<input class="text-sm lg:text-center font-medium text-xs lg:text-lg w-full text-center"
value="<%= latestPrice %>" name="stockPrice" id="stockPrice" readonly />
</div>
<div
class="md:hidden text-xs text-center font-semibold uppercase flex items-center justify-center"
>
<div class="md:hidden text-xs text-center font-semibold uppercase flex items-center justify-center">
Qty
</div>
<div
class="hidden md:block text-xs lg:text-lg font-bold uppercase md:flex md:items-center md:justify-center lg:items-start"
>
class="hidden md:block text-xs lg:text-lg font-bold uppercase md:flex items-center justify-center ">
Quantity
</div>
<div
class="text-xs lg:text-lg font-bold uppercase flex items-center justify-center lg:row-span-2"
>
<div class="text-xs lg:text-lg font-bold uppercase flex items-center justify-center lg:row-span-2">
<div class="h-8">
<div class="relative flex flex-row w-full h-8">
<input
type="number"
value="1"
min="1"
name="noOfStock"
id="noOfStock"
class="w-full font-semibold text-center text-gray-700 bg-gray-200 outline-none focus:outline-none hover:text-black focus:text-black"
/>
<input type="number" value="1" min="1" name="noOfStock" id="noOfStock"
class="w-full font-semibold text-center text-gray-700 bg-gray-200 outline-none focus:outline-none hover:text-black focus:text-black" />
</div>
</div>
</div>
<div
class="text-xs lg:text-lg text-right font-bold uppercase flex items-center justify-end lg:items-start"
>
<div class="text-xs lg:text-lg text-right font-bold uppercase flex items-center justify-end">
Total Price
</div>
<div
class="text-xs lg:text-lg font-bold uppercase flex items-center justify-end lg:row-span-2"
>
<p
class="text-xs md:text-sm font-medium text-right text-xs lg:text-lg break-words"
id="totalPrice"
>
<div class="text-xs lg:text-lg font-bold uppercase flex items-center justify-end lg:row-span-2">
<p class="text-xs md:text-sm font-medium text-right text-xs lg:text-lg break-words" id="totalPrice">
<span class="total-price">
<%= latestPrice %>
</span>
Expand All @@ -100,15 +69,11 @@
</div>
</div>
<div class="flex justify-end w-full items-center">
<a
href="/market"
class="block uppercase ml-0 md:ml-auto mt-4 shadow bg-blue-800 hover:bg-indigo-700 focus:shadow-outline focus:outline-none text-white font-semibold text-xs lg:text-sm py-3 px-4 rounded"
>Back to Market</a
>
<button
type="submit"
class="block uppercase mt-4 ml-4 shadow bg-yellow-500 hover:bg-yellow-600 focus:shadow-outline focus:outline-none text-black font-semibold text-xs lg:text-sm py-3 px-4 rounded"
>
<a href="/market"
class="block uppercase ml-0 md:ml-auto mt-4 shadow bg-blue-800 hover:bg-indigo-700 focus:shadow-outline focus:outline-none text-white font-semibold text-xs lg:text-sm py-3 px-4 rounded">Back
to Market</a>
<button type="submit"
class="block uppercase mt-4 ml-4 shadow bg-yellow-500 hover:bg-yellow-600 focus:shadow-outline focus:outline-none text-black font-semibold text-xs lg:text-sm py-3 px-4 rounded">
<span class="hidden md:inline-block">Proceed to</span> Checkout
</button>
</div>
Expand All @@ -124,4 +89,4 @@
const val = e.target.value;
totalPrice.textContent = parseFloat(stockPrice.value * val).toFixed(4);
});
</script>
</script>
48 changes: 23 additions & 25 deletions views/layouts/app.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css"
integrity="sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o="
crossorigin="anonymous"
/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>

<link type="text/css" rel="stylesheet" href="./css/style.css" />
<link type="text/css" rel="stylesheet" href="../css/style.css" />
<title>TradeByte</title>
</head>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css"
integrity="sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o=" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>

<body>
<div class="md:flex flex-col bg-gray-300 md:flex-row min-h-screen w-full">
<%- include('../partials/_nav.ejs') %> <%- body %>
</div>
<script type="application/javascript" src="./javascript/script.js"></script>
<script
type="application/javascript"
src="../javascript/script.js"
></script>
</body>
</html>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap" rel="stylesheet" />

<link type="text/css" rel="stylesheet" href="../css/style.css" />
<link type="text/css" rel="stylesheet" href="../css/tailwind.css" />
<link rel="shortcut icon" href="../images/TradeByte-Favicon.png" type="image/x-icon">
<title>TradeByte</title>
</head>

<body>
<div class="md:flex flex-col md:flex-row min-h-screen w-full">
<%- include('../partials/_nav.ejs') %>
<%- body %>
</div>
<script type="application/javascript" src="../javascript/script.js"></script>
</body>

</html>
Loading

0 comments on commit 8264157

Please sign in to comment.