Skip to content

Commit

Permalink
Improving cart, fixing market & portfolio UI bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabcodingzest
fabcodingzest committed Aug 18, 2020
1 parent 4b97491 commit f8f772c
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 71 deletions.
23 changes: 12 additions & 11 deletions views/cart.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,22 @@
<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 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:items-start">
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-start">
<div class="flex flex items-center justify-start w-full">
<img class="hidden lg:block h-8 mr-2" src="<%= logoSrc %> " alt="<%= companyName %>">
<p class="font-medium text-left text-xs md:text-sm lg:text-md w-full md:break-all"
name="companySymbol" id="companySymbol"><%= companyName %></p>
<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"
><%= 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">
Unit Price
</div>
<div class="hidden md:block md:flex md:justify-center text-xs lg:text-lg font-bold uppercase">
<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>
Expand All @@ -31,7 +31,7 @@
class="hidden md:block text-xs lg:text-lg font-bold uppercase md:flex md:items-center md:justify-center lg:items-start">
Quantity
</div>
<div class=" text-xs lg:text-lg font-bold uppercase flex items-center justify-center">
<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"
Expand All @@ -42,7 +42,7 @@
<div class=" text-xs lg:text-lg text-right font-bold uppercase flex items-center justify-end lg:items-start">
Total Price
</div>
<div class=" text-xs lg:text-lg font-bold uppercase flex items-center justify-end">
<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 %>
Expand All @@ -55,7 +55,8 @@
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>
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>
</form>
</div>
Expand Down
18 changes: 9 additions & 9 deletions views/market.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<section class="text-gray-700 body-font md:ml-64 md:mx-auto md:pl-8 md:pr-14 w-screen inline">
<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">
<h4 class="text-gray-700 lg:text-6xl text-5xl font-semibold leading-none tracking-wider px-5">Favorite Stocks</h2>
</div>
<div class="container px-5 py-16 mx-auto pl-4">
<div class="container py-16 mx-auto">

<div class="flex -m-4 inline-block overflow-x-auto whitespace-no-wrap">
<% for(var i=0; i < compactData.length; i++) { %>
Expand Down Expand Up @@ -40,17 +40,17 @@


<!-- genral stocks section -->
<div class="pr-12">
<div class="px-auto">
<div class="my-4 absolute-center pt-20">
<h4 class="text-gray-700 lg:text-6xl text-5xl font-semibold leading-none tracking-wider px-5">Trending Stocks</h2>
</div>

<div class="md:flex -m-4 inline-block flex-wrap pt-10">
<div class="md:flex -m-4 inline-block mx-auto w-full flex-wrap pt-10">
<% for(var i=min; i < max; i++) { %>
<div class="lg:w-1/4 md:w-1/2 p-4 w-54">
<div class="py-6 max-w-sm rounded overflow-hidden shadow-lg hover:bg-white transition duration-500 bg-white ">
<div class="space-y-10">
<div class="lg:w-1/4 md:w-1/2 p-4 w-54 flex justify-center">
<div class="flex items-center justify-center py-6 min-h-full w-full rounded overflow-hidden shadow-lg hover:bg-white transition duration-500 bg-white ">
<div class="space-y-10 w-full">
<div class="py-2 px-4 md:px-10">
<div class="space-y-5">
<div class="font-bold text-2xl text-center mb-2">
Expand All @@ -59,8 +59,8 @@
<p class="text-gray-700 text-center text-base">
<%- totalData[i]["Company Name"] %>
</p>
<div class="flex justify-between px-6 md:px-2">
<button class="w-14 bg-white tracking-wide text-gray-700 font-bold rounded border-b-2 border-blue-500 hover:border-blue-600 hover:bg-blue-500 hover:text-white shadow-md py-2 px-2 inline-flex items-center">
<div class="flex justify-around px-6 md:px-2 w-2/3 mx-auto">
<button class="mr-1 w-14 bg-white tracking-wide text-gray-700 font-bold rounded border-b-2 border-blue-500 hover:border-blue-600 hover:bg-blue-500 hover:text-white shadow-md py-2 px-2 inline-flex items-center">
<span class="mx-auto"><a href="/view/<%- totalData[i]["Symbol"] %>">VIEW</a></span>
</button>
Expand Down
102 changes: 53 additions & 49 deletions views/partials/_nav.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,61 @@
<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-56 lg:w-64 text-gray-700 bg-white flex-shrink-0 md:h-screen md:z-50 md:fixed md:left-0 md:top-0"
class="flex flex-col w-full md:w-56 lg:w-64 text-gray-700 bg-white flex-shrink-0 md:min-h-full md:fixed md:left-0 md:top-0 overflow-y-auto"
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-2xl lg: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="h-20 w-20 border-8 border-blue-600 box-1 rounded-full" src="<%= avatar %>" alt="" />
</div>
<a class="block w-2/5 md:w-4/5 max-w-xs lg: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
d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4
<div class="container rerelative flex flex-col">
<div class="container ">
<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-2xl lg: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="h-20 w-20 border-8 border-blue-600 box-1 rounded-full" src="<%= avatar %>" alt="" />
</div>
<a class="block w-2/5 md:w-4/5 max-w-xs lg: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 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
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>
</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="/addBalance">+ Add Balance</a>
<!-- only for development purpose i added ADD BALANCE button here on navbar. -->
<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="/addBalance">+ Add Balance</a>
<!-- only for development purpose i added ADD BALANCE button here on navbar. -->

<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>Logout</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>Logout</a>
</div>
</nav>
</div>
</nav>
</div>
</div>
5 changes: 3 additions & 2 deletions views/portfolio.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<main class="px-16 py-6 md:col-span-4 bg-gray-300 md:pl-64 md:mx-auto">
<main class="md:col-span-4 bg-gray-300 md:ml-56 lg:ml-64 md:pr-14 w-full">

<div class="container px-5 py-10 mx-auto md:px-auto">

<!-- <div class="absolute-center mx-auto"> -->

Expand Down Expand Up @@ -518,7 +519,7 @@
<div class="mt-12 flex justify-center ">
<div class="btn bg-secondary-100 text-secondary-200 inline-block hover:shadow-inner transform hover:scale-125 hover:bg-opacity-50 transition ease-out duration-300 ">Load more</div>
</div>

</div>

<!-- </div> -->
</main>

0 comments on commit f8f772c

Please sign in to comment.