Suggestion: give some settings to auto-hide the sidebar

hebijiandai commented 10 years ago

Hello sir，when I study your project,I Found that sometimes the form is too narrow on the browser,would you please add some settings to auto-hide the sidebar? I think it will enhance the project's outward and be more easy of use. Thanks for your concern. allenlee qq20140306170328

hebijiandai commented 10 years ago

Sir I override the suit/menu.html to modify the auto-hide sidebar.

{#{% load sitetree %}#} 
{% load i18n suit_menu %}
{% load url from future %}
<!--.nav-collapse -->
<div class="navbar navbar-default navbar-fixed-left" role="navigation">
  <!-- <div class="navbar-header">
  -->
  <button type="button" class="btn btn-default navbar-toggle" data-toggle="collapse" 
    data-target=".navbar-menu">
    <span class="sr-only">Navigation data-toggle</span>
  </button>
  <!--</div>
  -->
  <div class="navbar-menu collapse">
    <!--/.nav-collapse -->
    <div class="left-nav" id="left-nav">
      <ul>
        {% block menu_home %}
      {% url 'admin:index' as index_url %}
        <li{% if index_url == request.path %} class="active"{% endif %}>
          <a href="{{ index_url }}"> <i class="icon-home"></i>
            {% trans 'Home' %}
          </a>
        </li>
        {% endblock %}

    {% get_menu request as app_list %}
    {% if app_list %}
      {% for app in app_list %}
        {% if app.separator %}
        <li class="separator"></li>
        {% else %}
        <li{{ app.is_active|yesno:' class=active,' }}>
          <a href="{{ app.url }}"{{ app.blank|yesno:' target=_blank,' }}> <i class="{% firstof app.icon 'icon-chevron-right' %}"></i>
            {% trans app.label|capfirst %}
          </a>
          {% if app.models %}
          <ul>
            {% for model in app.models %}
            <li{{ model.is_active|yesno:' class=active,' }}>
              <a href="{{ model.url }}"{{ model.blank|yesno:' target=_blank,' }}>{{ model.label }}</a>
            </li>
            {% endfor %}
          </ul>
          {% endif %}
        </li>
        {% endif %}
      {% endfor %}
    {% endif %}
      </ul>

    </div>
    <!--.nav-collapse --> </div>
</div>
<!--/.nav-collapse -->

But How can I put the "Navigation data-toggle" to right vertically and when I click it ,it can hide or show the menu? Thanks. I recommand to add this,I am a newbie and have learned django-suit for half month,it is interesting and usefull.

darklow commented 10 years ago

To hide menu column and make admin full-width you need to achieve following CSS rules:

#suit-left { display: none; }
#wrap { background: inherit; }
.suit-columns { padding-left: 0; }

hebijiandai commented 10 years ago

Sir,I successly override the css to hide the menu follow your tips qq20140307-3 2x Now the second step,how I can I make a trigger to hide or show the sidebar? I have two considerations: 1.I think the javascript is the best way to finish it,but I have no basic concept about that, 2.Write a script to modify the css when the user what to switch the sidebar's hide-show status. How to finish the above.

Regards.

darklow commented 10 years ago

Yes, you will need to use JS to toggle these CSS changes.

hebijiandai commented 10 years ago

Sorry，sir，can you show me some demonstrations to solve it？I have not touch the javascript before,is there some tip to finish it？

hebijiandai commented 10 years ago

Hello sir,I consult relvevant documents to complete this work:

<body onload="loadCounter()" {% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}>

 <div class="header-column">
<a class="grey" id="myButton" onClick="clickCounter();">隐藏菜单</a>
</div>

function changeCss() {
        //If you want to hide the arrow absolutely,add this.
        var suitInput = document.getElementById('suit-left');
        suitInput.style.display = 'none';

        var wrap = document.getElementById('wrap');
        wrap.style.background = 'inherit';

        var suitCol = document.getElementsByClassName('suit-columns')[0];
        suitCol.style.paddingLeft = '0';
    }

    //Use session storage to complete the work.
    function clickCounter() {

        if (document.getElementById('myButton').firstChild.data == "Hide Menu") {
            document.getElementById('myButton').firstChild.data = "Show Menu";
            changeCss();
        }
        else {
            window.location.reload();
            document.getElementById('myButton').firstChild.data = "Hide Menu";
        }

        sessionStorage.menuMark = document.getElementById('myButton').firstChild.data;

    }

    function loadCounter() {
        document.getElementById('myButton').firstChild.data = sessionStorage.menuMark;

        if (document.getElementById('myButton').firstChild.data == "Show Menu") {
            myData = "隐藏菜单";
            changeCss();
        }

    }

qq20140309-1 2x

It runs well, But I find the methodwindow.location.reload();will refresh the page,aggravate the burden of Internet traffic. I try to modify the css to the initial status to replace the window.location.reload();.But the initial css code is complicated.I can't exactly modify it. Sir,would you like to give me some directions?thanks.

darklow / django-suit

Suggestion: give some settings to auto-hide the sidebar #205