mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-10-06 03:46:39 +08:00
Adding custom scrollbar to global activities [SCI-3206] (#1623)
* Adding custom scrollbar to global activities
This commit is contained in:
parent
5443bfcbd1
commit
daaa6a367b
13 changed files with 266 additions and 53 deletions
|
@ -37,6 +37,7 @@
|
||||||
//= require i18n/translations
|
//= require i18n/translations
|
||||||
//= require users/settings/teams/invite_users_modal
|
//= require users/settings/teams/invite_users_modal
|
||||||
//= require select2.min
|
//= require select2.min
|
||||||
|
//= require perfect-scrollbar.min
|
||||||
//= require select2_customization
|
//= require select2_customization
|
||||||
//= require turbolinks
|
//= require turbolinks
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
/* global animateSpinner I18n */
|
/* global animateSpinner I18n PerfectSb */
|
||||||
|
|
||||||
// Common code
|
// Common code
|
||||||
|
|
||||||
|
@ -122,6 +122,7 @@ $(function() {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
PerfectSb().update_all();
|
||||||
}
|
}
|
||||||
|
|
||||||
// update_filter
|
// update_filter
|
||||||
|
@ -152,6 +153,7 @@ $(function() {
|
||||||
}
|
}
|
||||||
updateRunning = false;
|
updateRunning = false;
|
||||||
animateSpinner(null, false);
|
animateSpinner(null, false);
|
||||||
|
PerfectSb().update_all();
|
||||||
},
|
},
|
||||||
error: function() {
|
error: function() {
|
||||||
updateRunning = false;
|
updateRunning = false;
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
|
/* global PerfectScrollbar */
|
||||||
$.fn.extend({
|
$.fn.extend({
|
||||||
select2Multiple: function(config = {}) {
|
select2Multiple: function(config = {}) {
|
||||||
if (this.length === 0) return this;
|
if (this.length === 0) return this;
|
||||||
|
@ -33,8 +33,8 @@ $.fn.extend({
|
||||||
// Add dynamic size
|
// Add dynamic size
|
||||||
select2.next().css('width', '100%');
|
select2.next().css('width', '100%');
|
||||||
|
|
||||||
//Placeholder fix for ajax fields
|
// Placeholder fix for ajax fields
|
||||||
if (config.ajax){
|
if (config.ajax) {
|
||||||
select2.next().find('.select2-search__field').css('min-width', '150px');
|
select2.next().find('.select2-search__field').css('min-width', '150px');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -65,9 +65,14 @@ $.fn.extend({
|
||||||
var groups;
|
var groups;
|
||||||
var groupChildrens;
|
var groupChildrens;
|
||||||
var leftPosition = -310;
|
var leftPosition = -310;
|
||||||
|
var perfectScroll = new PerfectScrollbar($('.select2-results__options')[0], { wheelSpeed: 0.5 });
|
||||||
|
setTimeout(() => {
|
||||||
|
perfectScroll.update();
|
||||||
|
}, 300);
|
||||||
$('.select2-dropdown').removeClass('custom-group');
|
$('.select2-dropdown').removeClass('custom-group');
|
||||||
$('.select2-selection').scrollTo(0);
|
$('.select2-selection').scrollTo(0);
|
||||||
$('.select2_select_all').remove();
|
$('.select2_select_all').remove();
|
||||||
|
|
||||||
// Adding select_all_button
|
// Adding select_all_button
|
||||||
if (selectElement.dataset.selectAllButton !== undefined) {
|
if (selectElement.dataset.selectAllButton !== undefined) {
|
||||||
$('<div class="select2_select_all btn btn-default"><strong>' + selectElement.dataset.selectAllButton + '</strong></div>').prependTo('.select2-dropdown').on('click', function() {
|
$('<div class="select2_select_all btn btn-default"><strong>' + selectElement.dataset.selectAllButton + '</strong></div>').prependTo('.select2-dropdown').on('click', function() {
|
||||||
|
|
22
app/assets/javascripts/sitewide/perfect_scrollbar.js
Normal file
22
app/assets/javascripts/sitewide/perfect_scrollbar.js
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
/* global PerfectScrollbar */
|
||||||
|
var PerfectSb = (function() {
|
||||||
|
(function() {
|
||||||
|
$(document).on('turbolinks:load', function() {
|
||||||
|
$.each($('.perfect-scrollbar'), function(index, object) {
|
||||||
|
var ps = new PerfectScrollbar(object, { wheelSpeed: 0.5 });
|
||||||
|
$(object).bind('update_scroll', () => {
|
||||||
|
ps.update();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
|
||||||
|
return Object.freeze({
|
||||||
|
update_all: function() {
|
||||||
|
$.each($('.perfect-scrollbar'), function(index, object) {
|
||||||
|
$(object).trigger('update_scroll');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
PerfectSb();
|
|
@ -21,3 +21,4 @@
|
||||||
@import "extend/bootstrap";
|
@import "extend/bootstrap";
|
||||||
@import "themes/scinote";
|
@import "themes/scinote";
|
||||||
@import "select2.min";
|
@import "select2.min";
|
||||||
|
@import "extend/perfect-scrollbar";
|
||||||
|
|
117
app/assets/stylesheets/extend/perfect-scrollbar.scss
Normal file
117
app/assets/stylesheets/extend/perfect-scrollbar.scss
Normal file
|
@ -0,0 +1,117 @@
|
||||||
|
// scss-lint:disable all
|
||||||
|
@import "constants";
|
||||||
|
|
||||||
|
.ps {
|
||||||
|
overflow: hidden !important;
|
||||||
|
overflow-anchor: none;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
touch-action: auto;
|
||||||
|
-ms-touch-action: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Scrollbar rail styles
|
||||||
|
*/
|
||||||
|
.ps__rail-x {
|
||||||
|
display: none;
|
||||||
|
opacity: 0;
|
||||||
|
transition: background-color .2s linear, opacity .2s linear;
|
||||||
|
-webkit-transition: background-color .2s linear, opacity .2s linear;
|
||||||
|
height: 16px;
|
||||||
|
/* there must be 'bottom' or 'top' for ps__rail-x */
|
||||||
|
bottom: 0px;
|
||||||
|
/* please don't change 'position' */
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps__rail-y {
|
||||||
|
display: none;
|
||||||
|
opacity: 0;
|
||||||
|
transition: background-color .2s linear, opacity .2s linear;
|
||||||
|
-webkit-transition: background-color .2s linear, opacity .2s linear;
|
||||||
|
width: 16px;
|
||||||
|
/* there must be 'right' or 'left' for ps__rail-y */
|
||||||
|
right: 0;
|
||||||
|
/* please don't change 'position' */
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps--active-x > .ps__rail-x,
|
||||||
|
.ps--active-y > .ps__rail-y {
|
||||||
|
display: block;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps:hover > .ps__rail-x,
|
||||||
|
.ps:hover > .ps__rail-y,
|
||||||
|
.ps--focus > .ps__rail-x,
|
||||||
|
.ps--focus > .ps__rail-y,
|
||||||
|
.ps--scrolling-x > .ps__rail-x,
|
||||||
|
.ps--scrolling-y > .ps__rail-y {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps .ps__rail-x:hover,
|
||||||
|
.ps .ps__rail-y:hover,
|
||||||
|
.ps .ps__rail-x:focus,
|
||||||
|
.ps .ps__rail-y:focus,
|
||||||
|
.ps .ps__rail-x.ps--clicking,
|
||||||
|
.ps .ps__rail-y.ps--clicking {
|
||||||
|
background-color: $color-gainsboro;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Scrollbar thumb styles
|
||||||
|
*/
|
||||||
|
.ps__thumb-x {
|
||||||
|
background-color: $color-silver-chalice;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background-color .2s linear, height .2s ease-in-out;
|
||||||
|
-webkit-transition: background-color .2s linear, height .2s ease-in-out;
|
||||||
|
height: 6px;
|
||||||
|
/* there must be 'bottom' for ps__thumb-x */
|
||||||
|
bottom: 2px;
|
||||||
|
/* please don't change 'position' */
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps__thumb-y {
|
||||||
|
background-color: $color-silver-chalice;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background-color .2s linear, width .2s ease-in-out;
|
||||||
|
-webkit-transition: background-color .2s linear, width .2s ease-in-out;
|
||||||
|
width: 4px;
|
||||||
|
/* there must be 'right' for ps__thumb-y */
|
||||||
|
right: 2px;
|
||||||
|
/* please don't change 'position' */
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps__rail-x:hover > .ps__thumb-x,
|
||||||
|
.ps__rail-x:focus > .ps__thumb-x,
|
||||||
|
.ps__rail-x.ps--clicking .ps__thumb-x {
|
||||||
|
background-color: $brand-primary;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps__rail-y:hover > .ps__thumb-y,
|
||||||
|
.ps__rail-y:focus > .ps__thumb-y,
|
||||||
|
.ps__rail-y.ps--clicking .ps__thumb-y {
|
||||||
|
background-color: $brand-primary;
|
||||||
|
width: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* MS supports */
|
||||||
|
@supports (-ms-overflow-style: none) {
|
||||||
|
.ps {
|
||||||
|
overflow: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||||
|
.ps {
|
||||||
|
overflow: auto !important;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,19 +1,38 @@
|
||||||
|
// scss-lint:disable SelectorDepth
|
||||||
|
// scss-lint:disable NestingDepth
|
||||||
|
|
||||||
@import "constants";
|
@import "constants";
|
||||||
@import "mixins";
|
@import "mixins";
|
||||||
|
|
||||||
.global-activities-container {
|
.global-activities-container {
|
||||||
background: $color-white;
|
background: $color-white;
|
||||||
|
height: calc(100vh - 89px);
|
||||||
margin-top: 2em;
|
margin-top: 2em;
|
||||||
padding: 1em;
|
padding: 0 15px;
|
||||||
|
|
||||||
|
&.task_activities {
|
||||||
|
height: calc(100vh - 126px);
|
||||||
|
}
|
||||||
|
|
||||||
|
> .row {
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
.ga-main {
|
.ga-main {
|
||||||
border-right: 1px solid $gray-lighter;
|
border-right: 1px solid $gray-lighter;
|
||||||
float: right;
|
float: right;
|
||||||
|
height: calc(100% - 160px);
|
||||||
|
overflow: hidden;
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&.task_activities {
|
||||||
|
height: calc(100% - 70px);
|
||||||
|
}
|
||||||
|
|
||||||
.ga-activities-list {
|
.ga-activities-list {
|
||||||
grid-area: activities;
|
grid-area: activities;
|
||||||
min-height: 600px;
|
|
||||||
|
|
||||||
.activities-day {
|
.activities-day {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
@ -22,7 +41,8 @@
|
||||||
max-width: 105px;
|
max-width: 105px;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
.date-activities{
|
|
||||||
|
.date-activities {
|
||||||
min-width: calc(100% - 105px);
|
min-width: calc(100% - 105px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -34,6 +54,7 @@
|
||||||
|
|
||||||
.activities-group {
|
.activities-group {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
margin-bottom: 0;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -46,10 +67,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.activities-group{
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.activity-card {
|
.activity-card {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
@ -77,6 +94,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-activities-message {
|
.no-activities-message {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
@ -84,16 +102,22 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.ga-side {
|
.ga-side {
|
||||||
|
|
||||||
float: right;
|
float: right;
|
||||||
|
height: calc(100% - 160px);
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&.task_activities {
|
||||||
|
height: calc(100% - 70px);
|
||||||
|
}
|
||||||
|
|
||||||
.filter-block {
|
.filter-block {
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 16px;
|
|
||||||
float: left;
|
float: left;
|
||||||
|
font-size: 16px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
width: calc(100% - 50px);
|
width: calc(100% - 50px);
|
||||||
|
@ -126,7 +150,7 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
float: left;
|
float: left;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
opacity: 0.7;
|
opacity: .7;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
width: calc(50% - 25px);
|
width: calc(50% - 25px);
|
||||||
|
|
||||||
|
@ -170,21 +194,27 @@
|
||||||
|
|
||||||
.ga-top {
|
.ga-top {
|
||||||
border-bottom: 1px solid $gray-lighter;
|
border-bottom: 1px solid $gray-lighter;
|
||||||
|
height: 160px;
|
||||||
|
|
||||||
|
&.task_activities {
|
||||||
|
height: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
.ga-title {
|
.ga-title {
|
||||||
border-bottom: 1px solid $color-gainsboro;
|
border-bottom: 1px solid $color-gainsboro;
|
||||||
left: -20px;
|
height: 35px;
|
||||||
margin-bottom: 10px;
|
left: -15px;
|
||||||
|
margin-bottom: 5px;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: calc(100% + 40px);
|
width: calc(100% + 30px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ga-top-actions {
|
.ga-top-actions {
|
||||||
float: left;
|
float: left;
|
||||||
line-height: 34px;
|
line-height: 20px;
|
||||||
margin: 5px;
|
margin: 5px 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
|
||||||
|
@ -210,7 +240,7 @@
|
||||||
|
|
||||||
.ga-tags-container {
|
.ga-tags-container {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 5px 0;
|
margin-top: 5px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.clear-container {
|
.clear-container {
|
||||||
|
@ -236,10 +266,11 @@
|
||||||
|
|
||||||
.ga-tags {
|
.ga-tags {
|
||||||
float: left;
|
float: left;
|
||||||
|
height: 64px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
min-height: 50px;
|
overflow: hidden;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
position: elative;
|
position: relative;
|
||||||
width: calc(100% - 100px);
|
width: calc(100% - 100px);
|
||||||
|
|
||||||
li {
|
li {
|
||||||
|
@ -268,8 +299,29 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1199px) {
|
@media (max-width: 1199px) {
|
||||||
|
.global-activities-container {
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
> .row {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ga-main {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ga-top {
|
||||||
|
|
||||||
|
.ga-tags {
|
||||||
|
height: auto;
|
||||||
|
min-height: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.ga-side {
|
.ga-side {
|
||||||
border-bottom: 1px solid $gray-lighter;
|
border-bottom: 1px solid $gray-lighter;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
.filter-block {
|
.filter-block {
|
||||||
|
|
||||||
|
@ -317,7 +369,7 @@
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
|
|
||||||
&::placeholder{
|
&::placeholder {
|
||||||
color: $color-silver-chalice;
|
color: $color-silver-chalice;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,8 @@
|
||||||
|
// scss-lint:disable SelectorDepth
|
||||||
|
// scss-lint:disable NestingDepth
|
||||||
|
// scss-lint:disable SelectorFormat
|
||||||
|
// scss-lint:disable ImportantRule
|
||||||
|
|
||||||
@import "constants";
|
@import "constants";
|
||||||
@import "mixins";
|
@import "mixins";
|
||||||
|
|
||||||
|
@ -13,12 +18,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-selection__rendered {
|
.select2-selection__rendered {
|
||||||
width: calc(100% - 26px)
|
width: calc(100% - 26px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-search__field {
|
.select2-search__field {
|
||||||
|
|
||||||
&::placeholder{
|
&::placeholder {
|
||||||
color: $color-silver-chalice;
|
color: $color-silver-chalice;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -39,19 +44,19 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: $color-white;
|
background: $color-white;
|
||||||
border: 1px solid $color-alto;
|
border: 1px solid $color-alto;
|
||||||
border-radius: 0px 4px 4px 0px;
|
border-radius: 0 4px 4px 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top :0;
|
top: 0;
|
||||||
width: 26px;
|
width: 26px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: $color-gainsboro;
|
background: $color-gainsboro;
|
||||||
border: 1px solid $color-silver-chalice;
|
border: 1px solid $color-silver-chalice;
|
||||||
}
|
}
|
||||||
|
|
||||||
.caret {
|
.caret {
|
||||||
|
@ -74,6 +79,10 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.select2-results__options {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
.select2-results__option[role="treeitem"] {
|
.select2-results__option[role="treeitem"] {
|
||||||
background: $color-white;
|
background: $color-white;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
|
@ -81,13 +90,13 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
|
content: "\f0c8";
|
||||||
|
font-family: "Font Awesome 5 Free";
|
||||||
|
font-weight: 400;
|
||||||
|
left: 0;
|
||||||
|
margin: 7px 0 0 12px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
|
||||||
margin: 7px 0px 0px 12px;
|
|
||||||
font-family: "Font Awesome 5 Free";
|
|
||||||
content: "\f0c8";
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.select2-results__option--highlighted {
|
&.select2-results__option--highlighted {
|
||||||
|
@ -116,9 +125,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.custom-group {
|
||||||
|
|
||||||
&.custom-group{
|
|
||||||
.select2-results__option[role="group"] {
|
.select2-results__option[role="group"] {
|
||||||
|
|
||||||
.select2-results__group {
|
.select2-results__group {
|
||||||
|
@ -127,13 +134,13 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
|
content: "\f0c8";
|
||||||
|
font-family: "Font Awesome 5 Free";
|
||||||
|
font-weight: 400;
|
||||||
|
left: 0;
|
||||||
|
margin: 7px 0 0 12px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
|
||||||
margin: 7px 0px 0px 12px;
|
|
||||||
font-family: "Font Awesome 5 Free";
|
|
||||||
content: "\f0c8";
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -168,12 +175,12 @@
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1200px) {
|
||||||
|
|
||||||
.select2-container--open.left-position {
|
.select2-container--open.left-position {
|
||||||
top: 60px !important;
|
|
||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
|
top: 60px !important;
|
||||||
z-index: 1500;
|
z-index: 1500;
|
||||||
|
|
||||||
.select2-dropdown {
|
.select2-dropdown {
|
||||||
border-radius: 0px;
|
border-radius: 0;
|
||||||
height: calc(100vh - 70px) !important;
|
height: calc(100vh - 70px) !important;
|
||||||
width: 300px !important;
|
width: 300px !important;
|
||||||
|
|
||||||
|
@ -183,6 +190,7 @@
|
||||||
|
|
||||||
.select2-results__options {
|
.select2-results__options {
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -10,8 +10,7 @@ class ActivitiesService
|
||||||
if filters[:subjects].present?
|
if filters[:subjects].present?
|
||||||
subjects_with_children = load_subjects_children(filters[:subjects])
|
subjects_with_children = load_subjects_children(filters[:subjects])
|
||||||
if subjects_with_children[:Project]
|
if subjects_with_children[:Project]
|
||||||
add_or = subjects_with_children.length > 1
|
query = query.where('project_id IN (?)', subjects_with_children[:Project])
|
||||||
query = query.where("project_id IN (?) #{add_or ? 'OR' : ''}", subjects_with_children[:Project])
|
|
||||||
subjects_with_children.except!(:Project)
|
subjects_with_children.except!(:Project)
|
||||||
end
|
end
|
||||||
query = query.where(
|
query = query.where(
|
||||||
|
|
|
@ -20,7 +20,7 @@
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!--</div>-->
|
<!--</div>-->
|
||||||
<div class="ga-tags-container">
|
<div class="ga-tags-container">
|
||||||
<ul class="ga-tags"></ul>
|
<ul class="ga-tags perfect-scrollbar"></ul>
|
||||||
<div class="clear-container">
|
<div class="clear-container">
|
||||||
<span>
|
<span>
|
||||||
<i class="fas fa-times"></i>
|
<i class="fas fa-times"></i>
|
||||||
|
|
|
@ -6,11 +6,11 @@
|
||||||
<%= render partial: "top_pane" %>
|
<%= render partial: "top_pane" %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ga-side col-lg-3 col-md-12 col-xl-2">
|
<div class="ga-side col-lg-3 col-md-12 col-xl-2 perfect-scrollbar">
|
||||||
<%= render partial: "side_filters" %>
|
<%= render partial: "side_filters" %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ga-main col-lg-9 col-md-12 col-xl-10">
|
<div class="ga-main col-lg-9 col-md-12 col-xl-10 perfect-scrollbar">
|
||||||
<div class="no-activities-message text-center <%= 'hidden' if @grouped_activities.keys.any? %>">
|
<div class="no-activities-message text-center <%= 'hidden' if @grouped_activities.keys.any? %>">
|
||||||
<p><%= t('activities.index.no_activities_message') %></p>
|
<p><%= t('activities.index.no_activities_message') %></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,17 +2,17 @@
|
||||||
<%= render partial: "shared/sidebar", locals: { current_task: @my_module, page: 'task' } %>
|
<%= render partial: "shared/sidebar", locals: { current_task: @my_module, page: 'task' } %>
|
||||||
<%= render partial: "shared/secondary_navigation" %>
|
<%= render partial: "shared/secondary_navigation" %>
|
||||||
|
|
||||||
<div class="global-activities-container container-flex">
|
<div class="global-activities-container container-flex task_activities">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="ga-top col-md-12">
|
<div class="ga-top col-md-12 task_activities">
|
||||||
<%= render partial: "my_modules/activities/top_pane" %>
|
<%= render partial: "my_modules/activities/top_pane" %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ga-side col-lg-3 col-md-12 col-xl-2">
|
<div class="ga-side col-lg-3 col-md-12 col-xl-2 task_activities perfect-scrollbar">
|
||||||
<%= render partial: "my_modules/activities/side_filters" %>
|
<%= render partial: "my_modules/activities/side_filters" %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ga-main col-lg-9 col-md-12 col-xl-10">
|
<div class="ga-main col-lg-9 col-md-12 col-xl-10 task_activities perfect-scrollbar">
|
||||||
<div class="no-activities-message text-center <%= 'hidden' if @grouped_activities.keys.any? %>">
|
<div class="no-activities-message text-center <%= 'hidden' if @grouped_activities.keys.any? %>">
|
||||||
<p><%= t('activities.index.no_activities_task_message') %></p>
|
<p><%= t('activities.index.no_activities_task_message') %></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
6
vendor/assets/javascripts/perfect-scrollbar.min.js
vendored
Normal file
6
vendor/assets/javascripts/perfect-scrollbar.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue