Skip to content

Tune project creation layout and UI #186

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 11, 2023
Merged

Tune project creation layout and UI #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8c765a0
Tweak project create layout and elements
agjohnson Jun 23, 2023
8052455
Unify project creation columns and layout
agjohnson Jul 7, 2023
cd896fa
Typo fixes
agjohnson Jul 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 70 additions & 48 deletions readthedocsext/theme/templates/projects/import_base.html
View file
Open in desktop
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The column layout from import_form was moved here so all child templates could share this. I recommend viewing all of this with whitespace ignored.

Original file line number Diff line number Diff line change
Expand Up @@ -3,70 +3,92 @@
{% load i18n %}
{% load crispy_forms_tags %}

{% block title %}{% trans "Add Project" %}{% endblock %}
{% block title %}{% trans "Add project" %}{% endblock %}

{% block content %}
{% block project_add_content %}
<div class="ui very padded centered stackable grid">
<div class="ui ten wide tablet six wide computer column">
{% block project_add_grid %}
<div class="ui very padded centered stackable grid" {% block project_add_data_bind %}{% endblock %}>

{% block project_add_content_header %}
{% block project_add_header %}
<div class="ui five wide computer four wide large screen computer only column">
{# Placeholder for column offset #}
</div>
<div class="ui sixteen wide tablet eleven wide computer ten wide large screen column">
<h1 class="ui medium header">
<div class="content">
{% trans "Add project" %}
<div class="sub header">
{% block project_add_content_subheader %}
{% endblock project_add_content_subheader %}
{% block project_add_subheader %}
{% endblock project_add_subheader %}
</div>
</div>
</h1>
{% endblock project_add_content_header %}
</div>
{% endblock project_add_header %}

<form class="ui form" action="{% url "projects_import_manual" %}" method="post">
{% block project_add_sidebar %}
<div class="ui sixteen wide tablet five wide computer four wide large screen column">
<div class="ui one column grid">
{% block project_add_sidebar_content %}
{% endblock project_add_sidebar_content %}

{% csrf_token %}
{{ wizard.management_form }}
{% block project_add_sidebar_help %}
{# This hides the help on small view ports. It could be something better like and accordian #}
<div class="computer only column">
<h2 class="ui small header">{% trans "Help topics" %}</h2>
<div class="ui list">
{% block project_add_sidebar_help_topics %}
{% include "includes/elements/link.html" with url="https://docs.readthedocs.io/page/intro/import-guide.html" text="Connecting a repository" is_external=True class="item" %}
{% include "includes/elements/link.html" with url="https://docs.readthedocs.io/page/tutorial/index.html" text="Read the Docs tutorial" is_external=True class="item" %}
{% include "includes/elements/link.html" with url="https://docs.readthedocs.io/page/examples.html" text="Example projects" is_external=True class="item" %}
{% endblock project_add_sidebar_help_topics %}
</div>
</div>
{% endblock project_add_sidebar_help %}
</div>
</div>
{% endblock project_add_sidebar %}

{% block wizard_form %}
{% if wizard.form.forms %}
{{ wizard.form.management_form }}
{% for form in wizard.form.forms %}
{% csrf_token %}
{{ form|crispy }}
{% endfor %}
{% else %}
{{ wizard.form|crispy }}
{% endif %}
{% endblock wizard_form %}
{% block project_add_content %}
<div class="ui sixteen wide tablet eleven wide computer ten wide large screen column">
{% block project_add_content_form %}
<form class="ui form" action="{% url "projects_import_manual" %}" method="post">

{% block wizard_actions %}
<div>
{% if wizard.steps.prev %}
<button class="ui button" name="wizard_goto_step" type="submit" value="{{ wizard.steps.prev }}">
{% trans "Previous" %}
</button>
{% endif %}
{% block wizard_form %}
{% if wizard.form.forms %}
{{ wizard.form.management_form }}
{% for form in wizard.form.forms %}
{% csrf_token %}
{{ form|crispy }}
{% endfor %}
{% else %}
{{ wizard.form|crispy }}
{% endif %}
{% endblock wizard_form %}

{% csrf_token %}
{{ wizard.management_form }}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the hidden input fields, which are dropped down so that the .ui.fieldset.segment that wraps all of the fields is the true first child element of the <form>. This introduces less margin/padding at the top of the element.


{% if wizard.steps.next %}
<input class="ui button primary" type="submit" value="{% trans "Next" %}" />
{% else %}
<input class="ui button primary" type="submit" value="{% trans "Finish" %}" />
{% endif %}
</div>
{% endblock wizard_actions %}
{% block wizard_actions %}
<div>
{% if wizard.steps.prev %}
<button class="ui button" name="wizard_goto_step" value="{{ wizard.steps.prev }}">
{% trans "Previous" %}
</button>
{% endif %}

</form>
{% endblock project_add_content %}
</div>
{% if wizard.steps.next %}
<input class="ui button primary" type="submit" value="{% trans "Next" %}" />
{% else %}
<input class="ui button primary" type="submit" value="{% trans "Finish" %}" />
{% endif %}
</div>
{% endblock wizard_actions %}

<div class="ui ten wide tablet four wide computer column">
<h2 class="ui small header">{% trans "Help topics" %}</h2>
<div data-bind="using: EmbedTopicsView('intro/import-guide')">
<div data-bind="template: { name: 'doc-topics' }"></div>
</div>
</form>
{% endblock project_add_content_form %}
</div>
{% endblock project_add_content %}
</div>
</div>

{% include "includes/utils/embed_docs.html" %}

{% endblock project_add_grid %}
{% endblock %}
4 changes: 2 additions & 2 deletions readthedocsext/theme/templates/projects/import_basics.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@

{% load i18n %}

{% block project_add_content_subheader %}
{% block project_add_subheader %}
{% trans "Configure basic project settings" %}
{% endblock project_add_content_subheader %}
{% endblock project_add_subheader %}
4 changes: 2 additions & 2 deletions readthedocsext/theme/templates/projects/import_extra.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@
{% load crispy_forms_tags %}
{% load ext_theme_tags %}

{% block project_add_content_subheader %}
{% block project_add_subheader %}
{% trans "Configure advanced project settings" %}
{% endblock project_add_content_subheader %}
{% endblock project_add_subheader %}
Loading