Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
S
SWLab UI
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
hyeryung
SWLab UI
Commits
caca2651
Commit
caca2651
authored
8 months ago
by
minseok.park
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update doc version style
parent
eb1687a8
Show whitespace changes
Inline
Side-by-side
Showing
14 changed files
with
98 additions
and
37 deletions
+98
-37
breadcrumbs.css
src/css/breadcrumbs.css
+1
-1
header.css
src/css/header.css
+3
-3
nav.css
src/css/nav.css
+3
-1
page-versions.css
src/css/page-versions.css
+55
-11
toolbar.css
src/css/toolbar.css
+8
-10
vars.css
src/css/vars.css
+6
-1
03-fragment-jumper.js
src/js/03-fragment-jumper.js
+2
-1
04-page-versions.js
src/js/04-page-versions.js
+6
-0
article.hbs
src/partials/article.hbs
+1
-1
main.hbs
src/partials/main.hbs
+1
-1
nav-menu.hbs
src/partials/nav-menu.hbs
+3
-3
nav.hbs
src/partials/nav.hbs
+2
-1
page-versions.hbs
src/partials/page-versions.hbs
+6
-2
toolbar.hbs
src/partials/toolbar.hbs
+1
-1
No files found.
src/css/breadcrumbs.css
View file @
caca2651
...
@@ -19,7 +19,7 @@ a + .breadcrumbs {
...
@@ -19,7 +19,7 @@ a + .breadcrumbs {
display
:
flex
;
display
:
flex
;
flex-wrap
:
wrap
;
flex-wrap
:
wrap
;
margin
:
0
;
margin
:
0
;
padding
:
0
;
padding
:
0
!important
;
list-style
:
none
;
list-style
:
none
;
}
}
...
...
This diff is collapsed.
Click to expand it.
src/css/header.css
View file @
caca2651
...
@@ -9,8 +9,8 @@ body {
...
@@ -9,8 +9,8 @@ body {
}
}
.navbar
{
.navbar
{
background
:
var
(
--
color-white
);
background
:
var
(
--
nav-background
);
/* border-bottom: 1px solid var(--color-bwg-main); */
box-shadow
:
0
0
0.4rem
rgba
(
0
,
0
,
0
,
0.1
),
0
0.4rem
0.6rem
rgba
(
0
,
0
,
0
,
0.1
);
color
:
var
(
--color-bwg-main
);
color
:
var
(
--color-bwg-main
);
height
:
4.5rem
;
height
:
4.5rem
;
font-size
:
calc
(
16
/
var
(
--rem-base
)
*
1rem
);
font-size
:
calc
(
16
/
var
(
--rem-base
)
*
1rem
);
...
@@ -308,7 +308,7 @@ body {
...
@@ -308,7 +308,7 @@ body {
content
:
""
;
content
:
""
;
display
:
block
;
display
:
block
;
position
:
absolute
;
position
:
absolute
;
bottom
:
0
;
bottom
:
1rem
;
left
:
0
;
left
:
0
;
width
:
0
;
width
:
0
;
height
:
2px
;
height
:
2px
;
...
...
This diff is collapsed.
Click to expand it.
src/css/nav.css
View file @
caca2651
...
@@ -36,7 +36,8 @@
...
@@ -36,7 +36,8 @@
}
}
.nav
{
.nav
{
background
:
var
(
--nav-background
);
/* background: var(--nav-background); */
background
:
var
(
--color-white
);
position
:
relative
;
position
:
relative
;
top
:
var
(
--toolbar-height
);
top
:
var
(
--toolbar-height
);
height
:
var
(
--nav-height
);
height
:
var
(
--nav-height
);
...
@@ -73,6 +74,7 @@
...
@@ -73,6 +74,7 @@
overscroll-behavior
:
none
;
overscroll-behavior
:
none
;
height
:
var
(
--nav-panel-menu-height
);
height
:
var
(
--nav-panel-menu-height
);
padding
:
1.25em
;
padding
:
1.25em
;
padding-top
:
0
;
}
}
.nav-panel-menu
:not
(
.is-active
)
.nav-menu
{
.nav-panel-menu
:not
(
.is-active
)
.nav-menu
{
...
...
This diff is collapsed.
Click to expand it.
src/css/page-versions.css
View file @
caca2651
.page-versions
{
.page-versions
{
margin
:
0
0.2rem
0
auto
;
/* margin: 0 0.2rem 0 auto; */
position
:
relative
;
position
:
relative
;
display
:
flex
;
align-items
:
center
;
justify-content
:
space-between
;
line-height
:
1
;
line-height
:
1
;
height
:
var
(
--toolbar-height
);
margin
:
1rem
0.7rem
;
padding
:
0
1.25em
;
}
}
@media
screen
and
(
min-width
:
1024px
)
{
/*
@media screen and (min-width: 1024px) {
.page-versions {
.page-versions {
margin-right: 0.7rem;
margin-right: 0.7rem;
}
}
} */
.page-versions
.backdrop
{
display
:
none
;
width
:
100vw
;
height
:
100vh
;
position
:
fixed
;
top
:
0
;
left
:
0
;
z-index
:
2
;
}
.page-versions
h2
.title
{
color
:
var
(
--nav-heading-font-color
);
font-size
:
inherit
;
font-weight
:
var
(
--body-font-weight-bold
);
margin
:
0
;
/* padding: 0.25em 0 0.125em 0.75em; */
}
}
.page-versions
.version-menu-toggle
{
.page-versions
.version-menu-toggle
{
color
:
inherit
;
color
:
var
(
--color-bwg-main
);
font-weight
:
600
;
background
:
url(../img/chevron.svg)
no-repeat
;
background
:
url(../img/chevron.svg)
no-repeat
;
background-position
:
right
0.5rem
top
50%
;
background-position
:
right
0.5rem
top
50%
;
background-size
:
auto
0.75em
;
background-size
:
auto
0.75em
;
border
:
none
;
border
:
none
;
outline
:
none
;
outline
:
none
;
line-height
:
inherit
;
line-height
:
inherit
;
padding
:
0.5rem
1.5rem
0.5rem
0.5
rem
;
padding
:
0.5rem
2rem
0.5rem
1
rem
;
position
:
relative
;
position
:
relative
;
border-radius
:
0.5rem
;
border
:
2px
solid
var
(
--color-smoke-90
);
transition
:
all
.15s
ease-in-out
;
z-index
:
var
(
--z-index-page-version-menu
);
z-index
:
var
(
--z-index-page-version-menu
);
}
.page-versions
.version-menu-toggle
:hover
{
border
:
2px
solid
var
(
--color-bwg-main
);
}
}
.page-versions
.version-menu
{
.page-versions
.version-menu
{
display
:
flex
;
display
:
flex
;
min-width
:
100%
;
min-width
:
85px
;
flex-direction
:
column
;
flex-direction
:
column
;
align-items
:
flex-end
;
align-items
:
flex-start
;
background
:
linear-gradient
(
to
bottom
,
var
(
--page-version-menu-background
)
0%
,
var
(
--page-version-menu-background
)
100%
)
no-repeat
;
/* background: linear-gradient(to bottom, var(--page-version-menu-background) 0%, var(--page-version-menu-background) 100%) no-repeat; */
padding
:
1.375rem
1.5rem
0.5rem
0.5rem
;
background-color
:
white
;
padding
:
0.25rem
;
position
:
absolute
;
position
:
absolute
;
top
:
0
;
top
:
45px
;
right
:
0
;
right
:
22px
;
white-space
:
nowrap
;
white-space
:
nowrap
;
z-index
:
var
(
--z-index-page-version-menu
);
box-shadow
:
0
8px
16px
rgba
(
10
,
10
,
10
,
0.1
);
border-radius
:
0.5rem
;
}
}
.page-versions
:not
(
.is-active
)
.version-menu
{
.page-versions
:not
(
.is-active
)
.version-menu
{
...
@@ -41,10 +77,18 @@
...
@@ -41,10 +77,18 @@
}
}
.page-versions
.version
{
.page-versions
.version
{
color
:
var
(
--color-gray-50
);
width
:
100%
;
display
:
block
;
display
:
block
;
padding-top
:
0.5rem
;
padding
:
0.35rem
0
0.35rem
0.85rem
;
border-radius
:
0.5rem
;
}
}
.page-versions
.version
:hover
{
background-color
:
var
(
--color-blue-10
);
}
.page-versions
.version.is-current
{
.page-versions
.version.is-current
{
display
:
none
;
display
:
none
;
}
}
...
...
This diff is collapsed.
Click to expand it.
src/css/toolbar.css
View file @
caca2651
.toolbar
{
.toolbar
{
color
:
var
(
--toolbar-font-color
);
color
:
var
(
--toolbar-font-color
);
align-items
:
center
;
align-items
:
center
;
background-color
:
var
(
--toolbar-background
);
background-color
:
var
(
--color-white
);
/* box-shadow: 0 1px 0 var(--toolbar-border-color); */
/* background-color: var(--color-white); */
/* margin: 0.5rem 0; */
box-shadow
:
rgba
(
33
,
35
,
38
,
0.1
)
0
10px
10px
-10px
;
display
:
flex
;
display
:
flex
;
font-size
:
calc
(
15
/
var
(
--rem-base
)
*
1rem
);
font-size
:
calc
(
15
/
var
(
--rem-base
)
*
1rem
);
height
:
var
(
--toolbar-height
);
height
:
var
(
--toolbar-height
);
justify-content
:
flex-start
;
justify-content
:
flex-start
;
top
:
var
(
--navbar-height
);
margin
:
1rem
0
;
padding
:
0
3.15rem
;
position
:
sticky
;
z-index
:
var
(
--z-index-toolbar
);
}
}
.toolbar
a
{
.toolbar
a
{
...
@@ -58,7 +51,7 @@
...
@@ -58,7 +51,7 @@
.edit-this-page
{
.edit-this-page
{
display
:
none
;
display
:
none
;
padding-right
:
0.5rem
;
/* padding-right: 0.5rem; */
}
}
@media
screen
and
(
min-width
:
1024px
)
{
@media
screen
and
(
min-width
:
1024px
)
{
...
@@ -70,3 +63,8 @@
...
@@ -70,3 +63,8 @@
.toolbar
.edit-this-page
a
{
.toolbar
.edit-this-page
a
{
color
:
var
(
--toolbar-muted-color
);
color
:
var
(
--toolbar-muted-color
);
}
}
.toolbar
.edit-this-page
a
:hover
{
color
:
var
(
--color-bwg-main
);
font-weight
:
600
;
}
This diff is collapsed.
Click to expand it.
src/css/vars.css
View file @
caca2651
...
@@ -39,6 +39,11 @@
...
@@ -39,6 +39,11 @@
--monospace-font-family
:
"Roboto Mono"
,
monospace
;
--monospace-font-family
:
"Roboto Mono"
,
monospace
;
--monospace-font-weight-bold
:
600
;
--monospace-font-weight-bold
:
600
;
--h-font-weight-bold
:
800
;
--h-font-weight-bold
:
800
;
/* border */
--border-radius-fa
:
0.5rem
;
/* shadow */
--shadow-sm
:
0px
1px
1px
hsla
(
0
,
0%
,
0%
,
0.06
),
0px
2px
1px
hsla
(
0
,
0%
,
0%
,
0.06
);
--box-shadow-depth-fa
:
0.385rem
;
/* base */
/* base */
--body-background
:
var
(
--color-white
);
--body-background
:
var
(
--color-white
);
--panel-background
:
var
(
--color-smoke-30
);
--panel-background
:
var
(
--color-smoke-30
);
...
@@ -74,7 +79,7 @@
...
@@ -74,7 +79,7 @@
--toolbar-font-color
:
var
(
--color-gray-70
);
--toolbar-font-color
:
var
(
--color-gray-70
);
--toolbar-muted-color
:
var
(
--color-gray-40
);
--toolbar-muted-color
:
var
(
--color-gray-40
);
--page-version-menu-background
:
var
(
--color-smoke-70
);
--page-version-menu-background
:
var
(
--color-smoke-70
);
--page-version-missing-font-color
:
var
(
--color-gray-
4
0
);
--page-version-missing-font-color
:
var
(
--color-gray-
3
0
);
/* admonitions */
/* admonitions */
--caution-color
:
#a0439c
;
--caution-color
:
#a0439c
;
--caution-on-color
:
var
(
--color-white
);
--caution-on-color
:
var
(
--color-white
);
...
...
This diff is collapsed.
Click to expand it.
src/js/03-fragment-jumper.js
View file @
caca2651
...
@@ -20,7 +20,8 @@
...
@@ -20,7 +20,8 @@
window
.
location
.
hash
=
'#'
+
this
.
id
window
.
location
.
hash
=
'#'
+
this
.
id
e
.
preventDefault
()
e
.
preventDefault
()
}
}
var
y
=
computePosition
(
this
,
0
)
-
toolbar
.
getBoundingClientRect
().
bottom
// var y = computePosition(this, 0) - toolbar.getBoundingClientRect().bottom
var
y
=
computePosition
(
this
,
0
)
-
95
var
instant
=
e
===
false
&&
supportsScrollToOptions
var
instant
=
e
===
false
&&
supportsScrollToOptions
instant
?
window
.
scrollTo
({
left
:
0
,
top
:
y
,
behavior
:
'instant'
})
:
window
.
scrollTo
(
0
,
y
)
instant
?
window
.
scrollTo
({
left
:
0
,
top
:
y
,
behavior
:
'instant'
})
:
window
.
scrollTo
(
0
,
y
)
}
}
...
...
This diff is collapsed.
Click to expand it.
src/js/04-page-versions.js
View file @
caca2651
...
@@ -5,12 +5,18 @@
...
@@ -5,12 +5,18 @@
if
(
!
toggle
)
return
if
(
!
toggle
)
return
var
selector
=
document
.
querySelector
(
'.page-versions'
)
var
selector
=
document
.
querySelector
(
'.page-versions'
)
var
backdrop
=
document
.
querySelector
(
'.backdrop'
)
toggle
.
addEventListener
(
'click'
,
function
(
e
)
{
toggle
.
addEventListener
(
'click'
,
function
(
e
)
{
selector
.
classList
.
toggle
(
'is-active'
)
selector
.
classList
.
toggle
(
'is-active'
)
backdrop
.
style
.
display
=
'block'
e
.
stopPropagation
()
// trap event
e
.
stopPropagation
()
// trap event
})
})
backdrop
.
addEventListener
(
'click'
,
function
()
{
selector
.
classList
.
remove
(
'is-active'
)
})
document
.
documentElement
.
addEventListener
(
'click'
,
function
()
{
document
.
documentElement
.
addEventListener
(
'click'
,
function
()
{
selector
.
classList
.
remove
(
'is-active'
)
selector
.
classList
.
remove
(
'is-active'
)
})
})
...
...
This diff is collapsed.
Click to expand it.
src/partials/article.hbs
View file @
caca2651
<article
class=
"doc"
>
<article
class=
"doc"
>
{{
!-- {{> toolbar}} --
}}
{{
>
toolbar
}}
{{#
with
page
.
title
}}
{{#
with
page
.
title
}}
<h1
class=
"page"
>
{{{
this
}}}
</h1>
<h1
class=
"page"
>
{{{
this
}}}
</h1>
{{/
with
}}
{{/
with
}}
...
...
This diff is collapsed.
Click to expand it.
src/partials/main.hbs
View file @
caca2651
<main
class=
"article"
>
<main
class=
"article"
>
{{
>
toolbar
}}
{{
!-- {{> toolbar}} --
}}
<div
class=
"content"
>
<div
class=
"content"
>
{{#if
(
eq
page
.
layout
'404'
)
}}
{{#if
(
eq
page
.
layout
'404'
)
}}
{{>
article-404
}}
{{>
article-404
}}
...
...
This diff is collapsed.
Click to expand it.
src/partials/nav-menu.hbs
View file @
caca2651
{{#
with
page
.
navigation
}}
{{#
with
page
.
navigation
}}
<div
class=
"nav-panel-menu is-active"
data-panel=
"menu"
>
<div
class=
"nav-panel-menu is-active"
data-panel=
"menu"
>
<nav
class=
"nav-menu"
>
<nav
class=
"nav-menu"
>
<button
class=
"nav-menu-toggle"
aria-label=
"Toggle expand/collapse all"
style=
"display: none"
></button>
{{!-- <button class="nav-menu-toggle" aria-label="Toggle expand/collapse all" style="display: none"></button> --}}
{{#
with
@root
.
page
.
componentVersion
}}
{{
!-- {{
#with @root.page.componentVersion}}
<h3 class="title"><a href="{{{relativize ./url}}}">{{./title}}</a></h3>
<h3 class="title"><a href="{{{relativize ./url}}}">{{./title}}</a></h3>
{{/
with
}}
{{/with}}
--}}
{{>
nav-tree
navigation
=
this
}}
{{>
nav-tree
navigation
=
this
}}
</nav>
</nav>
</div>
</div>
...
...
This diff is collapsed.
Click to expand it.
src/partials/nav.hbs
View file @
caca2651
<div
class=
"nav-container"
{{#if
page
.
component
}}
data-component=
"
{{
page
.
component
.
name
}}
"
data-version=
"
{{
page
.
version
}}
"
{{/if}}
>
<div
class=
"nav-container"
{{#if
page
.
component
}}
data-component=
"
{{
page
.
component
.
name
}}
"
data-version=
"
{{
page
.
version
}}
"
{{/if}}
>
<aside
class=
"nav"
>
<aside
class=
"nav"
>
<div
class=
"panels"
>
<div
class=
"panels"
>
{{>
page-versions
}}
{{>
nav-menu
}}
{{>
nav-menu
}}
{{
>
nav-explore
}}
{{
!-- {{> nav-explore}} --
}}
</div>
</div>
</aside>
</aside>
</div>
</div>
This diff is collapsed.
Click to expand it.
src/partials/page-versions.hbs
View file @
caca2651
{{#
with
page
.
versions
}}
{{#
with
page
.
versions
}}
<div
class=
"page-versions"
>
<div
class=
"page-versions"
>
<button
class=
"version-menu-toggle"
title=
"Show other versions of page"
>
{{
@root
.
page
.
componentVersion
.
displayVersion
}}
</button>
<div
class=
"backdrop"
></div>
{{#
with
@root
.
page
.
componentVersion
}}
<h2
class=
"title"
><a
href=
"
{{{
relativize
./
url
}}}
"
>
{{
./
title
}}
</a></h2>
{{/
with
}}
<button
class=
"version-menu-toggle"
title=
"Show other versions of page"
>
v
{{
@root
.
page
.
componentVersion
.
displayVersion
}}
</button>
<div
class=
"version-menu"
>
<div
class=
"version-menu"
>
{{#
each
this
}}
{{#
each
this
}}
<a
class=
"version
<a
class=
"version
{{
~#
if
(
eq
./
version
@root
.
page
.
version
)
}}
is-current
{{/
if
~
}}
{{
~#
if
(
eq
./
version
@root
.
page
.
version
)
}}
is-current
{{/
if
~
}}
{{
~#
if
./
missing
}}
is-missing
{{/if}}
"
href=
"
{{{
relativize
./
url
}}}
"
>
{{
./
displayVersion
}}
</a>
{{
~#
if
./
missing
}}
is-missing
{{/if}}
"
href=
"
{{{
relativize
./
url
}}}
"
>
v
{{
./
displayVersion
}}
</a>
{{/
each
}}
{{/
each
}}
</div>
</div>
</div>
</div>
...
...
This diff is collapsed.
Click to expand it.
src/partials/toolbar.hbs
View file @
caca2651
...
@@ -4,6 +4,6 @@
...
@@ -4,6 +4,6 @@
<a href="{{{relativize this}}}" class="home-link{{#if @root.page.home}} is-current{{/if}}"></a>
<a href="{{{relativize this}}}" class="home-link{{#if @root.page.home}} is-current{{/if}}"></a>
{{/with}} --}}
{{/with}} --}}
{{>
breadcrumbs
}}
{{>
breadcrumbs
}}
{{
>
page-versions
}}
{{
!-- {{> page-versions}} --
}}
{{>
edit-this-page
}}
{{>
edit-this-page
}}
</div>
</div>
This diff is collapsed.
Click to expand it.
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