Added URL history paths & loading

This commit is contained in:
Thomas Mathews 2023-01-24 12:23:04 -08:00
parent f169ee7bf6
commit 1df924df1b
4 changed files with 128 additions and 82 deletions

View file

@ -7,36 +7,36 @@
<meta http-equiv="Content-Security-Policy"
content="default-src 'none'; manifest-src 'self'; connect-src 'self' ws: wss:; script-src 'self'; script-src-elem 'self'; script-src-attr 'none'; style-src 'self' fonts.googleapis.com; img-src http: https: data:; media-src *; font-src 'self' fonts.gstatic.com; child-src 'none';" />
<title>Yo, Sup</title>
<link rel="manifest" href="pwa/manifest.json"/>
<link rel="icon" href="icon/icon.svg" type="image/svg+xml"/>
<link rel="apple-touch-icon" href="pwa/icon-256.png"/>
<link rel="stylesheet" href="css/vars.css?v=1">
<link rel="stylesheet" href="css/utils.css?v=1">
<link rel="stylesheet" href="css/styles.css?v=13">
<link rel="stylesheet" href="css/responsive.css?v=10">
<script defer src="js/ui/safe-html.js?v=1"></script>
<script defer src="js/util.js?v=5"></script>
<script defer src="js/ui/util.js?v=8"></script>
<script defer src="js/ui/render.js?v=15"></script>
<script defer src="js/ui/state.js?v=1"></script>
<script defer src="js/ui/fmt.js?v=1"></script>
<script defer src="js/ui/profile.js?v=1"></script>
<script defer src="js/ui/settings.js?v=1"></script>
<script defer src="js/ui/dm.js?v=1"></script>
<script defer src="js/noble-secp256k1.js?v=1"></script>
<script defer src="js/bech32.js?v=1"></script>
<script defer src="js/nostr.js?v=7"></script>
<script defer src="js/core.js?v=1"></script>
<script defer src="js/model.js?v=1"></script>
<script defer src="js/contacts.js?v=1"></script>
<script defer src="js/event.js?v=1"></script>
<script defer src="js/lib.js?v=1"></script>
<script defer src="js/main.js?v=1"></script>
<link rel="manifest" href="/pwa/manifest.json"/>
<link rel="icon" href="/icon/icon.svg" type="image/svg+xml"/>
<link rel="apple-touch-icon" href="/pwa/icon-256.png"/>
<link rel="stylesheet" href="/css/vars.css?v=1">
<link rel="stylesheet" href="/css/utils.css?v=1">
<link rel="stylesheet" href="/css/styles.css?v=13">
<link rel="stylesheet" href="/css/responsive.css?v=10">
<script defer src="/js/ui/safe-html.js?v=1"></script>
<script defer src="/js/util.js?v=5"></script>
<script defer src="/js/ui/util.js?v=8"></script>
<script defer src="/js/ui/render.js?v=15"></script>
<script defer src="/js/ui/state.js?v=1"></script>
<script defer src="/js/ui/fmt.js?v=1"></script>
<script defer src="/js/ui/profile.js?v=1"></script>
<script defer src="/js/ui/settings.js?v=1"></script>
<script defer src="/js/ui/dm.js?v=1"></script>
<script defer src="/js/noble-secp256k1.js?v=1"></script>
<script defer src="/js/bech32.js?v=1"></script>
<script defer src="/js/nostr.js?v=7"></script>
<script defer src="/js/core.js?v=1"></script>
<script defer src="/js/model.js?v=1"></script>
<script defer src="/js/contacts.js?v=1"></script>
<script defer src="/js/event.js?v=1"></script>
<script defer src="/js/lib.js?v=1"></script>
<script defer src="/js/main.js?v=1"></script>
</head>
<body>
<div id="container-busy">
<div class="loader" title="Loading...">
<img class="dark-invert" src="icon/loader-fragment.svg"/>
<img class="dark-invert" src="/icon/loader-fragment.svg"/>
</div>
</div>
<div id="container-welcome" class="hide">
@ -44,12 +44,12 @@
<div class="padded">
<h1>
Yo, Sup?
<img class="icon svg" src="icon/logo-inverted.svg"/>
<img class="icon svg" src="/icon/logo-inverted.svg"/>
</h1>
<p>The blue bird experience for Nostr.</p>
<button class="action" action="sign-in">
Sign In with Key
<img src="./icon/key.svg" class="icon svg small invert"/>
<img src="/icon/key.svg" class="icon svg small invert"/>
</button>
</div>
</div>
@ -58,24 +58,24 @@
<div id="container-app" class="hide">
<nav id="gnav">
<button class="icon" action="toggle-gnav" title="Open Menu">
<img class="icon svg invert" src="icon/logo.svg"/>
<img class="icon svg invert" src="/icon/logo.svg"/>
</button>
<button class="icon" action="open-view" data-view="friends" title="Home">
<img class="icon svg invert" src="icon/home.svg"/>
<img class="icon svg invert" src="/icon/home.svg"/>
</button>
<button class="icon" action="open-view" data-view="explore" title="Explore">
<img class="icon svg invert" src="icon/explore.svg"/>
<img class="icon svg invert" src="/icon/explore.svg"/>
</button>
<button class="icon" action="open-view" data-view="dm" title="Direct Messages">
<img class="icon svg invert" src="icon/messages.svg"/>
<img class="icon svg invert" src="/icon/messages.svg"/>
<div class="new-notifications hide" role="dm"></div>
</button>
<button class="icon" action="open-view" data-view="notifications" title="Notifications">
<img class="icon svg invert" src="icon/notifications.svg"/>
<img class="icon svg invert" src="/icon/notifications.svg"/>
<div class="new-notifications hide" role="activity"></div>
</button>
<button class="icon" action="open-view" data-view="settings" title="Settings">
<img class="icon svg invert" src="icon/settings.svg"/>
<img class="icon svg invert" src="/icon/settings.svg"/>
</button>
</nav>
<div id="container">
@ -83,33 +83,33 @@
<div id="nav" class="flex-noshrink vertical-hide">
<div data-active="home">
<div id="app-icon-logo">
<img class="icon svg" title="Damus" src="icon/logo-inverted.svg"/>
<img class="icon svg" title="Damus" src="/icon/logo-inverted.svg"/>
</div>
<button action="open-view" data-view="friends" class="nav icon"
title="Home">
<img class="icon svg inactive" src="icon/home.svg"/>
<img class="icon svg active" src="icon/home-active.svg"/>
<img class="icon svg inactive" src="/icon/home.svg"/>
<img class="icon svg active" src="/icon/home-active.svg"/>
</button>
<button action="open-view" data-view="explore" class="nav icon"
title="Explore"> <img class="icon svg inactive" src="icon/explore.svg"/>
<img class="icon svg active" src="icon/explore-active.svg"/>
title="Explore"> <img class="icon svg inactive" src="/icon/explore.svg"/>
<img class="icon svg active" src="/icon/explore-active.svg"/>
</button>
<button action="open-view" data-view="dm" class="nav icon"
title="Direct Messages">
<img class="icon svg inactive" src="icon/messages.svg"/>
<img class="icon svg active" src="icon/messages-active.svg"/>
<img class="icon svg inactive" src="/icon/messages.svg"/>
<img class="icon svg active" src="/icon/messages-active.svg"/>
<div class="new-notifications hide" role="dm"></div>
</button>
<button action="open-view" data-view="notifications"
class="nav icon" title="Notifications">
<img class="icon svg inactive" src="icon/notifications.svg"/>
<img class="icon svg active" src="icon/notifications-active.svg"/>
<img class="icon svg inactive" src="/icon/notifications.svg"/>
<img class="icon svg active" src="/icon/notifications-active.svg"/>
<div class="new-notifications hide" role="activity"></div>
</button>
<button action="open-view" data-view="settings"
title="Settings" class="nav icon">
<img class="icon svg inactive" src="icon/settings.svg"/>
<img class="icon svg active" src="icon/settings-active.svg"/>
<img class="icon svg inactive" src="/icon/settings.svg"/>
<img class="icon svg active" src="/icon/settings-active.svg"/>
</button>
</div>
</div>
@ -128,9 +128,9 @@
Mark All Read
</button>
<img class="pfp hide" role="their-pfp" data-pubkey=""
src="icon/no-user.svg"/>
src="/icon/no-user.svg"/>
<img class="pfp hide" role="my-pfp" data-pubkey=""
src="icon/no-user.svg"/>
src="/icon/no-user.svg"/>
</div>
</header>
<div id="newpost">
@ -142,7 +142,7 @@
<button class="cw icon" role="toggle-cw"
title="Mark this message as sensitive.">
<img class="icon svg small"
src="icon/content-warning.svg"/>
src="/icon/content-warning.svg"/>
</button>
<button class="action" role="send"
id="post-button" disabled>Send</button>
@ -154,14 +154,14 @@
<div class="profile-tools">
<button class="icon" role="message-user"
title="Directly Message">
<img class="icon svg" src="icon/message-user.svg"/>
<img class="icon svg" src="/icon/message-user.svg"/>
</button>
<button class="icon hide" role="edit-profile"
title="Edit Profile">
<img class="icon svg" src="icon/edit-profile.svg"/></button>
<img class="icon svg" src="/icon/edit-profile.svg"/></button>
<button class="icon" role="copy-pk"
data-pk="" title="Copy Public Key">
<img class="icon svg" src="icon/pubkey.svg"/></button>
<img class="icon svg" src="/icon/pubkey.svg"/></button>
<button class="action" role="follow-user"
data-pk="">Follow</button>
</div>
@ -173,7 +173,7 @@
</div>
<div class="loading-events">
<div class="loader" title="Loading...">
<img class="dark-invert" src="icon/loader-fragment.svg"/>
<img class="dark-invert" src="/icon/loader-fragment.svg"/>
</div>
</div>
<div id="show-new" class="show-new bottom-border hide">
@ -193,7 +193,7 @@
<header>
<label>Relays</label>
<button id="add-relay" class="btn-text">
<img class="svg icon small" src="icon/add-relay.svg"/>
<img class="svg icon small" src="/icon/add-relay.svg"/>
</button>
</header>
<table id="relay-list" class="row">
@ -218,7 +218,7 @@
<div class="row">
<button class="action" role="sign-out">
Sign Out
<img class="icon svg small invert" src="icon/sign-out.svg"/>
<img class="icon svg small invert" src="/icon/sign-out.svg"/>
</button>
</div>
</section>
@ -260,7 +260,7 @@
<header>
<label>Reply To</label>
<button class="icon" action="close-modal">
<img class="icon svg" src="icon/close-modal.svg"/>
<img class="icon svg" src="/icon/close-modal.svg"/>
</button>
</header>
<div id="replying-to"></div>
@ -279,7 +279,7 @@
<header>
<label>Update Profile</label>
<button class="icon" action="close-modal">
<img class="icon svg" src="icon/close-modal.svg"/>
<img class="icon svg" src="/icon/close-modal.svg"/>
</button>
</header>
<div>
@ -298,7 +298,7 @@
<header>
<label>Event Details</label>
<button class="icon modal-floating-close-btn" action="close-modal">
<img class="icon svg" src="icon/close-modal.svg"/>
<img class="icon svg" src="/icon/close-modal.svg"/>
</button>
</header>
<div class="max-content">