Updated markdown editor for mobile

Also tweaked padding and responsivness on many common elements
This commit is contained in:
Dan Brown 2019-04-14 12:04:20 +01:00
parent 21e1123d12
commit 01be72d5e2
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
13 changed files with 79 additions and 15 deletions

View File

@ -71,6 +71,19 @@ class MarkdownEditor {
if (action === 'insertDrawing') this.actionStartDrawing(); 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 => { window.$events.listen('editor-markdown-update', value => {
this.cm.setValue(value); this.cm.setValue(value);
this.updateAndRender(); this.updateAndRender();

View File

@ -189,11 +189,21 @@
width: 100%; width: 100%;
} }
} }
@include smaller-than($xxl) {
.content-wrap.card {
padding: $-l $-xl;
}
}
@include smaller-than($m) { @include smaller-than($m) {
.content-wrap.card { .content-wrap.card {
padding: $-m $-l; padding: $-m $-l;
} }
} }
@include smaller-than($s) {
.content-wrap.card {
padding: $-m $-s;
}
}
/** /**
* Tags * Tags

View File

@ -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 { .markdown-display {
padding: 0 $-m 0; padding: 0 $-m 0;
margin-left: -1px; margin-left: -1px;

View File

@ -145,12 +145,13 @@ header .search-box {
padding: 0 $-xs; padding: 0 $-xs;
position: absolute; position: absolute;
right: $-m; right: $-m;
top: 8px; top: 13px;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
svg { svg {
margin: 0; 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 { .faded {
a, button, span, span > div { a, button, span, span > div {
color: #666; color: #666;

View File

@ -53,6 +53,9 @@
grid-row-gap: 0; grid-row-gap: 0;
grid-column-gap: 0; grid-column-gap: 0;
} }
&.no-row-gap {
grid-row-gap: 0;
}
} }
@include smaller-than($m) { @include smaller-than($m) {
@ -216,9 +219,6 @@ body.flexbox {
grid-template-columns: 1fr 3fr; grid-template-columns: 1fr 3fr;
grid-template-rows: max-content min-content; grid-template-rows: max-content min-content;
padding-right: $-l; padding-right: $-l;
.content-wrap.card {
padding: $-l $-xl;
}
} }
} }
@include larger-than($xxl) { @include larger-than($xxl) {

View File

@ -8,6 +8,7 @@
.edit-area { .edit-area {
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
z-index: 1;
} }
.mce-tinymce { .mce-tinymce {

View File

@ -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="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="header p-s">
<div class="grid half"> <div class="grid half no-gap v-center">
<div class="meta"> <div class="meta">
<a href="#comment{{$comment->local_id}}" class="text-muted">#{{$comment->local_id}}</a> <a href="#comment{{$comment->local_id}}" class="text-muted">#{{$comment->local_id}}</a>
&nbsp;&nbsp; &nbsp;&nbsp;

View File

@ -55,13 +55,13 @@
</span> </span>
<ul> <ul>
<li> <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>
<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>
<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> </li>
</ul> </ul>
</div> </div>

View File

@ -8,7 +8,7 @@
</div> </div>
<div class="container" id="home-default"> <div class="container" id="home-default">
<div class="grid third gap-xxl" > <div class="grid third gap-xxl no-row-gap" >
<div> <div>
@if(count($draftPages) > 0) @if(count($draftPages) > 0)
<div id="recent-drafts" class="card mb-xl"> <div id="recent-drafts" class="card mb-xl">

View File

@ -79,9 +79,9 @@
@if(setting('app-editor') === 'markdown') @if(setting('app-editor') === 'markdown')
<div v-pre id="markdown-editor" markdown-editor class="flex-fill flex code-fill"> <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"> <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"> <div class="float right buttons">
@if(config('services.drawio')) @if(config('services.drawio'))
<button class="text-button" type="button" data-action="insertDrawing">@icon('drawing'){{ trans('entities.pages_md_insert_drawing') }}</button> <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="markdown-editor-wrap">
<div class="editor-toolbar"> <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>
<div class="markdown-display page-content"> <div class="markdown-display page-content">
</div> </div>

View File

@ -3,7 +3,7 @@
@section('body') @section('body')
<div class="container small"> <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"> <div class="py-m">
@include('settings.navbar', ['selected' => 'settings']) @include('settings.navbar', ['selected' => 'settings'])
</div> </div>

View File

@ -3,7 +3,7 @@
@section('body') @section('body')
<div class="container small"> <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"> <div class="py-m">
@include('settings.navbar', ['selected' => 'maintenance']) @include('settings.navbar', ['selected' => 'maintenance'])
</div> </div>

View File

@ -29,7 +29,7 @@
</div> </div>
<div id="content-counts"> <div id="content-counts">
<div class="text-muted">{{ trans('entities.profile_created_content') }}</div> <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"> <div class="icon-list">
<a href="#recent-pages" class="text-page icon-list-item"> <a href="#recent-pages" class="text-page icon-list-item">
<span>@icon('page')</span> <span>@icon('page')</span>