minor bug fixes and UI tweaks
This commit is contained in:
sairaj mote
parent
219b1e27bc
commit
6f0b44dc69
@ -127,7 +127,7 @@ customElements.define('sm-button',
|
||||
}
|
||||
|
||||
handleKeyDown(e) {
|
||||
if (!this.hasAttribute('disabled') && (e.key === 'Enter' || e.code === 'Space')) {
|
||||
if (!this.hasAttribute('disabled') && (e.key === 'Enter' || e.key === ' ')) {
|
||||
e.preventDefault();
|
||||
this.click();
|
||||
}
|
||||
@ -1379,7 +1379,7 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
|
||||
|
||||
detectFocus(e) {
|
||||
if (e.code === 'Tab') {
|
||||
if (e.key === 'Tab') {
|
||||
const lastElement = this.focusable[this.focusable.length - 1];
|
||||
const firstElement = this.focusable[0];
|
||||
if (e.shiftKey && document.activeElement === firstElement) {
|
||||
@ -1607,7 +1607,7 @@ class ThemeToggle extends HTMLElement {
|
||||
this.fireEvent();
|
||||
}
|
||||
handleKeyDown(e) {
|
||||
if (e.code === 'Space') {
|
||||
if (e.key === ' ') {
|
||||
this.toggleState();
|
||||
}
|
||||
}
|
||||
@ -2404,7 +2404,7 @@ customElements.define('sm-select', class extends HTMLElement {
|
||||
}
|
||||
|
||||
handleOptionsNavigation(e) {
|
||||
if (e.code === 'ArrowUp') {
|
||||
if (e.key === 'ArrowUp') {
|
||||
e.preventDefault()
|
||||
if (document.activeElement.previousElementSibling) {
|
||||
document.activeElement.previousElementSibling.focus()
|
||||
@ -2412,7 +2412,7 @@ customElements.define('sm-select', class extends HTMLElement {
|
||||
this.availableOptions[this.availableOptions.length - 1].focus()
|
||||
}
|
||||
}
|
||||
else if (e.code === 'ArrowDown') {
|
||||
else if (e.key === 'ArrowDown') {
|
||||
e.preventDefault()
|
||||
if (document.activeElement.nextElementSibling) {
|
||||
document.activeElement.nextElementSibling.focus()
|
||||
@ -2438,12 +2438,12 @@ customElements.define('sm-select', class extends HTMLElement {
|
||||
}
|
||||
handleKeydown(e) {
|
||||
if (e.target === this) {
|
||||
if (this.isOpen && e.code === 'ArrowDown') {
|
||||
if (this.isOpen && e.key === 'ArrowDown') {
|
||||
e.preventDefault()
|
||||
this.availableOptions[0].focus()
|
||||
this.handleOptionSelection(e)
|
||||
}
|
||||
else if (e.code === 'Enter' || e.code === 'Space') {
|
||||
else if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
this.toggle()
|
||||
}
|
||||
@ -2451,7 +2451,7 @@ customElements.define('sm-select', class extends HTMLElement {
|
||||
else {
|
||||
this.handleOptionsNavigation(e)
|
||||
this.handleOptionSelection(e)
|
||||
if (e.code === 'Enter' || e.code === 'Space') {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
this.collapse()
|
||||
}
|
||||
@ -2726,7 +2726,7 @@ customElements.define('sm-checkbox', class extends HTMLElement {
|
||||
}))
|
||||
}
|
||||
handleKeyDown(e) {
|
||||
if (e.code === "Space") {
|
||||
if (e.key === ' ') {
|
||||
e.preventDefault()
|
||||
this.click()
|
||||
}
|
||||
@ -2961,7 +2961,7 @@ customElements.define('sm-switch', class extends HTMLElement {
|
||||
|
||||
connectedCallback() {
|
||||
this.addEventListener('keydown', e => {
|
||||
if (e.code === "Space" && !this.isDisabled) {
|
||||
if (e.key === ' ' && !this.isDisabled) {
|
||||
e.preventDefault()
|
||||
this.input.click()
|
||||
}
|
||||
@ -3188,16 +3188,16 @@ customElements.define('sm-menu', class extends HTMLElement {
|
||||
handleKeyDown(e) {
|
||||
// If key is pressed on menu button
|
||||
if (e.target === this) {
|
||||
if (e.code === 'ArrowDown') {
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault()
|
||||
this.availableOptions[0].focus()
|
||||
}
|
||||
else if (e.code === 'Enter' || e.code === 'Space') {
|
||||
else if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
this.toggle()
|
||||
}
|
||||
} else { // If key is pressed over menu options
|
||||
if (e.code === 'ArrowUp') {
|
||||
if (e.key === 'ArrowUp') {
|
||||
e.preventDefault()
|
||||
if (document.activeElement.previousElementSibling) {
|
||||
document.activeElement.previousElementSibling.focus()
|
||||
@ -3205,7 +3205,7 @@ customElements.define('sm-menu', class extends HTMLElement {
|
||||
this.availableOptions[this.availableOptions.length - 1].focus()
|
||||
}
|
||||
}
|
||||
else if (e.code === 'ArrowDown') {
|
||||
else if (e.key === 'ArrowDown') {
|
||||
e.preventDefault()
|
||||
if (document.activeElement.nextElementSibling) {
|
||||
document.activeElement.nextElementSibling.focus()
|
||||
@ -3213,7 +3213,7 @@ customElements.define('sm-menu', class extends HTMLElement {
|
||||
this.availableOptions[0].focus()
|
||||
}
|
||||
}
|
||||
else if (e.code === 'Enter' || e.code === 'Space') {
|
||||
else if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
e.target.click()
|
||||
}
|
||||
@ -3302,7 +3302,7 @@ customElements.define('menu-option', class extends HTMLElement {
|
||||
this.setAttribute('role', 'option')
|
||||
this.setAttribute('tabindex', '0')
|
||||
this.addEventListener('keyup', e => {
|
||||
if (e.code === 'Enter' || e.code === 'Space') {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
this.click()
|
||||
}
|
||||
|
||||
26
css/main.css
26
css/main.css
@ -22,7 +22,7 @@ body,
|
||||
body * {
|
||||
--accent-color: #256eff;
|
||||
--text-color: 20, 20, 20;
|
||||
--background-color: 255, 255, 255;
|
||||
--background-color: 255, 250, 246;
|
||||
--foreground-color: rgb(255, 255, 255);
|
||||
--danger-color: rgb(255, 75, 75);
|
||||
--green: #1cad59;
|
||||
@ -51,7 +51,7 @@ strong {
|
||||
font-size: 0.9rem;
|
||||
max-width: 65ch;
|
||||
line-height: 1.7;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
p:not(:last-of-type),
|
||||
strong:not(:last-of-type) {
|
||||
@ -642,7 +642,7 @@ theme-toggle {
|
||||
#main_page {
|
||||
align-content: flex-start;
|
||||
display: grid;
|
||||
padding: 1.5rem;
|
||||
padding: 0.5rem 1.5rem;
|
||||
gap: 2rem;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
@ -663,7 +663,7 @@ theme-toggle {
|
||||
border-radius: 0.5rem;
|
||||
width: 5.2rem;
|
||||
text-align: center;
|
||||
background-color: #e6352f08;
|
||||
background-color: rgba(var(--text-color), 0.02);
|
||||
}
|
||||
.category .icon {
|
||||
margin-bottom: 1rem;
|
||||
@ -731,7 +731,7 @@ theme-toggle {
|
||||
|
||||
#explore {
|
||||
align-items: flex-start;
|
||||
padding-top: 1.5rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
#writer {
|
||||
@ -795,9 +795,9 @@ theme-toggle {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1.5rem;
|
||||
align-content: flex-end;
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.hero-section p {
|
||||
color: inherit;
|
||||
@ -813,6 +813,11 @@ theme-toggle {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#article_category {
|
||||
color: var(--accent-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#article_image {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
@ -944,7 +949,7 @@ theme-toggle {
|
||||
|
||||
#preview_popup h1,
|
||||
#article h1 {
|
||||
font-size: 1.6rem;
|
||||
font-size: 1.7rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
#preview_popup h3:not(:first-of-type),
|
||||
@ -961,7 +966,8 @@ theme-toggle {
|
||||
}
|
||||
#preview_popup p,
|
||||
#article p {
|
||||
font-size: 1.1rem;
|
||||
font-family: "Noto serif", serif;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
#preview_popup p > *,
|
||||
@ -1224,6 +1230,10 @@ theme-toggle {
|
||||
color: var(--accent-color) !important;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
#action_panel {
|
||||
position: relative;
|
||||
margin-top: auto;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -19,7 +19,7 @@ body {
|
||||
* {
|
||||
--accent-color: #256eff;
|
||||
--text-color: 20, 20, 20;
|
||||
--background-color: 255, 255, 255;
|
||||
--background-color: 255, 250, 246;
|
||||
--foreground-color: rgb(255, 255, 255);
|
||||
--danger-color: rgb(255, 75, 75);
|
||||
--green: #1cad59;
|
||||
@ -55,7 +55,7 @@ strong {
|
||||
font-size: 0.9rem;
|
||||
max-width: 65ch;
|
||||
line-height: 1.7;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 1.5rem;
|
||||
@ -211,13 +211,6 @@ h3 {
|
||||
.h5 {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
// font-family: "Spectral", serif;
|
||||
}
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@ -610,7 +603,7 @@ theme-toggle {
|
||||
#main_page {
|
||||
align-content: flex-start;
|
||||
display: grid;
|
||||
padding: 1.5rem;
|
||||
padding: 0.5rem 1.5rem;
|
||||
gap: 2rem;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
@ -630,7 +623,7 @@ theme-toggle {
|
||||
border-radius: 0.5rem;
|
||||
width: 5.2rem;
|
||||
text-align: center;
|
||||
background-color: #e6352f08;
|
||||
background-color: rgba(var(--text-color), 0.02);
|
||||
.icon {
|
||||
margin-bottom: 1rem;
|
||||
transition: transform 0.3s, background-color 0.3s;
|
||||
@ -698,7 +691,7 @@ theme-toggle {
|
||||
|
||||
#explore {
|
||||
align-items: flex-start;
|
||||
padding-top: 1.5rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
#writer {
|
||||
@ -760,9 +753,9 @@ theme-toggle {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1.5rem;
|
||||
align-content: flex-end;
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
p {
|
||||
color: inherit;
|
||||
}
|
||||
@ -777,6 +770,10 @@ theme-toggle {
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
#article_category {
|
||||
color: var(--accent-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
#article_image {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
@ -907,7 +904,7 @@ theme-toggle {
|
||||
#preview_popup,
|
||||
#article {
|
||||
h1 {
|
||||
font-size: 1.6rem;
|
||||
font-size: 1.7rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
@ -921,8 +918,8 @@ theme-toggle {
|
||||
}
|
||||
}
|
||||
p {
|
||||
// font-family: "Roboto", sans-serif;
|
||||
font-size: 1.1rem;
|
||||
font-family: "Noto serif", serif;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.8;
|
||||
& > * {
|
||||
font-family: inherit;
|
||||
@ -1162,6 +1159,9 @@ theme-toggle {
|
||||
color: var(--accent-color) !important;
|
||||
}
|
||||
}
|
||||
.hero-section {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
#action_panel {
|
||||
position: relative;
|
||||
|
||||
25
index.html
25
index.html
@ -13,9 +13,7 @@
|
||||
<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"
|
||||
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=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">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400..800&display=swap" rel="stylesheet">
|
||||
<script src="purify.min.js" defer></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6" defer></script>
|
||||
<script id="floGlobals">
|
||||
@ -238,6 +236,15 @@
|
||||
</aside>
|
||||
<main class="grid gap-2">
|
||||
<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>
|
||||
<p id="article_summary"></p>
|
||||
<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-private-key]').forEach(input => input.customValidation = floCrypto.getPubKeyHex)
|
||||
document.addEventListener('keyup', (e) => {
|
||||
if (e.code === 'Escape') {
|
||||
if (e.key === 'Escape') {
|
||||
hidePopup()
|
||||
}
|
||||
})
|
||||
@ -1187,12 +1194,14 @@
|
||||
async article(articleID, firstLoad = true) {
|
||||
const frag = document.createDocumentFragment()
|
||||
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]
|
||||
getRef('article_image').src = heroImages[articleID].full
|
||||
const { title, published, readTime, contributors, updated, summary, category } = floGlobals.appObjects.rmTimes.articles[articleID]
|
||||
getRef('article_category').textContent = category
|
||||
getRef('article_category').href = `#/explore?type=category&query=${category}`
|
||||
getRef('article_title').textContent = title
|
||||
getRef('article_summary').textContent = summary
|
||||
getRef('published_time').textContent = `${getFormattedTime(published, 'date-only')}${updated ? `, Updated ${relativeTime.from(updated)}` : ''}`
|
||||
getRef('reading_time').textContent = `${readTime} Min read`
|
||||
getRef('article_image').src = heroImages[articleID].full
|
||||
getRef('article_body').innerHTML = DOMPurify.sanitize(allArticles[articleID])
|
||||
const allHeadings = getRef('article_body').querySelectorAll('h3')
|
||||
allHeadings.forEach(heading => {
|
||||
@ -1457,12 +1466,14 @@
|
||||
}, 100))
|
||||
|
||||
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()}`
|
||||
e.target.value = ''
|
||||
toggleSearch()
|
||||
}
|
||||
})
|
||||
|
||||
delegate(getRef('search_suggestions'), 'click', '.search-suggestion', e => {
|
||||
getRef('search_articles').value = ''
|
||||
toggleSearch()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user