UI tweaks
This commit is contained in:
sairaj mote
parent
7d0291ce31
commit
b9b071316d
26
css/main.css
26
css/main.css
@ -88,6 +88,7 @@ button,
|
||||
transition: -webkit-transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
transition: transform 0.3s, -webkit-transform 0.3s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.button {
|
||||
@ -116,7 +117,7 @@ a:any-link:focus-visible {
|
||||
|
||||
sm-button {
|
||||
--border-radius: 0.5rem;
|
||||
--padding: 0.8rem 1rem;
|
||||
--padding: 0.7rem 1rem;
|
||||
}
|
||||
sm-button[variant=primary] .icon {
|
||||
fill: rgba(var(--background-color), 1);
|
||||
@ -350,6 +351,9 @@ ul {
|
||||
padding: 0.6rem;
|
||||
border-radius: 0.8rem;
|
||||
background-color: var(--accent-color--light);
|
||||
height: -webkit-max-content;
|
||||
height: -moz-max-content;
|
||||
height: max-content;
|
||||
}
|
||||
.icon-button .icon {
|
||||
fill: var(--accent-color);
|
||||
@ -595,6 +599,7 @@ strip-select {
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 0 1.5rem;
|
||||
margin: 3rem 0;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
@ -805,6 +810,14 @@ strip-option:last-of-type {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#user_section__header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: inherit;
|
||||
padding-top: 1.5rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#account_chart_container {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
@ -1153,9 +1166,15 @@ strip-option:last-of-type {
|
||||
margin: 0.3rem 0 1.5rem 0;
|
||||
}
|
||||
|
||||
#sign_out_button {
|
||||
color: rgba(var(--background-color), 1);
|
||||
--padding: 0.8rem 1.6rem;
|
||||
--background: var(--danger-color);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
sm-button {
|
||||
--padding: 1rem;
|
||||
--padding: 0.9rem 1.6rem;
|
||||
}
|
||||
|
||||
#dashboard {
|
||||
@ -1282,6 +1301,9 @@ strip-option:last-of-type {
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
padding-top: 0;
|
||||
-webkit-box-shadow: -0.5rem 0 1.5rem rgba(0, 0, 0, 0.1);
|
||||
box-shadow: -0.5rem 0 1.5rem rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
#user_section:not(.reveal) {
|
||||
-webkit-transform: translateX(100%);
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -83,6 +83,7 @@ button,
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.button {
|
||||
padding: 0.6rem 1rem;
|
||||
@ -102,7 +103,7 @@ a:any-link:focus-visible {
|
||||
|
||||
sm-button {
|
||||
--border-radius: 0.5rem;
|
||||
--padding: 0.8rem 1rem;
|
||||
--padding: 0.7rem 1rem;
|
||||
&[variant="primary"] {
|
||||
.icon {
|
||||
fill: rgba(var(--background-color), 1);
|
||||
@ -322,6 +323,7 @@ ul {
|
||||
padding: 0.6rem;
|
||||
border-radius: 0.8rem;
|
||||
background-color: var(--accent-color--light);
|
||||
height: max-content;
|
||||
.icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
@ -525,6 +527,7 @@ strip-select {
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
.empty-state {
|
||||
padding: 0 1.5rem;
|
||||
margin: 3rem 0;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
@ -713,6 +716,14 @@ strip-option {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
#user_section__header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: inherit;
|
||||
padding-top: 1.5rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#account_chart_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -969,9 +980,14 @@ strip-option {
|
||||
margin: 0.3rem 0 1.5rem 0;
|
||||
}
|
||||
}
|
||||
#sign_out_button {
|
||||
color: rgba(var(--background-color), 1);
|
||||
--padding: 0.8rem 1.6rem;
|
||||
--background: var(--danger-color);
|
||||
}
|
||||
@media screen and (max-width: 640px) {
|
||||
sm-button {
|
||||
--padding: 1rem;
|
||||
--padding: 0.9rem 1.6rem;
|
||||
}
|
||||
#dashboard {
|
||||
padding: 0 1.5rem;
|
||||
@ -1074,6 +1090,8 @@ strip-option {
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
padding-top: 0;
|
||||
box-shadow: -0.5rem 0 1.5rem rgba(0, 0, 0, 0.1);
|
||||
&:not(.reveal) {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
20
index.html
20
index.html
@ -42,7 +42,7 @@
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
</head>
|
||||
|
||||
<body onload="onLoadStartUp()">
|
||||
<body onload="onLoadStartUp()" class="hide-completely">
|
||||
<sm-notifications id="notification_drawer"></sm-notifications>
|
||||
<audio id="notification_sound">
|
||||
<source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/mpeg">
|
||||
@ -338,17 +338,19 @@
|
||||
<div id="settings" class="sub-page hide-completely">
|
||||
<h5>My FLO ID</h5>
|
||||
<sm-copy id="user_flo_id"></sm-copy>
|
||||
<sm-button onclick="signOut()">Sign out</sm-button>
|
||||
<sm-button id="sign_out_button" onclick="signOut()">Sign out</sm-button>
|
||||
</div>
|
||||
</section>
|
||||
<section id="user_section">
|
||||
<button class="icon-button hide-on-desktop justify-self-start" onclick="toggleUserSection()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
|
||||
<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" />
|
||||
</svg>
|
||||
</button>
|
||||
<div id="user_section__header" class=" hide-on-desktop">
|
||||
<button class="icon-button justify-self-start" onclick="toggleUserSection()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
|
||||
<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" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="flex align-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon button__icon--left" viewBox="0 0 20 20"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user