UI update
This commit is contained in:
sairaj mote
parent
04a7ea76f3
commit
040771d460
37
css/main.css
37
css/main.css
@ -678,8 +678,15 @@ h3 {
|
||||
clip-path: circle(0);
|
||||
}
|
||||
|
||||
#home {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#user {
|
||||
position: relative;
|
||||
gap: 0.5rem;
|
||||
height: 100%;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
#quick_actions_container {
|
||||
@ -713,14 +720,6 @@ h3 {
|
||||
}
|
||||
|
||||
.wallet-action {
|
||||
display: flex;
|
||||
white-space: normal;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.8rem 0.6rem !important;
|
||||
color: rgba(var(--text-color), 1);
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
flex: 1;
|
||||
}
|
||||
@ -849,6 +848,7 @@ h3 {
|
||||
#payments_history {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.transaction {
|
||||
@ -914,6 +914,15 @@ h3 {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
|
||||
#add_address_button {
|
||||
border-radius: 0.5rem;
|
||||
color: rgba(var(--background-color), 1);
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
#add_address_button .icon {
|
||||
fill: rgba(var(--background-color), 1);
|
||||
}
|
||||
|
||||
#transaction_result {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
@ -1132,17 +1141,7 @@ h3 {
|
||||
}
|
||||
|
||||
#saved_ids_list {
|
||||
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
||||
}
|
||||
|
||||
.saved-id {
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 56rem) {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -633,8 +633,14 @@ h3 {
|
||||
.clip {
|
||||
clip-path: circle(0);
|
||||
}
|
||||
#home {
|
||||
padding: 0;
|
||||
}
|
||||
#user {
|
||||
position: relative;
|
||||
gap: 0.5rem;
|
||||
height: 100%;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
#quick_actions_container {
|
||||
display: grid;
|
||||
@ -666,14 +672,6 @@ h3 {
|
||||
}
|
||||
}
|
||||
.wallet-action {
|
||||
display: flex;
|
||||
white-space: normal;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.8rem 0.6rem !important;
|
||||
color: rgba(var(--text-color), 1);
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
flex: 1;
|
||||
&:nth-of-type(2) {
|
||||
@ -795,6 +793,7 @@ h3 {
|
||||
#payments_history {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
.transaction {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
@ -860,6 +859,14 @@ h3 {
|
||||
border-radius: 3rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
#add_address_button {
|
||||
border-radius: 0.5rem;
|
||||
color: rgba(var(--background-color), 1);
|
||||
background-color: var(--accent-color);
|
||||
.icon {
|
||||
fill: rgba(var(--background-color), 1);
|
||||
}
|
||||
}
|
||||
|
||||
#transaction_result {
|
||||
display: grid;
|
||||
@ -1057,16 +1064,7 @@ h3 {
|
||||
align-items: flex-start;
|
||||
}
|
||||
#saved_ids_list {
|
||||
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
||||
}
|
||||
.saved-id {
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 56rem) {
|
||||
|
||||
198
index.html
198
index.html
@ -57,7 +57,7 @@
|
||||
</sm-popup>
|
||||
<div id="secondary_pages" class="page hide">
|
||||
<header class="flex align-center gap-1">
|
||||
<a href="#/home" class="flex align-center flex-1">
|
||||
<div class="flex align-center flex-1">
|
||||
<svg class="icon" style="margin-right:0.3rem" viewBox="0 0 96 108"
|
||||
style="enable-background:new 0 0 90.5 106.3;" xml:space="preserve">
|
||||
<path d="M90.2,102.5c-2.4-8.2-9.9-14.5-27.4-23.1c-7.1-3.5-11.8-6.2-14-8.3c-1.7-1.6-3.5-4-4.2-5.5c-0.7-1.7-0.7-5.5,0-7.5
|
||||
@ -84,7 +84,7 @@
|
||||
c1.1-2.6,1.3-2.7,3.4-1c1.9,1.5,4.5,3.8,4.5,4.1C45.8,7.8,45.3,8.9,44.6,10z" />
|
||||
</svg>
|
||||
<h4>RanchiMall Pay</h4>
|
||||
</a>
|
||||
</div>
|
||||
<theme-toggle></theme-toggle>
|
||||
</header>
|
||||
<article id="landing" class="inner-page page-layout hide">
|
||||
@ -140,7 +140,7 @@
|
||||
</div>
|
||||
<div id="main_card" class="page hide">
|
||||
<header id="main_header" class="flex align-center space-between">
|
||||
<a href="#/home" class="flex align-center flex-1">
|
||||
<div class="flex align-center flex-1">
|
||||
<svg class="icon" style="margin-right:0.3rem" viewBox="0 0 96 108"
|
||||
style="enable-background:new 0 0 90.5 106.3;" xml:space="preserve">
|
||||
<path d="M90.2,102.5c-2.4-8.2-9.9-14.5-27.4-23.1c-7.1-3.5-11.8-6.2-14-8.3c-1.7-1.6-3.5-4-4.2-5.5c-0.7-1.7-0.7-5.5,0-7.5
|
||||
@ -167,68 +167,137 @@
|
||||
c1.1-2.6,1.3-2.7,3.4-1c1.9,1.5,4.5,3.8,4.5,4.1C45.8,7.8,45.3,8.9,44.6,10z" />
|
||||
</svg>
|
||||
<h4>RanchiMall Pay</h4>
|
||||
</a>
|
||||
</div>
|
||||
<theme-toggle></theme-toggle>
|
||||
</header>
|
||||
<section id="home" class="inner-page hide">
|
||||
<div id="user" class="hide grid user-element">
|
||||
<div id="quick_actions_container">
|
||||
<button class="primary-action" onclick="showTokenTransfer('send')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
|
||||
</svg>
|
||||
Send rupee
|
||||
</button>
|
||||
<button class="primary-action" onclick="showTokenTransfer('request')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
|
||||
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M20,2H4.01c-1.1,0-2,0.9-2,2L2,22l4-4h14c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M12,6c1.1,0,2,0.9,2,2s-0.9,2-2,2 s-2-0.9-2-2S10.9,6,12,6z M16,14H8v-0.57c0-0.81,0.48-1.53,1.22-1.85C10.07,11.21,11.01,11,12,11c0.99,0,1.93,0.21,2.78,0.58 C15.52,11.9,16,12.62,16,13.43V14z" />
|
||||
</g>
|
||||
</svg>
|
||||
Request rupee
|
||||
</button>
|
||||
<button class="primary-action" onclick="">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
|
||||
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
<g>
|
||||
<div class="flex direction-column gap-2 h-100">
|
||||
<div id="quick_actions_container">
|
||||
<button class="primary-action" onclick="showTokenTransfer('send')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
|
||||
</svg>
|
||||
Send rupee
|
||||
</button>
|
||||
<button class="primary-action" onclick="showTokenTransfer('request')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
|
||||
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<g>
|
||||
<path d="M3,11h8V3H3V11z M5,5h4v4H5V5z" />
|
||||
<path d="M3,21h8v-8H3V21z M5,15h4v4H5V15z" />
|
||||
<path d="M13,3v8h8V3H13z M19,9h-4V5h4V9z" />
|
||||
<rect height="2" width="2" x="19" y="19" />
|
||||
<rect height="2" width="2" x="13" y="13" />
|
||||
<rect height="2" width="2" x="15" y="15" />
|
||||
<rect height="2" width="2" x="13" y="17" />
|
||||
<rect height="2" width="2" x="15" y="19" />
|
||||
<rect height="2" width="2" x="17" y="17" />
|
||||
<rect height="2" width="2" x="17" y="13" />
|
||||
<rect height="2" width="2" x="19" y="15" />
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
Scan FLO QR
|
||||
</button>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="flex align-center space-between">
|
||||
<h4>Saved IDs</h4>
|
||||
<button class="button" onclick="showPopup('save_id_popup')">Save FLO ID</button>
|
||||
</div>
|
||||
<ul id="saved_ids_list" class="observe-empty-state"></ul>
|
||||
<div class="empty-state">
|
||||
<h4>No saved FLO IDs</h4>
|
||||
<g>
|
||||
<path
|
||||
d="M20,2H4.01c-1.1,0-2,0.9-2,2L2,22l4-4h14c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M12,6c1.1,0,2,0.9,2,2s-0.9,2-2,2 s-2-0.9-2-2S10.9,6,12,6z M16,14H8v-0.57c0-0.81,0.48-1.53,1.22-1.85C10.07,11.21,11.01,11,12,11c0.99,0,1.93,0.21,2.78,0.58 C15.52,11.9,16,12.62,16,13.43V14z" />
|
||||
</g>
|
||||
</svg>
|
||||
Request rupee
|
||||
</button>
|
||||
<button class="primary-action" onclick="">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
|
||||
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M3,11h8V3H3V11z M5,5h4v4H5V5z" />
|
||||
<path d="M3,21h8v-8H3V21z M5,15h4v4H5V15z" />
|
||||
<path d="M13,3v8h8V3H13z M19,9h-4V5h4V9z" />
|
||||
<rect height="2" width="2" x="19" y="19" />
|
||||
<rect height="2" width="2" x="13" y="13" />
|
||||
<rect height="2" width="2" x="15" y="15" />
|
||||
<rect height="2" width="2" x="13" y="17" />
|
||||
<rect height="2" width="2" x="15" y="19" />
|
||||
<rect height="2" width="2" x="17" y="17" />
|
||||
<rect height="2" width="2" x="17" y="13" />
|
||||
<rect height="2" width="2" x="19" y="15" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
Scan FLO QR
|
||||
</button>
|
||||
</div>
|
||||
<section class="flex direction-column h-100">
|
||||
<div class="grid align-center gap-0-5">
|
||||
<div class="flex align-center">
|
||||
<svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M21 5v14h2V5h-2zm-4 14h2V5h-2v14zM14 5H2c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zM8 7.75c1.24 0 2.25 1.01 2.25 2.25S9.24 12.25 8 12.25 5.75 11.24 5.75 10 6.76 7.75 8 7.75zM12.5 17h-9v-.75c0-1.5 3-2.25 4.5-2.25s4.5.75 4.5 2.25V17z" />
|
||||
</svg>
|
||||
<h4>Saved FLO IDs</h4>
|
||||
</div>
|
||||
<p class="flex align-center">
|
||||
<svg class="icon margin-right-0-5" style="fill: #ffc107;"
|
||||
xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
|
||||
fill="#000000">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M9 21c0 .5.4 1 1 1h4c.6 0 1-.5 1-1v-1H9v1zm3-19C8.1 2 5 5.1 5 9c0 2.4 1.2 4.5 3 5.7V17c0 .5.4 1 1 1h6c.6 0 1-.5 1-1v-2.3c1.8-1.3 3-3.4 3-5.7 0-3.9-3.1-7-7-7z" />
|
||||
</svg>
|
||||
<span id="saved_ids_tip">Click 'Add FLO ID' to add a new FLO ID.</span>
|
||||
</p>
|
||||
</div>
|
||||
<ul id="saved_ids_list" class="observe-empty-state grid"></ul>
|
||||
<div class="empty-state justify-center text-center align-center h-100"
|
||||
style="align-content: center;">
|
||||
<svg class="justify-self-center" style="height: 12rem;"
|
||||
id="bb7dac0d-c86d-4eae-9345-05ead570be6d" data-name="Layer 1"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
|
||||
<defs>
|
||||
<style>
|
||||
.e4b4c873-5e79-4c66-a530-269f7775150b {
|
||||
fill: rgba(var(--text-color), 0.03);
|
||||
}
|
||||
|
||||
.f8c35eef-c260-42fc-be6f-7c8afb0beeeb {
|
||||
fill: rgba(var(--text-color), 0.2);
|
||||
}
|
||||
|
||||
.ee8c2e6d-b8f3-4b81-80ab-31d470d121b9 {
|
||||
fill: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<rect class="e4b4c873-5e79-4c66-a530-269f7775150b" x="34.76" y="40.75" width="177.53"
|
||||
height="41.42" rx="4" />
|
||||
<circle class="f8c35eef-c260-42fc-be6f-7c8afb0beeeb" cx="57.21" cy="61.46" r="9.29" />
|
||||
<rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="75.4" y="51.37" width="40.44"
|
||||
height="9.03" rx="1.92" />
|
||||
<rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="75.4" y="62.79" width="80.09"
|
||||
height="9.03" rx="1.92" />
|
||||
<rect class="e4b4c873-5e79-4c66-a530-269f7775150b" x="10" y="99.29" width="177.53"
|
||||
height="41.42" rx="4" />
|
||||
<circle class="f8c35eef-c260-42fc-be6f-7c8afb0beeeb" cx="32.45" cy="120" r="9.29" />
|
||||
<rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="50.64" y="109.91" width="40.44"
|
||||
height="9.03" rx="1.92" />
|
||||
<rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="50.64" y="121.33" width="80.09"
|
||||
height="9.03" rx="1.92" />
|
||||
<rect class="e4b4c873-5e79-4c66-a530-269f7775150b" x="52.47" y="157.83" width="177.53"
|
||||
height="41.42" rx="4" />
|
||||
<circle class="f8c35eef-c260-42fc-be6f-7c8afb0beeeb" cx="74.93" cy="178.54" r="9.29" />
|
||||
<rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="93.12" y="168.46" width="40.44"
|
||||
height="9.03" rx="1.92" />
|
||||
<rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="93.12" y="179.87" width="80.09"
|
||||
height="9.03" rx="1.92" />
|
||||
</svg>
|
||||
<h4>No Saved FLO ID</h4>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<button id="add_address_button" class="button interact fab" onclick="showPopup('add_address_popup')">
|
||||
<svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path
|
||||
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" />
|
||||
</svg>
|
||||
Add FLO ID
|
||||
</button>
|
||||
</div>
|
||||
<section id="cashier" class=" grid gap-1 hide admin-element">
|
||||
<h4>Requests</h4>
|
||||
@ -377,10 +446,15 @@
|
||||
</li>
|
||||
<li>
|
||||
<a href="#/requests" class="nav-item interact" title='View payment requests'>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
|
||||
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M20,2H4.01c-1.1,0-2,0.9-2,2L2,22l4-4h14c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M12,6c1.1,0,2,0.9,2,2s-0.9,2-2,2 s-2-0.9-2-2S10.9,6,12,6z M16,14H8v-0.57c0-0.81,0.48-1.53,1.22-1.85C10.07,11.21,11.01,11,12,11c0.99,0,1.93,0.21,2.78,0.58 C15.52,11.9,16,12.62,16,13.43V14z" />
|
||||
</g>
|
||||
</svg>
|
||||
<span class="nav-item__title">Requests</span>
|
||||
</a>
|
||||
@ -414,7 +488,7 @@
|
||||
</nav>
|
||||
</div>
|
||||
<!-- Popups -->
|
||||
<sm-popup id="save_id_popup">
|
||||
<sm-popup id="add_address_popup">
|
||||
<header slot="header" class="popup__header">
|
||||
<button class="popup__header__close justify-self-start" onclick="hidePopup()">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user