Create Aside js class for handling all sidebars in UI for mobile devices
This commit is contained in:
Dmitriy Zaporozhets
parent
52902f5434
commit
87b04868a1
13 changed files with 56 additions and 96 deletions
3
Gemfile
3
Gemfile
|
|
@ -176,9 +176,6 @@ gem 'ace-rails-ap'
|
|||
# Keyboard shortcuts
|
||||
gem 'mousetrap-rails'
|
||||
|
||||
# Semantic UI Sass for Sidebar
|
||||
gem 'semantic-ui-sass', '~> 1.8.0'
|
||||
|
||||
gem "sass-rails", '~> 4.0.2'
|
||||
gem "coffee-rails"
|
||||
gem "uglifier"
|
||||
|
|
|
|||
|
|
@ -513,8 +513,6 @@ GEM
|
|||
activesupport (>= 3.1, < 4.2)
|
||||
select2-rails (3.5.2)
|
||||
thor (~> 0.14)
|
||||
semantic-ui-sass (1.8.0.0)
|
||||
sass (~> 3.2)
|
||||
settingslogic (2.0.9)
|
||||
shoulda-matchers (2.7.0)
|
||||
activesupport (>= 3.0.0)
|
||||
|
|
@ -740,7 +738,6 @@ DEPENDENCIES
|
|||
sdoc
|
||||
seed-fu
|
||||
select2-rails
|
||||
semantic-ui-sass (~> 1.8.0)
|
||||
settingslogic
|
||||
shoulda-matchers (~> 2.7.0)
|
||||
sidekiq (~> 3.3)
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@
|
|||
#= require nprogress
|
||||
#= require nprogress-turbolinks
|
||||
#= require dropzone
|
||||
#= require semantic-ui/sidebar
|
||||
#= require mousetrap
|
||||
#= require mousetrap/pause
|
||||
#= require shortcuts
|
||||
|
|
@ -115,7 +114,6 @@ if location.hash
|
|||
window.addEventListener "hashchange", shiftWindow
|
||||
|
||||
$ ->
|
||||
|
||||
# Click a .one_click_select field, select the contents
|
||||
$(".one_click_select").on 'click', -> $(@).select()
|
||||
|
||||
|
|
@ -183,6 +181,8 @@ $ ->
|
|||
form = btn.closest("form")
|
||||
new ConfirmDangerModal(form, text)
|
||||
|
||||
new Aside()
|
||||
|
||||
(($) ->
|
||||
# Disable an element and add the 'disabled' Bootstrap class
|
||||
$.fn.extend disable: ->
|
||||
|
|
|
|||
17
app/assets/javascripts/aside.js.coffee
Normal file
17
app/assets/javascripts/aside.js.coffee
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
class @Aside
|
||||
constructor: ->
|
||||
$(document).off "click", "a.show-aside"
|
||||
$(document).on "click", 'a.show-aside', (e) ->
|
||||
e.preventDefault()
|
||||
btn = $(e.currentTarget)
|
||||
icon = btn.find('i')
|
||||
console.log('1')
|
||||
|
||||
if icon.hasClass('fa-angle-left')
|
||||
btn.parent().find('section').hide()
|
||||
btn.parent().find('aside').fadeIn()
|
||||
icon.removeClass('fa-angle-left').addClass('fa-angle-right')
|
||||
else
|
||||
btn.parent().find('aside').hide()
|
||||
btn.parent().find('section').fadeIn()
|
||||
icon.removeClass('fa-angle-right').addClass('fa-angle-left')
|
||||
|
|
@ -1,30 +1,3 @@
|
|||
responsive_resize = ->
|
||||
current_width = $(window).width()
|
||||
if current_width < 985
|
||||
$('.responsive-side').addClass("ui right wide sidebar")
|
||||
else
|
||||
$('.responsive-side').removeClass("ui right wide sidebar")
|
||||
|
||||
$ ->
|
||||
# Depending on window size, set the sidebar offscreen.
|
||||
responsive_resize()
|
||||
|
||||
$('.sidebar-expand-button').click ->
|
||||
$('.ui.sidebar')
|
||||
.sidebar({overlay: true})
|
||||
.sidebar('toggle')
|
||||
|
||||
# Hide sidebar on click outside of sidebar
|
||||
$(document).mouseup (e) ->
|
||||
container = $(".ui.sidebar")
|
||||
container.sidebar "hide" if not container.is(e.target) and container.has(e.target).length is 0
|
||||
return
|
||||
|
||||
# On resize, check if sidebar should be offscreen.
|
||||
$(window).resize ->
|
||||
responsive_resize()
|
||||
return
|
||||
|
||||
$(document).on("click", '.toggle-nav-collapse', (e) ->
|
||||
e.preventDefault()
|
||||
collapsed = 'page-sidebar-collapsed'
|
||||
|
|
|
|||
|
|
@ -55,8 +55,3 @@
|
|||
* Styles for JS behaviors.
|
||||
*/
|
||||
@import "behaviors.scss";
|
||||
|
||||
/**
|
||||
* Styles for responsive sidebar
|
||||
*/
|
||||
@import "semantic-ui/modules/sidebar";
|
||||
|
|
|
|||
|
|
@ -50,4 +50,24 @@
|
|||
.issue_edited_ago, .note_edited_ago {
|
||||
display: none;
|
||||
}
|
||||
|
||||
aside {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show-aside {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.show-aside {
|
||||
display: none;
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
top: 30%;
|
||||
padding: 5px 15px;
|
||||
background: #EEE;
|
||||
font-size: 20px;
|
||||
color: #777;
|
||||
@include box-shadow(0 1px 2px #DDD);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,46 +0,0 @@
|
|||
.ui.sidebar {
|
||||
z-index: 1000 !important;
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
width: 285px;
|
||||
}
|
||||
|
||||
.ui.right.sidebar {
|
||||
border-left: 1px solid #e1e1e1;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.sidebar-expand-button {
|
||||
cursor: pointer;
|
||||
transition: all 0.4s;
|
||||
-moz-transition: all 0.4s;
|
||||
-webkit-transition: all 0.4s;
|
||||
}
|
||||
|
||||
.fixed.sidebar-expand-button {
|
||||
background: #f9f9f9;
|
||||
color: #555;
|
||||
padding: 9px 12px 6px 14px;
|
||||
border: 1px solid #E1E1E1;
|
||||
border-right: 0;
|
||||
position: fixed;
|
||||
top: 108px;
|
||||
right: 0px;
|
||||
margin-right: 0;
|
||||
&:hover {
|
||||
background: #ddd;
|
||||
color: #333;
|
||||
padding-right: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-default.sidebar-expand-button {
|
||||
margin-left: 12px;
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
@media (min-width: 767px) {
|
||||
.btn.btn-default.sidebar-expand-button {
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,11 +2,10 @@
|
|||
.dashboard.row
|
||||
%section.activities.col-md-8
|
||||
= render 'activities'
|
||||
%aside.side.col-md-4.left.responsive-side
|
||||
%aside.col-md-4
|
||||
= render 'sidebar'
|
||||
|
||||
.fixed.sidebar-expand-button.hidden-lg.hidden-md
|
||||
%i.fa.fa-list.fa-2x
|
||||
= link_to '#aside', class: 'show-aside' do
|
||||
%i.fa.fa-angle-left
|
||||
|
||||
- else
|
||||
= render "zero_authorized_projects"
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
= escaped_autolink(@group.description)
|
||||
%hr
|
||||
.row
|
||||
%section.activities.col-md-8.hidden-sm.hidden-xs
|
||||
%section.activities.col-md-8
|
||||
- if current_user
|
||||
= render "events/event_last_push", event: @last_push
|
||||
= render 'shared/event_filter'
|
||||
|
|
@ -17,3 +17,5 @@
|
|||
= spinner
|
||||
%aside.side.col-md-4
|
||||
= render "projects", projects: @projects
|
||||
= link_to '#aside', class: 'show-aside' do
|
||||
%i.fa.fa-angle-left
|
||||
|
|
|
|||
|
|
@ -5,14 +5,14 @@
|
|||
- else
|
||||
= link_to 'Close Issue', project_issue_path(@project, @issue, issue: {state_event: :close }, status_only: true), method: :put, class: "btn btn-grouped btn-close js-note-target-close", title: "Close Issue"
|
||||
.row
|
||||
.col-md-9
|
||||
%section.col-md-9
|
||||
.participants
|
||||
%span= pluralize(@issue.participants.count, 'participant')
|
||||
- @issue.participants.each do |participant|
|
||||
= link_to_member(@project, participant, name: false, size: 24)
|
||||
|
||||
.voting_notes#notes= render "projects/notes/notes_with_form"
|
||||
.col-md-3
|
||||
%aside.col-md-3
|
||||
.issuable-affix
|
||||
.clearfix
|
||||
%span.slead.has_tooltip{:"data-original-title" => 'Cross-project reference'}
|
||||
|
|
@ -33,3 +33,5 @@
|
|||
- @issue.labels.each do |label|
|
||||
= link_to project_issues_path(@project, label_name: label.name) do
|
||||
= render_colored_label(label)
|
||||
= link_to '#aside', class: 'show-aside' do
|
||||
%i.fa.fa-angle-left
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@
|
|||
= link_to 'Reopen', project_merge_request_path(@project, @merge_request, merge_request: {state_event: :reopen }), method: :put, class: "btn btn-grouped btn-reopen reopen-mr-link js-note-target-reopen", title: "Reopen merge request"
|
||||
|
||||
.row
|
||||
.col-md-9
|
||||
%section.col-md-9
|
||||
= render "projects/merge_requests/show/participants"
|
||||
= render "projects/notes/notes_with_form"
|
||||
.col-md-3
|
||||
%aside.col-md-3
|
||||
.issuable-affix
|
||||
.clearfix
|
||||
%span.slead.has_tooltip{:"data-original-title" => 'Cross-project reference'}
|
||||
|
|
@ -29,3 +29,5 @@
|
|||
- @merge_request.labels.each do |label|
|
||||
= link_to project_merge_requests_path(@project, label_name: label.name) do
|
||||
= render_colored_label(label)
|
||||
= link_to '#aside', class: 'show-aside' do
|
||||
%i.fa.fa-angle-left
|
||||
|
|
|
|||
|
|
@ -23,12 +23,14 @@
|
|||
.tab-content
|
||||
.tab-pane.active#tab-activity
|
||||
.row
|
||||
= link_to '#aside', class: 'show-aside' do
|
||||
%i.fa.fa-angle-left
|
||||
%section.col-md-9
|
||||
= render "events/event_last_push", event: @last_push
|
||||
= render 'shared/event_filter'
|
||||
.content_list
|
||||
= spinner
|
||||
%aside.col-md-3.project-side.hidden-sm.hidden-xs
|
||||
%aside.col-md-3.project-side
|
||||
.clearfix
|
||||
- if @project.archived?
|
||||
.alert.alert-warning
|
||||
|
|
|
|||
Loading…
Reference in a new issue