aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--static/style.css22
-rw-r--r--templates/about.tmpl84
-rw-r--r--templates/nav.tmpl20
-rw-r--r--templates/notification.tmpl4
-rw-r--r--templates/postform.tmpl19
5 files changed, 125 insertions, 24 deletions
diff --git a/static/style.css b/static/style.css
index 0349c29..9c05eff 100644
--- a/static/style.css
+++ b/static/style.css
@@ -505,6 +505,22 @@ img.emoji {
margin: 8px 0 16px 0;
}
+.keyboard-shortcuts {
+ margin-top: 12px;
+}
+
+.keyboard-shortcuts td {
+ padding: 2px 4px;
+}
+
+kbd {
+ border-radius: 3px;
+ padding: 1px 4px;
+ border: 1px solid #444444;
+ background-color: #eeeeee;
+ font-size: 10pt;
+}
+
.dark {
background-color: #222222;
background-image: none;
@@ -548,3 +564,9 @@ img.emoji {
background-color: #222222;
border-color: #444444;
}
+
+.dark kbd {
+ background-color: #333333;
+ border-color: #444444;
+ color: #eaeaea;
+}
diff --git a/templates/about.tmpl b/templates/about.tmpl
index 1f6fda7..2b4d636 100644
--- a/templates/about.tmpl
+++ b/templates/about.tmpl
@@ -1,7 +1,7 @@
{{with .Data}}
{{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> About </div>
+<div class="page-title"> About </div>
<div>
<p>
A web client for <a href="https://pleroma.social" target="_blank">Mastodon Network</a>.
@@ -14,6 +14,88 @@
</P>
</div>
+<div class="page-title"> Keyboard shortcuts </div>
+<div>
+ <table class="keyboard-shortcuts">
+ <tr>
+ <td> User profile </td>
+ <td> <kbd>0</kbd> </td>
+ </tr>
+ <tr>
+ <td> Home timeline </td>
+ <td> <kbd>1</kbd> </td>
+ </tr>
+ <tr>
+ <td> Direct timeline </td>
+ <td> <kbd>2</kbd> </td>
+ </tr>
+ <tr>
+ <td> Local timeline </td>
+ <td> <kbd>3</kbd> </td>
+ </tr>
+ <tr>
+ <td> The Whole Known Network </td>
+ <td> <kbd>4</kbd> </td>
+ </tr>
+ <tr>
+ <td> Search </td>
+ <td> <kbd>5</kbd> </td>
+ </tr>
+ <tr>
+ <td> About </td>
+ <td> <kbd>6</kbd> </td>
+ </tr>
+ <tr>
+ <td> Settings </td>
+ <td> <kbd>7</kbd> </td>
+ </tr>
+ <tr>
+ <td> Signout </td>
+ <td> <kbd>8</kbd> </td>
+ </tr>
+ <tr>
+ <td> Emoji list </td>
+ <td> <kbd>L</kbd> </td>
+ </tr>
+ <tr>
+ <td> Edit post </td>
+ <td> <kbd>E</kbd> </td>
+ </tr>
+ <tr>
+ <td> Post format </td>
+ <td> <kbd>F</kbd> </td>
+ </tr>
+ <tr>
+ <td> Post scope </td>
+ <td> <kbd>S</kbd> </td>
+ </tr>
+ <tr>
+ <td> Post NSFW </td>
+ <td> <kbd>N</kbd> </td>
+ </tr>
+ <tr>
+ <td> Post attachments </td>
+ <td> <kbd>A</kbd> </td>
+ </tr>
+ <tr>
+ <td> Submit post </td>
+ <td> <kbd>P</kbd> </td>
+ </tr>
+ <tr>
+ <td> Refresh notifications </td>
+ <td> <kbd>R</kbd> </td>
+ </tr>
+ <tr>
+ <td> Read notifications </td>
+ <td> <kbd>C</kbd> </td>
+ </tr>
+ </table>
+ <p>
+ You can activate the shortcuts by pressing the associated key with your browser's <a href="https://en.wikipedia.org/wiki/Access_key#Access_in_different_browsers" target="_blank">accesskey modifier</a>,
+ which is generally <kbd>Alt</kbd> + <kbd>Shift</kbd>.
+ </p>
+</div>
+
{{template "footer.tmpl"}}
{{end}}
diff --git a/templates/nav.tmpl b/templates/nav.tmpl
index 293d210..f3db9f1 100644
--- a/templates/nav.tmpl
+++ b/templates/nav.tmpl
@@ -2,30 +2,30 @@
{{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
<div class="user-info">
<div class="user-info-img-container">
- <a class="img-link" href="/timeline/home" title="home">
+ <a class="img-link" href="/timeline/home" title="Home (1)">
<img class="user-info-img" src="{{.User.AvatarStatic}}" alt="profile-avatar" height="64" />
</a>
</div>
<div class="user-info-details-container">
<div class="user-info-details-name">
<span class="status-dname"> {{EmojiFilter .User.DisplayName .User.Emojis}} </span>
- <a class="nav-link" href="/user/{{.User.ID}}">
+ <a class="nav-link" href="/user/{{.User.ID}}" accesskey="0" title="User profile (0)">
<span class="status-uname"> @{{.User.Acct}} </span>
</a>
</div>
<div class="user-info-details-nav">
- <a class="nav-link" href="/timeline/home">home</a>
- <a class="nav-link" href="/timeline/direct">direct</a>
- <a class="nav-link" href="/timeline/local">local</a>
- <a class="nav-link" href="/timeline/twkn">twkn</a>
- <a class="nav-link" href="/search">search</a>
- <a class="nav-link" href="/about">about</a>
+ <a class="nav-link" href="/timeline/home" accesskey="1" title="Home timeline (1)">home</a>
+ <a class="nav-link" href="/timeline/direct" accesskey="2" title="Direct timeline (2)">direct</a>
+ <a class="nav-link" href="/timeline/local" accesskey="3" title="Local timeline (3)">local</a>
+ <a class="nav-link" href="/timeline/twkn" accesskey="4" title="The Whole Known Netwwork (4)">twkn</a>
+ <a class="nav-link" href="/search" accesskey="5" title="Search (5)">search</a>
+ <a class="nav-link" href="/about" accesskey="6" title="About (6)">about</a>
</div>
<div>
- <a class="nav-link" href="/settings" target="_top">settings</a>
+ <a class="nav-link" href="/settings" target="_top" accesskey="7" title="Settings (7)">settings</a>
<form class="signout" action="/signout" method="post" target="_top">
<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
- <input type="submit" value="signout" class="btn-link nav-link">
+ <input type="submit" value="signout" class="btn-link nav-link" accesskey="8" title="Signout (8)">
</form>
</div>
</div>
diff --git a/templates/notification.tmpl b/templates/notification.tmpl
index 6973fa5..059268a 100644
--- a/templates/notification.tmpl
+++ b/templates/notification.tmpl
@@ -7,11 +7,11 @@
({{.UnreadCount }})
{{end}}
</div>
- <a class="notification-refresh" href="/notifications" target="_self">refresh</a>
+ <a class="notification-refresh" href="/notifications" target="_self" accesskey="R" title="Refresh (R)">refresh</a>
{{if .ReadID}}
<form action="/notifications/read?max_id={{.ReadID}}" method="post" target="_self">
<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
- <input type="submit" value="read" class="btn-link">
+ <input type="submit" value="read" class="btn-link" accesskey="C" title="Clear unread notifications (C)">
</form>
{{end}}
</div>
diff --git a/templates/postform.tmpl b/templates/postform.tmpl
index 3bb2457..ac77486 100644
--- a/templates/postform.tmpl
+++ b/templates/postform.tmpl
@@ -7,24 +7,22 @@
{{else}}
<label for="post-content" class="post-form-title"> New post </label>
{{end}}
- <a class="post-form-emoji-link" href="/emojis" target="_blank" title="emoji list">
+ <a class="post-form-emoji-link" href="/emojis" target="_blank" title="Emoji list (L)" accesskey="L">
emoji list
</a>
<div class="post-form-content-container">
- <textarea id="post-content" name="content" class="post-content" cols="34" rows="5">{{if .ReplyContext}}{{.ReplyContext.ReplyContent}}{{end}}</textarea>
+ <textarea id="post-content" name="content" class="post-content" cols="34" rows="5" accesskey="E" title="Edit post (E)">{{if .ReplyContext}}{{.ReplyContext.ReplyContent}}{{end}}</textarea>
</div>
<div>
{{if gt (len .Formats) 0}}
<span class="post-form-field">
- <label for="post-format"> Format </label>
- <select id="post-format" name="format">
+ <select id="post-format" name="format" accesskey="F" title="Format (F)">
{{range .Formats}} <option value="{{.Type}}">{{.Name}}</option> {{end}}
</select>
</span>
{{end}}
<span class="post-form-field">
- <label for="post-visilibity"> Scope </label>
- <select id="post-visilibity" name="visibility" {{if .ReplyContext}}{{if .ReplyContext.ForceVisibility}}disabled{{end}}{{end}}>
+ <select id="post-visilibity" name="visibility" {{if .ReplyContext}}{{if .ReplyContext.ForceVisibility}}disabled{{end}}{{end}} accesskey="S" title="Scope (S)">
<option value="public" {{if eq .DefaultVisibility "public"}}selected{{end}}>Public</option>
<option value="unlisted" {{if eq .DefaultVisibility "unlisted"}}selected{{end}}>Unlisted</option>
<option value="private" {{if eq .DefaultVisibility "private"}}selected{{end}}>Private</option>
@@ -32,17 +30,16 @@
</select>
</span>
<span class="post-form-field">
- <input type="checkbox" id="nsfw-checkbox" name="is_nsfw" value="on">
- <label for="nsfw-checkbox"> Is NSFW </label>
+ <input type="checkbox" id="nsfw-checkbox" name="is_nsfw" value="on" accesskey="N" title="NSFW (N)">
+ <label for="nsfw-checkbox"> NSFW </label>
</span>
</div>
<div>
<span class="post-form-field">
- <label for ="post-file-picker"> Attachments </label>
- <input id="post-file-picker" type="file" name="attachments" multiple>
+ <input id="post-file-picker" type="file" name="attachments" multiple accesskey="A" title="Attachments (A)">
</span>
</div>
- <button type="submit"> Post </button>
+ <button type="submit" accesskey="P" title="Post (P)"> Post </button>
</form>
{{end}}