From 3198f305154d0be8687551b472e490ece3944bba Mon Sep 17 00:00:00 2001 From: Ana Gelez Date: Fri, 2 Aug 2019 15:36:54 +0200 Subject: [PATCH] Editor: Make it clearer that editable areas are editable - Add a border on the left when hovering - Make full sentences to explain where you can write --- plume-front/src/editor.rs | 10 ++++++++-- static/css/_article.scss | 13 ++++++++++++- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/plume-front/src/editor.rs b/plume-front/src/editor.rs index 36095a26..38b03322 100644 --- a/plume-front/src/editor.rs +++ b/plume-front/src/editor.rs @@ -142,11 +142,17 @@ fn init_editor() -> Result<(), EditorError> { let subtitle_val = get_elt_value("subtitle"); let content_val = get_elt_value("editor-content"); // And pre-fill the new editor with this values - let title = init_widget(&ed, "h1", i18n!(CATALOG, "Title"), title_val, true)?; + let title = init_widget( + &ed, + "h1", + i18n!(CATALOG, "Enter your title"), + title_val, + true, + )?; let subtitle = init_widget( &ed, "h2", - i18n!(CATALOG, "Subtitle, or summary"), + i18n!(CATALOG, "Enter a subtitle, or a summary"), subtitle_val, true, )?; diff --git a/static/css/_article.scss b/static/css/_article.scss index a3843d4f..b40fb66b 100644 --- a/static/css/_article.scss +++ b/static/css/_article.scss @@ -389,7 +389,18 @@ main .article-meta { article { max-width: none; - min-height: 80vh; + min-height: 2em; + } + + & > *[contenteditable] { + margin-left: -20px; + padding-left: 18px; + border-left: 2px solid transparent; + transition: border-left-color 0.1s ease-in; + + &:hover { + border-left-color: transparentize($black, 0.6); + } } }