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 { 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; scrollbar-gutter: stable;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
background: rgba(var(--background-color), 1); background: rgba(var(--background-color), 1);
transition: background-color 0.3s; transition: background-color 0.3s;
} }
body,
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; scrollbar-width: thin;
} }
body[data-theme=dark], body[data-theme=dark] {
body[data-theme=dark] * {
--accent-color: #86afff; --accent-color: #86afff;
--text-color: 220, 220, 220; --text-color: 220, 220, 220;
--background-color: 10, 10, 10; --foreground-color: 27, 28, 29;
--foreground-color: rgb(24, 24, 24); --background-color: 21, 22, 22;
--danger-color: rgb(255, 106, 106); --danger-color: rgb(255, 106, 106);
--green: #00e676; --green: #00e676;
} }
body[data-theme=dark] sm-popup::part(popup) { 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 { body[data-theme=dark] ::-webkit-calendar-picker-indicator {
filter: invert(1); filter: invert(1);
@ -531,7 +529,7 @@ strip-option {
} }
sm-menu { sm-menu {
--background: var(--foreground-color); --background: rgba(var(--foreground-color), 1);
} }
menu-option { menu-option {
@ -584,7 +582,7 @@ sm-copy {
height: 100%; height: 100%;
width: 100%; width: 100%;
left: 0; 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 { #loader {
@ -658,7 +656,7 @@ sm-copy {
#search_suggestions { #search_suggestions {
position: absolute; position: absolute;
top: 100%; top: 100%;
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
padding: 0.3rem; padding: 0.3rem;
width: 100%; width: 100%;
border-radius: 0.3rem; border-radius: 0.3rem;
@ -958,7 +956,7 @@ theme-toggle {
} }
#go_to_top { #go_to_top {
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
} }
#dashboard { #dashboard {
@ -1041,7 +1039,7 @@ theme-toggle {
gap: 1rem; gap: 1rem;
padding: 1rem; padding: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
} }
.writer-card .writer-profile { .writer-card .writer-profile {
display: flex; display: flex;
@ -1055,7 +1053,7 @@ theme-toggle {
font-size: 100%; font-size: 100%;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
color: var(--foreground-color); color: rgba(var(--foreground-color), 1);
} }
.writer-card sm-copy { .writer-card sm-copy {
margin-top: -0.5rem; margin-top: -0.5rem;
@ -1203,7 +1201,7 @@ theme-toggle {
width: min-content; width: min-content;
padding: 0.5rem; padding: 0.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
margin: 1.5rem; margin: 1.5rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); 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 { 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-width: thin;
} }
scrollbar-gutter: stable; scrollbar-gutter: stable;
@ -34,17 +32,14 @@ body {
} }
body[data-theme="dark"] { body[data-theme="dark"] {
&, --accent-color: #86afff;
* { --text-color: 220, 220, 220;
--accent-color: #86afff; --foreground-color: 27, 28, 29;
--text-color: 220, 220, 220; --background-color: 21, 22, 22;
--background-color: 10, 10, 10; --danger-color: rgb(255, 106, 106);
--foreground-color: rgb(24, 24, 24); --green: #00e676;
--danger-color: rgb(255, 106, 106);
--green: #00e676;
}
sm-popup::part(popup) { sm-popup::part(popup) {
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
} }
::-webkit-calendar-picker-indicator { ::-webkit-calendar-picker-indicator {
filter: invert(1); filter: invert(1);
@ -500,7 +495,7 @@ strip-option {
--border-radius: 0.3rem; --border-radius: 0.3rem;
} }
sm-menu { sm-menu {
--background: var(--foreground-color); --background: rgba(var(--foreground-color), 1);
} }
menu-option { menu-option {
font-size: 0.9rem; font-size: 0.9rem;
@ -545,10 +540,10 @@ sm-copy {
width: 100%; width: 100%;
left: 0; left: 0;
background: linear-gradient( background: linear-gradient(
rgba(var(--foreground-color), 1), rgba(var(--background-color), 1),
transparent 20%, transparent 20%,
transparent 80%, transparent 80%,
rgba(var(--foreground-color), 1) rgba(var(--background-color), 1)
); );
} }
} }
@ -612,7 +607,7 @@ sm-copy {
#search_suggestions { #search_suggestions {
position: absolute; position: absolute;
top: 100%; top: 100%;
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
padding: 0.3rem; padding: 0.3rem;
width: 100%; width: 100%;
border-radius: 0.3rem; border-radius: 0.3rem;
@ -903,7 +898,7 @@ theme-toggle {
padding: 1rem; padding: 1rem;
} }
#go_to_top { #go_to_top {
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
} }
#dashboard { #dashboard {
@ -980,7 +975,7 @@ theme-toggle {
gap: 1rem; gap: 1rem;
padding: 1rem; padding: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
.writer-profile { .writer-profile {
display: flex; display: flex;
align-items: center; align-items: center;
@ -993,7 +988,7 @@ theme-toggle {
font-size: 100%; font-size: 100%;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
color: var(--foreground-color); color: rgba(var(--foreground-color), 1);
} }
sm-copy { sm-copy {
margin-top: -0.5rem; margin-top: -0.5rem;
@ -1139,7 +1134,7 @@ theme-toggle {
width: min-content; width: min-content;
padding: 0.5rem; padding: 0.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
margin: 1.5rem; margin: 1.5rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); 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> <theme-toggle></theme-toggle>
<button id="user_popup_button" class="hide full-bleed justify-center" onclick="openPopup('user_popup')" <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> 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> </header>
<article id="main_page" class="page hide"> <article id="main_page" class="page hide">
<section id="main_page__header" class="flex align-center"> <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') const smNotifications = document.createElement('template')
smNotifications.innerHTML = ` smNotifications.innerHTML = `
<style> <style>
*{ *{
padding: 0; padding: 0;
margin: 0; margin: 0;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
:host{ :host{
display: flex; display: flex;
--icon-height: 1.5rem; --icon-height: 1.5rem;
--icon-width: 1.5rem; --icon-width: 1.5rem;
} }
.hide{ .hide{
opacity: 0 !important; opacity: 0 !important;
pointer-events: none !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;
} }
}
@media screen and (min-width: 640px){
.notification-panel{ .notification-panel{
max-width: 28rem; display: grid;
width: max-content; width: 100%;
top: auto; gap: 0.5rem;
bottom: 0; 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{ .notification{
width: auto; display: -webkit-box;
border: solid 1px rgba(var(--text-color, (17,17,17)), 0.2); 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){
@media (any-hover: hover){ margin-right: 0.5rem;
::-webkit-scrollbar{ height: var(--icon-height);
width: 0.5rem; width: var(--icon-width);
} }
h4:first-letter,
::-webkit-scrollbar-thumb{ p:first-letter{
background: rgba(var(--text-color, (17,17,17)), 0.3); text-transform: uppercase;
border-radius: 1rem; }
&:hover{ h4{
background: rgba(var(--text-color, (17,17,17)), 0.5); 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{ @media screen and (min-width: 640px){
background-color: rgba(var(--text-color, (17,17,17)), 0.1); .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);
}
} }
} @media (any-hover: hover){
</style> ::-webkit-scrollbar{
<div class="notification-panel"></div> 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 { customElements.define('sm-notifications', class extends HTMLElement {
constructor() { constructor() {
super(); super();
@ -1122,21 +1122,21 @@ customElements.define('sm-notifications', class extends HTMLElement {
notification.classList.add('notification'); notification.classList.add('notification');
let composition = ``; let composition = ``;
composition += ` composition += `
<div class="icon-container">${icon}</div> <div class="icon-container">${icon}</div>
<p>${message}</p> <p>${message}</p>
`; `;
if (action) { if (action) {
composition += ` composition += `
<button class="action">${action.label}</button> <button class="action">${action.label}</button>
` `
} }
if (pinned) { if (pinned) {
notification.classList.add('pinned'); notification.classList.add('pinned');
composition += ` composition += `
<button class="close"> <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> <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>
`; `;
} }
notification.innerHTML = composition; notification.innerHTML = composition;
return notification; return notification;