From 997694d7df7828f99d4f839095074d07795ef85c Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Mon, 11 Mar 2019 10:19:08 +0900 Subject: [PATCH] Improved anime editing sidebar icons --- images/icons/{annilist.svg => anilist.svg} | 0 layout/sidebar/sidebar.pixy | 6 ++-- layout/sidebar/sidebar.scarlet | 8 +++-- pages/anime/editanime/editanime.pixy | 20 +++++++---- pages/editor/editor.scarlet | 40 +++++++--------------- 5 files changed, 34 insertions(+), 40 deletions(-) rename images/icons/{annilist.svg => anilist.svg} (100%) diff --git a/images/icons/annilist.svg b/images/icons/anilist.svg similarity index 100% rename from images/icons/annilist.svg rename to images/icons/anilist.svg diff --git a/layout/sidebar/sidebar.pixy b/layout/sidebar/sidebar.pixy index 57e1b70b..0f539ded 100644 --- a/layout/sidebar/sidebar.pixy +++ b/layout/sidebar/sidebar.pixy @@ -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") diff --git a/layout/sidebar/sidebar.scarlet b/layout/sidebar/sidebar.scarlet index 0c57f966..629e358d 100644 --- a/layout/sidebar/sidebar.scarlet +++ b/layout/sidebar/sidebar.scarlet @@ -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) diff --git a/pages/anime/editanime/editanime.pixy b/pages/anime/editanime/editanime.pixy index 08da6916..f73d950c 100644 --- a/pages/anime/editanime/editanime.pixy +++ b/pages/anime/editanime/editanime.pixy @@ -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") \ No newline at end of file diff --git a/pages/editor/editor.scarlet b/pages/editor/editor.scarlet index 7211935b..0319157c 100644 --- a/pages/editor/editor.scarlet +++ b/pages/editor/editor.scarlet @@ -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