extern/heynote
1
0
Fork 0
mirror of https://github.com/heyman/heynote.git synced 2025-06-26 20:41:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve settings dialog

Browse Source 
* Fix issue where it would overflow the viewport if using high enough zoom
* Some minor design improvements
This commit is contained in:
Jonatan Heyman 2023-12-24 00:23:07 +01:00
parent bb9a39fe6e
commit 5d7af5031d
1 changed files with 54 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/settings/Settings.vue
View File

@ -60,7 +60,7 @@
<template> <template>
<div class="settings"> <div class="settings">
<div class="dialog"> <div class="dialog">
<div> <div class="dialog-content">
<h1>Settings</h1> <h1>Settings</h1>
<div class="row"> <div class="row">
<div class="entry"> <div class="entry">
@ -134,10 +134,13 @@
</div> </div>
</div> </div>
</div> </div>
<button
@click="$emit('closeSettings')" <div class="bottom-bar">
class="close" <button
>Close</button> @click="$emit('closeSettings')"
class="close"
>Close</button>
</div>
</div> </div>
<div class="shader"></div> <div class="shader"></div>
</div> </div>
@ -167,51 +170,59 @@
left: 50% left: 50%
top: 50% top: 50%
transform: translate(-50%, -50%) transform: translate(-50%, -50%)
width: 100% width: 700px
height: 100% height: 560px
max-width: 700px max-width: 100%
max-height: 500px max-height: 100%
display: flex
flex-direction: column
border-radius: 5px border-radius: 5px
padding: 40px
background: #fff background: #fff
color: #333 color: #333
overflow-y: auto
&:active, &:selected, &:focus, &:focus-visible &:active, &:selected, &:focus, &:focus-visible
border: none border: none
outline: none outline: none
+dark-mode +dark-mode
background: #333 background: #333
color: #eee color: #eee
h1 .dialog-content
font-size: 20px flex-grow: 1
font-weight: 600 padding: 40px
margin-bottom: 20px h1
font-size: 20px
.row font-weight: 600
display: flex margin-bottom: 20px
.entry
margin-bottom: 24px .row
margin-right: 20px display: flex
h2 .entry
font-weight: 600 margin-bottom: 24px
margin-bottom: 10px margin-right: 20px
font-size: 14px h2
select font-weight: 600
width: 200px margin-bottom: 10px
&:focus font-size: 14px
outline: none select
label width: 200px
display: block &:focus
user-select: none outline: none
&.keyboard-shortcut-label label
margin-bottom: 14px display: block
> input[type=checkbox] user-select: none
position: relative &.keyboard-shortcut-label
top: 2px margin-bottom: 14px
left: -3px > input[type=checkbox]
position: relative
.close top: 2px
height: 32px left: -3px
position: absolute .bottom-bar
bottom: 30px border-radius: 0 0 5px 5px
right: 30px background: #eee
text-align: right
padding: 10px 20px
+dark-mode
background: #222
.close
height: 28px
</style> </style>