public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 01:36:22 +00:00
Code Issues Releases Wiki Activity

Fix info panel layout

Browse Source
This commit is contained in:
Kazu Yokomizo
2017-07-10 17:07:44 +09:00
parent 345008e9b6
commit 7e087bfbab
3 changed files with 33 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
browser/main/Detail/InfoPanel.js
View File

@@ -24,7 +24,7 @@ const InfoPanel = ({
</div> </div>
<div styleName='group-section'> <div styleName='group-section'>
<div styleName='group-section-label'> <div styleName='group-section-label'>
CreatedAt Created at
</div> </div>
<div styleName='group-section-control'> <div styleName='group-section-control'>
{createdAt} {createdAt}
@@ -32,7 +32,7 @@ const InfoPanel = ({
</div> </div>
<div styleName='group-section'> <div styleName='group-section'>
<div styleName='group-section-label'> <div styleName='group-section-label'>
UpdatedAt Updated at
</div> </div>
<div styleName='group-section-control'> <div styleName='group-section-control'>
{updatedAt} {updatedAt}

48
browser/main/Detail/InfoPanel.styl
View File

@@ -3,42 +3,54 @@
pointer-events none pointer-events none
top 50px top 50px
z-index 200 z-index 200
padding 5px
line-height normal line-height normal
border-radius 2px border-radius 4px
opacity 0 opacity 0
transition 0.1s transition 0.2s
.control-infoButton-panel .control-infoButton-panel
z-index 200 z-index 200
margin-top 60px margin-top 45px
margin-left -160px margin-left -210px
position absolute position absolute
padding 10px padding 20px
padding-left 15px width 340px
width 300px background-color $ui-noteList-backgroundColor
background-color #EAEAEA border 1px solid $border-color
border 1px solid #d0d0d0
box-shadow 0 0 1px rgba(76,86,103,0.15), 0 2px 18px rgba(31,37,50,0.22)
.group-section .group-section
display flex display flex
line-height 30px line-height 30px
font-size 12px font-size 13px
.group-section-label .group-section-label
width 70px width 70px
height 20px height 20px
text-align left text-align left
margin-right 30px margin-right 50px
font-size 11px font-size 13px
color #939395 color $ui-inactive-text-color
.group-section-control .group-section-control
flex 1 flex 1
font-size 13px
color $ui-text-color
.group-section-control input
width 160px
height 25px
body[data-theme="dark"] body[data-theme="dark"]
.control-infoButton-panel .control-infoButton-panel
background-color #3a404c background-color $ui-dark-noteList-backgroundColor
border 1px solid #474f5c border 1px solid $ui-dark-borderColor
color #ffffff
.group-section-label
color $ui-inactive-text-color
.group-section-control
color $ui-dark-text-color
.group-section-control input
background-color alpha($ui-dark-borderColor, 80%)
color $ui-dark-text-color

2
browser/styles/index.styl
View File

@@ -181,7 +181,7 @@ $ui-dark-noteDetail-backgroundColor = #2D3033
$ui-dark-tag-backgroundColor = #3A404C $ui-dark-tag-backgroundColor = #3A404C
$dark-background-color = lighten($ui-dark-backgroundColor, 10%) $dark-background-color = lighten($ui-dark-backgroundColor, 10%)
$ui-dark-text-color = #DDDDDD $ui-dark-text-color = #DDDDDD
$ui-dark-button--active-color = white $ui-dark-button--active-color = #f4f4f4
$ui-dark-button--active-backgroundColor = #3A404C $ui-dark-button--active-backgroundColor = #3A404C
$ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%) $ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
$ui-dark-button--focus-borderColor = lighten(#369DCD, 25%) $ui-dark-button--focus-borderColor = lighten(#369DCD, 25%)