diff options
Diffstat (limited to 'design/templates/notes')
| -rw-r--r-- | design/templates/notes/notebook_detail.html | 18 | ||||
| -rw-r--r-- | design/templates/notes/notebook_list.html | 63 | ||||
| -rw-r--r-- | design/templates/notes/notes_detail.html | 3 | ||||
| -rw-r--r-- | design/templates/notes/notes_list.html | 40 | ||||
| -rw-r--r-- | design/templates/notes/partials/list_header.html | 19 | ||||
| -rw-r--r-- | design/templates/notes/partials/notebook_form.html | 4 |
6 files changed, 86 insertions, 61 deletions
diff --git a/design/templates/notes/notebook_detail.html b/design/templates/notes/notebook_detail.html index 37c8f8a..49717ca 100644 --- a/design/templates/notes/notebook_detail.html +++ b/design/templates/notes/notebook_detail.html @@ -7,14 +7,15 @@ {% block content %} <main> <article class="note-container single-col"> + {% include "notes/partials/list_header.html" with notebook_list=notebook_list tag_list=tag_list %} <div class="flex-wrapper"> {% if object.name != 'Trash'%} <form id="nb-edit-form" action="{% url 'notebook-api-detail' object.pk %}" method="PATCH">{% csrf_token %} {{ form.non_field_errors }} <div class="flex-wrapper flex-inner"> {% for field in form %}{% if field.name == 'color_rgb' %} - <fieldset class="color-picker-fieldset" id="color-picker" {% if form.instance.color_rgb %}style="background-color: {{form.instance.color_rgb}}; border: none;"{%endif%}> - <input type="text" name="color_rgb" value="{{form.instance.color_rgb}}" maxlength="20" id="id_color_rgb"> + <fieldset class="color-picker-fieldset" id="color-picker" {% if object.color_rgb %}style="background-color: {{object.color_rgb}}; border: none;"{%endif%}> + <input type="text" name="color_rgb" value="{{object.color_rgb}}" maxlength="20" id="id_color_rgb"> {% if field.errors %}{{field.errors}}{% endif %} </fieldset>{% else %} <fieldset class="hide"> @@ -33,19 +34,6 @@ {%endif%} </div> - <form id="new-note-form" action="{% url 'notebook-api-list' %}" method="post" class="hide"> - <label>Create a new notebook</label> - {% csrf_token %} - {{ form.non_field_errors }} - {% for field in form %} - <fieldset class="" id="fs-{{field.name}}" > - {{field.label_tag}} - {{field}} - {% if field.errors %}{{field.errors}}{% endif %} - </fieldset> - {% endfor %} - <p><input id="btn-js-hide" class="btn btn-inline" value="create" type="submit" /></p> - </form> <ul class="list-note-preview">{% for object in object.note_set.all %} {% include "notes/partials/note_list.html" with object=object hidecolor=True hidenotebook=True %} {% endfor %}</ul> diff --git a/design/templates/notes/notebook_list.html b/design/templates/notes/notebook_list.html index 6f25f62..5f1220f 100644 --- a/design/templates/notes/notebook_list.html +++ b/design/templates/notes/notebook_list.html @@ -6,32 +6,69 @@ {% endblock %} {% block content %} <main> - <article class="note-container"> - <h2 class="hed-small top-margin-0">Add a Notebook</h2> - {% include 'notes/partials/notebook_form.html' with form=form %} + <article id="nb-list-home" class="note-container"> + <div class="flex-wrapper"> <h1 class="hed-small">Notebooks</h1> - + <a class="circle plus small-circle modal-open push-top" href="/nb/" id="add_id_notebook" data-modal-hed-class="notebook" data-modal-hed="Add a New Notebook">New</a> + </div> + {% if messages %} + <ul class="messages"> + {% for message in messages %} + <li{% if message.tags %} class="{{ message.tags }}"{% endif %}> + {% if 'safe' in message.tags %}{{ message|safe }}{% else %}{{ message }}{% endif %} + </li> + {% endfor %} + </ul> + {% endif %} + <div id="notebook-wrapper"> + {% include 'notes/partials/notebook_form.html' with form=form url='' %} + </div> <ul class="nb-list">{% for form in notebook_form_list %} <li class="nb-list-item"> - <form action="{% url 'notebook-api-detail' form.instance.id %}" method="PUT">{% for field in form %}{% if field.name == 'color_rgb' %} - <fieldset class="color-picker-fieldset" id="color-picker-{{forloop.parentloop.counter0}}" {% if form.instance.color_rgb %}style="background-color: {{form.instance.color_rgb}}; border: none;"{%endif%}> - <input type="text" name="color_rgb" value="{{form.instance.color_rgb}}" maxlength="20" id="id_color_rgb"> + <form action="{% url 'notebooks:update' form.instance.slug %}" method="POST" name="create" data-method="POST" data-action="">{% csrf_token %} + {% for field in form %}{% if field.name == 'color_rgb' %} + <div class="flex-wrapper"> + <fieldset class="fe-color-picker color-picker-fieldset " id="color-picker-{{forloop.parentloop.counter0}}" {% if form.instance.color_rgb %}style="background-color: {{form.instance.color_rgb}}; border: none;"{%endif%}> + <input type="text" class="input-color-rgb" name="color_rgb" value="{{form.instance.color_rgb}}" maxlength="20" id="id_color_rgb-{{forloop.parentloop.counter0}}"> {% if field.errors %}{{field.errors}}{% endif %} </fieldset> - href="{% url 'notebooks:detail' form.instance.slug %}" - <h2>{{form.instance.name}}</h2> - {% else %} + <h2 class="nb-name"><a href="{% url 'notebooks:detail' form.instance.slug %}">{{form.instance.name}}</a></h2> + <button type="submit" value="trash" class="btn-hollow trash float-right" name="trash">Move to Trash</button> + </div> + {% elif field.name == 'name' %} <fieldset> + <label for="id_name-{{forloop.parentloop.counter0}}">Notebook Name:</label> + <input type="text" name="name" value="{{form.instance.name}}" maxlength="250" required id="id_name-{{forloop.parentloop.counter0}}"> + </fieldset> + {% else %} {% if field.field.widget.input_type != 'hidden' %}{{field.label_tag}}{% endif %} {{field}} {% if field.errors %}{{field.errors}}{% endif %} - </fieldset>{% endif %}{% endfor %} + {% endif %}{% endfor %} <input id="i-{{forloop.counter0}}" type="submit" class="btn sm" value="Save" > + + <div class="row-wrapper"> + <p>{{form.instance.note_count}} notes{% if form.instance.note_count > 5 %}, most recent:{%endif%}</p> + {% if form.instance.note_count > 0 %}<ul id="n-list-{{forloop.counter0}}" class="n-list{% if form.instance.note_count > 5 %} slideup{%endif%}">{% for note in form.instance.note_set.all %} + <li><a href="{{note.get_absolute_url}}">{{note.title}}</a></li> + {%endfor%} + {% if form.instance.note_count > 5 %}<li class="more"><button type="button" class="btn btn-small btn-more button" id="more-button-{{forloop.counter0}}">More</button></li>{%endif%} + </ul>{%endif%} + {% if form.instance.tag_list %}<div class="tags">Common tags: <ul class="inline">{% for tag in form.instance.tag_list %} + <li class="inline"><a href="{% url 'notes:tags' tag.slug %}"> + <span class="tag-wrapper" data-bg-color="#{{tag.color_hex}};" >{{tag|title}}</span> + </a></li> + {%endfor%}</div>{%endif%} + <div class="edit-btn-wrapper"><a class="btn btn-hollow btn-nb-edit float-right" id="edit-toggle-btn-{{forloop.counter0}}">Edit</a></div> + </div> </form> - <div class="edit-btn-wrapper"><a class="btn btn-hollow btn-nb-edit" id="edit-toggle-btn-{{forloop.counter0}}">Edit</a></div> - <div class="edit-btn-wrapper"><a class="btn btn-hollow btn-nb-trash" id="trash-btn-{{forloop.counter0}}">Trash</a></div> </li> {%endfor%}</ul> + + + + + {% comment %} <ul class="nb-list">{% for object in notebook_list %} <li class="nb-list-item"> diff --git a/design/templates/notes/notes_detail.html b/design/templates/notes/notes_detail.html index cce13b7..0099f3d 100644 --- a/design/templates/notes/notes_detail.html +++ b/design/templates/notes/notes_detail.html @@ -69,7 +69,8 @@ </aside>--> </main> <div class="overlay-content hide" id="js-overlay-notebook"> - {% include 'notes/partials/notebook_form.html' with form=notebook_form %} + {% url 'notebook-api-list' as create_url %} + {% include 'notes/partials/notebook_form.html' with form=notebook_form url=create_url %} </div> {% endblock %} diff --git a/design/templates/notes/notes_list.html b/design/templates/notes/notes_list.html index 94e82ec..0799a1c 100644 --- a/design/templates/notes/notes_list.html +++ b/design/templates/notes/notes_list.html @@ -1,42 +1,20 @@ {% extends 'base.html' %} - {% block content %} <main> <div class="note-container"> + {% include "notes/partials/list_header.html" with notebook_list=notebook_list tag_list=tag_list %} <div class="note-hed-wrapper"> <h1 class="note-hed">Notes</h1> {% if messages %} - <ul class="messages"> - {% for message in messages %} - <li{% if message.tags %} class="{{ message.tags }}"{% endif %}> - {% if 'safe' in message.tags %}{{ message|safe }}{% else %}{{ message }}{% endif %} - </li> - {% endfor %} - </ul> + <ul class="messages"> + {% for message in messages %} + <li{% if message.tags %} class="{{ message.tags }}"{% endif %}> + {% if 'safe' in message.tags %}{{ message|safe }}{% else %}{{ message }}{% endif %} + </li> + {% endfor %} + </ul> {% endif %} {% if tags|length >= 1%}<h2 class="note-subhed">Tagged with: {% for tag in tags%}<a href="{{tag.slug}}">{{tag.name}}</a>{%endfor%}</h2>{%endif%} - - <h6 class="bottom-margin-0 inline-block"><button id="notebook-drop-btn" class="btn btn-light btn-drop-menu">Notebooks</button></h6> - <div id="notebook-drop-menu" class="dropmenu dropmenu-search"> - <div class="dropmenu-search-wrapper"> - <input class="search" autocapitalize="off" autocorrect="off" type="text" autocomplete="off" tabindex="-1" spellcheck="false" placeholder="Search..." id="notebook-input" data-list="#notebook-list" > - <!--<svg class="fa d-icon d-icon-search svg-icon filter-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#search"></use></svg>--> - </div> - <ul class="list dropmenu-list list-style-none notebook-list" id="notebook-list">{% for object in notebook_list %} - <li ><a class="name" href="{{object.get_absolute_url}}">{{object.name}} - {{object.note_count}}</a></li> - {%endfor%}</ul> - </div> - - <h6 class="bottom-margin-0 inline-block"><button id="tags-drop-btn" class="btn btn-light btn-drop-menu">Tags</button></h6> - <div id="tags-drop-menu" class="dropmenu dropmenu-search"> - <div class="dropmenu-search-wrapper"> - <input class="search" autocapitalize="off" autocorrect="off" type="text" autocomplete="off" tabindex="-1" spellcheck="false" placeholder="Search..." id="tags-input" data-list="#tags-list" > - <!--<svg class="fa d-icon d-icon-search svg-icon filter-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#search"></use></svg>--> - </div> - <ul class="list dropmenu-list list-style-none notebook-list" id="tags-list">{% for object in tag_list %} - <li><a href="{{object.get_absolute_url}}">{{object.name}} - {{object.note_count}}</a></li> - {%endfor%}</ul> - </div> </div> {%comment%} <label for="choices-single-default">Default</label> <select class="form-control" data-trigger name="choices-single-default" id="choices-single-default" placeholder="This is a search placeholder"> @@ -73,3 +51,5 @@ </div>--> </main> {% endblock %} +{% block jsdomready %} +{% endblock %} diff --git a/design/templates/notes/partials/list_header.html b/design/templates/notes/partials/list_header.html new file mode 100644 index 0000000..5d0edc1 --- /dev/null +++ b/design/templates/notes/partials/list_header.html @@ -0,0 +1,19 @@ +{% block jsinclude %} + <script> + window.nbdata = [ {%spaceless%}{% for object in notebook_list %} {value: '{{object.get_absolute_url}}', label: '<span class="color-box" style="background-color: {{object.color_rgb}}"></span><span class="strong nb-name">{{object.name}}</span> x {{object.note_count}}' },{%endfor%} {value: '/nb/', label: '<span class="strong nb-name">All Notebooks</span>', selected: true, },{%endspaceless%} + ] + window.tagdata = [ {% for object in tag_list %} {value: '{{object.get_absolute_url}}', label: '{% if object.color_rgb %}<span class="color-box" style="background-color: {{object.color_rgb}}"></span>{%endif%}<span class="strong nb-name">{{object.name}}</span> x {{object.note_count}}' },{%endfor%} {value: '/t/', label: '<span class="strong nb-name">All Tags</span>', selected: true, }, + ] + </script> +<script src="/media/js/choices.min.js"></script> +{%endblock%} + <div id="list-header"> + <div id="choices-container" class="flex-wrapper"> + <ul class="list dropmenu-list list-style-none notebook-list" id="notebook-list">{% for object in notebook_list %} + <li ><a class="name" href="{{object.get_absolute_url}}"><span class="color-box" style="background-color: {{object.color_rgb}}"></span><span class="strong nb-name">{{object.name}}</span> x {{object.note_count}}</a></li> + {%endfor%}</ul> + <ul class="list dropmenu-list list-style-none notebook-list" id="tags-list">{% for object in tag_list %} + <li><a href="{{object.get_absolute_url}}">{% if object.color_rgb %}<span class="color-box" style="background-color: {{object.color_rgb}}"></span>{%endif%}<span class="strong nb-name">{{object.name}}</span> x {{object.note_count}}</a></li> + {%endfor%}</ul> + </div> + </div> diff --git a/design/templates/notes/partials/notebook_form.html b/design/templates/notes/partials/notebook_form.html index fae6c40..1e51e9c 100644 --- a/design/templates/notes/partials/notebook_form.html +++ b/design/templates/notes/partials/notebook_form.html @@ -1,4 +1,4 @@ -<form id="nb-create-form" action="{% url 'notebook-api-list' %}" method="POST">{% csrf_token %} +<form id="nb-create-form" action="{{url}}" method="POST">{% csrf_token %} <div class="alert" id="non-field-errors">{{ form.non_field_errors }}</div> <div class="flex-wrapper flex-inner"> {% for field in form %}{% if field.name == 'color_rgb' %} @@ -15,5 +15,5 @@ {% endfor %} <h1 class="notebook-title" id="nb-title">{{object.name}}</h1> </div> - <input id="notebook-form-submit" type="submit" class="btn sm" value="Save" > + <input id="notebook-form-submit" name="create" type="submit" class="btn sm" value="Save" > </form> |