voussoir/etiquette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve editor appearance and use ctrl+enter for desc.

Browse source
This commit is contained in:
voussoir 2017-05-13 15:26:34 -07:00
parent 95f4d79805
commit eafb7fcffe
1 changed files with 16 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
frontends/etiquette_flask/templates/album.html
View file

@ -24,14 +24,14 @@ p
width: 100%; width: 100%;
max-width: 800px; max-width: 800px;
} }
#description_text
{
padding: 8px;
background-color: rgba(0, 0, 0, 0.1);
}
#description_editor textarea #description_editor textarea
{ {
width: 100%; width: 100%;
height: 100%;
}
#description_editor
{
height: 100px;
} }
.hidden .hidden
{ {
@ -51,19 +51,19 @@ p
<span id="title_text">Album {{album.id}}</span> <span id="title_text">Album {{album.id}}</span>
{% endif %} {% endif %}
<input id="title_editor" class="hidden" type="text" value="{{album.title}}" placeholder="title"> <input id="title_editor" class="hidden" type="text" value="{{album.title}}" placeholder="title">
<button id="edit_button" class="green_button" onclick="start_editing()">edit</button>
</h2> </h2>
<p id="description_text">{{album.description}}</p> <p id="description_text" {% if album.description == "" %}class="hidden"{% endif %}>{{album.description}}</p>
<div id="description_editor" class="hidden"> <div id="description_editor" class="hidden">
<textarea id="description_editor_box" placeholder="description">{{album.description}}</textarea> <textarea id="description_editor_box" rows="6" placeholder="description">{{album.description}}</textarea>
<span> <div>
<button id="save_button" class="green_button" onclick="finish_editing(true)">Save</button> <button id="save_button" class="green_button" onclick="finish_editing(true)">Save</button>
<button id="cancel_button" class="red_button" onclick="finish_editing(false)">Cancel</button> <button id="cancel_button" class="red_button" onclick="finish_editing(false)">Cancel</button>
</span> </div>
<span id="edit_submitting_spinner">Submitting...</span> <span id="edit_submitting_spinner">Submitting...</span>
</div> </div>
<button id="edit_button" class="green_button" onclick="start_editing()">edit</button>
{% set viewparam = "?view=list" if view == "list" else "" %} {% set viewparam = "?view=list" if view == "list" else "" %}
{% set parent = album.parent() %} {% set parent = album.parent() %}
@ -134,6 +134,8 @@ var description_editor_box = document.getElementById("description_editor_box");
var edit_submitting_spinner = document.getElementById("edit_submitting_spinner"); var edit_submitting_spinner = document.getElementById("edit_submitting_spinner");
bind_box_to_button(title_editor, save_button); bind_box_to_button(title_editor, save_button);
var ctrl_enter = true;
bind_box_to_button(description_editor_box, save_button, ctrl_enter);
var title_is_blank = {{ (album.title == '')|int }}; var title_is_blank = {{ (album.title == '')|int }};
var blank_title_text = "Album {{album.id}}"; var blank_title_text = "Album {{album.id}}";
@ -169,7 +171,10 @@ function hide_editor()
title_text.classList.remove("hidden"); title_text.classList.remove("hidden");
title_editor.classList.add("hidden"); title_editor.classList.add("hidden");
description_text.classList.remove("hidden"); if (description_text.innerText !== "")
{
description_text.classList.remove("hidden");
}
description_editor.classList.add("hidden"); description_editor.classList.add("hidden");
} }