Tune project creation layout and UI #186
Conversation
- Make the search more obvious it is a search - Drop the mention of syncing repositories down to the bottom of the page. This should be a last resort in most cases, but still needed UX - Tune the copy to point the user to "search for a project", instead of instructions on not finding a repository - Tune some of the dynamic elements used in the search results - Some changes related to #166 and #185
Avoid switching layouts multiple times, always use the same two columns. This is more predictable for the user and for us.
| {% endblock wizard_form %} | ||
|
|
||
| {% csrf_token %} | ||
| {{ wizard.management_form }} |
There was a problem hiding this comment.
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.
| @@ -8,3 +7,4 @@ | |||
| {% include "semantic-ui/field.html" %} | |||
| {% endfor %} | |||
| </div> | |||
| {{ form.media }} | |||
There was a problem hiding this comment.
This was another attempt to put the form hidden inputs below the fieldset definition. I don't see any breaking change from this but it should be able to be safely reverted.
There was a problem hiding this comment.
Much of the structure here was moved to the base template and reused there instead. This provides a singular column layout for all the project creation pages.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
The video looks great. I tried to review this work but I don't feel capable of doing a proper review of the code itself. I still don't really know how to provide code feedback here since I don't really understand how SUI works and what is the meaning of all these CSS classes.
I suppose we will need something like https://github.com/readthedocs/meta/discussions/114 but for ext-theme (SUI, Knockout.js, and anything required to understand this project).
| <script type="application/json" data-bind="jsonInit: config"> | ||
| { | ||
| "urls": { | ||
| "api_sync_remote_repositories": "{% url 'api_sync_remote_repositories' %}", | ||
| "remoterepository_list": "{% url 'remoterepository-list' %}" | ||
| }, | ||
| "csrf_token": "{{ view_csrf_token }}" | ||
| } | ||
| </script> | ||
|
|
||
| {# Sidebar #} | ||
| <div class="ui sixteen wide tablet five wide computer four wide large screen column"> | ||
| <div class="ui fluid secondary pointing vertical menu" data-bind="css: {vertical: device.computer()}"> | ||
| <a class="item active" data-tab="automatic"> | ||
| <i class="fa-duotone fa-magic icon"></i> | ||
| {% trans "Configure automatically" %} | ||
| </a> | ||
| <a class="item" data-tab="manual"> | ||
| <i class="fa-duotone fa-hand-sparkles icon"></i> | ||
| {% trans "Configure manually" %} | ||
| </a> | ||
| </div> | ||
| </div> | ||
| {# End sidebar #} | ||
| </script> |
There was a problem hiding this comment.
The jsonInit binding is used in the templates to bring backend data into the Knockout view where an API response is not really possible. In many cases, an API response will have the URLs that we would use in the Knockout views, but for cases where this isn't true the jsonInit binding can be used.
The API reference docs on jsonInit have some more background and examples.
| </div> | ||
| {% endblock project_add_sidebar_content %} | ||
|
|
||
| {% block project_add_data_bind %}data-bind="using: ProjectCreateView()"{% endblock %} |
There was a problem hiding this comment.
Where does ProjectCreateView lives? How/When/Why is it called?
There was a problem hiding this comment.
ProjectCreateView is a Knockout view, documented some here.
All Knockout views are surfaced through the main view, ApplicationView. This registers all of the views as globals to Knockout.
These views are all used by defining a Knockout using data binding, which is a native KO data binding. This changes the current Knockout context to the instance of the view -- ProjectCreateView in this case.
It's done this way to avoid maintaining some sort of URL routing in the frontend code. The backend already did the URL routing, so templates instead reference the Knockout views they use in a very explicit way.
| <div class="ui basic horizontally fitted segment" data-bind="visible: !is_selected()"> | ||
| <div class="ui top attached placeholder segment"> |
There was a problem hiding this comment.
What's the documentation I have to read to understand all these CSS classes?
There was a problem hiding this comment.
You should look at the FomanticUI docs, for example the segment element docs cover all of the variations for segment elements.
Co-authored-by: Manuel Kaufmann <[email protected]>
Yeah, this is a piece I've wanted for some time too. I added #187 earlier to start accumulating more guide content in the ext-theme docs. |
Screencast.from.2023-07-07.12-41-09.webm
Closes #150