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

minor bug fixes and UI tweaks

Browse Source
This commit is contained in:
sairaj mote 2022-02-07 15:50:21 +05:30
parent 219b1e27bc
commit 6f0b44dc69
5 changed files with 69 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
components.js
View File

@ -127,7 +127,7 @@ customElements.define('sm-button',
} }
handleKeyDown(e) { handleKeyDown(e) {
if (!this.hasAttribute('disabled') && (e.key === 'Enter' || e.code === 'Space')) { if (!this.hasAttribute('disabled') && (e.key === 'Enter' || e.key === ' ')) {
e.preventDefault(); e.preventDefault();
this.click(); this.click();
} }
@ -1379,7 +1379,7 @@ customElements.define('sm-popup', class extends HTMLElement {
detectFocus(e) { detectFocus(e) {
if (e.code === 'Tab') { if (e.key === 'Tab') {
const lastElement = this.focusable[this.focusable.length - 1]; const lastElement = this.focusable[this.focusable.length - 1];
const firstElement = this.focusable[0]; const firstElement = this.focusable[0];
if (e.shiftKey && document.activeElement === firstElement) { if (e.shiftKey && document.activeElement === firstElement) {
@ -1607,7 +1607,7 @@ class ThemeToggle extends HTMLElement {
this.fireEvent(); this.fireEvent();
} }
handleKeyDown(e) { handleKeyDown(e) {
if (e.code === 'Space') { if (e.key === ' ') {
this.toggleState(); this.toggleState();
} }
} }
@ -2404,7 +2404,7 @@ customElements.define('sm-select', class extends HTMLElement {
} }
handleOptionsNavigation(e) { handleOptionsNavigation(e) {
if (e.code === 'ArrowUp') { if (e.key === 'ArrowUp') {
e.preventDefault() e.preventDefault()
if (document.activeElement.previousElementSibling) { if (document.activeElement.previousElementSibling) {
document.activeElement.previousElementSibling.focus() document.activeElement.previousElementSibling.focus()
@ -2412,7 +2412,7 @@ customElements.define('sm-select', class extends HTMLElement {
this.availableOptions[this.availableOptions.length - 1].focus() this.availableOptions[this.availableOptions.length - 1].focus()
} }
} }
else if (e.code === 'ArrowDown') { else if (e.key === 'ArrowDown') {
e.preventDefault() e.preventDefault()
if (document.activeElement.nextElementSibling) { if (document.activeElement.nextElementSibling) {
document.activeElement.nextElementSibling.focus() document.activeElement.nextElementSibling.focus()
@ -2438,12 +2438,12 @@ customElements.define('sm-select', class extends HTMLElement {
} }
handleKeydown(e) { handleKeydown(e) {
if (e.target === this) { if (e.target === this) {
if (this.isOpen && e.code === 'ArrowDown') { if (this.isOpen && e.key === 'ArrowDown') {
e.preventDefault() e.preventDefault()
this.availableOptions[0].focus() this.availableOptions[0].focus()
this.handleOptionSelection(e) this.handleOptionSelection(e)
} }
else if (e.code === 'Enter' || e.code === 'Space') { else if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault() e.preventDefault()
this.toggle() this.toggle()
} }
@ -2451,7 +2451,7 @@ customElements.define('sm-select', class extends HTMLElement {
else { else {
this.handleOptionsNavigation(e) this.handleOptionsNavigation(e)
this.handleOptionSelection(e) this.handleOptionSelection(e)
if (e.code === 'Enter' || e.code === 'Space') { if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault() e.preventDefault()
this.collapse() this.collapse()
} }
@ -2726,7 +2726,7 @@ customElements.define('sm-checkbox', class extends HTMLElement {
})) }))
} }
handleKeyDown(e) { handleKeyDown(e) {
if (e.code === "Space") { if (e.key === ' ') {
e.preventDefault() e.preventDefault()
this.click() this.click()
} }
@ -2961,7 +2961,7 @@ customElements.define('sm-switch', class extends HTMLElement {
connectedCallback() { connectedCallback() {
this.addEventListener('keydown', e => { this.addEventListener('keydown', e => {
if (e.code === "Space" && !this.isDisabled) { if (e.key === ' ' && !this.isDisabled) {
e.preventDefault() e.preventDefault()
this.input.click() this.input.click()
} }
@ -3188,16 +3188,16 @@ customElements.define('sm-menu', class extends HTMLElement {
handleKeyDown(e) { handleKeyDown(e) {
// If key is pressed on menu button // If key is pressed on menu button
if (e.target === this) { if (e.target === this) {
if (e.code === 'ArrowDown') { if (e.key === 'ArrowDown') {
e.preventDefault() e.preventDefault()
this.availableOptions[0].focus() this.availableOptions[0].focus()
} }
else if (e.code === 'Enter' || e.code === 'Space') { else if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault() e.preventDefault()
this.toggle() this.toggle()
} }
} else { // If key is pressed over menu options } else { // If key is pressed over menu options
if (e.code === 'ArrowUp') { if (e.key === 'ArrowUp') {
e.preventDefault() e.preventDefault()
if (document.activeElement.previousElementSibling) { if (document.activeElement.previousElementSibling) {
document.activeElement.previousElementSibling.focus() document.activeElement.previousElementSibling.focus()
@ -3205,7 +3205,7 @@ customElements.define('sm-menu', class extends HTMLElement {
this.availableOptions[this.availableOptions.length - 1].focus() this.availableOptions[this.availableOptions.length - 1].focus()
} }
} }
else if (e.code === 'ArrowDown') { else if (e.key === 'ArrowDown') {
e.preventDefault() e.preventDefault()
if (document.activeElement.nextElementSibling) { if (document.activeElement.nextElementSibling) {
document.activeElement.nextElementSibling.focus() document.activeElement.nextElementSibling.focus()
@ -3213,7 +3213,7 @@ customElements.define('sm-menu', class extends HTMLElement {
this.availableOptions[0].focus() this.availableOptions[0].focus()
} }
} }
else if (e.code === 'Enter' || e.code === 'Space') { else if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault() e.preventDefault()
e.target.click() e.target.click()
} }
@ -3302,7 +3302,7 @@ customElements.define('menu-option', class extends HTMLElement {
this.setAttribute('role', 'option') this.setAttribute('role', 'option')
this.setAttribute('tabindex', '0') this.setAttribute('tabindex', '0')
this.addEventListener('keyup', e => { this.addEventListener('keyup', e => {
if (e.code === 'Enter' || e.code === 'Space') { if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault() e.preventDefault()
this.click() this.click()
} }

26
css/main.css
View File

@ -22,7 +22,7 @@ body,
body * { body * {
--accent-color: #256eff; --accent-color: #256eff;
--text-color: 20, 20, 20; --text-color: 20, 20, 20;
--background-color: 255, 255, 255; --background-color: 255, 250, 246;
--foreground-color: rgb(255, 255, 255); --foreground-color: rgb(255, 255, 255);
--danger-color: rgb(255, 75, 75); --danger-color: rgb(255, 75, 75);
--green: #1cad59; --green: #1cad59;
@ -51,7 +51,7 @@ strong {
font-size: 0.9rem; font-size: 0.9rem;
max-width: 65ch; max-width: 65ch;
line-height: 1.7; line-height: 1.7;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.9);
} }
p:not(:last-of-type), p:not(:last-of-type),
strong:not(:last-of-type) { strong:not(:last-of-type) {
@ -642,7 +642,7 @@ theme-toggle {
#main_page { #main_page {
align-content: flex-start; align-content: flex-start;
display: grid; display: grid;
padding: 1.5rem; padding: 0.5rem 1.5rem;
gap: 2rem; gap: 2rem;
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
} }
@ -663,7 +663,7 @@ theme-toggle {
border-radius: 0.5rem; border-radius: 0.5rem;
width: 5.2rem; width: 5.2rem;
text-align: center; text-align: center;
background-color: #e6352f08; background-color: rgba(var(--text-color), 0.02);
} }
.category .icon { .category .icon {
margin-bottom: 1rem; margin-bottom: 1rem;
@ -731,7 +731,7 @@ theme-toggle {
#explore { #explore {
align-items: flex-start; align-items: flex-start;
padding-top: 1.5rem; padding-top: 1rem;
} }
#writer { #writer {
@ -795,9 +795,9 @@ theme-toggle {
position: relative; position: relative;
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
margin-top: 1.5rem;
align-content: flex-end; align-content: flex-end;
width: 100%; width: 100%;
margin-top: 0.5rem;
} }
.hero-section p { .hero-section p {
color: inherit; color: inherit;
@ -813,6 +813,11 @@ theme-toggle {
z-index: -1; z-index: -1;
} }
#article_category {
color: var(--accent-color);
font-weight: 500;
}
#article_image { #article_image {
margin-top: 1.5rem; margin-top: 1.5rem;
} }
@ -944,7 +949,7 @@ theme-toggle {
#preview_popup h1, #preview_popup h1,
#article h1 { #article h1 {
font-size: 1.6rem; font-size: 1.7rem;
line-height: 1.1; line-height: 1.1;
} }
#preview_popup h3:not(:first-of-type), #preview_popup h3:not(:first-of-type),
@ -961,7 +966,8 @@ theme-toggle {
} }
#preview_popup p, #preview_popup p,
#article p { #article p {
font-size: 1.1rem; font-family: "Noto serif", serif;
font-size: 1.05rem;
line-height: 1.8; line-height: 1.8;
} }
#preview_popup p > *, #preview_popup p > *,
@ -1224,6 +1230,10 @@ theme-toggle {
color: var(--accent-color) !important; color: var(--accent-color) !important;
} }
.hero-section {
margin-top: 1.5rem;
}
#action_panel { #action_panel {
position: relative; position: relative;
margin-top: auto; margin-top: auto;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

32
css/main.scss
View File

@ -19,7 +19,7 @@ body {
* { * {
--accent-color: #256eff; --accent-color: #256eff;
--text-color: 20, 20, 20; --text-color: 20, 20, 20;
--background-color: 255, 255, 255; --background-color: 255, 250, 246;
--foreground-color: rgb(255, 255, 255); --foreground-color: rgb(255, 255, 255);
--danger-color: rgb(255, 75, 75); --danger-color: rgb(255, 75, 75);
--green: #1cad59; --green: #1cad59;
@ -55,7 +55,7 @@ strong {
font-size: 0.9rem; font-size: 0.9rem;
max-width: 65ch; max-width: 65ch;
line-height: 1.7; line-height: 1.7;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.9);
&:not(:last-of-type) { &:not(:last-of-type) {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@ -211,13 +211,6 @@ h3 {
.h5 { .h5 {
font-size: 0.75rem; font-size: 0.75rem;
} }
h1,
h2,
h3,
h4,
h5 {
// font-family: "Spectral", serif;
}
.uppercase { .uppercase {
text-transform: uppercase; text-transform: uppercase;
} }
@ -610,7 +603,7 @@ theme-toggle {
#main_page { #main_page {
align-content: flex-start; align-content: flex-start;
display: grid; display: grid;
padding: 1.5rem; padding: 0.5rem 1.5rem;
gap: 2rem; gap: 2rem;
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
} }
@ -630,7 +623,7 @@ theme-toggle {
border-radius: 0.5rem; border-radius: 0.5rem;
width: 5.2rem; width: 5.2rem;
text-align: center; text-align: center;
background-color: #e6352f08; background-color: rgba(var(--text-color), 0.02);
.icon { .icon {
margin-bottom: 1rem; margin-bottom: 1rem;
transition: transform 0.3s, background-color 0.3s; transition: transform 0.3s, background-color 0.3s;
@ -698,7 +691,7 @@ theme-toggle {
#explore { #explore {
align-items: flex-start; align-items: flex-start;
padding-top: 1.5rem; padding-top: 1rem;
} }
#writer { #writer {
@ -760,9 +753,9 @@ theme-toggle {
position: relative; position: relative;
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
margin-top: 1.5rem;
align-content: flex-end; align-content: flex-end;
width: 100%; width: 100%;
margin-top: 0.5rem;
p { p {
color: inherit; color: inherit;
} }
@ -777,6 +770,10 @@ theme-toggle {
z-index: -1; z-index: -1;
} }
} }
#article_category {
color: var(--accent-color);
font-weight: 500;
}
#article_image { #article_image {
margin-top: 1.5rem; margin-top: 1.5rem;
} }
@ -907,7 +904,7 @@ theme-toggle {
#preview_popup, #preview_popup,
#article { #article {
h1 { h1 {
font-size: 1.6rem; font-size: 1.7rem;
line-height: 1.1; line-height: 1.1;
} }
@ -921,8 +918,8 @@ theme-toggle {
} }
} }
p { p {
// font-family: "Roboto", sans-serif; font-family: "Noto serif", serif;
font-size: 1.1rem; font-size: 1.05rem;
line-height: 1.8; line-height: 1.8;
& > * { & > * {
font-family: inherit; font-family: inherit;
@ -1162,6 +1159,9 @@ theme-toggle {
color: var(--accent-color) !important; color: var(--accent-color) !important;
} }
} }
.hero-section {
margin-top: 1.5rem;
}
#action_panel { #action_panel {
position: relative; position: relative;

25
index.html
View File

@ -13,9 +13,7 @@
<link <link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap" href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet"> rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400..700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400..800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@400..800&display=swap" rel="stylesheet">
<script src="purify.min.js" defer></script> <script src="purify.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6" defer></script> <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6" defer></script>
<script id="floGlobals"> <script id="floGlobals">
@ -238,6 +236,15 @@
</aside> </aside>
<main class="grid gap-2"> <main class="grid gap-2">
<header class="hero-section"> <header class="hero-section">
<div class="flex align-center" style="margin-bottom: 0.5rem; font-size: 0.9rem;">
<a href="#/home">Home</a>
<svg class="icon" 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="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z" />
</svg>
<a href="" class="capitalize" id="article_category"></a>
</div>
<h1 id="article_title"></h1> <h1 id="article_title"></h1>
<p id="article_summary"></p> <p id="article_summary"></p>
<div class="flex align-center"> <div class="flex align-center">
@ -876,7 +883,7 @@
document.querySelectorAll('sm-input[data-flo-id]').forEach(input => input.customValidation = floCrypto.validateAddr) document.querySelectorAll('sm-input[data-flo-id]').forEach(input => input.customValidation = floCrypto.validateAddr)
document.querySelectorAll('sm-input[data-private-key]').forEach(input => input.customValidation = floCrypto.getPubKeyHex) document.querySelectorAll('sm-input[data-private-key]').forEach(input => input.customValidation = floCrypto.getPubKeyHex)
document.addEventListener('keyup', (e) => { document.addEventListener('keyup', (e) => {
if (e.code === 'Escape') { if (e.key === 'Escape') {
hidePopup() hidePopup()
} }
}) })
@ -1187,12 +1194,14 @@
async article(articleID, firstLoad = true) { async article(articleID, firstLoad = true) {
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
const [allArticles, heroImages] = await Promise.all([compactIDB.readData('appObjects', 'articlesContent'), compactIDB.readData('appObjects', 'heroImages')]) const [allArticles, heroImages] = await Promise.all([compactIDB.readData('appObjects', 'articlesContent'), compactIDB.readData('appObjects', 'heroImages')])
const { title, published, readTime, contributors, updated, summary } = floGlobals.appObjects.rmTimes.articles[articleID] const { title, published, readTime, contributors, updated, summary, category } = floGlobals.appObjects.rmTimes.articles[articleID]
getRef('article_image').src = heroImages[articleID].full getRef('article_category').textContent = category
getRef('article_category').href = `#/explore?type=category&query=${category}`
getRef('article_title').textContent = title getRef('article_title').textContent = title
getRef('article_summary').textContent = summary getRef('article_summary').textContent = summary
getRef('published_time').textContent = `${getFormattedTime(published, 'date-only')}${updated ? `, Updated ${relativeTime.from(updated)}` : ''}` getRef('published_time').textContent = `${getFormattedTime(published, 'date-only')}${updated ? `, Updated ${relativeTime.from(updated)}` : ''}`
getRef('reading_time').textContent = `${readTime} Min read` getRef('reading_time').textContent = `${readTime} Min read`
getRef('article_image').src = heroImages[articleID].full
getRef('article_body').innerHTML = DOMPurify.sanitize(allArticles[articleID]) getRef('article_body').innerHTML = DOMPurify.sanitize(allArticles[articleID])
const allHeadings = getRef('article_body').querySelectorAll('h3') const allHeadings = getRef('article_body').querySelectorAll('h3')
allHeadings.forEach(heading => { allHeadings.forEach(heading => {
@ -1457,12 +1466,14 @@
}, 100)) }, 100))
getRef('search_articles').addEventListener('keyup', e => { getRef('search_articles').addEventListener('keyup', e => {
if (e.target.value.trim() !== '' && e.code === 'Enter') { // detect enter key press
if (e.target.value.trim() !== '' && e.key === 'Enter') {
location.hash = `#/explore?type=search&query=${e.target.value.trim()}` location.hash = `#/explore?type=search&query=${e.target.value.trim()}`
e.target.value = '' e.target.value = ''
toggleSearch() toggleSearch()
} }
}) })
delegate(getRef('search_suggestions'), 'click', '.search-suggestion', e => { delegate(getRef('search_suggestions'), 'click', '.search-suggestion', e => {
getRef('search_articles').value = '' getRef('search_articles').value = ''
toggleSearch() toggleSearch()