natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨

This commit is contained in:
syuilo 2018-05-18 09:40:57 +09:00
parent fbd51f0079
commit 6ad90ecfa8
3 changed files with 96 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
src/client/app/common/views/widgets/calendar.vue
View File

@ -1,37 +1,37 @@
<template> <template>
<div class="mkw-calendar" <div class="mkw-calendar" :data-special="special" :data-mobile="isMobile">
:data-melt="props.design == 1" <mk-widget-container :naked="props.design == 1" :show-header="false">
:data-special="special" <div class="mkw-calendar--body">
:data-mobile="isMobile" <div class="calendar" :data-is-holiday="isHoliday">
> <p class="month-and-year">
<div class="calendar" :data-is-holiday="isHoliday"> <span class="year">{{ year }}年</span>
<p class="month-and-year"> <span class="month">{{ month }}月</span>
<span class="year">{{ year }}年</span> </p>
<span class="month">{{ month }}月</span> <p class="day">{{ day }}日</p>
</p> <p class="week-day">{{ weekDay }}曜日</p>
<p class="day">{{ day }}日</p> </div>
<p class="week-day">{{ weekDay }}曜日</p> <div class="info">
</div> <div>
<div class="info"> <p>今日:<b>{{ dayP.toFixed(1) }}%</b></p>
<div> <div class="meter">
<p>今日:<b>{{ dayP.toFixed(1) }}%</b></p> <div class="val" :style="{ width: `${dayP}%` }"></div>
<div class="meter"> </div>
<div class="val" :style="{ width: `${dayP}%` }"></div> </div>
<div>
<p>今月:<b>{{ monthP.toFixed(1) }}%</b></p>
<div class="meter">
<div class="val" :style="{ width: `${monthP}%` }"></div>
</div>
</div>
<div>
<p>今年:<b>{{ yearP.toFixed(1) }}%</b></p>
<div class="meter">
<div class="val" :style="{ width: `${yearP}%` }"></div>
</div>
</div>
</div> </div>
</div> </div>
<div> </mk-widget-container>
<p>今月:<b>{{ monthP.toFixed(1) }}%</b></p>
<div class="meter">
<div class="val" :style="{ width: `${monthP}%` }"></div>
</div>
</div>
<div>
<p>今年:<b>{{ yearP.toFixed(1) }}%</b></p>
<div class="meter">
<div class="val" :style="{ width: `${yearP}%` }"></div>
</div>
</div>
</div>
</div> </div>
</template> </template>
@ -111,93 +111,82 @@ export default define({
@import '~const.styl' @import '~const.styl'
root(isDark) root(isDark)
padding 16px 0
color isDark ? #c5ced6 :#777
background isDark ? #282C37 : #fff
border solid 1px rgba(#000, 0.075)
border-radius 6px
&[data-special='on-new-years-day'] &[data-special='on-new-years-day']
border-color #ef95a0 border-color #ef95a0
&[data-melt] .mkw-calendar--body
background transparent padding 16px 0
border none color isDark ? #c5ced6 : #777
&[data-mobile] &:after
border none content ""
border-radius 8px display block
box-shadow 0 0 0 1px rgba(#000, 0.2) clear both
&:after > .calendar
content "" float left
display block width 60%
clear both text-align center
> .calendar &[data-is-holiday]
float left > .day
width 60% color #ef95a0
text-align center
&[data-is-holiday]
> .day
color #ef95a0
> p
margin 0
line-height 18px
font-size 14px
> span
margin 0 4px
> .day
margin 10px 0
line-height 32px
font-size 28px
> .info
display block
float left
width 40%
padding 0 16px 0 0
> div
margin-bottom 8px
&:last-child
margin-bottom 4px
> p > p
margin 0 0 2px 0 margin 0
font-size 12px
line-height 18px line-height 18px
color isDark ? #7a8692 : #888 font-size 14px
> b > span
margin-left 2px margin 0 4px
> .meter > .day
width 100% margin 10px 0
overflow hidden line-height 32px
background isDark ? #1c1f25 : #eee font-size 28px
border-radius 8px
> .val > .info
height 4px display block
background $theme-color float left
width 40%
padding 0 16px 0 0
&:nth-child(1) > div
> .meter > .val margin-bottom 8px
background #f7796c
&:nth-child(2) &:last-child
> .meter > .val margin-bottom 4px
background #a1de41
&:nth-child(3) > p
> .meter > .val margin 0 0 2px 0
background #41ddde font-size 12px
line-height 18px
color isDark ? #7a8692 : #888
> b
margin-left 2px
> .meter
width 100%
overflow hidden
background isDark ? #1c1f25 : #eee
border-radius 8px
> .val
height 4px
background $theme-color
&:nth-child(1)
> .meter > .val
background #f7796c
&:nth-child(2)
> .meter > .val
background #a1de41
&:nth-child(3)
> .meter > .val
background #41ddde
.mkw-calendar[data-darkmode] .mkw-calendar[data-darkmode]
root(true) root(true)

3
src/client/app/mobile/views/components/widget-container.vue
View File

@ -35,6 +35,9 @@ root(isDark)
background transparent !important background transparent !important
box-shadow none !important box-shadow none !important
&.hideHeader
background isDark ? #21242f : #fff
> header > header
> .title > .title
margin 0 margin 0

1
src/client/app/mobile/views/pages/widgets.vue
View File

@ -143,6 +143,7 @@ main
margin 0 auto margin 0 auto
padding 8px padding 8px
max-width 500px max-width 500px
width 100%
@media (min-width 500px) @media (min-width 500px)
padding 16px 8px padding 16px 8px