Retropex/bitfeed
1
0
Fork 0
mirror of https://github.com/Retropex/bitfeed.git synced 2025-05-12 19:20:46 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #34 from bitfeed-project/tiny-screens

Browse Source 
Support for tiny screens
This commit is contained in:
Mononaut 2022-03-09 20:56:04 +00:00 committed by GitHub
commit 058cbb70a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 93 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/App.svelte
View File

@ -4,13 +4,6 @@
import config from './config.js'
import { settings } from './stores.js'
if (URL) {
const queryParams = (new URL(document.location)).searchParams
if (queryParams.get('noTrack') != null) {
$settings.noTrack = true
}
}
if (!$settings.noTrack && config.public) analytics.init()
</script>

4
client/src/components/Sidebar.svelte
View File

@ -56,6 +56,10 @@ function showBlock () {
flex-direction: column-reverse;
justify-content: flex-start;
align-items: flex-start;
@media (max-width: 480px) and (max-height: 480px) {
display: none;
}
}
</style>

71
client/src/components/TxViz.svelte
View File

@ -3,7 +3,7 @@
import TxController from '../controllers/TxController.js'
import TxRender from './TxRender.svelte'
import getTxStream from '../controllers/TxStream.js'
import { settings, overlay, serverConnected, serverDelay, txCount, mempoolCount, mempoolScreenHeight, frameRate, avgFrameRate, blockVisible, currentBlock, selectedTx, blockAreaSize, devEvents, devSettings } from '../stores.js'
import { settings, overlay, serverConnected, serverDelay, txCount, mempoolCount, mempoolScreenHeight, frameRate, avgFrameRate, blockVisible, tinyScreen, currentBlock, selectedTx, blockAreaSize, devEvents, devSettings } from '../stores.js'
import BlockInfo from '../components/BlockInfo.svelte'
import TxInfo from '../components/TxInfo.svelte'
import Sidebar from '../components/Sidebar.svelte'
@ -74,8 +74,6 @@
$devEvents.addOneCallback = fakeTx
$devEvents.addManyCallback = fakeTxs
$devEvents.addBlockCallback = fakeBlock
if (!$settings.showMessages) $settings.showMessages = true
})
function resize () {
@ -88,6 +86,12 @@
height
})
}
const aspectRatio = window.innerWidth / window.innerHeight
if ((aspectRatio >= 1 && window.innerWidth < 480) || (aspectRatio <= 1 && window.innerHeight < 480)) {
$tinyScreen = true
} else {
$tinyScreen = false
}
}
function changedMode () {
@ -226,17 +230,19 @@
left: 0.5rem;
font-size: 0.9rem;
color: var(--palette-x);
}
// &::before {
// content: '';
// position: absolute;
// left: 0;
// top: 0;
// right: 0;
// bottom: 0;
// background: var(--palette-b);
// opacity: 0.5;
// }
.mempool-info {
position: absolute;
bottom: .5em;
left: 0.5rem;
right: 0.5em;
font-size: 0.9rem;
color: var(--palette-x);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
}
.height-bar {
@ -277,6 +283,11 @@
text-align: left;
padding: 1rem;
flex-shrink: 0;
box-sizing: border-box;
.row {
margin-bottom: 5px;
}
.status-light {
display: inline-block;
@ -296,7 +307,6 @@
}
.stat-counter, .fx-ticker {
margin-top: 5px;
white-space: nowrap;
cursor: pointer;
@ -310,6 +320,21 @@
color: var(--palette-good);
}
}
.block-height {
margin-bottom: 5px;
color: white;
}
&.tiny {
width: 100%;
.row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
}
}
@ -399,14 +424,21 @@
<div class="mempool-height" style="bottom: calc({$mempoolScreenHeight + 20}px)">
<div class="height-bar" />
<span class="mempool-count">Mempool: { numberFormat.format(Math.round($mempoolCount)) } unconfirmed</span>
{#if $tinyScreen}
<div class="mempool-info">
<span class="left">Mempool</span>
<span class="right">{ numberFormat.format(Math.round($mempoolCount)) }</span>
</div>
{:else}
<span class="mempool-count">Mempool: { numberFormat.format(Math.round($mempoolCount)) } unconfirmed</span>
{/if}
</div>
<div class="block-area-wrapper">
<div class="spacer"></div>
<div class="block-area-outer" style="width: {$blockAreaSize}px; height: {$blockAreaSize}px">
<div class="block-area">
<BlockInfo block={$currentBlock} visible={$blockVisible} on:hideBlock={hideBlock} />
<BlockInfo block={$currentBlock} visible={$blockVisible && !$tinyScreen} on:hideBlock={hideBlock} />
</div>
{#if config.dev && config.debug && $devSettings.guides }
<div class="guide-area" />
@ -422,11 +454,14 @@
{/if}
<div class="top-bar">
<div class="status">
<div class="status" class:tiny={$tinyScreen}>
<div class="row">
{#if $settings.showFX && fxLabel }
<span class="fx-ticker {fxColor}" on:click={() => { $sidebarToggle = 'settings'}}>{ fxLabel }</span>
{/if}
{#if $tinyScreen && $currentBlock }
<span class="block-height"><b>Block: </b>{ numberFormat.format($currentBlock.height) }</span>
{/if}
</div>
<div class="row">
{#if $settings.showNetworkStatus }
@ -435,7 +470,7 @@
</div>
</div>
<div class="spacer" />
{#if config.messagesEnabled && $settings.showMessages }
{#if config.messagesEnabled && $settings.showMessages && !$tinyScreen }
<Alerts />
{/if}
</div>

5
client/src/controllers/TxController.js
View File

@ -107,8 +107,6 @@ export default class TxController {
return
}
this.poolScene.scrollLock = true
const block = new BitcoinBlock(blockData)
this.knownBlocks[block.id] = true
if (this.clearBlockTimeout) clearTimeout(this.clearBlockTimeout)
@ -142,9 +140,10 @@ export default class TxController {
this.blockScene.initialLayout()
setTimeout(() => { this.poolScene.scrollLock = false; this.poolScene.layoutAll() }, 4000)
currentBlock.set(block)
blockVisible.set(true)
currentBlock.set(block)
return block
}

46
client/src/stores.js
View File

@ -19,19 +19,22 @@ function createCounter () {
}
}
function createCachedDict (namespace, defaultValues) {
function createCachedDict (namespace, setValues, defaultValues) {
const initial = {
...defaultValues
}
// load from local storage
Object.keys(initial).forEach(field => {
const val = localStorage.getItem(`${namespace}-${field}`)
if (val != null) {
try {
initial[field] = JSON.parse(val)
} catch (e) {
initial[field] = val
// fields take setValues first, then fall back to cached values, then defaults
if (setValues[field] != null) initial[field] = setValues[field]
else {
const val = localStorage.getItem(`${namespace}-${field}`)
if (val != null) {
try {
initial[field] = JSON.parse(val)
} catch (e) {
initial[field] = val
}
}
}
})
@ -96,7 +99,7 @@ export const settingsOpen = writable(false)
let localeCurrencyCode = LocaleCurrency.getCurrency(navigator.language)
if (!currencies[localeCurrencyCode]) localeCurrencyCode = 'USD'
export const settings = createCachedDict('settings', {
const defaultSettings = {
darkMode: true,
showNetworkStatus: true,
currency: localeCurrencyCode,
@ -105,13 +108,28 @@ export const settings = createCachedDict('settings', {
colorByFee: false,
fancyGraphics: true,
showMessages: true,
noTrack: false
})
noTrack: false,
}
const searchParams = URL ? (new URL(document.location)).searchParams : {}
const urlSettings = Object.keys(defaultSettings).reduce((map, key) => {
const param = searchParams.get(key)
if (param != null) {
if (param.toLowerCase() === 'false') map[key] = false
else map[key] = param
}
return map
}, {})
if (urlSettings.showMessages == null) urlSettings.showMessages = true
export const settings = createCachedDict('settings', urlSettings, defaultSettings)
export const colorMode = derived([settings], ([$settings]) => {
return $settings.colorByFee ? "fee" : "age"
})
export const devSettings = (config.dev && config.debug) ? createCachedDict('dev-settings', {
export const devSettings = (config.dev && config.debug) ? createCachedDict('dev-settings', {}, {
guides: false,
layoutHints: false,
}) : writable({})
@ -127,3 +145,7 @@ export const overlay = writable(null)
export const highlight = writable([])
export const newHighlightQuery = writable(null)
export const highlightingFull = writable(false)
const aspectRatio = window.innerWidth / window.innerHeight
let isTinyScreen = (window.innerWidth < 480 && window.innerHeight < 480)
export const tinyScreen = writable(isTinyScreen)