Skip to content

Commit

Permalink
Page title updates, form updates to normalize sections & buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@c-e-p
c-e-p committed Jun 20, 2023
1 parent 73fe7b9 commit 355a4c6
Show file tree
Hide file tree
Showing 6 changed files with 230 additions and 224 deletions.
203 changes: 102 additions & 101 deletions ourchive_app/frontend/templates/bookmark_collection_form.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{% extends 'index.html' %}
{% block title %}{{ form_title }}{% endblock %}
{% block content %}
{% load static %}
<script src="{% static 'frontend/js/tinymce.min.js' %}"></script>
Expand Down Expand Up @@ -43,7 +44,7 @@
hidden.remove();
}
</script>
<div class="uk-child-width-1@m uk-child-width-1@s uk-text-left" id="bkcol-form-parent-grid" uk-grid>
<div class="uk-width-1-1 uk-text-left" id="bkcol-form-parent-grid">
<form class="uk-form-horizontal" method="post" id="bookmarkCollectionForm" onsubmit="return getDescriptionText()">
<script>
function getDescriptionText() {
Expand All @@ -52,115 +53,115 @@
</script>
{% csrf_token %}
<input id="bkcol-form-hidden-id" type="hidden" name="bookmark_collection_id" value="{{ bookmark_collection.id }}"/>
<div id="bkcol-form-actions-parent" class="uk-child-width-1@m uk-child-width-1@s uk-text-left" uk-grid>
<div id="bkcol-form-header-parent" class="uk-width-1-2">
<span id="bkcol-form-header-span" class="uk-text-large">Edit Bookmark Collection</span>
<div id="bkcol-form-actions-parent" class="uk-grid" uk-grid>
<div id="bkcol-form-header-parent" class="uk-width-1-2@m uk-width-1-1@s uk-margin-remove-left uk-margin-remove-right uk-padding-remove-vertical uk-margin-remove-bottom">
<span id="bkcol-form-header-span" class="uk-text-large">Edit Collection</span>
</div>
<div id="bkcol-form-actions-group" class="uk-text-right uk-width-1-2">
<div id="bkcol-form-actions-group" class="uk-align-right uk-width-1-2@m uk-width-1-1@s uk-margin-remove-left uk-margin-remove-right uk-margin-remove-bottom uk-padding-remove-vertical uk-text-right">
<input id="bkcol-form-cancel" class="uk-button uk-button-secondary" type="button" onclick="history.back()" value="Cancel"/>
<button id="bkcol-form-prevent-default-action-button" type="submit" disabled style="display: none" aria-hidden="true"></button>
<input id="bkcol-form-submit" class="uk-button uk-button-primary" type="submit" value="Submit"/>
</div>
</div>
<hr id="bkcol-form-hr"/>
<fieldset id="bkcol-form-fieldset" class="uk-fieldset">

<div id="bkcol-form-title-parent" class="uk-margin">
<label id="bkcol-form-title-label" class="uk-form-label" for="form-horizontal-text">Title</label>
<div id="bkcol-form-title-form-control" class="uk-form-controls">
<div id="bkcol-form-title-inline-div" class="uk-inline">
<input id="bkcol-form-title-input" class="uk-input uk-form-width-large" type="text" name="title" value="{{ bookmark_collection.title|default_if_none:'' }}">
</div>
</div>
</div>
<div class="uk-margin" id="bkcol-form-header-parent">
<label id="bkcol-form-header-label" class="uk-form-label" for="form-horizontal-text">Header</label>
{% if bookmark_collection.header_url %}
<img id="bookmark-collection-form-header-img" src="{{ bookmark_collection.header_url }}"/>
{% endif %}
<div id="bookmark-collection-form-header-controls" class="uk-form-controls">
<div id="bookmark-collection-form-header-inline" class="uk-inline">
{% include 'file_upload.html' with object='header_url' replace_selector='bookmark-collection-form-header-img' object_type='img' upload_placeholder='Upload header image' original_value=bookmark_collection.header_url %}
</div>
</div>
</div>
<div id="bkcol-form-description-parent" class="uk-margin">
<label id="bkcol-form-description-label" class="uk-form-label" for="form-horizontal-text">Description</label>
<div id="bkcol-form-description-form-controls" class="uk-form-controls">
<div id="bkcol-form-description-inline" class="uk-inline">
<input type="hidden" id="description" name="description" value="{{ bookmark_collection.description|safe|default_if_none:'' }}">
<textarea id="descriptionEditor"></textarea>
<script type="text/javascript">
tinymce.init({
selector: '#descriptionEditor',
width: '100%',
height: 400,
autoresize_min_height: 400,
autoresize_max_height: 800,
plugins: [
'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
'fullscreen', 'insertdatetime',
'media', 'table', 'emoticons'
],
toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | ' +
'bullist numlist outdent indent | link image | print preview media fullscreen | ' +
'forecolor backcolor emoticons | help',
menubar: '',
init_instance_callback : function(editor) {
var descriptionText = document.getElementById('description').value;
editor.setContent(descriptionText);
}
});
</script>
</div>
</div>
</div>
<hr id="bkcol-bookmarks-hr"/>
<div class="uk-margin" id="bkcol-bookmarks-list">
<h3 id="bkcol-bookmarks-header">Collection Bookmarks <sup uk-icon="icon: question"></sup></h3>
<ul id="bookmarks_readonly_list">
{% for bookmark in bookmark_collection.bookmarks_readonly %}
<input type="hidden" id="bookmarks_{{bookmark.id}}" name="bookmarks_{{bookmark.id}}" value="bookmarks_{{bookmark.id}}"/>
<li id="bookmarks_{{bookmark.id}}_li">{{bookmark.title|default:bookmark.work.title}} (<a onclick="removeBookmark(event, {{bookmark.id}})">Remove</a>)</li>
{% endfor %}
</ul>
<div id="bkcol-form-bookmarks-parent" class="uk-margin">
<label id="bkcol-form-bookmarks-label" class="uk-form-label" for="form-horizontal-text">Add Bookmark</label>
<div id="bkcol-form-bookmarks-form-control" class="uk-form-controls">
<div id="bkcol-form-bookmarks-inline-div" class="uk-inline">
<input autocomplete="off" class="uk-input uk-form-width-medium uk-form-medium ourchive-tag-entry" type="text" placeholder="Search for bookmark..." id="bookmark_entry" oninput="doBookmarkAutocomplete(this.value)">
<div id="bookmark-autocomplete-dropdown" uk-drop></div>
</div>
</div>

</div>
</div>
<hr id="bkcol-attributes-hr"/>
{% include "object_attributes_form.html" with object='Bookmark Collection' attribute_types=bookmark_collection.attribute_types %}
<hr id="bkcol-comments-hr"/>

<div class="uk-margin" id="bkcol-form-draft-parent">
<label id="bkcol-form-draft-label" class="uk-form-label" for="form-horizontal-text">Draft?</label>
<div id="bkcol-form-draft-controls" class="uk-form-controls">
<div id="bkcol-form-draft-inline" class="uk-inline">
<label id="bkcol-form-draft-label" class="switch"><input id="bkcol-form-draft-input" class="uk-checkbox" type="checkbox" name="draft" {% if bookmark_collection.draft %} checked {% endif %}> <span class="slider round"></span> </label>
</div>
</div>
<div id="bkcol-form-title-parent" class="uk-margin">
<label id="bkcol-form-title-label" class="uk-form-label" for="form-horizontal-text">Title</label>
<div id="bkcol-form-title-form-control" class="uk-form-controls">
<div id="bkcol-form-title-inline-div" class="uk-inline">
<input id="bkcol-form-title-input" class="uk-input uk-form-width-large" type="text" name="title" value="{{ bookmark_collection.title|default_if_none:'' }}">
</div>
</div>
</div>
<div class="uk-margin" id="bkcol-form-header-parent">
<label id="bkcol-form-header-label" class="uk-form-label" for="form-horizontal-text">Header</label>
<div id="bookmark-collection-form-header-controls" class="uk-form-controls">
{% if bookmark_collection.header_url %}
<div id="bookmark-collection-header-image-toggle" class="uk-width-1-1"><a uk-toggle="target: #bookmark-collection-form-image-inline" class="uk-button uk-button-primary">Toggle Header</a></div>
<div id="bookmark-collection-form-image-inline" class="uk-width-1-1 uk-margin" hidden><img id="bookmark-collection-form-header-img" src="{{ bookmark_collection.header_url }}"/></div>
{% endif %}
<div id="bookmark-collection-form-header-inline" class="uk-inline uk-margin">
{% include 'file_upload.html' with object='header_url' replace_selector='bookmark-collection-form-header-img' object_type='img' upload_placeholder='Upload header image' original_value=bookmark_collection.header_url %}
</div>
</div>
</div>
<hr/>
<h3 id="obj-attrs-form-header">Collection Tags</h3>
{% include "object_attributes_form.html" with object='Bookmark Collection' attribute_types=bookmark_collection.attribute_types show_header=False %}
{% include "edit_tags.html" with object='bookmark_collection' show_header=False %}
<hr id="bkcol-form-tags-hr"/>
<h3 id="obj-attrs-form-header">Collection Details</h3>
<div class="uk-margin" id="bkcol-bookmarks-list">
{% if bookmark_collection.bookmarks_readonly %}<div class="uk-margin-medium-left"><h4 id="obj-attrs-form-header">Bookmarks</h4></div>{% endif %}
<ul id="bookmarks_readonly_list" class="uk-margin-medium-left">
{% for bookmark in bookmark_collection.bookmarks_readonly %}
<input type="hidden" id="bookmarks_{{bookmark.id}}" name="bookmarks_{{bookmark.id}}" value="bookmarks_{{bookmark.id}}"/>
<li id="bookmarks_{{bookmark.id}}_li">{{bookmark.title|default:bookmark.work.title}} (<a onclick="removeBookmark(event, {{bookmark.id}})">Remove</a>)</li>
{% endfor %}
</ul>
<div id="bkcol-form-bookmarks-parent" class="uk-margin uk-margin-medium-top">
<label id="bkcol-form-bookmarks-label" class="uk-form-label" for="form-horizontal-text">Add Bookmark</label>
<div id="bkcol-form-bookmarks-form-control" class="uk-form-controls">
<div id="bkcol-form-bookmarks-inline-div" class="uk-inline">
<input autocomplete="off" class="uk-input uk-form-width-medium uk-form-medium ourchive-tag-entry" type="text" placeholder="Search for bookmark..." id="bookmark_entry" oninput="doBookmarkAutocomplete(this.value)">
<div id="bookmark-autocomplete-dropdown" uk-drop></div>
</div>
</div>

</div>
</div>
<div id="bkcol-form-description-parent" class="uk-margin">
<label id="bkcol-form-description-label" class="uk-form-label" for="form-horizontal-text">Description</label>
<div id="bkcol-form-description-form-controls" class="uk-form-controls">
<div id="bkcol-form-description-inline" class="uk-inline">
<input type="hidden" id="description" name="description" value="{{ bookmark_collection.description|safe|default_if_none:'' }}">
<textarea id="descriptionEditor"></textarea>
<script type="text/javascript">
tinymce.init({
selector: '#descriptionEditor',
width: '100%',
height: 400,
autoresize_min_height: 400,
autoresize_max_height: 800,
plugins: [
'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
'fullscreen', 'insertdatetime',
'media', 'table', 'emoticons'
],
toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | ' +
'bullist numlist outdent indent | link image | print preview media fullscreen | ' +
'forecolor backcolor emoticons | help',
menubar: '',
init_instance_callback : function(editor) {
var descriptionText = document.getElementById('description').value;
editor.setContent(descriptionText);
}
});
</script>
</div>
</div>
</div>
<hr id="bkcol-comments-hr"/>
<h3 id="bkcol-settings-header">Collection Settings</h3>
<div class="uk-margin" id="bkcol-form-draft-parent">
<label id="bkcol-form-draft-label" class="uk-form-label" for="form-horizontal-text">Draft?</label>
<div id="bkcol-form-draft-controls" class="uk-form-controls">
<div id="bkcol-form-draft-inline" class="uk-inline">
<label id="bkcol-form-draft-label" class="switch"><input id="bkcol-form-draft-input" class="uk-checkbox" type="checkbox" name="draft" {% if bookmark_collection.draft %} checked {% endif %}> <span class="slider round"></span> </label>
</div>
</div>
</div>
<div class="uk-margin" id="bkcol-form-allow-comments-parent">
<label id="bkcol-form-allow-comments-label" class="uk-form-label" for="form-horizontal-text">Allow Comments?</label>
<div id="bkcol-form-allow-comments-controls" class="uk-form-controls">
<select id="bkcol-form-allow-comments-select" class="uk-select uk-form-width-large" name="comments_permitted">
<option {% if bookmark_collection.anon_comments_permitted and bookmark_collection.comments_permitted %} selected {% endif %}>All</option>
<option {% if bookmark_collection.anon_comments_permitted == False and bookmark_collection.comments_permitted %} selected {% endif %}>Registered users only</option>
<option {% if not bookmark_collection.anon_comments_permitted and not bookmark_collection.comments_permitted %} selected {% endif %}>None</option>

<div class="uk-margin" id="bkcol-form-allow-comments-parent">
<label id="bkcol-form-allow-comments-label" class="uk-form-label" for="form-horizontal-text">Allow Comments?</label>
<div id="bkcol-form-allow-comments-controls" class="uk-form-controls">
<select id="bkcol-form-allow-comments-select" class="uk-select uk-form-width-large" name="comments_permitted">
<option {% if bookmark_collection.anon_comments_permitted and bookmark_collection.comments_permitted %} selected {% endif %}>All</option>
<option {% if bookmark_collection.anon_comments_permitted == False and bookmark_collection.comments_permitted %} selected {% endif %}>Registered users only</option>
<option {% if not bookmark_collection.anon_comments_permitted and not bookmark_collection.comments_permitted %} selected {% endif %}>None</option>

</select>
</div>
</div>
{% include "edit_tags.html" with object='bookmark_collection' %}
</fieldset>
</select>
</div>
</div>
<hr/>
<div class="uk-child-width-1@m uk-child-width-1@s uk-text-left" id="bkcol-form-actions-footer-parent" uk-grid>
<div class="uk-text-right uk-width-1-1" id="bkcol-form-actions-footer-child">
<input id="bkcol-form-actions-footer-cancel" class="uk-button uk-button-secondary" type="button" onclick="history.back()" value="Cancel"/>
Expand Down
Loading

0 comments on commit 355a4c6

Please sign in to comment.