diff options
Diffstat (limited to 'Pages')
| -rw-r--r-- | Pages/Component/ButtonContainer.razor.css | 6 | ||||
| -rw-r--r-- | Pages/ViewMedia.razor | 44 | ||||
| -rw-r--r-- | Pages/ViewMedia.razor.css | 14 | ||||
| -rw-r--r-- | Pages/_Host.cshtml | 2 |
4 files changed, 47 insertions, 19 deletions
diff --git a/Pages/Component/ButtonContainer.razor.css b/Pages/Component/ButtonContainer.razor.css index 6de94c7..c2d5d25 100644 --- a/Pages/Component/ButtonContainer.razor.css +++ b/Pages/Component/ButtonContainer.razor.css @@ -2,3 +2,9 @@ display: flex; justify-content: flex-end; } + +@media (hover: none) and (pointer: coarse) { + div { + justify-content: center; + } +} diff --git a/Pages/ViewMedia.razor b/Pages/ViewMedia.razor index c6ff2ce..27a366c 100644 --- a/Pages/ViewMedia.razor +++ b/Pages/ViewMedia.razor @@ -100,27 +100,51 @@ </div> <div id="button-container"> <ButtonContainer> - <button @onclick=@(() => deleteDialog.Show()) class="warning" data-keyboard-shortcut="d"><u>D</u>elete</button> - <button @onclick=@(() => tagDialog.Show()) class="secondary" data-keyboard-shortcut="t">Add <u>T</u>ag</button> - <button @onclick=@(() => ocrDialog.Show()) class="secondary" data-keyboard-shortcut="o">View <u>O</u>CR</button> + <button @onclick=@(() => deleteDialog.Show()) class="warning" data-keyboard-shortcut="d"> + <img src="/images/trash.svg"/> + <p><u>D</u>elete</p> + </button> + <button @onclick=@(() => tagDialog.Show()) class="secondary" data-keyboard-shortcut="t"> + <img src="/images/tag.svg"/> + <p>Add <u>T</u>ag</p> + </button> + <button @onclick=@(() => ocrDialog.Show()) class="secondary" data-keyboard-shortcut="o"> + <img src="/images/book.svg"/> + <p>View <u>O</u>CR</p> + </button> @if(infoEditMode) { - <button @onclick=@(() => ApplyInfoEdit(false)) class="secondary">Cancel</button> - <button @onclick=@(() => ApplyInfoEdit(true))>Apply</button> + <button @onclick=@(() => ApplyInfoEdit(false)) class="secondary"> + <img src="/images/cross.svg"/> + <p>Cancel</p> + </button> + <button @onclick=@(() => ApplyInfoEdit(true))> + <img src="/images/checkmark.svg"/> + <p>Apply</p> + </button> } else { - <button @onclick=@(() => InfoEditMode = true) class="secondary" data-keyboard-shortcut="e"><u>E</u>dit Info</button> + <button @onclick=@(() => InfoEditMode = true) class="secondary" data-keyboard-shortcut="e"> + <img src="/images/edit.svg"/> + <p><u>E</u>dit Info</p> + </button> } @if(media.IsIngest) { - <button @onclick=@(() => SetIngest(false)) data-keyboard-shortcut="c">Mark Tagging <u>C</u>omplete</button> + <button @onclick=@(() => SetIngest(false)) data-keyboard-shortcut="c"> + <img src="/images/checkmark.svg"/> + <p>Mark Tagging <u>C</u>omplete</p> + </button> } else { - <button class="secondary" @onclick=@(() => SetIngest(true)) data-keyboard-shortcut="c">Mark Tagging In<u>c</u>omplete</button> + <button class="secondary" @onclick=@(() => SetIngest(true)) data-keyboard-shortcut="c"> + <img src="/images/cross.svg"/> + <p>Mark Tagging In<u>c</u>omplete</p> + </button> } </ButtonContainer> </div> </div> </div> <div id="bottom-bar"> - <a href="javascript:showSidebar(false);">🖼</a> - <a href="javascript:showSidebar(true);">🛈</a> + <img onclick="showSidebar(false);" src="/images/photo.svg" width="25" height="25"/> + <img onclick="showSidebar(true);" src="/images/info.svg" width="25" height="25"/> </div> </div> diff --git a/Pages/ViewMedia.razor.css b/Pages/ViewMedia.razor.css index d5bac3e..080994a 100644 --- a/Pages/ViewMedia.razor.css +++ b/Pages/ViewMedia.razor.css @@ -20,6 +20,7 @@ div#image-container { box-sizing: border-box; flex: 1 0 0; height: 100%; + overflow: auto; padding: var(--size-default-gap); width: 100%; } @@ -210,16 +211,13 @@ div#bottom-bar { } } -div#bottom-bar > a { - color: white; - display: block; - font-size: 18pt; - margin: auto; - padding: 7px; - user-select: none; +div#bottom-bar > img { + color: white; + margin: auto; + padding: 10px; } -div#bottom-bar > a:active { +div#bottom-bar > img:active { /* TODO: Use colours from global.css */ background: white; color: #141414; diff --git a/Pages/_Host.cshtml b/Pages/_Host.cshtml index abee742..28ff24c 100644 --- a/Pages/_Host.cshtml +++ b/Pages/_Host.cshtml @@ -7,7 +7,7 @@ <html lang="en"> <head> <meta charset="utf-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1" /> + <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <base href="~/" /> <link href="css/site.css" rel="stylesheet" /> <link href="/styles/global.css" rel="stylesheet" /> |