Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
project
socialblue
Commits
e5225fa4
Commit
e5225fa4
authored
May 07, 2021
by
Agami4
Browse files
Issue
#3211612
: Improve behaviour
parent
f83de26a
Changes
4
Hide whitespace changes
Inline
Side-by-side
assets/css/navbar--sky.css
View file @
e5225fa4
...
...
@@ -33,14 +33,16 @@
}
.socialblue--sky.path-user
.layout--with-complementary
.navbar-secondary
.navbar-nav
,
.socialblue--sky.path-group
.layout--with-complementary
.navbar-secondary
.navbar-nav
{
display
:
table
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
overflow-x
:
scroll
;
width
:
100%
;
text-align
:
center
;
}
.socialblue--sky.path-user
.layout--with-complementary
.navbar-secondary
.navbar-nav
li
,
.socialblue--sky.path-group
.layout--with-complementary
.navbar-secondary
.navbar-nav
li
{
position
:
relative
;
display
:
table-cell
;
}
@media
(
min-width
:
900px
)
{
...
...
@@ -65,6 +67,13 @@
-ms-flex-order
:
1
;
order
:
1
;
}
.socialblue--sky.path-user
.layout--with-complementary
.navbar-secondary
.navbar-nav
,
.socialblue--sky.path-group
.layout--with-complementary
.navbar-secondary
.navbar-nav
{
display
:
table
;
overflow
:
visible
;
}
.socialblue--sky.path-user
.layout--with-complementary
.navbar-secondary
.navbar-nav
li
,
.socialblue--sky.path-group
.layout--with-complementary
.navbar-secondary
.navbar-nav
li
{
display
:
table-cell
;
}
.socialblue--sky.path-user
.layout--with-complementary
.navbar-secondary
.navbar-nav
.caret
,
.socialblue--sky.path-group
.layout--with-complementary
.navbar-secondary
.navbar-nav
.caret
{
position
:
absolute
;
top
:
50%
;
...
...
assets/js/navbar-secondary--sky.min.js
View file @
e5225fa4
!
function
(
f
){
Drupal
.
behaviors
.
navbarSecondaryScrollable
=
{
attach
:
function
(
i
){
var
l
=
f
(
"
.navbar-secondary .navbar-scrollable
"
,
i
),
e
=
l
.
find
(
"
.nav
"
,
i
),
s
=
e
.
find
(
"
li
"
,
i
),
a
=
l
.
width
(),
n
=
e
.
width
();
function
t
(){
f
(
"
.layout--with-complementary
"
)
&&
(
900
<=
f
(
window
).
width
()?
a
<
n
&&
(
e
.
css
(
"
overflow
"
,
"
visible
"
),
e
.
each
(
function
(){
var
i
=
f
(
this
),
e
=
0
;
s
.
removeClass
(
"
visible-item
"
),
i
.
find
(
"
.caret
"
).
remove
(),
s
.
parent
().
is
(
"
div
"
)
&&
s
.
unwrap
();
for
(
var
a
=
0
;
a
<
s
.
length
&&
(
e
+=
f
(
s
[
a
]).
width
(),
!
(
l
.
width
()
-
50
<=
e
));
++
a
)
f
(
s
[
a
]).
addClass
(
"
visible-item
"
);
i
.
find
(
"
li.visible-item
"
).
wrapAll
(
'
<div class="visible-list"></div>
'
),
i
.
find
(
"
li:not(.visible-item)
"
).
wrapAll
(
'
<div class="hidden-list card" />
'
),
i
.
append
(
'
<span class="caret"></span>
'
);
var
n
=
i
.
find
(
"
.hidden-list
"
),
t
=
i
.
find
(
"
.caret
"
);
t
.
on
(
"
click
"
,
function
(){
n
.
slideToggle
(
300
),
f
(
this
).
toggleClass
(
"
active
"
)}),
f
(
document
).
on
(
"
click
"
,
function
(
i
){
i
.
stopPropagation
(),
f
(
i
.
target
).
closest
(
"
.navbar-secondary
"
).
length
||
(
n
.
slideUp
(
300
),
t
.
removeClass
(
"
active
"
))})})):(
e
.
css
({
"
overflow-x
"
:
"
scroll
"
,
display
:
"
flex
"
}),
e
.
each
(
function
(){
var
i
=
f
(
this
);
s
.
removeClass
(
"
visible-item
"
),
i
.
find
(
"
.caret
"
).
remove
(),
s
.
parent
().
is
(
"
div
"
)
&&
s
.
unwrap
()})))}
f
(
window
).
on
(
"
load
"
,
function
(){
t
()});
var
o
,
r
,
c
,
d
,
v
=
(
o
=
function
(){
t
()},
r
=
250
,
function
(){
var
i
=
this
,
e
=
arguments
,
a
=
c
&&!
d
;
clearTimeout
(
d
),
d
=
setTimeout
(
function
(){
d
=
null
,
c
||
o
.
apply
(
i
,
e
)},
r
),
a
&&
o
.
apply
(
i
,
e
)});
window
.
addEventListener
(
"
resize
"
,
v
)}}}(
jQuery
);
\ No newline at end of file
!
function
(
f
){
Drupal
.
behaviors
.
navbarSecondaryScrollable
=
{
attach
:
function
(
i
){
var
l
=
f
(
"
.navbar-secondary .navbar-scrollable
"
,
i
),
a
=
l
.
find
(
"
.nav
"
,
i
),
s
=
a
.
find
(
"
li
"
,
i
),
n
=
l
.
width
(),
e
=
a
.
width
();
function
t
(){
f
(
"
.layout--with-complementary
"
)
&&
(
900
<=
f
(
window
).
width
()?
n
<
e
&&
a
.
each
(
function
(){
var
i
=
f
(
this
),
a
=
0
;
s
.
removeClass
(
"
visible-item
"
),
i
.
find
(
"
.caret
"
).
remove
(),
s
.
parent
().
is
(
"
div
"
)
&&
s
.
unwrap
();
for
(
var
n
=
0
;
n
<
s
.
length
&&
(
a
+=
f
(
s
[
n
]).
width
(),
!
(
l
.
width
()
-
50
<=
a
));
++
n
)
f
(
s
[
n
]).
addClass
(
"
visible-item
"
);
i
.
find
(
"
li.visible-item
"
).
wrapAll
(
'
<div class="visible-list"></div>
'
),
i
.
find
(
"
li:not(.visible-item)
"
).
wrapAll
(
'
<div class="hidden-list card" />
'
),
i
.
append
(
'
<span class="caret"></span>
'
);
var
e
=
i
.
find
(
"
.hidden-list
"
),
t
=
i
.
find
(
"
.caret
"
);
t
.
on
(
"
click
"
,
function
(){
e
.
slideToggle
(
300
),
f
(
this
).
toggleClass
(
"
active
"
)}),
f
(
document
).
on
(
"
click
"
,
function
(
i
){
i
.
stopPropagation
(),
f
(
i
.
target
).
closest
(
"
.navbar-secondary
"
).
length
||
(
e
.
slideUp
(
300
),
t
.
removeClass
(
"
active
"
))})}):
a
.
each
(
function
(){
var
i
=
f
(
this
);
s
.
removeClass
(
"
visible-item
"
),
i
.
find
(
"
.caret
"
).
remove
(),
s
.
parent
().
is
(
"
div
"
)
&&
s
.
unwrap
()}))}
f
(
window
).
on
(
"
load
"
,
function
(){
t
()});
var
o
,
r
,
d
,
c
,
v
=
(
o
=
function
(){
t
()},
r
=
250
,
function
(){
var
i
=
this
,
a
=
arguments
,
n
=
d
&&!
c
;
clearTimeout
(
c
),
c
=
setTimeout
(
function
(){
c
=
null
,
d
||
o
.
apply
(
i
,
a
)},
r
),
n
&&
o
.
apply
(
i
,
a
)});
window
.
addEventListener
(
"
resize
"
,
v
)}}}(
jQuery
);
\ No newline at end of file
components/03-molecules/navigation/navbar/navbar--sky.scss
View file @
e5225fa4
...
...
@@ -79,18 +79,21 @@
}
.navbar-nav
{
display
:
table
;
display
:
flex
;
overflow-x
:
scroll
;
width
:
100%
;
text-align
:
center
;
@include
for-tablet-landscape-up
{
display
:
table
;
overflow
:
visible
;
}
li
{
position
:
relative
;
display
:
table-cell
;
@include
for-tablet-landscape-up
{
display
:
table-cell
;
}
}
...
...
components/03-molecules/navigation/navbar/navbar-secondary--sky.js
View file @
e5225fa4
...
...
@@ -35,7 +35,6 @@
if
(
$
(
window
).
width
()
>=
900
)
{
if
(
navSecondaryWidth
>
navScrollWidth
)
{
navSecondary
.
css
(
'
overflow
'
,
'
visible
'
);
navSecondary
.
each
(
function
()
{
var
$this
=
$
(
this
);
...
...
@@ -90,8 +89,6 @@
}
}
else
{
navSecondary
.
css
({
'
overflow-x
'
:
'
scroll
'
,
'
display
'
:
'
flex
'
});
navSecondary
.
each
(
function
()
{
var
$this
=
$
(
this
);
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment