web/notify.moe
Code Issues Pull Requests Activity

Improved calendar style

Browse Source
This commit is contained in:
Eduard Urbach 2018-03-08 17:36:55 +01:00
parent e034726b5e
commit d6d623e151
7 changed files with 53 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
pages/animelist/animelist.scarlet
View File

@ -21,10 +21,7 @@
display flex
.anime-list-item-image
width 39px
height 39px
border-radius 2px
object-fit cover
anime-list-item-image
.anime-list-item-name
flex 1

13
pages/calendar/calendar.pixy
View File

@ -11,11 +11,10 @@ component Calendar(days []*utils.CalendarDay, user *arn.User)
h3.weekday-name.mountable(data-mountable-type=day.Name)= day.Name
.calendar-entries
each entry in day.Entries
.calendar-entry.mountable(data-mountable-type=day.Name, data-added=entry.Added)
a.ajax(href=entry.Anime.Link())
img.calendar-entry-image.lazy(data-src=entry.Anime.Image("large"), data-webp="true", alt=entry.Anime.Title.ByUser(user))
a.ajax(href=entry.Anime.Link())
.calendar-entry-title= entry.Anime.Title.ByUser(user)
a.calendar-entry.mountable.ajax(href=entry.Anime.Link(), data-mountable-type=day.Name, data-added=entry.Added)
img.calendar-entry-image.lazy(data-src=entry.Anime.Image("small"), data-webp="true", alt=entry.Anime.Title.ByUser(user))
.calendar-entry-info
.calendar-entry-time.utc-date-absolute(data-date=entry.Episode.AiringDate.Start)
.calendar-entry-episode= "Ep: " + strconv.Itoa(entry.Episode.Number)
.calendar-entry-title= entry.Anime.Title.ByUser(user)
.calendar-entry-time-and-episode
.calendar-entry-time.utc-date-absolute(data-date=entry.Episode.AiringDate.Start)
.calendar-entry-episode= "Ep: " + strconv.Itoa(entry.Episode.Number)

37
pages/calendar/calendar.scarlet
View File

@ -22,28 +22,45 @@
vertical
.calendar-entry
ui-element
padding 0.5rem 1rem
margin-bottom 0.5rem
horizontal
default-transition
border-radius ui-element-border-radius
padding 0.5rem 0.6rem
margin-bottom 0.4rem
overflow hidden
:hover
background calendar-hover-color
box-shadow outline-shadow-light
.calendar-entry-image
width 100%
height 4rem
object-fit cover
anime-list-item-image
.calendar-entry[data-added="true"]
border 2px solid main-color
background calendar-entry-seen-background
box-shadow outline-shadow-light
border ui-border
:hover
border-color main-color
background calendar-entry-seen-hover-background
.calendar-entry-info
horizontal
vertical
overflow hidden
margin-left 0.8rem
flex 1
.calendar-entry-title
clip-long-text
margin-top 0.4rem
flex 0.5
line-height 1.2em
.calendar-entry-time-and-episode
horizontal
flex 0.5
color text-color
line-height 1.6em
text-shadow none
.calendar-entry-time
opacity 0.85

4
scripts/Actions/Theme.ts
View File

@ -37,7 +37,9 @@ let dark = {
"post-unlike-color": "var(--link-color)",
"post-permalink-color": "var(--link-color)",
"quote-color" : "var(--text-color)"
"quote-color": "var(--text-color)",
"calendar-hover-color": "var(--reverse-light-color)"
}
// Toggle theme

6
styles/include/config.scarlet
View File

@ -9,6 +9,7 @@ pro-color = hsla(0, 100%, 73%, 0.87)
anime-alternative-title-color = hsla(0, 0%, 0%, 0.5)
reverse-light-color = rgba(0, 0, 0, 0.05)
reverse-light-hover-color = rgba(0, 0, 0, 0.1)
reverse-light-lite-color = rgba(0, 0, 0, 0.02)
theme-white = bg-color
theme-black = text-color
@ -68,6 +69,11 @@ post-permalink-color = blue !important
table-row-hover-background = hsla(0, 0%, 0%, 0.01)
anime-list-item-name-color = link-color
// Calendar
calendar-hover-color = rgba(255, 255, 255, 0.4)
calendar-entry-seen-background = ui-background
calendar-entry-seen-hover-background = ui-background
// Tables
table-width-normal = 900px

3
styles/include/dark.scarlet
View File

@ -38,3 +38,6 @@
// // Quote
// quote-color = text-color
// Calendar
// calendar-hover-color = reverse-light-color

6
styles/include/mixins.scarlet
View File

@ -64,6 +64,12 @@ mixin anime-mini-item-image
:hover
filter saturate(1.3)
mixin anime-list-item-image
width 39px
height 39px
border-radius 2px
object-fit cover
mixin sidebar
vertical
margin-left 0