mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-07-08 04:12:10 +00:00
Updated markdown editor for mobile
Also tweaked padding and responsivness on many common elements
This commit is contained in:
Dan Brown
parent
21e1123d12
commit
01be72d5e2
|
|
@ -71,6 +71,19 @@ class MarkdownEditor {
|
|||
if (action === 'insertDrawing') this.actionStartDrawing();
|
||||
});
|
||||
|
||||
// Mobile section toggling
|
||||
this.elem.addEventListener('click', event => {
|
||||
const toolbarLabel = event.target.closest('.editor-toolbar-label');
|
||||
if (!toolbarLabel) return;
|
||||
|
||||
const currentActiveSections = this.elem.querySelectorAll('.markdown-editor-wrap');
|
||||
for (let activeElem of currentActiveSections) {
|
||||
activeElem.classList.remove('active');
|
||||
}
|
||||
|
||||
toolbarLabel.closest('.markdown-editor-wrap').classList.add('active');
|
||||
});
|
||||
|
||||
window.$events.listen('editor-markdown-update', value => {
|
||||
this.cm.setValue(value);
|
||||
this.updateAndRender();
|
||||
|
|
|
|||
|
|
@ -189,11 +189,21 @@
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
@include smaller-than($xxl) {
|
||||
.content-wrap.card {
|
||||
padding: $-l $-xl;
|
||||
}
|
||||
}
|
||||
@include smaller-than($m) {
|
||||
.content-wrap.card {
|
||||
padding: $-m $-l;
|
||||
}
|
||||
}
|
||||
@include smaller-than($s) {
|
||||
.content-wrap.card {
|
||||
padding: $-m $-s;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Tags
|
||||
|
|
|
|||
|
|
@ -63,6 +63,34 @@
|
|||
}
|
||||
}
|
||||
|
||||
@include smaller-than($m) {
|
||||
#markdown-editor {
|
||||
flex-direction: column;
|
||||
}
|
||||
#markdown-editor .markdown-editor-wrap {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
#markdown-editor .editor-toolbar {
|
||||
padding: 0;
|
||||
}
|
||||
#markdown-editor .editor-toolbar > * {
|
||||
padding: $-xs $-s;
|
||||
}
|
||||
.editor-toolbar-label {
|
||||
float: none !important;
|
||||
border-bottom: 1px solid #DDD;
|
||||
display: block;
|
||||
}
|
||||
.markdown-editor-wrap:not(.active) .editor-toolbar + div, .markdown-editor-wrap:not(.active) .editor-toolbar .buttons {
|
||||
display: none;
|
||||
}
|
||||
#markdown-editor .markdown-editor-wrap:not(.active) {
|
||||
flex-grow: 0;
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-display {
|
||||
padding: 0 $-m 0;
|
||||
margin-left: -1px;
|
||||
|
|
|
|||
|
|
@ -145,12 +145,13 @@ header .search-box {
|
|||
padding: 0 $-xs;
|
||||
position: absolute;
|
||||
right: $-m;
|
||||
top: 8px;
|
||||
top: 13px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
svg {
|
||||
margin: 0;
|
||||
bottom: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -302,6 +303,17 @@ header .search-box {
|
|||
}
|
||||
}
|
||||
|
||||
@include smaller-than($m) {
|
||||
.breadcrumb-listing-dropdown {
|
||||
position: fixed;
|
||||
right: auto;
|
||||
left: $-m;
|
||||
}
|
||||
.breadcrumb-listing-dropdown .breadcrumb-listing-entity-list {
|
||||
max-height: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
.faded {
|
||||
a, button, span, span > div {
|
||||
color: #666;
|
||||
|
|
|
|||
|
|
@ -53,6 +53,9 @@
|
|||
grid-row-gap: 0;
|
||||
grid-column-gap: 0;
|
||||
}
|
||||
&.no-row-gap {
|
||||
grid-row-gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include smaller-than($m) {
|
||||
|
|
@ -216,9 +219,6 @@ body.flexbox {
|
|||
grid-template-columns: 1fr 3fr;
|
||||
grid-template-rows: max-content min-content;
|
||||
padding-right: $-l;
|
||||
.content-wrap.card {
|
||||
padding: $-l $-xl;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include larger-than($xxl) {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
.edit-area {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mce-tinymce {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="comment-box mb-m" comment="{{ $comment->id }}" local-id="{{$comment->local_id}}" parent-id="{{$comment->parent_id}}" id="comment{{$comment->local_id}}">
|
||||
<div class="header p-s">
|
||||
<div class="grid half">
|
||||
<div class="grid half no-gap v-center">
|
||||
<div class="meta">
|
||||
<a href="#comment{{$comment->local_id}}" class="text-muted">#{{$comment->local_id}}</a>
|
||||
|
||||
|
|
|
|||
|
|
@ -55,13 +55,13 @@
|
|||
</span>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="{{ baseUrl("/user/{$currentUser->id}") }}" class="text-primary">@icon('user'){{ trans('common.view_profile') }}</a>
|
||||
<a href="{{ baseUrl("/user/{$currentUser->id}") }}">@icon('user'){{ trans('common.view_profile') }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ baseUrl("/settings/users/{$currentUser->id}") }}" class="text-primary">@icon('edit'){{ trans('common.edit_profile') }}</a>
|
||||
<a href="{{ baseUrl("/settings/users/{$currentUser->id}") }}">@icon('edit'){{ trans('common.edit_profile') }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ baseUrl('/logout') }}" class="text-neg">@icon('logout'){{ trans('auth.logout') }}</a>
|
||||
<a href="{{ baseUrl('/logout') }}">@icon('logout'){{ trans('auth.logout') }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
</div>
|
||||
|
||||
<div class="container" id="home-default">
|
||||
<div class="grid third gap-xxl" >
|
||||
<div class="grid third gap-xxl no-row-gap" >
|
||||
<div>
|
||||
@if(count($draftPages) > 0)
|
||||
<div id="recent-drafts" class="card mb-xl">
|
||||
|
|
|
|||
|
|
@ -79,9 +79,9 @@
|
|||
@if(setting('app-editor') === 'markdown')
|
||||
<div v-pre id="markdown-editor" markdown-editor class="flex-fill flex code-fill">
|
||||
|
||||
<div class="markdown-editor-wrap">
|
||||
<div class="markdown-editor-wrap active">
|
||||
<div class="editor-toolbar">
|
||||
<span class="float left">{{ trans('entities.pages_md_editor') }}</span>
|
||||
<span class="float left editor-toolbar-label">{{ trans('entities.pages_md_editor') }}</span>
|
||||
<div class="float right buttons">
|
||||
@if(config('services.drawio'))
|
||||
<button class="text-button" type="button" data-action="insertDrawing">@icon('drawing'){{ trans('entities.pages_md_insert_drawing') }}</button>
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
|
||||
<div class="markdown-editor-wrap">
|
||||
<div class="editor-toolbar">
|
||||
<div class="">{{ trans('entities.pages_md_preview') }}</div>
|
||||
<div class="editor-toolbar-label">{{ trans('entities.pages_md_preview') }}</div>
|
||||
</div>
|
||||
<div class="markdown-display page-content">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
@section('body')
|
||||
<div class="container small">
|
||||
|
||||
<div class="grid left-focus v-center">
|
||||
<div class="grid left-focus v-center no-row-gap">
|
||||
<div class="py-m">
|
||||
@include('settings.navbar', ['selected' => 'settings'])
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
@section('body')
|
||||
<div class="container small">
|
||||
|
||||
<div class="grid left-focus v-center">
|
||||
<div class="grid left-focus v-center no-row-gap">
|
||||
<div class="py-m">
|
||||
@include('settings.navbar', ['selected' => 'maintenance'])
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
</div>
|
||||
<div id="content-counts">
|
||||
<div class="text-muted">{{ trans('entities.profile_created_content') }}</div>
|
||||
<div class="grid half v-center">
|
||||
<div class="grid half v-center no-row-gap">
|
||||
<div class="icon-list">
|
||||
<a href="#recent-pages" class="text-page icon-list-item">
|
||||
<span>@icon('page')</span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user