colin
/
bookstack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tightened existing markdown editor styles

This commit is contained in:
Dan Brown 2022-11-27 19:52:10 +00:00
parent 3fdb88c7aa
commit 3995b01399
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
5 changed files with 46 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
resources/icons/image.svg
View File

@ -1,4 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"/></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 246 B

After

Width:  |  Height:  |  Size: 216 B

50
resources/sass/_forms.scss
View File

@ -64,14 +64,6 @@
flex: 1;
position: relative;
}
.markdown-editor-wrap {
display: flex;
flex-direction: column;
border: 1px solid #DDD;
@include lightDark(border-color, #ddd, #000);
width: 50%;
max-width: 50%;
}
&.fullscreen {
position: fixed;
top: 0;
@ -81,6 +73,21 @@
}
}
.markdown-editor-wrap {
display: flex;
flex-direction: column;
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
@include lightDark(border-color, #ddd, #000);
width: 50%;
max-width: 50%;
}
.markdown-editor-wrap + .markdown-editor-wrap {
border-inline-start: 1px solid;
@include lightDark(border-color, #ddd, #000);
}
@include smaller-than($m) {
#markdown-editor {
flex-direction: column;
@ -98,7 +105,7 @@
}
.editor-toolbar-label {
float: none !important;
border-bottom: 1px solid #DDD;
@include lightDark(border-color, #DDD, #555);
display: block;
}
.markdown-editor-wrap:not(.active) .editor-toolbar + div,
@ -113,10 +120,6 @@
}
}
.markdown-display {
margin-inline-start: -1px;
}
.markdown-editor-display {
background-color: #fff;
body {
@ -138,8 +141,8 @@ html.markdown-editor-display.dark-mode {
}
.editor-toolbar {
height: 32px;
width: 100%;
padding: $-xs $-m;
font-size: 11px;
line-height: 1.6;
border-bottom: 1px solid #DDD;
@ -147,11 +150,6 @@ html.markdown-editor-display.dark-mode {
@include lightDark(background-color, #eee, #111);
@include lightDark(border-color, #ddd, #000);
flex: none;
&:after {
content: '';
display: block;
clear: both;
}
@include whenDark {
button {
color: #AAA;
@ -159,6 +157,20 @@ html.markdown-editor-display.dark-mode {
}
}
.editor-toolbar .buttons button {
font-size: .9rem;
width: 2rem;
text-align: center;
border-left: 1px solid;
@include lightDark(border-color, #DDD, #555);
svg {
margin-inline-end: 0;
}
&:hover {
@include lightDark(background-color, #DDD, #222);
}
}
label {
@include lightDark(color, #666, #ddd);

3
resources/sass/_layout.scss
View File

@ -198,6 +198,9 @@ body.flexbox {
.items-center {
align-items: center;
}
.items-stretch {
align-items: stretch;
}
/**
* Min width utilities

2
resources/sass/_text.scss
View File

@ -5,7 +5,7 @@
body, button, input, select, label, textarea {
font-family: $text;
}
.Codemirror, pre, #markdown-editor-input, .editor-toolbar, .code-base {
.Codemirror, pre, #markdown-editor-input, .text-mono, .code-base {
font-family: $mono;
}

21
resources/views/pages/parts/markdown-editor.blade.php
View File

@ -6,18 +6,17 @@
class="flex-fill flex code-fill">
<div class="markdown-editor-wrap active">
<div class="editor-toolbar">
<span class="float left editor-toolbar-label">{{ trans('entities.pages_md_editor') }}</span>
<div class="float right buttons">
<div class="editor-toolbar flex-container-row items-stretch justify-space-between">
<div class="editor-toolbar-label text-mono px-m py-xs flex-container-row items-center flex">
<span>{{ trans('entities.pages_md_editor') }}</span>
</div>
<div class="buttons flex-container-row items-stretch">
@if(config('services.drawio'))
<button class="text-button" type="button" data-action="insertDrawing">@icon('drawing'){{ trans('entities.pages_md_insert_drawing') }}</button>
<span class="mx-xs text-muted">|</span>
<button class="text-button" type="button" data-action="insertDrawing" title="{{ trans('entities.pages_md_insert_drawing') }}">@icon('drawing')</button>
@endif
<button class="text-button" type="button" data-action="insertImage">@icon('image'){{ trans('entities.pages_md_insert_image') }}</button>
<span class="mx-xs text-muted">|</span>
<button class="text-button" type="button" data-action="insertLink">@icon('link'){{ trans('entities.pages_md_insert_link') }}</button>
<span class="mx-xs text-muted">|</span>
<button class="text-button" type="button" data-action="fullscreen">@icon('fullscreen'){{ trans('common.fullscreen') }}</button>
<button class="text-button" type="button" data-action="insertImage" title="{{ trans('entities.pages_md_insert_image') }}">@icon('image')</button>
<button class="text-button" type="button" data-action="insertLink" title="{{ trans('entities.pages_md_insert_link') }}">@icon('link')</button>
<button class="text-button" type="button" data-action="fullscreen" title="{{ trans('common.fullscreen') }}">@icon('fullscreen')</button>
</div>
</div>
@ -33,7 +32,7 @@
<div class="markdown-editor-wrap">
<div class="editor-toolbar">
<div class="editor-toolbar-label">{{ trans('entities.pages_md_preview') }}</div>
<div class="editor-toolbar-label text-mono px-m py-xs">{{ trans('entities.pages_md_preview') }}</div>
</div>
<iframe src="about:blank"
refs="markdown-editor@display"