fix: page on mobile not taking full height of view-port
This commit is contained in:
sairaj mote
parent
443925e4f5
commit
64f2690c23
41
css/main.css
41
css/main.css
@ -8,6 +8,7 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
height: 100%;
|
||||
font-size: clamp(1rem, 1.2vmax, 3rem);
|
||||
--ease-in-overshhot: cubic-bezier(0.6, -0.28, 0.735, 0.045);
|
||||
--ease-out-overshhot: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
@ -21,8 +22,7 @@ body {
|
||||
--background-color: #efefef;
|
||||
--error-color: red;
|
||||
color: rgba(var(--text-color), 1);
|
||||
background: url(lighthouse.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
height: calc(100%);
|
||||
}
|
||||
|
||||
body[data-theme=dark] {
|
||||
@ -81,6 +81,10 @@ sm-textarea {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
@ -161,13 +165,14 @@ sm-textarea {
|
||||
#main_card {
|
||||
height: 100%;
|
||||
grid-row: 1/3;
|
||||
background: rgba(var(--foreground-color), 0.9);
|
||||
}
|
||||
|
||||
#main_header {
|
||||
grid-area: header;
|
||||
height: max-content;
|
||||
gap: 0.2rem 0.5rem;
|
||||
padding: 1.5rem 0.7rem 1.5rem 1rem;
|
||||
padding: 1rem 0.7rem 1rem 1rem;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-areas: "company setting" "app setting";
|
||||
}
|
||||
@ -227,7 +232,7 @@ sm-textarea {
|
||||
}
|
||||
|
||||
.navbar__item__title {
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
@ -248,6 +253,10 @@ sm-textarea {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
#dashboard_page__header {
|
||||
height: 7.5rem;
|
||||
}
|
||||
|
||||
#base_header {
|
||||
width: 100%;
|
||||
}
|
||||
@ -259,7 +268,7 @@ sm-textarea {
|
||||
}
|
||||
|
||||
#send_flo_form {
|
||||
padding: 0 1.5rem;
|
||||
padding: 0 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@ -274,7 +283,6 @@ sm-textarea {
|
||||
}
|
||||
|
||||
#selected_contact_options {
|
||||
margin-top: 0.5rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@ -334,6 +342,7 @@ sm-textarea {
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.contact-hidden-options {
|
||||
@ -397,15 +406,10 @@ sm-textarea {
|
||||
}
|
||||
|
||||
@media all and (max-width: 640px) {
|
||||
body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#main_card {
|
||||
min-height: 100%;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-areas: "header" "page" "nav";
|
||||
background: rgba(var(--foreground-color), 0.9);
|
||||
}
|
||||
|
||||
#main_navbar {
|
||||
@ -427,8 +431,10 @@ sm-textarea {
|
||||
}
|
||||
@media all and (min-width: 640px) {
|
||||
body {
|
||||
place-content: center;
|
||||
min-height: 100vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: url(lighthouse.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
sm-popup {
|
||||
@ -450,7 +456,6 @@ sm-textarea {
|
||||
grid-template-rows: min-content 1fr;
|
||||
grid-template-areas: "header page" "nav page";
|
||||
box-shadow: 0 1.5rem 1.5rem rgba(0, 0, 0, 0.16);
|
||||
background: rgba(var(--foreground-color), 0.9);
|
||||
}
|
||||
|
||||
#main_header {
|
||||
@ -464,6 +469,10 @@ sm-textarea {
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.navbar__item__title {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#page_container {
|
||||
position: relative;
|
||||
grid-row: 1/3;
|
||||
@ -480,7 +489,7 @@ sm-textarea {
|
||||
}
|
||||
|
||||
.page__header {
|
||||
padding: 2rem 1.5rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
#contacts_container {
|
||||
@ -490,7 +499,7 @@ sm-textarea {
|
||||
#add_contact_button {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: 2rem 2.5rem;
|
||||
margin: 2rem;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 1280px) {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -7,6 +7,7 @@
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
:root{
|
||||
height: 100%;
|
||||
font-size: clamp(1rem, 1.2vmax, 3rem);
|
||||
--ease-in-overshhot: cubic-bezier(0.6, -0.28, 0.735, 0.045);
|
||||
--ease-out-overshhot: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
@ -19,8 +20,7 @@ body{
|
||||
--background-color: #efefef;
|
||||
--error-color: red;
|
||||
color: rgba(var(--text-color), 1);
|
||||
background: url(lighthouse.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
height: calc(100%);
|
||||
}
|
||||
body[data-theme='dark']{
|
||||
--accent-color:#d7b5ff;
|
||||
@ -68,6 +68,9 @@ sm-textarea{
|
||||
.space-between{
|
||||
justify-content: space-between;
|
||||
}
|
||||
.full-width{
|
||||
width: 100%;
|
||||
}
|
||||
.hide{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
@ -134,12 +137,13 @@ sm-textarea{
|
||||
#main_card{
|
||||
height: 100%;
|
||||
grid-row: 1/3;
|
||||
background: rgba(var(--foreground-color), 0.9);
|
||||
}
|
||||
#main_header{
|
||||
grid-area: header;
|
||||
height: max-content;
|
||||
gap: 0.2rem 0.5rem;
|
||||
padding: 1.5rem 0.7rem 1.5rem 1rem;
|
||||
padding: 1rem 0.7rem 1rem 1rem;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-areas: 'company setting' 'app setting';
|
||||
}
|
||||
@ -179,7 +183,6 @@ sm-textarea{
|
||||
padding: 0.8rem;
|
||||
border-radius: 0.5rem;
|
||||
&--active{
|
||||
|
||||
.navbar__item__icon{
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
@ -194,7 +197,7 @@ sm-textarea{
|
||||
fill: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
.navbar__item__title{
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
@ -214,7 +217,9 @@ sm-textarea{
|
||||
fill: white;
|
||||
}
|
||||
|
||||
|
||||
#dashboard_page__header{
|
||||
height: 7.5rem;
|
||||
}
|
||||
#base_header{
|
||||
width: 100%;
|
||||
}
|
||||
@ -224,7 +229,7 @@ sm-textarea{
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
#send_flo_form{
|
||||
padding: 0 1.5rem;
|
||||
padding: 0 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@ -238,7 +243,6 @@ sm-textarea{
|
||||
height: 1.2rem;
|
||||
}
|
||||
#selected_contact_options{
|
||||
margin-top: 0.5rem;
|
||||
list-style: none;
|
||||
}
|
||||
.contact-option{
|
||||
@ -295,6 +299,7 @@ sm-textarea{
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.contact-hidden-options{
|
||||
position: absolute;
|
||||
@ -352,14 +357,10 @@ sm-textarea{
|
||||
|
||||
// mobile only styles
|
||||
@media all and (max-width: 640px){
|
||||
body{
|
||||
min-height: 100vh;
|
||||
}
|
||||
#main_card{
|
||||
min-height: 100%;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-areas: 'header' 'page' 'nav';
|
||||
background: rgba(var(--foreground-color), 0.9);
|
||||
}
|
||||
#main_navbar{
|
||||
flex-direction: row;
|
||||
@ -379,8 +380,10 @@ sm-textarea{
|
||||
// desktop only styles
|
||||
@media all and (min-width: 640px){
|
||||
body{
|
||||
place-content: center;
|
||||
min-height: 100vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: url(lighthouse.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
sm-popup{
|
||||
--width: 24rem;
|
||||
@ -399,7 +402,6 @@ sm-textarea{
|
||||
grid-template-rows: min-content 1fr;
|
||||
grid-template-areas: 'header page' 'nav page';
|
||||
box-shadow: 0 1.5rem 1.5rem rgba(0, 0, 0, 0.16);
|
||||
background: rgba(var(--foreground-color), 0.9);
|
||||
}
|
||||
#main_header{
|
||||
padding: 1.5rem 1.2rem 1.5rem 2rem;
|
||||
@ -410,6 +412,9 @@ sm-textarea{
|
||||
padding: 0 1rem;
|
||||
align-content: flex-start;
|
||||
}
|
||||
.navbar__item__title{
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
#page_container{
|
||||
position: relative;
|
||||
grid-row: 1/3;
|
||||
@ -425,7 +430,7 @@ sm-textarea{
|
||||
}
|
||||
}
|
||||
.page__header{
|
||||
padding: 2rem 1.5rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
#contacts_container{
|
||||
padding: 0 1rem 8rem 2rem;
|
||||
@ -433,7 +438,7 @@ sm-textarea{
|
||||
#add_contact_button{
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: 2rem 2.5rem;
|
||||
margin: 2rem;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 1280px){
|
||||
|
||||
64
new.html
64
new.html
@ -11,7 +11,7 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/main.min.css">
|
||||
</head>
|
||||
<body class="grid" data-theme="light">
|
||||
<body class="flex" data-theme="light">
|
||||
<audio id="notification_sound">
|
||||
<source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/mpeg">
|
||||
<source src="https://rmservices.duckdns.org/files/notification-sound.ogg" type="audio/ogg">
|
||||
@ -54,11 +54,11 @@
|
||||
</button>
|
||||
</header>
|
||||
<nav id="main_navbar" class="flex">
|
||||
<button id="home_button" class="navbar__item navbar__item--active">
|
||||
<button id="dashboard_page_button" class="navbar__item" data-target-page="dashboard_page">
|
||||
<svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
|
||||
<span class="navbar__item__title">Dashboard</span>
|
||||
</button>
|
||||
<button id="send_flo_button" class="navbar__item">
|
||||
<button id="send_flo_page_button" class="navbar__item" data-target-page="send_flo_page">
|
||||
<svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"/></svg>
|
||||
<span class="navbar__item__title">Send FLO</span>
|
||||
</button>
|
||||
@ -66,7 +66,7 @@
|
||||
<svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2 9h19a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9zm1-6h15v4H2V4a1 1 0 0 1 1-1zm12 11v2h3v-2h-3z"/></svg>
|
||||
<span class="navbar__item__title">Check balance</span>
|
||||
</button>
|
||||
<button id="get_flo_button" class="navbar__item">
|
||||
<button id="get_flo_button" class="navbar__item" data-target-page="get_flo_page">
|
||||
<svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.313 11.566l7.94-7.94 2.121 2.121-1.414 1.414 2.121 2.121-3.535 3.536-2.121-2.121-2.99 2.99a5.002 5.002 0 0 1-7.97 5.849 5 5 0 0 1 5.848-7.97zm-.899 5.848a2 2 0 1 0-2.828-2.828 2 2 0 0 0 2.828 2.828z"/></svg>
|
||||
<span class="navbar__item__title">Get FLO address</span>
|
||||
</button>
|
||||
@ -76,15 +76,21 @@
|
||||
</button>
|
||||
</nav>
|
||||
<div id="page_container" class="flex">
|
||||
<section class="page">
|
||||
<header class="page__header flex direction-column">
|
||||
<section id="dashboard_page" class="page hide-completely">
|
||||
<header id="dashboard_page__header" class="page__header flex align-center">
|
||||
<div id="base_header" class="flex space-between align-center">
|
||||
<h4 class="header__title">Saved addresses</h4>
|
||||
<sm-input id="search_contacts" placeholder="Search" type="search">
|
||||
<svg slot="icon" class="icon search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"/></svg>
|
||||
</sm-input>
|
||||
<button class="back-button">
|
||||
<svg class="icon search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"/></svg>
|
||||
</button>
|
||||
<div class="expanding-search flex align-center hide-completely">
|
||||
<button class="back-button">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg>
|
||||
</button>
|
||||
<sm-input id="search_contacts" placeholder="Search" type="search"></sm-input>
|
||||
</div>
|
||||
</div>
|
||||
<ul id="selected_contact_options" class="flex align-center hide-completely">
|
||||
<ul id="selected_contact_options" class="flex align-center full-width hide-completely">
|
||||
<li class="contact-option">
|
||||
<button class="contact-option__button" onclick="clearSelection()">
|
||||
<svg class="icon contact-option__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>
|
||||
@ -538,6 +544,12 @@
|
||||
};
|
||||
</script>
|
||||
<script>
|
||||
const activePage = {}
|
||||
|
||||
window.addEventListener('load', e => {
|
||||
console.log('loaded')
|
||||
showPage('dashboard_page')
|
||||
})
|
||||
|
||||
// Animations
|
||||
//Fly animation
|
||||
@ -657,7 +669,23 @@
|
||||
const card = e.target.closest('.contact-card')
|
||||
createRipple(e, card)
|
||||
}
|
||||
else if(e.target.closest('.navbar__item')){
|
||||
showPage(e.target.closest('.navbar__item').dataset.targetPage)
|
||||
}
|
||||
})
|
||||
|
||||
function showPage(pageId){
|
||||
if(activePage.pageId === pageId) return
|
||||
if(activePage.pageId){
|
||||
getRef(activePage.pageId).classList.add('hide-completely')
|
||||
activePage.button.classList.remove('navbar__item--active')
|
||||
}
|
||||
getRef(pageId).classList.remove('hide-completely')
|
||||
const activeButton = getRef(`${pageId}_button`)
|
||||
activeButton.classList.add('navbar__item--active')
|
||||
activePage.pageId = pageId
|
||||
activePage.button = activeButton
|
||||
}
|
||||
|
||||
const selectedContacts = new Set()
|
||||
document.addEventListener('change', e => {
|
||||
@ -689,13 +717,22 @@
|
||||
}
|
||||
if(show){
|
||||
if(!getRef('selected_contact_options').classList.contains('hide-completely')) return
|
||||
getRef('selected_contact_options').classList.remove('hide-completely')
|
||||
getRef('selected_contact_options').animate(slideInDown, options)
|
||||
|
||||
getRef('base_header').animate(slideOutLeft, options)
|
||||
.onfinish = () => {
|
||||
getRef('base_header').classList.add('hide-completely')
|
||||
getRef('selected_contact_options').classList.remove('hide-completely')
|
||||
getRef('selected_contact_options').animate(slideInLeft, options)
|
||||
}
|
||||
}
|
||||
else{
|
||||
if(getRef('selected_contact_options').classList.contains('hide-completely')) return
|
||||
getRef('selected_contact_options').animate(slideOutUp, options).onfinish = () => {
|
||||
|
||||
getRef('selected_contact_options').animate(slideOutRight, options)
|
||||
.onfinish = () => {
|
||||
getRef('selected_contact_options').classList.add('hide-completely')
|
||||
getRef('base_header').classList.remove('hide-completely')
|
||||
getRef('base_header').animate(slideInRight, options)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -706,6 +743,7 @@
|
||||
})
|
||||
selectedContacts.clear()
|
||||
}
|
||||
|
||||
</script>
|
||||
<script>
|
||||
//UI for webWallet
|
||||
|
||||
@ -2562,6 +2562,9 @@ smNotifications.innerHTML = `
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
.notification-panel:empty{
|
||||
display:none;
|
||||
}
|
||||
.notification{
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
@ -2678,8 +2681,7 @@ smNotifications.innerHTML = `
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="notification-panel">
|
||||
</div>
|
||||
<div class="notification-panel"></div>
|
||||
`
|
||||
|
||||
customElements.define('sm-notifications', class extends HTMLElement {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user