Skip to content

Commit

Permalink
Changed menu from horizontal to vertical (#2700)
Browse files Browse the repository at this point in the history 
Changed menu from horizontal to vertical
  • Loading branch information
@4i60r @ar4s
4i60r authored and ar4s committed Aug 18, 2016
1 parent b391a68 commit 608c776
Show file tree
Hide file tree
Showing 6 changed files with 139 additions and 50 deletions.
98 changes: 53 additions & 45 deletions src/ralph/admin/templates/admin/change_form.html
View file
Expand Up @@ -9,15 +9,10 @@
{% block content %}
<div id="content-main">
<div class="row header">
<div class="large-2 small-2 columns">
<div class="large-6 small-6 columns">
<h1 class="ellipsis-hidden">{% block title_head %}{% if original %}{{ original }}{% else %}{% trans 'Add' %} {{ opts.verbose_name|lower }}{% endif %}{% endblock %}</h1>
</div>
{% if not in_recovery_mode %}
<div class="large-8 small-8 columns">
{% block tabs %}
{% views_tabs change_views '' original %}
{% endblock %}
</div>
<div class="large-2 small-2 columns">
<div class="header-toolbar">
{% available_transitions original 'status' %}
Expand All @@ -41,51 +36,63 @@ <h1 class="ellipsis-hidden">{% block title_head %}{% if original %}{{ original }
</div>
{% endif %}
</div>
<form class="row content" {% if has_file_field %}enctype="multipart/form-data" {% endif %}action="{{ form_url }}" method="post" id="{{ opts.model_name }}_form" novalidate>{% csrf_token %}
{% block form_top %}{% endblock %}
<div>
{% block summary %}
{% include "admin/includes/summary_table.html" %}
{% endblock %}
<div class="row flex">
<div class="large-1 small-1 columns no-horizontal-padding elevate">
{% block tabs %}
{% views_tabs change_views '' original %}
{% endblock %}
</div>
<div class="large-11 small-11 columns no-left-padding right-col">
<div class="row content">
<form {% if has_file_field %}enctype="multipart/form-data" {% endif %}action="{{ form_url }}" method="post" id="{{ opts.model_name }}_form" novalidate>{% csrf_token %}
{% block form_top %}{% endblock %}
<div>
{% block summary %}
{% include "admin/includes/summary_table.html" %}
{% endblock %}

{% if is_popup %}<input type="hidden" name="{{ is_popup_var }}" value="1" />{% endif %}
{% if to_field %}<input type="hidden" name="{{ to_field_var }}" value="{{ to_field }}" />{% endif %}
{% if save_on_top %}{% block submit_buttons_top %}{% submit_row %}{% endblock %}{% endif %}
{% if errors %}
{% if errors|length == 1 %}
{% alert _("Please correct the error below.") 'alert' %}
{% else %}
{% alert _("Please correct the errors below.") 'alert' %}
{% endif %}
{% errors adminform.form %}
{% endif %}
<div class="row">
{% block field_sets %}
{% for fieldset in adminform %}
<div class="small-12 medium-6 large-6 columns">
{% include "admin/includes/fieldset.html" %}
{% if is_popup %}<input type="hidden" name="{{ is_popup_var }}" value="1" />{% endif %}
{% if to_field %}<input type="hidden" name="{{ to_field_var }}" value="{{ to_field }}" />{% endif %}
{% if save_on_top %}{% block submit_buttons_top %}{% submit_row %}{% endblock %}{% endif %}
{% if errors %}
{% if errors|length == 1 %}
{% alert _("Please correct the error below.") 'alert' %}
{% else %}
{% alert _("Please correct the errors below.") 'alert' %}
{% endif %}
{% errors adminform.form %}
{% endif %}
<div class="row">
{% block field_sets %}
{% for fieldset in adminform %}
<div class="small-12 medium-6 large-6 columns">
{% include "admin/includes/fieldset.html" %}
</div>
{% endfor %}
{% endblock %}
</div>
{% endfor %}
{% endblock %}
</div>
{% block after_field_sets %}{% endblock %}
{% block inline_field_sets %}
{% for inline_admin_formset in inline_admin_formsets %}
{% include inline_admin_formset.opts.template %}
{% endfor %}
{% endblock %}
{% block after_field_sets %}{% endblock %}
{% block inline_field_sets %}
{% for inline_admin_formset in inline_admin_formsets %}
{% include inline_admin_formset.opts.template %}
{% endfor %}
{% endblock %}

{% block after_related_objects %}{% endblock %}

{% block after_related_objects %}{% endblock %}
{# JavaScript for prepopulated fields #}
{% prepopulated_fields_js %}
{% if admin_view.show_transition_history and original and not in_recovery_mode %}
{% transition_history original %}
{% endif %}
</div>

{# JavaScript for prepopulated fields #}
{% prepopulated_fields_js %}
{% if admin_view.show_transition_history and original and not in_recovery_mode %}
{% transition_history original %}
{% endif %}
{% block submit_buttons_bottom %}{% ralph_submit_row %}{% endblock %}
</form>
</div>
</div>

{% block submit_buttons_bottom %}{% ralph_submit_row %}{% endblock %}
</form>
</div>
</div>
{% endblock %}
{% block extra_scripts %}
Expand All @@ -96,3 +103,4 @@ <h1 class="ellipsis-hidden">{% block title_head %}{% if original %}{{ original }
})(ralph.jQuery);
</script>
{% endblock %}

12 changes: 8 additions & 4 deletions src/ralph/admin/templates/admin/extra_views/base.html
View file
Expand Up @@ -6,12 +6,16 @@
<div class="large-2 small-2 columns">
<h1 class="ellipsis-hidden">{{ object }}</h1>
</div>
<div class="large-10 small-10 columns">
</div>
<div class="row flex">
<div class="large-1 small-1 columns no-horizontal-padding elevate">
{% block tabs %}{% endblock %}
</div>
</div>
<div class="row content">
{% block view_content %}{% endblock %}
<div class="large-11 small-11 columns content">
<div class="content-inner">
{% block view_content %}{% endblock %}
</div>
</div>
</div>
</div>
{% endblock %}
2 changes: 1 addition & 1 deletion src/ralph/admin/templates/admin/templatetags/tabs.html
View file
@@ -1,7 +1,7 @@
{% load admin_urls i18n %}

{% if views %}
<div class="tabs">
<div class="tabs vertical">
<ul>
<li
class="has-tip tip-bottom {% if name == '' %} active {% endif %}"
Expand Down
1 change: 1 addition & 0 deletions src/ralph/static/src/scss/components/_admin-bottom.scss
View file
Expand Up @@ -13,6 +13,7 @@
display: block;
margin: 0;
padding: 1rem;
z-index: 10;
background-color: $admin-bottom-bg;
&.bottom {
@include admin-bottom-bottom();
Expand Down
7 changes: 7 additions & 0 deletions src/ralph/static/src/scss/components/_functions.scss
View file
Expand Up @@ -73,3 +73,10 @@
-moz-box-sizing: $box-sizing;
box-sizing: $box-sizing;
}
@mixin display-flex() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
69 changes: 69 additions & 0 deletions src/ralph/static/src/scss/components/tabs.scss
View file
@@ -1,3 +1,5 @@
@import 'functions';

.tabs {
vertical-align: middle;
margin-bottom: -1px;
Expand Down Expand Up @@ -47,3 +49,70 @@
display: inline;
}
}

.tabs.vertical {
margin-right: -1px;
ul {
display: block;
li {
display: block;
margin-right: 0;
margin-top: 0;
&:first-of-type a {
margin-top: 0;
}
&.active:first-of-type a,
&:first-of-type a:hover {
margin-top: 0;
}
a {
margin-left: 3px;
border: 1px solid $tabs-border-color;
text-align: left;
padding-left: 10px;
padding-right: 2px;
}
&.active a,
a:hover {
margin-left: 0;
margin-top: 3px;
border-top: 1px solid $tabs-border-color;
border-left: 4px solid $mdc-orange-500;
border-right-color: transparent;
background-color: $tabs-content-bg-color;
}
i {
width:15px;
text-align: center;
margin-right: 2px;
}
}

}
}
.elevate {
z-index: 3;
}
.no-horizontal-padding {
padding-left: 0;
padding-right: 0;
}
.no-right-padding {
padding-right: 0;
}
.no-left-padding {
padding-left: 0;
}
#content-main .content {
margin-bottom: -1px;
min-height: 100%;
}
.content .content-inner {
padding: 0 1.33333rem;
}
.flex {
@include display-flex();
}
.right-col {
margin-bottom: -1px;
}

0 comments on commit 608c776

Please sign in to comment.