Merge pull request #693 from chaotic-kingdoms/issue-666

#666: Make navdrawer collapsible in large resolution
DigitalCampus · Nov 27, 2019 · 60d0dad · 60d0dad
2 parents d7fcb19 + aea7518
commit 60d0dad
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 10 deletions.
diff --git a/static/css/components/_navdrawer.scss b/static/css/components/_navdrawer.scss
@@ -2,17 +2,50 @@
     .navdrawer-permanent-lg {
         z-index: map-get($navdrawer-elevation-shadow, elevation);
     }
-    .navdrawer-permanent-lg + #main-content, .navbar-drawer .container{
-        margin-left:$navdrawer-width;
+    .navdrawer-permanent-lg.show + #main-content{
+        margin-left:0;
     }
-    .navdrawer-permanent-lg + #main-content .modal.show{
+
+    .navdrawer-open-default #main-content .modal.show,
+    .navdrawer-open-default .navbar-drawer{
+        padding-left:$navdrawer-width;
+        transition-duration: .225s;
+        transition-property: padding-left;
+        transition-timing-function: cubic-bezier(0,0,.2,1);
+    }
+
+    .navdrawer-persistent-lg + #main-content{
+        margin-left: 0;
+        transition-duration: .225s;
+        transition-property: margin-left;
+        transition-timing-function: cubic-bezier(0,0,.2,1);
+    }
+
+    .navdrawer-open-default #main-content{
+        margin-left: $navdrawer-width;
+    }
+
+    .navdrawer-persistent-lg.show + #main-content .modal.show{
         padding-left:$navdrawer-width;
     }
+
+    .navdrawer-backdrop {
+        top:auto;
+        right:auto;
+        left:auto;
+    }
+
+
+
 }
 .navdrawer-permanent-lg ~ #top-bar{
     margin-left:$navdrawer-width;
 }
 
+.navbar-toggler.always-show{
+        display:block;
+    }
+
 @media (max-width: 992px){
     .navbar-toggler.always-show{
         display:block;

diff --git a/static/oppia/js/common.js b/static/oppia/js/common.js
@@ -1,5 +1,8 @@
 $(function(){
     $('[data-toggle="tooltip"]').tooltip();
+    if ($('.device-lg').css('display') == 'block'){
+        $('.navdrawer-persistent-lg').navdrawer('show')
+    }
 
     var datePickerFormat = 'YYYY-MM-DD';
 	$('.date-picker-selector').each(function(){

diff --git a/templates/base.html b/templates/base.html
@@ -33,7 +33,7 @@
 
 </head>
 
-<body class="d-flex flex-column" {% block extra_body %}{% endblock extra_body %}>
+<body class="d-flex flex-column navdrawer-open-default" {% block extra_body %}{% endblock extra_body %}>
 
 {% if DEBUG %}
      <div class="fixed-bottom alert alert-danger alert-dismissable debug-alert" style="z-index:200;">
@@ -76,7 +76,7 @@
 <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
 <script src="{% static 'oppia/js/material.min.js' %}"></script>
-<script src="{% static 'oppia/js/common.js' %}"></script>
+<script src="{% static 'oppia/js/common.js' %}?v=2"></script>
 
 {% block extra_scripts %}
 {% endblock extra_scripts %}

diff --git a/templates/includes/navbar_superuser.html b/templates/includes/navbar_superuser.html
@@ -2,12 +2,11 @@
 {% load i18n %}
 
 <nav class="navbar navbar-expand navbar-light bg-primary navbar-drawer" id="top-bar">
-     <div class="container">
-    <button class="navbar-toggler always-show" type="button" data-toggle="navdrawer" data-target="#doc-navdrawer" aria-controls="doc-navdrawer" aria-expanded="false" aria-label="Toggle navigation">
+    <button class="navbar-toggler always-show" type="button" data-toggle="navdrawer" data-target="#doc-navdrawer" aria-controls="doc-navdrawer"  aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <a class="navbar-brand text-light" href="{% url 'oppia_home' %}"><img class="mr-2" src="{% static "oppia/images/dc_logo.png" %}" height="30" alt="{% trans 'app_name' %} {% trans 'logo' %}"/>{% trans 'app_name' %}</a>
-
+    <div class="device-lg d-none d-lg-block"></div>
 
       <div class="collapse navbar-collapse" id="navbar-collapse">
         <ul class="navbar-nav ml-auto mt-0">
@@ -31,11 +30,10 @@
               </li>
         </ul>
       </div>
-     </div>
 </nav>
 
 
-<div class="navdrawer navdrawer-permanent-lg doc-navdrawer" id="doc-navdrawer" tabindex="-1" aria-hidden="true">
+<div class="navdrawer navdrawer-persistent-lg navdrawer-default show" id="doc-navdrawer" tabindex="-1">
   <div class="navdrawer-content">
     <div class="d-flex flex-column doc-navdrawer-body">