Organize Service View Page with Tabs #520
Conversation
|
This only seems to update the What probably needs to happen, is to pull out the new changes for the actions dropdown into their own template (similar to the service_header template) and then that can be reused in the various places and cleaned up all at once. |
bai1024
force-pushed
the
organize-service-view
branch
from
28566df to
bf43754
Compare
Updated. Now the action button only used in |
bai1024
force-pushed
the
organize-service-view
branch
from
bd08bc1 to
29772b5
Compare
bai1024
force-pushed
the
organize-service-view
branch
2 times, most recently
from
ea56ec7 to
704c117
Compare
There was a problem hiding this comment.
Looking better!!!
But there still seems to be a lot of duplicate between service_block.html and service_detail.html.
What I would recommend.
Make a 'panel' for each section. Something like
service_block_panel_projects.inc.html
service_block_panel_rules.inc.html
service_block_panel_notifiers.inc.html
Then from both service_block.html and service_detail you can include the panel. In service_block.html they will be in a list, and in service_detail.html they'll be under each tab.
I think since this PR has gone through a few cycles, there might be some other duplicates in there. I'll keep checking a bit more.
promgen/templates/promgen/service_block_panel_notifiers.inc.html
Outdated
Show resolved
Hide resolved
bai1024
force-pushed
the
organize-service-view
branch
2 times, most recently
from
f114471 to
b6f64d6
Compare
| <li> | ||
| <a href=""> | ||
| <form action="{% url 'service-notifier' service.id %}" style="display:inline" method="post" v-pre>{% csrf_token %} | ||
| <input type="hidden" name="sender" value="promgen.notification.user"> | ||
| <input type="hidden" name="value" value="{{request.user.username}}" /> | ||
| <button style="background:none;border:none;padding:0;">{% translate "Subscribe to Notifications" %}</button> | ||
| </form> | ||
| </a> | ||
| </li> | ||
|
|
||
| <hr> | ||
|
|
||
| <li role="presentation"><a href="{% urlqs 'audit-list' service=service.id %}">{% translate "Edit History" %}</a></li> | ||
| <li role="presentation"><a href="{% urlqs 'alert-list' service=service.name %}">{% translate "Alert History" %}</a></li> | ||
|
|
||
| <hr> | ||
|
|
||
| <li role="presentation"><a href="{% url 'api:service-rules' name=service.name %}">{% translate "Export Rules" %}</a></li> | ||
| <li role="presentation"><a href="{% url 'api:service-targets' name=service.name %}">{% translate "Export Service" %}</a></li> | ||
|
|
||
| <hr> | ||
|
|
||
| <li role="presentation"> | ||
| <a href=""> | ||
| <form method="post" action="{% url 'service-delete' service.id %}" onsubmit="return confirm('{% translate "Delete this service?" %}')" style="display: inline"> | ||
| {% csrf_token %} | ||
| <button style="background:none;border:none;padding:0;color:#d9534f" >{% translate "Delete Service" %}</button> | ||
| </form> | ||
| </a> | ||
| </li> | ||
|
|
||
| </ul> | ||
| </div> |
There was a problem hiding this comment.
Even though <hr> is more semantic, I think using bootstrap's <li role="separator" class="divider"></li> will result in a cleaner layout
Before
After
There was a problem hiding this comment.
As you can see in the image attached to the PR description, I have already set the hr tag style, and the original divider style should look like this. . But somehow it didn't work at your local..
I update the hr style again
bai1024
force-pushed
the
organize-service-view
branch
7 times, most recently
from
16f1267 to
bcb143d
Compare
bai1024
force-pushed
the
organize-service-view
branch
from
bcb143d to
eed30af
Compare
|
I've opened up #544 as an attempt to split this into two different PRs. Combining the tab changes and the action button changes in the same PR, made things too difficult to review each time. In the future, we should try to keep one change to one PR. Also it would help to leave the extra commits around and do a rebase/forcepush when ready for final review. Too many force pushes makes it much harder to review just the changes in isolation. |
Categorizing the service view page into tabs aims to provide consistency and improve the readability of the page.
Remark:
Test at local:
