From afa81118d2aae89d17753dcfbfd23f7cee8a1809 Mon Sep 17 00:00:00 2001
From: abhishekspeer <abhishek.abhishekgaur.gaur@gmail.com>
Date: Sat, 21 Mar 2020 01:53:32 +0530
Subject: [PATCH] Remove design glitches, improve responsive CSS

---
 systers_portal/static/css/style.css | 83 ++++++++++++++++++++++++++---
 systers_portal/templates/base.html  | 38 +++++++++++--
 2 files changed, 109 insertions(+), 12 deletions(-)

diff --git a/systers_portal/static/css/style.css b/systers_portal/static/css/style.css
index 1914bb64..44f4112c 100755
--- a/systers_portal/static/css/style.css
+++ b/systers_portal/static/css/style.css
@@ -56,7 +56,8 @@ body > .container-fluid {
 -------------------------------------------------- */
 .messages {
   margin-top: 54px;
-  margin-bottom: -60px;
+  margin-bottom: -15px;
+  text-align: center;
 }
 
 .message {
@@ -147,13 +148,13 @@ body > .container-fluid {
   top:20px;
   font-size: 16px;
   font-weight: bolder;
-  font-family: 'Cairo'; 
+  font-family: 'Cairo';
 }
 
 #line {
   width: 70%;
   z-index: 2;
-  height: 4px; 
+  height: 4px;
 }
 
 #systers-logo {
@@ -163,12 +164,13 @@ body > .container-fluid {
 }
 
 #log-btn {
-  background-color: #47bca0; 
+  background-color: #47bca0;
 }
 
 #signup-btn {
   background-color: #8d2165;
   right: 20%;
+  border-radius: 5px;
 }
 
 .auth-img {
@@ -220,7 +222,7 @@ body > .container-fluid {
   background-color: #e2e2e2;
   border-color: #dadada;
   color: #555555;
-  padding: 8px 12px 7px;  
+  padding: 8px 12px 7px;
 }
 
 @media screen and (max-width: 991px) {
@@ -275,7 +277,7 @@ body > .container-fluid {
 }
 
 .search-options {
-  font-family: Cairo;  
+  font-family: Cairo;
   font-size: 15px;
   margin: 0 4px 0 0;
   color: #888b8d;
@@ -347,7 +349,7 @@ input {
 
 #filters {
   float: right;
-  width: 30%; 
+  width: 30%;
 }
 
 #meetup-location-input,#location-input {
@@ -395,7 +397,7 @@ input {
   background-color: white;
   border: none;
   box-shadow: none;
-  width: auto; 
+  width: auto;
   font-family: Cairo;
 }
 
@@ -649,4 +651,69 @@ table.decoration-none  tr a {
   .featurette .img-responsive {
     margin: 0 auto;
   }
+  #systers-logo {
+    height: 70px;
+    width: 298px;
+    margin: 6px;
+  }
+  #upper-nav {
+      display: none;
+  }
+}
+
+@media (max-width: 991px) {
+    .navbar-header {
+        float: none;
+    }
+    .navbar-toggle {
+        display: block;
+    }
+    .navbar-collapse {
+        border-top: 1px solid transparent;
+        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+    }
+    .navbar-collapse.collapse {
+        display: none;
+    }
+    .navbar-nav {
+        float: none;
+        margin: 7.5px -15px;
+    }
+    .navbar-nav>li {
+        float: none;
+    }
+    .navbar-nav>li>a {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+    .navbar-text {
+        float: none;
+        margin: 15px 0;
+    }
+    .navbar-collapse.collapse.in {
+        display: block;
+    }
+    .collapsing {
+        overflow: hidden;
+    }
+    #log-btn {
+        margin-right: 19px;
+        margin-top: 3px;
+    }
+    #signup-btn {
+        margin-left: 19px;
+        margin-bottom: 3px;
+    }
+}
+
+@media (min-width: 769px) {
+    #log-btn-menu {
+        display: none;
+    }
+    #signup-btn-menu {
+        display: none;
+    }
+    #user-dropdown-menu {
+        display: none;
+    }
 }
diff --git a/systers_portal/templates/base.html b/systers_portal/templates/base.html
index 46d87a4d..69ea2af5 100644
--- a/systers_portal/templates/base.html
+++ b/systers_portal/templates/base.html
@@ -59,7 +59,7 @@
               {% url 'unapproved_community_requests' as url %}
               <li {% if url == request.path %}class="active"{% endif %}role="presentation">
                 <a role="menuitem" href="{{ url }}">
-                  View community requests </a>          
+                  View community requests </a>
               </li>
               {% endif %}
               {% if user.is_authenticated and user.is_active and user.is_staff %}
@@ -72,7 +72,7 @@
           </ul>
         </li>
         <li {% if '/meetup/' in request.path %}class="active"{% endif %} class="dropdown" id="meetup-dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Meetups <span class="caret"></span></a>
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Meetups<span class="caret"></span></a>
           <ul class="dropdown-menu" role="menu">
             {% url 'list_meetup_location' as url %}
             <li {% if url == request.path %}class="active"{% endif %}>
@@ -86,14 +86,14 @@
             {% url 'request_meetup_location' as url %}
             <li {% if url == request.path %}class="active"{% endif %}role="presentation">
               <a role="menuitem" href="{{ url }}">
-              Request New Meetup Location</a> 
+              Request New Meetup Location</a>
             </li>
             {% endif %}
             {% if user.is_authenticated and user.is_active and user.is_staff %}
             {% url 'new_meetup_location_requests' as url %}
             <li {% if url == request.path %}class="active"{% endif %}role="presentation">
               <a role="menuitem" href="{{ url }}">
-              View meetup location requests </a>          
+              View meetup location requests </a>
             </li>
             {% endif %}
             {% if user.is_staff %}
@@ -107,6 +107,36 @@
         <li><a href="http://wiki.systers.org/open-source/doku.php/portal" target="blank_">Wiki</a></li>
         {% url 'contact' as url %}
         <li {% if url == request.path %}class="active"{% endif %}><a href="{{ url }}">Contact</a></li>
+        {% if user.is_authenticated and user.is_active %}
+        <li id='user-dropdown-menu' class="dropdown {% if '/users/' in request.path or '/accounts/' in request.path %}active{% endif %}">
+              <a role="menuitem" href="#" class="dropdown-toggle" data-toggle="dropdown">{{ user }} <span class="caret"></span></a>
+              <ul class="dropdown-menu" role="menu">
+                <li {% if '/users/' in request.path %}class="active"{% endif %}>
+                  <a role="menuitem" href="{% url 'user' user.username %}">Profile</a>
+                </li>
+                {% if user.is_staff %}
+                <li><a role="menuitem" href="{% url 'admin:index' %}">Admin Panel</a></li>
+                {% endif %}
+                {% url 'account_change_password' as url %}
+                <li {% if url == request.path %}class="active"{% endif %}>
+                  <a role="menuitem" href="{{ url }}">Change password</a>
+                </li>
+                {% url 'logout' as url %}
+                <li {% if url == request.path %}class="active"{% endif %}>
+                  <a role="menuitem" href="{{ url }}">Logout</a>
+                </li>
+              </ul>
+         </li>
+        {% else %}
+            {% url 'account_signup' as url %}
+            <li {% if url == request.path %}class="active"{% endif %}>
+              <a id="signup-btn-menu" href="{{ url }}">Sign up</a>
+            </li>
+            {% url 'account_login' as url %}
+            <li {% if url == request.path %}class="active"{% endif %}>
+              <a id="log-btn-menu" href="{{ url }}">Login</a>
+            </li>
+        {% endif %}
       </ul>
       <ul class="nav navbar-nav text-uppercase" id="upper-nav">
         {% if user.is_authenticated and user.is_active %}