Commit 87b04868 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

Create Aside js class for handling all sidebars in UI for mobile devices

parent 52902f54
...@@ -176,9 +176,6 @@ gem 'ace-rails-ap' ...@@ -176,9 +176,6 @@ gem 'ace-rails-ap'
# Keyboard shortcuts # Keyboard shortcuts
gem 'mousetrap-rails' gem 'mousetrap-rails'
# Semantic UI Sass for Sidebar
gem 'semantic-ui-sass', '~> 1.8.0'
gem "sass-rails", '~> 4.0.2' gem "sass-rails", '~> 4.0.2'
gem "coffee-rails" gem "coffee-rails"
gem "uglifier" gem "uglifier"
......
...@@ -513,8 +513,6 @@ GEM ...@@ -513,8 +513,6 @@ GEM
activesupport (>= 3.1, < 4.2) activesupport (>= 3.1, < 4.2)
select2-rails (3.5.2) select2-rails (3.5.2)
thor (~> 0.14) thor (~> 0.14)
semantic-ui-sass (1.8.0.0)
sass (~> 3.2)
settingslogic (2.0.9) settingslogic (2.0.9)
shoulda-matchers (2.7.0) shoulda-matchers (2.7.0)
activesupport (>= 3.0.0) activesupport (>= 3.0.0)
...@@ -740,7 +738,6 @@ DEPENDENCIES ...@@ -740,7 +738,6 @@ DEPENDENCIES
sdoc sdoc
seed-fu seed-fu
select2-rails select2-rails
semantic-ui-sass (~> 1.8.0)
settingslogic settingslogic
shoulda-matchers (~> 2.7.0) shoulda-matchers (~> 2.7.0)
sidekiq (~> 3.3) sidekiq (~> 3.3)
......
...@@ -32,7 +32,6 @@ ...@@ -32,7 +32,6 @@
#= require nprogress #= require nprogress
#= require nprogress-turbolinks #= require nprogress-turbolinks
#= require dropzone #= require dropzone
#= require semantic-ui/sidebar
#= require mousetrap #= require mousetrap
#= require mousetrap/pause #= require mousetrap/pause
#= require shortcuts #= require shortcuts
...@@ -115,7 +114,6 @@ if location.hash ...@@ -115,7 +114,6 @@ if location.hash
window.addEventListener "hashchange", shiftWindow window.addEventListener "hashchange", shiftWindow
$ -> $ ->
# Click a .one_click_select field, select the contents # Click a .one_click_select field, select the contents
$(".one_click_select").on 'click', -> $(@).select() $(".one_click_select").on 'click', -> $(@).select()
...@@ -183,6 +181,8 @@ $ -> ...@@ -183,6 +181,8 @@ $ ->
form = btn.closest("form") form = btn.closest("form")
new ConfirmDangerModal(form, text) new ConfirmDangerModal(form, text)
new Aside()
(($) -> (($) ->
# Disable an element and add the 'disabled' Bootstrap class # Disable an element and add the 'disabled' Bootstrap class
$.fn.extend disable: -> $.fn.extend disable: ->
......
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')
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) -> $(document).on("click", '.toggle-nav-collapse', (e) ->
e.preventDefault() e.preventDefault()
collapsed = 'page-sidebar-collapsed' collapsed = 'page-sidebar-collapsed'
......
...@@ -55,8 +55,3 @@ ...@@ -55,8 +55,3 @@
* Styles for JS behaviors. * Styles for JS behaviors.
*/ */
@import "behaviors.scss"; @import "behaviors.scss";
/**
* Styles for responsive sidebar
*/
@import "semantic-ui/modules/sidebar";
...@@ -50,4 +50,24 @@ ...@@ -50,4 +50,24 @@
.issue_edited_ago, .note_edited_ago { .issue_edited_ago, .note_edited_ago {
display: none; 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);
} }
.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 @@ ...@@ -2,11 +2,10 @@
.dashboard.row .dashboard.row
%section.activities.col-md-8 %section.activities.col-md-8
= render 'activities' = render 'activities'
%aside.side.col-md-4.left.responsive-side %aside.col-md-4
= render 'sidebar' = render 'sidebar'
= link_to '#aside', class: 'show-aside' do
.fixed.sidebar-expand-button.hidden-lg.hidden-md %i.fa.fa-angle-left
%i.fa.fa-list.fa-2x
- else - else
= render "zero_authorized_projects" = render "zero_authorized_projects"
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
= escaped_autolink(@group.description) = escaped_autolink(@group.description)
%hr %hr
.row .row
%section.activities.col-md-8.hidden-sm.hidden-xs %section.activities.col-md-8
- if current_user - if current_user
= render "events/event_last_push", event: @last_push = render "events/event_last_push", event: @last_push
= render 'shared/event_filter' = render 'shared/event_filter'
...@@ -17,3 +17,5 @@ ...@@ -17,3 +17,5 @@
= spinner = spinner
%aside.side.col-md-4 %aside.side.col-md-4
= render "projects", projects: @projects = render "projects", projects: @projects
= link_to '#aside', class: 'show-aside' do
%i.fa.fa-angle-left
...@@ -5,14 +5,14 @@ ...@@ -5,14 +5,14 @@
- else - 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" = 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 .row
.col-md-9 %section.col-md-9
.participants .participants
%span= pluralize(@issue.participants.count, 'participant') %span= pluralize(@issue.participants.count, 'participant')
- @issue.participants.each do |participant| - @issue.participants.each do |participant|
= link_to_member(@project, participant, name: false, size: 24) = link_to_member(@project, participant, name: false, size: 24)
.voting_notes#notes= render "projects/notes/notes_with_form" .voting_notes#notes= render "projects/notes/notes_with_form"
.col-md-3 %aside.col-md-3
.issuable-affix .issuable-affix
.clearfix .clearfix
%span.slead.has_tooltip{:"data-original-title" => 'Cross-project reference'} %span.slead.has_tooltip{:"data-original-title" => 'Cross-project reference'}
...@@ -33,3 +33,5 @@ ...@@ -33,3 +33,5 @@
- @issue.labels.each do |label| - @issue.labels.each do |label|
= link_to project_issues_path(@project, label_name: label.name) do = link_to project_issues_path(@project, label_name: label.name) do
= render_colored_label(label) = render_colored_label(label)
= link_to '#aside', class: 'show-aside' do
%i.fa.fa-angle-left
...@@ -6,10 +6,10 @@ ...@@ -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" = 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 .row
.col-md-9 %section.col-md-9
= render "projects/merge_requests/show/participants" = render "projects/merge_requests/show/participants"
= render "projects/notes/notes_with_form" = render "projects/notes/notes_with_form"
.col-md-3 %aside.col-md-3
.issuable-affix .issuable-affix
.clearfix .clearfix
%span.slead.has_tooltip{:"data-original-title" => 'Cross-project reference'} %span.slead.has_tooltip{:"data-original-title" => 'Cross-project reference'}
...@@ -29,3 +29,5 @@ ...@@ -29,3 +29,5 @@
- @merge_request.labels.each do |label| - @merge_request.labels.each do |label|
= link_to project_merge_requests_path(@project, label_name: label.name) do = link_to project_merge_requests_path(@project, label_name: label.name) do
= render_colored_label(label) = render_colored_label(label)
= link_to '#aside', class: 'show-aside' do
%i.fa.fa-angle-left
...@@ -23,12 +23,14 @@ ...@@ -23,12 +23,14 @@
.tab-content .tab-content
.tab-pane.active#tab-activity .tab-pane.active#tab-activity
.row .row
= link_to '#aside', class: 'show-aside' do
%i.fa.fa-angle-left
%section.col-md-9 %section.col-md-9
= render "events/event_last_push", event: @last_push = render "events/event_last_push", event: @last_push
= render 'shared/event_filter' = render 'shared/event_filter'
.content_list .content_list
= spinner = spinner
%aside.col-md-3.project-side.hidden-sm.hidden-xs %aside.col-md-3.project-side
.clearfix .clearfix
- if @project.archived? - if @project.archived?
.alert.alert-warning .alert.alert-warning
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment