1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-08-31 14:42:10 +00:00

Merge pull request #1491 from haiwen/mobile-side-nav

[mobile] side nav: modified for sysadmin-backbone pages & all non-bac…
This commit is contained in:
Daniel Pan
2017-02-17 22:55:12 +08:00
committed by GitHub
10 changed files with 57 additions and 3 deletions

View File

@@ -7,6 +7,7 @@
{% block main_content %}
<div class="row">
<div class="side-tabnav side-nav col-md-3">
<a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
{% block left_panel %}
<div class="hd w100 ovhd">
<h3>

View File

@@ -4,6 +4,7 @@
{% block main_content %}
<div class="row">
<div class="side-textnav col-md-3 side-nav">
<a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
<h3 class="hd">{% trans "Desktop Client and Syncing" %}</h3>
<ul class="side-textnav-tabs">
<li class="tab"><a href="{{ SITE_ROOT }}help/install/">{% trans "Install and sync Files" %}</a></li>

View File

@@ -8,6 +8,7 @@
{% block main_content %}
<div class="row">
<div class="side-nav side-tabnav col-md-3">
<a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
{% block left_panel %}
<h3 class="hd">{{ request.user.institution.name }}</h3>
<ul class="side-tabnav-tabs">

View File

@@ -8,6 +8,7 @@
<div class="row">
<div class="side-nav side-textnav col-md-3" id="side-nav" role="navigation">
<a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
<ul class="side-textnav-tabs">
<li class="tab"><a href="#user-basic-info">{% trans "Profile" %}</a></li>
<li class="tab"><a href="#lang-setting">{% trans "Language" %}</a></li>

View File

@@ -42,6 +42,7 @@
<img src="{{ MEDIA_URL }}{{ logo_path }}" title="Seafile" alt="logo" width="{{logo_width}}" height="{{logo_height}}" />
{% endif %}
</a>
<button class="sf2-icon-list-view side-nav-toggle hidden-md-up hide" title="{% trans "Side Nav Menu" %}" id="js-toggle-side-nav" aria-label="{% trans "Side Nav Menu" %}"></button>
{% block header_right %}
{% if request.user.is_authenticated %}
@@ -196,6 +197,19 @@ $('#info-bar .close').click(function() {
});
})();
{% endif %}
if ($('.side-nav').length) {
$('#logo').addClass('hidden-sm-down');
$('#js-toggle-side-nav').removeClass('hide');
}
$('#js-toggle-side-nav').click(function() {
$('.side-nav').css({'left': 0});
return false;
});
$('.js-close-side-nav').click(function() {
$('.side-nav').css({'left': '-300px'});
return false;
});
</script>
{% block extra_script %}{% endblock %}
</body>

View File

@@ -4,6 +4,7 @@
{% block main_content %}
<div class="row">
<div id="side-nav" class="side-nav side-tabnav col-md-3" >
<a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
{% block left_panel %}
<h3 class="hd">{% trans "Files" %}</h3>
<ul class="side-tabnav-tabs">

View File

@@ -1,6 +1,7 @@
{% load avatar_tags i18n %}
<script type="text/template" id="side-nav-tmpl">
<a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
<h3 class="hd">{% trans "System Admin" %}</h3>
<ul class="side-tabnav-tabs">
<li class="tab<% if (cur_tab == 'dashboard') { %> tab-cur<% } %>">

View File

@@ -8,6 +8,7 @@
{% block main_content %}
<div class="row">
<div id="side-nav" class="side-nav side-tabnav col-md-3">
<a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
{% block left_panel %}
<h3 class="hd">{% trans "System Admin" %}</h3>
<ul class="side-tabnav-tabs">

View File

@@ -37,13 +37,14 @@
<div id="header" role="banner" class="navbar navbar-fixed-top">
<div id="header-inner">
{% block notice_panel %}{% endblock %}
<a href="{{ SITE_ROOT }}" id="logo" class="fleft">
<a href="{{ SITE_ROOT }}" id="logo" class="hidden-sm-down fleft">
{% if seacloud_mode %}
<img src="{{ MEDIA_URL }}img/seacloud_logo.png?t=1398068110" title="Seacloud" alt="logo" width="186" height="31" />
{% else %}
<img src="{{ MEDIA_URL }}{{ logo_path }}" title="Seafile" alt="logo" width="{{logo_width}}" height="{{logo_height}}" />
{% endif %}
</a>
<button class="sf2-icon-list-view side-nav-toggle hidden-md-up" title="{% trans "Side Nav Menu" %}" id="js-toggle-side-nav" aria-label="{% trans "Side Nav Menu" %}"></button>
<div id="account" class="fright">
<a id="my-info" href="#" class="no-deco" aria-label="{% trans "View profile and more" %}">
@@ -55,7 +56,7 @@
<div id="main" class="clear container-fluid top-padding">
<div class="row">
<div class="side-nav side-tabnav col-md-3 hide" id="side-nav" role="navigation"></div>
<div class="side-nav side-tabnav col-md-3" id="side-nav" role="navigation"></div>
<div id="right-panel" class="col-md-9 col-md-offset-3">
{% block right_panel %}{% endblock %}
</div>

View File

@@ -17,7 +17,17 @@ define([
'cur_tab': this.default_cur_tab
};
this.render();
this.$el.show();
var _this = this;
$('#js-toggle-side-nav').click(function() {
_this.show();
return false;
});
$(window).resize(function() {
if ($(window).width() >= 768) {
_this.show();
}
});
},
render: function() {
@@ -33,12 +43,34 @@ define([
this.render();
},
show: function() {
this.$el.css({ 'left':'0px' });
},
hide: function() {
this.$el.css({ 'left':'-300px' });
},
events: {
'click .js-close-side-nav': 'closeNav',
'click li a': 'visitLink',
'submit #libs-search-form': 'searchLibs', // for 'all' libs
'submit #trash-libs-search-form': 'searchTrashLibs',
'submit #groups-search-form': 'searchGroups'
},
closeNav: function() {
this.hide();
return false;
},
visitLink: function(e) {
if ($(window).width() < 768) {
this.hide();
}
return true;
},
// search libs by repo_name
searchLibs: function() {
var $form = this.$('#libs-search-form');