web/notify.moe
Code Issues Pull Requests Activity

Improved anime editing sidebar icons

Browse Source
This commit is contained in:
Eduard Urbach 2019-03-11 10:19:08 +09:00
parent 7adf038729
commit 997694d7df
5 changed files with 34 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
images/icons/annilist.svg → images/icons/anilist.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

6
layout/sidebar/sidebar.pixy
View File

@ -9,13 +9,13 @@ component Sidebar(searchTerm string, user *arn.User)
img.user-image.lazy(src=utils.EmptyImage(), data-src="/images/brand/64.png", data-webp="true", alt="Anime Notifier")
if user != nil
a.badge.left-badge(href="/settings", title="Settings")
a.badge.sidebar-badge.left-badge(href="/settings", title="Settings")
RawIcon("cog")
a#notification-icon.badge.right-badge(href="/notifications", title="Notifications")
a#notification-icon.badge.sidebar-badge.right-badge(href="/notifications", title="Notifications")
RawIcon("bell")
a#notification-count.badge.right-badge.badge-important.hidden(href="/notifications", title="Notifications") 0
a#notification-count.badge.sidebar-badge.right-badge.badge-important.hidden(href="/notifications", title="Notifications") 0
//- Search
div(aria-label="Search")

8
layout/sidebar/sidebar.scarlet
View File

@ -70,11 +70,8 @@ const sidebar-spacing-y = 0.7rem
horizontal
justify-content center
align-items center
position absolute
top 50%
background reverse-light-color
border-radius 50%
transform translateY(-50%)
padding 0.5rem
color text-color
width 30px
@ -84,6 +81,11 @@ const sidebar-spacing-y = 0.7rem
color text-color
background reverse-light-hover-color
.sidebar-badge
position absolute
top 50%
transform translateY(-50%)
:active
transform translateY(-50%) translateY(3px)

20
pages/anime/editanime/editanime.pixy
View File

@ -10,16 +10,22 @@ component EditAnimeTabs(anime *arn.Anime)
Tab("Relations", "exchange", anime.Link() + "/edit/relations")
Tab("Episodes", "list-ol", anime.Link() + "/edit/episodes")
Tab("History", "history", anime.Link() + "/edit/history")
.search-links
a.search-link.google-badge.tip(href="https://www.google.com/search?q=" + anime.Title.Canonical, target="_blank", rel="noopener", aria-label="Google")
a.badge.search-link.google-badge.tip(href="https://www.google.com/search?q=" + anime.Title.Canonical, target="_blank", rel="noopener", aria-label="Google")
RawIcon("google")
a.search-link.annilist-badge.tip(href="https://anilist.co/search/anime?sort=SEARCH_MATCH&search=" + anime.Title.Canonical, target="_blank", rel="noopener", aria-label="Annilist")
RawIcon("annilist")
a.search-link.mal-badge.tip(href="https://myanimelist.net/anime.php?q=" + anime.Title.Canonical, target="_blank", rel="noopener", aria-label="MyAnimeList")
a.badge.search-link.anilist-badge.tip(href="https://anilist.co/search/anime?sort=SEARCH_MATCH&search=" + anime.Title.Canonical, target="_blank", rel="noopener", aria-label="Anilist")
RawIcon("anilist")
a.badge.search-link.mal-badge.tip(href="https://myanimelist.net/anime.php?q=" + anime.Title.Canonical, target="_blank", rel="noopener", aria-label="MyAnimeList")
RawIcon("mal")
a.search-link.shoboi-badge.tip(href="http://cal.syoboi.jp/find?type=quick&sd=1&kw=" + anime.Title.Japanese, target="_blank", rel="noopener", aria-label="Shoboi")
a.badge.search-link.shoboi-badge.tip(href="http://cal.syoboi.jp/find?type=quick&sd=1&kw=" + anime.Title.Japanese, target="_blank", rel="noopener", aria-label="Shoboi")
RawIcon("shoboi")
a.search-link.tip(href="https://www.google.com/search?q=" + anime.Title.Canonical + " anime cover&tbm=isch&tbs=imgo:1,isz:lt,islt:qsvga", target="_blank", rel="noopener", aria-label="Cover image")
a.badge.search-link.tip(href="https://www.google.com/search?q=" + anime.Title.Canonical + " anime cover&tbm=isch&tbs=imgo:1,isz:lt,islt:qsvga", target="_blank", rel="noopener", aria-label="Cover image")
RawIcon("image")
a.search-link.tip(href="https://www.youtube.com/results?search_query=" + strings.Replace(anime.Title.Canonical+" PV", " ", "+", -1), target="_blank", rel="noopener", aria-label="Trailer")
a.badge.search-link.tip(href="https://www.youtube.com/results?search_query=" + strings.Replace(anime.Title.Canonical+" PV", " ", "+", -1), target="_blank", rel="noopener", aria-label="Trailer")
RawIcon("youtube-full-color")

40
pages/editor/editor.scarlet
View File

@ -26,42 +26,28 @@
background hsl(273, feature-card-saturation, feature-card-lightness) !important
.search-links
position fixed
top 25%
left 95%
vertical
width fit-content
// This is a copy of the .badge style, but the position:absolute broke the layout
.search-link
horizontal
justify-content center
align-items center
background reverse-light-color
border-radius 50%
padding 0.5rem
color text-color
width 30px
height 30px
position relative
margin-top 0.2em
margin-bottom 0.2em
margin 0 auto
:hover
color text-color
background reverse-light-hover-color
.search-link
margin 0.2rem
:active
transform scale(1.2)
> 1000px
.search-links
vertical
position fixed
top 50%
right content-padding
transform translateY(-50%)
.google-badge,.shoboi-badge
.google-badge,
.shoboi-badge
background rgba(255, 255, 255, 0.80) !important
:hover
background rgba(255, 255, 255, 1) !important
.annilist-badge
.anilist-badge
background rgba(31, 38, 49, 0.80) !important
:hover