RanchiMall/rmtimes
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI bug fixes

Browse Source
This commit is contained in:
sairaj mote 2022-08-13 23:12:43 +05:30
parent 4ee2ed2351
commit f8a18b64f4
5 changed files with 206 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
css/main.css
View File

@ -15,34 +15,32 @@ body {
}
body {
--accent-color: #256eff;
--text-color: 20, 20, 20;
--foreground-color: 252, 253, 255;
--background-color: 241, 243, 248;
--danger-color: rgb(255, 75, 75);
--green: #1cad59;
--like-color: #e91e63;
scrollbar-gutter: stable;
color: rgba(var(--text-color), 1);
background: rgba(var(--background-color), 1);
transition: background-color 0.3s;
}
body,
body * {
--accent-color: #256eff;
--text-color: 20, 20, 20;
--background-color: 252, 250, 245;
--foreground-color: rgb(255, 253, 251);
--danger-color: rgb(255, 75, 75);
--green: #1cad59;
--like-color: #e91e63;
scrollbar-width: thin;
}
body[data-theme=dark],
body[data-theme=dark] * {
body[data-theme=dark] {
--accent-color: #86afff;
--text-color: 220, 220, 220;
--background-color: 10, 10, 10;
--foreground-color: rgb(24, 24, 24);
--foreground-color: 27, 28, 29;
--background-color: 21, 22, 22;
--danger-color: rgb(255, 106, 106);
--green: #00e676;
}
body[data-theme=dark] sm-popup::part(popup) {
background-color: var(--foreground-color);
background-color: rgba(var(--foreground-color), 1);
}
body[data-theme=dark] ::-webkit-calendar-picker-indicator {
filter: invert(1);
@ -531,7 +529,7 @@ strip-option {
}
sm-menu {
--background: var(--foreground-color);
--background: rgba(var(--foreground-color), 1);
}
menu-option {
@ -584,7 +582,7 @@ sm-copy {
height: 100%;
width: 100%;
left: 0;
background: linear-gradient(rgba(var(--foreground-color), 1), transparent 20%, transparent 80%, rgba(var(--foreground-color), 1));
background: linear-gradient(rgba(var(--background-color), 1), transparent 20%, transparent 80%, rgba(var(--background-color), 1));
}
#loader {
@ -658,7 +656,7 @@ sm-copy {
#search_suggestions {
position: absolute;
top: 100%;
background-color: var(--foreground-color);
background-color: rgba(var(--foreground-color), 1);
padding: 0.3rem;
width: 100%;
border-radius: 0.3rem;
@ -958,7 +956,7 @@ theme-toggle {
}
#go_to_top {
background-color: var(--foreground-color);
background-color: rgba(var(--foreground-color), 1);
}
#dashboard {
@ -1041,7 +1039,7 @@ theme-toggle {
gap: 1rem;
padding: 1rem;
border-radius: 0.5rem;
background-color: var(--foreground-color);
background-color: rgba(var(--foreground-color), 1);
}
.writer-card .writer-profile {
display: flex;
@ -1055,7 +1053,7 @@ theme-toggle {
font-size: 100%;
font-weight: 700;
text-transform: uppercase;
color: var(--foreground-color);
color: rgba(var(--foreground-color), 1);
}
.writer-card sm-copy {
margin-top: -0.5rem;
@ -1203,7 +1201,7 @@ theme-toggle {
width: min-content;
padding: 0.5rem;
border-radius: 0.5rem;
background-color: var(--foreground-color);
background-color: rgba(var(--foreground-color), 1);
margin: 1.5rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

49
css/main.scss
View File

@ -15,16 +15,14 @@ body {
}
body {
&,
--accent-color: #256eff;
--text-color: 20, 20, 20;
--foreground-color: 252, 253, 255;
--background-color: 241, 243, 248;
--danger-color: rgb(255, 75, 75);
--green: #1cad59;
--like-color: #e91e63;
* {
--accent-color: #256eff;
--text-color: 20, 20, 20;
--background-color: 252, 250, 245;
--foreground-color: rgb(255, 253, 251);
--danger-color: rgb(255, 75, 75);
--green: #1cad59;
--like-color: #e91e63;
scrollbar-width: thin;
}
scrollbar-gutter: stable;
@ -34,17 +32,14 @@ body {
}
body[data-theme="dark"] {
&,
* {
--accent-color: #86afff;
--text-color: 220, 220, 220;
--background-color: 10, 10, 10;
--foreground-color: rgb(24, 24, 24);
--danger-color: rgb(255, 106, 106);
--green: #00e676;
}
--accent-color: #86afff;
--text-color: 220, 220, 220;
--foreground-color: 27, 28, 29;
--background-color: 21, 22, 22;
--danger-color: rgb(255, 106, 106);
--green: #00e676;
sm-popup::part(popup) {
background-color: var(--foreground-color);
background-color: rgba(var(--foreground-color), 1);
}
::-webkit-calendar-picker-indicator {
filter: invert(1);
@ -500,7 +495,7 @@ strip-option {
--border-radius: 0.3rem;
}
sm-menu {
--background: var(--foreground-color);
--background: rgba(var(--foreground-color), 1);
}
menu-option {
font-size: 0.9rem;
@ -545,10 +540,10 @@ sm-copy {
width: 100%;
left: 0;
background: linear-gradient(
rgba(var(--foreground-color), 1),
rgba(var(--background-color), 1),
transparent 20%,
transparent 80%,
rgba(var(--foreground-color), 1)
rgba(var(--background-color), 1)
);
}
}
@ -612,7 +607,7 @@ sm-copy {
#search_suggestions {
position: absolute;
top: 100%;
background-color: var(--foreground-color);
background-color: rgba(var(--foreground-color), 1);
padding: 0.3rem;
width: 100%;
border-radius: 0.3rem;
@ -903,7 +898,7 @@ theme-toggle {
padding: 1rem;
}
#go_to_top {
background-color: var(--foreground-color);
background-color: rgba(var(--foreground-color), 1);
}
#dashboard {
@ -980,7 +975,7 @@ theme-toggle {
gap: 1rem;
padding: 1rem;
border-radius: 0.5rem;
background-color: var(--foreground-color);
background-color: rgba(var(--foreground-color), 1);
.writer-profile {
display: flex;
align-items: center;
@ -993,7 +988,7 @@ theme-toggle {
font-size: 100%;
font-weight: 700;
text-transform: uppercase;
color: var(--foreground-color);
color: rgba(var(--foreground-color), 1);
}
sm-copy {
margin-top: -0.5rem;
@ -1139,7 +1134,7 @@ theme-toggle {
width: min-content;
padding: 0.5rem;
border-radius: 0.5rem;
background-color: var(--foreground-color);
background-color: rgba(var(--foreground-color), 1);
margin: 1.5rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

2
index.html
View File

@ -134,7 +134,7 @@
<theme-toggle></theme-toggle>
<button id="user_popup_button" class="hide full-bleed justify-center" onclick="openPopup('user_popup')"
title="Click to view user profile" aria-label="User profile"></button>
<button id="show_sign_in_button" class="button button--primary">Sign In</button>
<button id="show_sign_in_button" class="button button--primary full-bleed">Sign In</button>
</header>
<article id="main_page" class="page hide">
<section id="main_page__header" class="flex align-center">

328
scripts/components.js
View File

@ -906,170 +906,170 @@ customElements.define('sm-textarea',
})
const smNotifications = document.createElement('template')
smNotifications.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:host{
display: flex;
--icon-height: 1.5rem;
--icon-width: 1.5rem;
}
.hide{
opacity: 0 !important;
pointer-events: none !important;
}
.notification-panel{
display: grid;
width: 100%;
gap: 0.5rem;
position: fixed;
left: 0;
top: 0;
z-index: 100;
max-height: 100%;
padding: 1rem;
overflow: hidden auto;
-ms-scroll-chaining: none;
overscroll-behavior: contain;
touch-action: none;
}
.notification-panel:empty{
display:none;
}
.notification{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
border-radius: 0.3rem;
background: rgba(var(--foreground-color, (255,255,255)), 1);
overflow: hidden;
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
max-width: 100%;
padding: 1rem;
align-items: center;
box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.14);
touch-action: none;
}
.icon-container:not(:empty){
margin-right: 0.5rem;
height: var(--icon-height);
width: var(--icon-width);
}
h4:first-letter,
p:first-letter{
text-transform: uppercase;
}
h4{
font-weight: 400;
}
p{
line-height: 1.6;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
color: rgba(var(--text-color, (17,17,17)), 0.9);
overflow-wrap: break-word;
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
max-width: 100%;
}
.notification:last-of-type{
margin-bottom: 0;
}
.icon {
height: 100%;
width: 100%;
fill: rgba(var(--text-color, (17,17,17)), 0.7);
}
.icon--success {
fill: var(--green);
}
.icon--failure,
.icon--error {
fill: var(--danger-color);
}
.close{
height: 2rem;
width: 2rem;
border: none;
cursor: pointer;
margin-left: 1rem;
border-radius: 50%;
padding: 0.3rem;
transition: background-color 0.3s, transform 0.3s;
background-color: transparent;
}
.close:active{
transform: scale(0.9);
}
.action{
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 0.8rem;
border-radius: 0.2rem;
border: none;
background-color: rgba(var(--text-color, (17,17,17)), 0.03);
font-family: inherit;
font-size: inherit;
color: var(--accent-color, teal);
font-weight: 500;
cursor: pointer;
}
@media screen and (max-width: 640px){
.notification-panel:not(:empty){
padding-bottom: 3rem;
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:host{
display: flex;
--icon-height: 1.5rem;
--icon-width: 1.5rem;
}
.hide{
opacity: 0 !important;
pointer-events: none !important;
}
}
@media screen and (min-width: 640px){
.notification-panel{
max-width: 28rem;
width: max-content;
top: auto;
bottom: 0;
display: grid;
width: 100%;
gap: 0.5rem;
position: fixed;
left: 0;
top: 0;
z-index: 100;
max-height: 100%;
padding: 1rem;
overflow: hidden auto;
-ms-scroll-chaining: none;
overscroll-behavior: contain;
touch-action: none;
}
.notification-panel:empty{
display:none;
}
.notification{
width: auto;
border: solid 1px rgba(var(--text-color, (17,17,17)), 0.2);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
border-radius: 0.3rem;
background: rgba(var(--foreground-color, (255,255,255)), 1);
overflow: hidden;
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
max-width: 100%;
padding: 1rem;
align-items: center;
box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.14);
touch-action: none;
}
}
@media (any-hover: hover){
::-webkit-scrollbar{
width: 0.5rem;
.icon-container:not(:empty){
margin-right: 0.5rem;
height: var(--icon-height);
width: var(--icon-width);
}
::-webkit-scrollbar-thumb{
background: rgba(var(--text-color, (17,17,17)), 0.3);
border-radius: 1rem;
&:hover{
background: rgba(var(--text-color, (17,17,17)), 0.5);
h4:first-letter,
p:first-letter{
text-transform: uppercase;
}
h4{
font-weight: 400;
}
p{
line-height: 1.6;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
color: rgba(var(--text-color, (17,17,17)), 0.9);
overflow-wrap: break-word;
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
max-width: 100%;
}
.notification:last-of-type{
margin-bottom: 0;
}
.icon {
height: 100%;
width: 100%;
fill: rgba(var(--text-color, (17,17,17)), 0.7);
}
.icon--success {
fill: var(--green);
}
.icon--failure,
.icon--error {
fill: var(--danger-color);
}
.close{
height: 2rem;
width: 2rem;
border: none;
cursor: pointer;
margin-left: 1rem;
border-radius: 50%;
padding: 0.3rem;
transition: background-color 0.3s, transform 0.3s;
background-color: transparent;
}
.close:active{
transform: scale(0.9);
}
.action{
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 0.8rem;
border-radius: 0.2rem;
border: none;
background-color: rgba(var(--text-color, (17,17,17)), 0.03);
font-family: inherit;
font-size: inherit;
color: var(--accent-color, teal);
font-weight: 500;
cursor: pointer;
}
@media screen and (max-width: 640px){
.notification-panel:not(:empty){
padding-bottom: 3rem;
}
}
.close:hover{
background-color: rgba(var(--text-color, (17,17,17)), 0.1);
@media screen and (min-width: 640px){
.notification-panel{
max-width: 28rem;
width: max-content;
top: auto;
bottom: 0;
}
.notification{
width: auto;
border: solid 1px rgba(var(--text-color, (17,17,17)), 0.2);
}
}
}
</style>
<div class="notification-panel"></div>
`;
@media (any-hover: hover){
::-webkit-scrollbar{
width: 0.5rem;
}
::-webkit-scrollbar-thumb{
background: rgba(var(--text-color, (17,17,17)), 0.3);
border-radius: 1rem;
&:hover{
background: rgba(var(--text-color, (17,17,17)), 0.5);
}
}
.close:hover{
background-color: rgba(var(--text-color, (17,17,17)), 0.1);
}
}
</style>
<div class="notification-panel"></div>
`;
customElements.define('sm-notifications', class extends HTMLElement {
constructor() {
super();
@ -1122,21 +1122,21 @@ customElements.define('sm-notifications', class extends HTMLElement {
notification.classList.add('notification');
let composition = ``;
composition += `
<div class="icon-container">${icon}</div>
<p>${message}</p>
`;
<div class="icon-container">${icon}</div>
<p>${message}</p>
`;
if (action) {
composition += `
<button class="action">${action.label}</button>
`
<button class="action">${action.label}</button>
`
}
if (pinned) {
notification.classList.add('pinned');
composition += `
<button class="close">
<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="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
</button>
`;
<button class="close">
<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="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
</button>
`;
}
notification.innerHTML = composition;
return notification;