commit
cde8925ab0
|
@ -29,11 +29,21 @@ debounce = @.taiga.debounce
|
||||||
## Common Lightbox Services
|
## Common Lightbox Services
|
||||||
#############################################################################
|
#############################################################################
|
||||||
|
|
||||||
|
# the lightboxContent hide/show doesn't have sense because is an IE hack
|
||||||
class LightboxService extends taiga.Service
|
class LightboxService extends taiga.Service
|
||||||
|
constructor: (@animationFrame) ->
|
||||||
|
|
||||||
open: ($el) ->
|
open: ($el) ->
|
||||||
|
lightboxContent = $el.children().not(".close")
|
||||||
|
lightboxContent.hide()
|
||||||
|
|
||||||
$el.css('display', 'flex')
|
$el.css('display', 'flex')
|
||||||
|
|
||||||
$el.find('input,textarea').first().focus()
|
$el.find('input,textarea').first().focus()
|
||||||
timeout(70, -> $el.addClass("open"))
|
|
||||||
|
@animationFrame.add =>
|
||||||
|
$el.addClass("open")
|
||||||
|
lightboxContent.show()
|
||||||
|
|
||||||
docEl = angular.element(document)
|
docEl = angular.element(document)
|
||||||
docEl.on "keydown.lightbox", (e) =>
|
docEl.on "keydown.lightbox", (e) =>
|
||||||
|
@ -56,7 +66,7 @@ class LightboxService extends taiga.Service
|
||||||
@.close($(lightboxEl))
|
@.close($(lightboxEl))
|
||||||
|
|
||||||
|
|
||||||
module.service("lightboxService", LightboxService)
|
module.service("lightboxService", ["animationFrame", LightboxService])
|
||||||
|
|
||||||
|
|
||||||
class LightboxKeyboardNavigationService extends taiga.Service
|
class LightboxKeyboardNavigationService extends taiga.Service
|
||||||
|
|
|
@ -94,20 +94,20 @@ body {
|
||||||
|
|
||||||
.menu-secondary {
|
.menu-secondary {
|
||||||
background: $whitish;
|
background: $whitish;
|
||||||
flex: 1;
|
flex: 0 0 auto;
|
||||||
|
min-height: 100vh;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
padding: 2rem 1rem;
|
padding: 2rem 1rem;
|
||||||
width: 260px;
|
width: 320px;
|
||||||
&.filters-bar {
|
&.filters-bar {
|
||||||
flex: 0;
|
flex: 0 0 auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
transition: all .2s linear;
|
transition: all .2s linear;
|
||||||
width: 0;
|
width: 0;
|
||||||
&.active {
|
&.active {
|
||||||
flex: 1;
|
|
||||||
padding: 2em 1em;
|
padding: 2em 1em;
|
||||||
transition: all .2s linear;
|
transition: all .2s linear;
|
||||||
width: 210px;
|
width: 260px;
|
||||||
.filters-inner {
|
.filters-inner {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: all .4s ease-in;
|
transition: all .4s ease-in;
|
||||||
|
@ -118,8 +118,10 @@ body {
|
||||||
|
|
||||||
.menu-tertiary {
|
.menu-tertiary {
|
||||||
background-color: $dark-grayish-lime-green;
|
background-color: $dark-grayish-lime-green;
|
||||||
flex: 1;
|
flex: 0 0 auto;
|
||||||
|
min-height: 100vh;
|
||||||
padding: 2em 1em;
|
padding: 2em 1em;
|
||||||
|
width: 255px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.extrabar {
|
.extrabar {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
.issues {
|
.issues {
|
||||||
.filters-bar {
|
.filters-bar {
|
||||||
flex: 1;
|
flex: 0 0 auto;
|
||||||
width: 210px;
|
width: 260px;
|
||||||
}
|
}
|
||||||
.filters-inner {
|
.filters-inner {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
|
@ -58,10 +58,10 @@ $column-margin: 0 10px 0 0;
|
||||||
}
|
}
|
||||||
.task-colum-name {
|
.task-colum-name {
|
||||||
@extend %large;
|
@extend %large;
|
||||||
@include table-flex-child($column-flex, $column-width, $column-shrink, $column-width);
|
|
||||||
@include table-flex();
|
@include table-flex();
|
||||||
background: $whitish;
|
background: $whitish;
|
||||||
border-top: 3px solid $gray-light;
|
border-top: 3px solid $gray-light;
|
||||||
|
flex: auto 0 auto;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin: $column-margin;
|
margin: $column-margin;
|
||||||
max-width: $column-width;
|
max-width: $column-width;
|
||||||
|
|
|
@ -12,12 +12,12 @@
|
||||||
}
|
}
|
||||||
.logo-container {
|
.logo-container {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin: 20% 20% .7rem;
|
padding: 15px 15px 10px;
|
||||||
object,
|
object,
|
||||||
img,
|
img,
|
||||||
svg {
|
svg {
|
||||||
height: 100%;
|
height: 50px;
|
||||||
width: 100%;
|
width: 50px;
|
||||||
}
|
}
|
||||||
span {
|
span {
|
||||||
@extend %large;
|
@extend %large;
|
||||||
|
|
|
@ -202,6 +202,9 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
img {
|
img {
|
||||||
flex-basis: 35px;
|
flex-basis: 35px;
|
||||||
|
/* width & height they are only required for IE */
|
||||||
|
height: 35px;
|
||||||
|
width: 35px;
|
||||||
}
|
}
|
||||||
figcaption {
|
figcaption {
|
||||||
margin-left: .5rem;
|
margin-left: .5rem;
|
||||||
|
|
|
@ -56,15 +56,17 @@ $column-margin: 0 10px 0 0;
|
||||||
}
|
}
|
||||||
.task-colum-name {
|
.task-colum-name {
|
||||||
@extend %large;
|
@extend %large;
|
||||||
@include table-flex-child($column-flex, $column-width, $column-shrink, $column-width);
|
|
||||||
@include table-flex();
|
@include table-flex();
|
||||||
background: $whitish;
|
background: $whitish;
|
||||||
border-top: 3px solid $gray-light;
|
border-top: 3px solid $gray-light;
|
||||||
|
flex: auto 0 auto;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin: $column-margin;
|
margin: $column-margin;
|
||||||
|
max-width: $column-width;
|
||||||
padding: .5rem .5rem .5rem 1rem;
|
padding: .5rem .5rem .5rem 1rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
width: $column-width;
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue