Download as
Browse Code »

Commit 19c5d918d8e39cb2c369f77b4f40f7a15765c74d

Authored by Filipe Medeiros
1 parent 0f20aeb7
Exists in master and in 2 other branches amadeus_univasf, refactoring

Fixing responsive top menu

Showing 2 changed files with 148 additions and 5 deletions   Show diff stats
amadeus/static/css/base/amadeus_responsive.css
  Diff comments   View file @19c5d91
... ... @@ -126,7 +126,6 @@
126 126 float: left;
127 127 }
128 128 #btn-search {
129   - margin-top: -5px;
130 129 height: 30px;
131 130 }
132 131  
... ... @@ -217,7 +216,6 @@
217 216 }
218 217  
219 218 #btn-search {
220   - margin-top: -10px;
221 219 height: 50px;
222 220 }
223 221  
... ... @@ -284,6 +282,26 @@
284 282 text-align: center;
285 283 font-size: 1em;
286 284 }
  285 +
  286 + .navbar-toggle{
  287 + float: left;
  288 + padding:10px;
  289 + }
  290 +
  291 + .btn{
  292 + padding: 0px 10px;
  293 + margin: 10px 1px;
  294 + font-size: 1.5em;
  295 + }
  296 +
  297 + .navbar .logo{
  298 + margin: auto;
  299 + text-align: center;
  300 + padding: 10px;
  301 + height: 50px;
  302 + width: 50px;
  303 + }
  304 +
287 305 }
288 306 @media(max-width:610px){
289 307 .outside-title{
... ...
amadeus/templates/base.html
  Diff comments   View file @19c5d91
... ... @@ -91,7 +91,7 @@
91 91 </head>
92 92 <body data-lang="{{ LANGUAGE_CODE }}">
93 93 {% block nav %}
94   - <div class="navbar navbar-default">
  94 + <div class="navbar navbar-default hidden-sm hidden-xs">
95 95 <div class="navbar-header">
96 96 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
97 97 <span class="icon-bar"></span>
... ... @@ -102,9 +102,8 @@
102 102 <img class="logo pull-left" src="{{ theme.small_logo_url }}" alt="Logo" />
103 103 <span class="pull-right project_name">{{ theme.title }}</span>
104 104 </a>
105   -
106   -
107 105 </div>
  106 +
108 107 <div class="navbar-collapse collapse navbar-responsive-collapse">
109 108 <div class="col-md-7 col-md-offset-1 col-sm-6 col-sm-offset-1 col-lg-7 col-lg-offset-1 text-center">
110 109 <form id="SearchForm" action="{% url 'subjects:search' %}" method="get" accept-charset="utf-8" class="navbar-form">
... ... @@ -204,6 +203,132 @@
204 203 </div>
205 204 </div>
206 205  
  206 +
  207 + <div class="navbar navbar-default hidden-lg hidden-md">
  208 + <div class="navbar-header">
  209 + <div class="col-sm-4 col-xs-4">
  210 + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
  211 + <span class="icon-bar"></span>
  212 + <span class="icon-bar"></span>
  213 + <span class="icon-bar"></span>
  214 + </button>
  215 + </div>
  216 + <div class="col-sm-4 col-xs-4">
  217 + <a class="" href="{% url 'subjects:home' %}">
  218 + <img class="logo img-responsive" src="{{ theme.small_logo_url }}" alt="Logo" />
  219 + </a>
  220 + </div>
  221 + <div class="col-sm-4 col-xs-4">
  222 + <button type="submit" class="btn btn-primary navbar-toggle pull-right" id="btn-search" data-toggle="collapse" data-target=".search-responsive-collapse">
  223 + <i class="fa fa-search" aria-hidden="true"></i>
  224 + </button>
  225 + </div>
  226 + </div>
  227 +
  228 + <div class="search-responsive-collapse collapse navbar">
  229 + <div class="col-md-7 col-md-offset-1 col-sm-6 col-sm-offset-1 col-lg-7 col-lg-offset-1 text-center">
  230 + <form id="SearchForm" action="{% url 'subjects:search' %}" method="get" accept-charset="utf-8" class="navbar-form">
  231 + <div class="input-group">
  232 + <div class="form-group is-empty" >
  233 + <input type="text" class="form-control top-search" placeholder="{% trans 'Search for subjects and resources' %}" name="search">
  234 + </div>
  235 + <span class="input-group-btn input-group-sm">
  236 + <button type="submit" class="btn btn-primary" id="btn-search">
  237 + <i class="fa fa-search" aria-hidden="true"></i>
  238 + </button>
  239 + </span>
  240 + </div>
  241 + </form>
  242 + </div>
  243 + </div>
  244 +
  245 +
  246 + <div class="navbar-collapse collapse navbar-responsive-collapse">
  247 +
  248 + <ul class="nav navbar-nav navbar-right notifications">
  249 + <li class="dropdown language-selector-on-header" title data-original-title="{% trans 'Language Selector' %}" style="width:40px;">
  250 + <a href="#" class="dropdown-toggle title" data-toggle="dropdown" data-close-others="true">
  251 + <i class="fa fa-cog hidden-xs" aria-hidden="true"></i>
  252 + <span class="visible-xs-inline">{% trans 'Language Selector' %}</span>
  253 + {% with 'img/'|add:LANGUAGE_CODE|add:'.png' as image_static %}
  254 + <img src="{% static image_static %}" />
  255 + {% endwith %}
  256 + </a>
  257 + <a href="#" class="dropdown-toggle no-title" data-toggle="dropdown" style="padding-left:0px;padding-right:0px;font-size:14px;text-align:center" data-close-others="true">
  258 + <span>[{{LANGUAGE_CODE}}]</span>
  259 + </a>
  260 + <ul class="dropdown-menu">
  261 + {% get_available_languages as LANGUAGES %}
  262 + {% get_language_info_list for LANGUAGES as languages %}
  263 + {% for language in languages %}
  264 + <li {% if language.code == LANGUAGE_CODE %}class="active"{% endif %}>
  265 + <a class="language-item" value-lang="{{language.code}}">
  266 + <span>{{language.code}}</span>
  267 + </a>
  268 + </li>
  269 + {% endfor %}
  270 + </ul>
  271 + </li>
  272 + <li style="width:40px;">
  273 + <a href="{% url 'themes:contrast' %}" id="contrast_button">
  274 + <i style="font-size:15px;right: 150%;" class="glyphicon glyphicon-adjust"></i>
  275 + </a>
  276 + </li>
  277 + <li id="profile-menu" class="dropdown" data-toggle="tooltip" data-placement="bottom" title data-original-title="{{ user }}">
  278 + <a href="" data-toggle="dropdown" class="dropdown-toggle profile">
  279 + <img src="{{ user.image_url }}" class="hidden-xs" style="width:50px;height:50px" />
  280 + <span class="visible-xs-inline">{{ user }}</span>
  281 + </a>
  282 + <ul class="dropdown-menu" role="menu">
  283 + <li><a href="{% url 'users:profile' %}">{% trans 'Profile' %}</a></li>
  284 + <li><a href="{% url 'users:edit_profile' %}">{% trans 'Edit Profile' %}</a></li>
  285 + <li><a href="{% url 'users:change_pass' %}">{% trans 'Change Password' %}</a></li>
  286 + <li><a href="javascript:delete_subject.get('{% url 'users:remove_acc' %}','#remove_account','#remove_acc')">{% trans 'Delete Account' %}</a></li>
  287 + <li><a href="{% url 'users:logout' %}">{% trans 'Logout' %}</a></li>
  288 + </ul>
  289 + </li>
  290 +
  291 + {% if user.is_staff %}
  292 + <li id="staff-menu" style="width:40px;" class="dropdown {{ settings_menu_active }}" title data-original-title="{% trans 'settings' %}">
  293 + <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  294 + <i class="fa fa-cog hidden-xs" style="position:relative;right:150%;"aria-hidden="true"></i>
  295 + <span class="visible-xs-inline">{% trans 'Settings' %}</span>
  296 + </a>
  297 + <ul class="dropdown-menu" role="menu">
  298 + <li><a href="{% url 'users:manage' %}">{% trans 'Manage Users' %}</a></li>
  299 + <li><a href="{% url 'categories:index' %}">{% trans 'Manage Categories' %}</a></li>
  300 + <li><a href="{% url 'news:manage_news' %}">{% trans 'Manage News' %}</a></li>
  301 + <li class="dropdown-accordion" data-accordion="#system_accordion">
  302 + <div class="panel-group" id="system_accordion">
  303 + <div class="panel panel-default">
  304 + <div class="panel-heading">
  305 + <a href="#system_menu" data-toggle="collapse" data-parent="#system_accordion">
  306 + <h4 class="panel-title">
  307 + {% trans 'System' %}
  308 + </h4>
  309 + </a>
  310 + </div>
  311 + <div class="panel-collapse collapse" id="system_menu">
  312 + <div class="panel-body">
  313 + <ul class="submenu">
  314 + <li><a href="{% url 'mailsender:update' %}">{% trans 'Mail Sender' %}</a></li>
  315 + <li><a href="{% url 'security:update' %}">{% trans 'Security' %}</a></li>
  316 + <li><a href="{% url 'themes:manage' %}">{% trans 'Theme' %}</a></li>
  317 + <li><a href="{% url 'webconferences:settings' %}">{% trans 'Web Conference' %}</a></li>
  318 + </ul>
  319 + </div>
  320 + </div>
  321 + </div>
  322 + </div>
  323 + </li>
  324 + </ul>
  325 + </li>
  326 + {% endif %}
  327 + </ul>
  328 + </div>
  329 + </div>
  330 +
  331 +
207 332 <script type="text/javascript">
208 333 $("#contrast_button" ).click(function() {
209 334 if (Cookies.get('contrast_check')) {
... ...