Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Kazuhiko Shiozaki
gitlab-ce
Commits
4406aeff
Commit
4406aeff
authored
Sep 02, 2015
by
Dmitriy Zaporozhets
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Implement new design for projects page
Signed-off-by:
Dmitriy Zaporozhets
<
dmitriy.zaporozhets@gmail.com
>
parent
14274cdc
Changes
11
Show whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
121 additions
and
59 deletions
+121
-59
app/assets/stylesheets/base/mixins.scss
app/assets/stylesheets/base/mixins.scss
+17
-0
app/assets/stylesheets/base/variables.scss
app/assets/stylesheets/base/variables.scss
+2
-2
app/assets/stylesheets/generic/avatar.scss
app/assets/stylesheets/generic/avatar.scss
+1
-0
app/assets/stylesheets/generic/common.scss
app/assets/stylesheets/generic/common.scss
+14
-4
app/assets/stylesheets/generic/header.scss
app/assets/stylesheets/generic/header.scss
+12
-18
app/assets/stylesheets/generic/sidebar.scss
app/assets/stylesheets/generic/sidebar.scss
+29
-17
app/assets/stylesheets/pages/dashboard.scss
app/assets/stylesheets/pages/dashboard.scss
+1
-1
app/assets/stylesheets/pages/projects.scss
app/assets/stylesheets/pages/projects.scss
+37
-10
app/assets/stylesheets/themes/gitlab-theme.scss
app/assets/stylesheets/themes/gitlab-theme.scss
+5
-5
app/views/layouts/_page.html.haml
app/views/layouts/_page.html.haml
+1
-1
app/views/shared/projects/_project.html.haml
app/views/shared/projects/_project.html.haml
+2
-1
No files found.
app/assets/stylesheets/base/mixins.scss
View file @
4406aeff
...
@@ -195,3 +195,20 @@
...
@@ -195,3 +195,20 @@
}
}
}
}
}
}
@mixin
input-big
{
height
:
36px
;
padding
:
5px
10px
;
font-size
:
16px
;
line-height
:
24px
;
color
:
#7f8fa4
;
background-color
:
#fff
;
border-color
:
#e7e9ed
;
}
@mixin
btn-big
{
height
:
36px
;
padding
:
5px
10px
;
font-size
:
16px
;
line-height
:
24px
;
}
app/assets/stylesheets/base/variables.scss
View file @
4406aeff
...
@@ -12,7 +12,7 @@ $code_font_size: 13px;
...
@@ -12,7 +12,7 @@ $code_font_size: 13px;
$code_line_height
:
1
.5
;
$code_line_height
:
1
.5
;
$border-color
:
#E5E5E5
;
$border-color
:
#E5E5E5
;
$background-color
:
#f5f5f5
;
$background-color
:
#f5f5f5
;
$header-height
:
50
px
;
$header-height
:
73
px
;
$fixed-layout-width
:
1200px
;
$fixed-layout-width
:
1200px
;
...
@@ -20,7 +20,7 @@ $fixed-layout-width: 1200px;
...
@@ -20,7 +20,7 @@ $fixed-layout-width: 1200px;
* State colors:
* State colors:
*/
*/
$gl-primary
:
#446e9b
;
$gl-primary
:
#446e9b
;
$gl-success
:
#
019875
;
$gl-success
:
#
44c679
;
$gl-info
:
#029ACF
;
$gl-info
:
#029ACF
;
$gl-warning
:
#EB9532
;
$gl-warning
:
#EB9532
;
$gl-danger
:
#d9534f
;
$gl-danger
:
#d9534f
;
...
...
app/assets/stylesheets/generic/avatar.scss
View file @
4406aeff
...
@@ -23,6 +23,7 @@
...
@@ -23,6 +23,7 @@
&
.s24
{
width
:
24px
;
height
:
24px
;
margin-right
:
8px
;
}
&
.s24
{
width
:
24px
;
height
:
24px
;
margin-right
:
8px
;
}
&
.s26
{
width
:
26px
;
height
:
26px
;
margin-right
:
8px
;
}
&
.s26
{
width
:
26px
;
height
:
26px
;
margin-right
:
8px
;
}
&
.s32
{
width
:
32px
;
height
:
32px
;
margin-right
:
10px
;
}
&
.s32
{
width
:
32px
;
height
:
32px
;
margin-right
:
10px
;
}
&
.s48
{
width
:
48px
;
height
:
48px
;
margin-right
:
10px
;
}
&
.s60
{
width
:
60px
;
height
:
60px
;
margin-right
:
12px
;
}
&
.s60
{
width
:
60px
;
height
:
60px
;
margin-right
:
12px
;
}
&
.s90
{
width
:
90px
;
height
:
90px
;
margin-right
:
15px
;
}
&
.s90
{
width
:
90px
;
height
:
90px
;
margin-right
:
15px
;
}
&
.s160
{
width
:
160px
;
height
:
160px
;
margin-right
:
20px
;
}
&
.s160
{
width
:
160px
;
height
:
160px
;
margin-right
:
20px
;
}
...
...
app/assets/stylesheets/generic/common.scss
View file @
4406aeff
...
@@ -362,7 +362,7 @@ table {
...
@@ -362,7 +362,7 @@ table {
}
}
.profiler-results
{
.profiler-results
{
top
:
50
px
!
important
;
top
:
73
px
!
important
;
.profiler-button
,
.profiler-button
,
.profiler-controls
{
.profiler-controls
{
...
@@ -374,18 +374,28 @@ table {
...
@@ -374,18 +374,28 @@ table {
list-style
:
none
;
list-style
:
none
;
text-align
:
center
;
text-align
:
center
;
margin-top
:
5px
;
margin-top
:
5px
;
padding-bottom
:
15px
;
margin-bottom
:
12px
;
margin-bottom
:
15px
;
height
:
60px
;
margin-top
:
-15px
;
padding-top
:
15px
;
li
{
li
{
display
:
inline-block
;
display
:
inline-block
;
a
{
a
{
padding
:
15px
;
padding
:
15px
;
font-size
:
20px
;
color
:
#7f8fa4
;
border-bottom
:
2px
solid
transparent
;
&
:hover
,
&
:active
,
&
:focus
{
text-decoration
:
none
;
}
}
}
&
.active
a
{
&
.active
a
{
color
:
#666
;
color
:
#4c4e54
;
border-bottom
:
2px
solid
#1cacfc
;
}
}
}
}
}
}
app/assets/stylesheets/generic/header.scss
View file @
4406aeff
...
@@ -24,29 +24,28 @@ header {
...
@@ -24,29 +24,28 @@ header {
z-index
:
100
;
z-index
:
100
;
margin-bottom
:
0
;
margin-bottom
:
0
;
min-height
:
$header-height
;
min-height
:
$header-height
;
background-color
:
#fff
;
border
:
none
;
border
:
none
;
border-bottom
:
1px
solid
#EEE
;
border-bottom
:
1px
solid
#EEE
;
.container-fluid
{
.container-fluid
{
background
:
#FFF
;
width
:
100%
!
important
;
width
:
100%
!
important
;
filter
:
none
;
filter
:
none
;
padding
:
0
;
.nav
>
li
>
a
{
.nav
>
li
>
a
{
color
:
#
888
;
color
:
#
7f8fa4
;
font-size
:
1
4
px
;
font-size
:
1
8
px
;
padding
:
0
;
padding
:
0
;
background-color
:
#f5f5f5
;
margin
:
(
$header-height
-
28
)
/
2
0
;
margin
:
(
$header-height
-
28
)
/
2
0
;
margin-left
:
10px
;
margin-left
:
10px
;
border-radius
:
40px
;
height
:
28px
;
height
:
28px
;
width
:
28px
;
width
:
28px
;
line-height
:
28px
;
line-height
:
28px
;
text-align
:
center
;
text-align
:
center
;
&
:hover
,
&
:focus
,
&
:active
{
&
:hover
,
&
:focus
,
&
:active
{
background-color
:
#
EEE
;
background-color
:
#
FFF
;
}
}
}
}
...
@@ -70,16 +69,16 @@ header {
...
@@ -70,16 +69,16 @@ header {
.title
{
.title
{
margin
:
0
;
margin
:
0
;
overflow
:
hidden
;
overflow
:
hidden
;
font-size
:
18
px
;
font-size
:
20
px
;
line-height
:
$header-height
;
line-height
:
$header-height
;
font-weight
:
bold
;
font-weight
:
normal
;
color
:
#4
4
4
;
color
:
#4
c4e5
4
;
text-overflow
:
ellipsis
;
text-overflow
:
ellipsis
;
vertical-align
:
top
;
vertical-align
:
top
;
white-space
:
nowrap
;
white-space
:
nowrap
;
a
{
a
{
color
:
#4
4
4
;
color
:
#4
c4e5
4
;
&
:hover
{
&
:hover
{
text-decoration
:
underline
;
text-decoration
:
underline
;
}
}
...
@@ -94,7 +93,7 @@ header {
...
@@ -94,7 +93,7 @@ header {
.search
{
.search
{
margin-right
:
10px
;
margin-right
:
10px
;
margin-left
:
10px
;
margin-left
:
10px
;
margin-top
:
(
$header-height
-
28
)
/
2
;
margin-top
:
(
$header-height
-
36
)
/
2
;
form
{
form
{
margin
:
0
;
margin
:
0
;
...
@@ -105,13 +104,8 @@ header {
...
@@ -105,13 +104,8 @@ header {
width
:
220px
;
width
:
220px
;
background-image
:
image-url
(
"icon-search.png"
);
background-image
:
image-url
(
"icon-search.png"
);
background-repeat
:
no-repeat
;
background-repeat
:
no-repeat
;
background-position
:
10px
;
background-position
:
195px
;
height
:
inherit
;
@include
input-big
;
padding
:
4px
6px
;
padding-left
:
25px
;
font-size
:
13px
;
background-color
:
#f5f5f5
;
border-color
:
#f5f5f5
;
&
:focus
{
&
:focus
{
@include
box-shadow
(
none
);
@include
box-shadow
(
none
);
...
...
app/assets/stylesheets/generic/sidebar.scss
View file @
4406aeff
...
@@ -18,13 +18,22 @@
...
@@ -18,13 +18,22 @@
}
}
.content-wrapper
{
.content-wrapper
{
min-height
:
100vh
;
width
:
100%
;
width
:
100%
;
padding
:
20px
;
padding
:
20px
;
background
:
#f1f4f8
;
.container-fluid
{
background
:
#FFF
;
background
:
#FFF
;
padding-top
:
15px
;
padding-bottom
:
15px
;
border
:
1px
solid
#e7e9ed
;
min-height
:
90vh
;
}
}
}
.nav-sidebar
{
.nav-sidebar
{
margin-top
:
29
+
$header-height
;
margin-top
:
14
+
$header-height
;
margin-bottom
:
50px
;
margin-bottom
:
50px
;
transition-duration
:
.3s
;
transition-duration
:
.3s
;
list-style
:
none
;
list-style
:
none
;
...
@@ -44,12 +53,13 @@
...
@@ -44,12 +53,13 @@
a
{
a
{
padding
:
8px
15px
;
padding
:
8px
15px
;
font-size
:
1
3
px
;
font-size
:
1
6
px
;
line-height
:
18
px
;
line-height
:
24
px
;
color
:
$gray
;
color
:
$gray
;
display
:
block
;
display
:
block
;
text-decoration
:
none
;
text-decoration
:
none
;
padding-left
:
16px
;
padding-left
:
22px
;
font-weight
:
normal
;
&
:hover
{
&
:hover
{
text-decoration
:
none
;
text-decoration
:
none
;
...
@@ -60,9 +70,9 @@
...
@@ -60,9 +70,9 @@
}
}
i
{
i
{
width
:
20
px
;
width
:
16
px
;
color
:
$gray-light
;
color
:
$gray-light
;
margin-right
:
2
3px
;
margin-right
:
1
3px
;
}
}
.count
{
.count
{
...
@@ -135,11 +145,11 @@
...
@@ -135,11 +145,11 @@
.collapse-nav
a
{
.collapse-nav
a
{
position
:
fixed
;
position
:
fixed
;
top
:
$header-height
;
top
:
0
;
left
:
198
px
;
left
:
202
px
;
font-size
:
13px
;
font-size
:
13px
;
background
:
transparent
;
background
:
transparent
;
width
:
32
px
;
width
:
28
px
;
height
:
28px
;
height
:
28px
;
text-align
:
center
;
text-align
:
center
;
line-height
:
28px
;
line-height
:
28px
;
...
@@ -176,16 +186,18 @@
...
@@ -176,16 +186,18 @@
}
}
.sidebar-user
{
.sidebar-user
{
padding
:
12px
22px
;
position
:
fixed
;
position
:
fixed
;
bottom
:
0
;
bottom
:
0
;
width
:
$sidebar_width
;
width
:
$sidebar_width
;
padding
:
10px
;
overflow
:
hidden
;
overflow
:
hidden
;
transition-duration
:
.3s
;
transition-duration
:
.3s
;
.username
{
.username
{
margin-
top
:
5
px
;
margin-
left
:
10
px
;
width
:
$sidebar_width
-
2
*
10px
;
width
:
$sidebar_width
-
2
*
10px
;
font-size
:
16px
;
line-height
:
49px
;
}
}
}
}
...
@@ -202,12 +214,12 @@
...
@@ -202,12 +214,12 @@
float
:
left
;
float
:
left
;
height
:
$header-height
;
height
:
$header-height
;
width
:
100%
;
width
:
100%
;
padding
:
(
$header-height
-
36
)
/
2
8
px
;
padding
:
12px
22
px
;
overflow
:
hidden
;
overflow
:
hidden
;
img
{
img
{
width
:
36
px
;
width
:
48
px
;
height
:
36
px
;
height
:
48
px
;
float
:
left
;
float
:
left
;
}
}
...
@@ -219,8 +231,8 @@
...
@@ -219,8 +231,8 @@
float
:
left
;
float
:
left
;
margin
:
0
;
margin
:
0
;
margin-left
:
14px
;
margin-left
:
14px
;
font-size
:
18
px
;
font-size
:
20
px
;
line-height
:
$header-height
-
14
;
line-height
:
49px
;
font-weight
:
normal
;
font-weight
:
normal
;
}
}
}
}
...
...
app/assets/stylesheets/pages/dashboard.scss
View file @
4406aeff
...
@@ -38,7 +38,7 @@
...
@@ -38,7 +38,7 @@
float
:
left
;
float
:
left
;
.avatar
{
.avatar
{
@include
border-radius
(
0px
);
@include
border-radius
(
50%
);
}
}
.identicon
{
.identicon
{
...
...
app/assets/stylesheets/pages/projects.scss
View file @
4406aeff
...
@@ -253,12 +253,22 @@ pre.light-well {
...
@@ -253,12 +253,22 @@ pre.light-well {
}
}
.projects-search-form
{
.projects-search-form
{
max-width
:
600px
;
margin
:
-15px
;
margin
:
0
auto
;
background-color
:
#f8fafc
;
margin-bottom
:
20px
;
padding
:
18px
;
margin-bottom
:
10px
;
border-top
:
1px
solid
#e7e9ed
;
border-bottom
:
1px
solid
#e7e9ed
;
input
{
border-color
:
#BBB
;
.projects-list-filter
{
@include
input-big
;
padding
:
5px
18px
;
}
.btn
{
@include
btn-big
;
padding
:
5px
18px
;
}
}
}
}
...
@@ -269,20 +279,36 @@ pre.light-well {
...
@@ -269,20 +279,36 @@ pre.light-well {
@include
basic-list
;
@include
basic-list
;
.project-row
{
.project-row
{
padding
:
18px
;
border-color
:
#f1f2f4
;
margin
:
0
-15px
;
&
.no-description
{
.project
{
line-height
:
38px
;
}
}
.project-full-name
{
.project-full-name
{
@include
str-truncated
;
@include
str-truncated
;
font-weight
:
bold
;
font-weight
:
500
;
font-size
:
15px
;
font-size
:
16px
;
color
:
#4c4e54
;
}
.pull-right.light
{
line-height
:
38px
;
color
:
#7f8fa4
;
}
}
.project-description
{
.project-description
{
color
:
#
888
;
color
:
#
7f8fa4
;
font-size
:
1
3
px
;
font-size
:
1
6
px
;
p
{
p
{
@include
str-truncated
;
@include
str-truncated
;
margin-bottom
:
0
;
margin-bottom
:
0
;
color
:
#
888
;
color
:
#
7f8fa4
;
}
}
}
}
}
}
...
@@ -290,4 +316,5 @@ pre.light-well {
...
@@ -290,4 +316,5 @@ pre.light-well {
.panel
.projects-list
li
{
.panel
.projects-list
li
{
padding
:
10px
15px
;
padding
:
10px
15px
;
margin
:
0
;
}
}
app/assets/stylesheets/themes/gitlab-theme.scss
View file @
4406aeff
...
@@ -9,7 +9,7 @@
...
@@ -9,7 +9,7 @@
@mixin
gitlab-theme
(
$color-light
,
$color
,
$color-darker
,
$color-dark
)
{
@mixin
gitlab-theme
(
$color-light
,
$color
,
$color-darker
,
$color-dark
)
{
.page-with-sidebar
{
.page-with-sidebar
{
.header-logo
{
.header-logo
{
background-color
:
$color
-darker
;
background-color
:
$color
;
border-color
:
$color-darker
;
border-color
:
$color-darker
;
a
{
a
{
...
@@ -17,7 +17,7 @@
...
@@ -17,7 +17,7 @@
}
}
&
:hover
{
&
:hover
{
background-color
:
$color-dark
;
background-color
:
$color-dark
er
;
a
{
a
{
color
:
#FFF
;
color
:
#FFF
;
}
}
...
@@ -26,7 +26,7 @@
...
@@ -26,7 +26,7 @@
.collapse-nav
a
{
.collapse-nav
a
{
color
:
#FFF
;
color
:
#FFF
;
background
:
$color
;
background
:
$color
-darker
;
}
}
.sidebar-wrapper
{
.sidebar-wrapper
{
...
@@ -83,7 +83,7 @@
...
@@ -83,7 +83,7 @@
}
}
$theme-blue
:
#2980B9
;
$theme-blue
:
#2980B9
;
$theme-charcoal
:
#
474D5
7
;
$theme-charcoal
:
#
333c4
7
;
$theme-graphite
:
#888888
;
$theme-graphite
:
#888888
;
$theme-gray
:
#373737
;
$theme-gray
:
#373737
;
$theme-green
:
#019875
;
$theme-green
:
#019875
;
...
@@ -95,7 +95,7 @@ body {
...
@@ -95,7 +95,7 @@ body {
}
}
&
.ui_charcoal
{
&
.ui_charcoal
{
@include
gitlab-theme
(
#
979DA7
,
$theme-charcoal
,
#373D47
,
#24272D
);
@include
gitlab-theme
(
#
c5d0de
,
$theme-charcoal
,
#2b333d
,
#24272D
);
}
}
&
.ui_graphite
{
&
.ui_graphite
{
...
...
app/views/layouts/_page.html.haml
View file @
4406aeff
...
@@ -14,7 +14,7 @@
...
@@ -14,7 +14,7 @@
=
render
partial:
'layouts/collapse_button'
=
render
partial:
'layouts/collapse_button'
-
if
current_user
-
if
current_user
=
link_to
current_user
,
class:
'sidebar-user'
do
=
link_to
current_user
,
class:
'sidebar-user'
do
=
image_tag
avatar_icon
(
current_user
.
email
,
60
),
alt:
'User activity'
,
class:
'avatar avatar s
32
'
=
image_tag
avatar_icon
(
current_user
.
email
,
60
),
alt:
'User activity'
,
class:
'avatar avatar s
48
'
.username
.username
=
current_user
.
username
=
current_user
.
username
.content-wrapper
.content-wrapper
...
...
app/views/shared/projects/_project.html.haml
View file @
4406aeff
-
avatar
=
true
unless
local_assigns
[
:avatar
]
==
false
-
avatar
=
true
unless
local_assigns
[
:avatar
]
==
false
-
stars
=
true
unless
local_assigns
[
:stars
]
==
false
-
stars
=
true
unless
local_assigns
[
:stars
]
==
false
-
css_class
=
nil
unless
local_assigns
[
:css_class
]
-
css_class
=
''
unless
local_assigns
[
:css_class
]
-
css_class
+=
" no-description"
unless
project
.
description
.
present?
%li
.project-row
{
class:
css_class
}
%li
.project-row
{
class:
css_class
}
=
cache
[
project
.
namespace
,
project
,
controller
.
controller_name
,
controller
.
action_name
,
'v2'
]
do
=
cache
[
project
.
namespace
,
project
,
controller
.
controller_name
,
controller
.
action_name
,
'v2'
]
do
=
link_to
project_path
(
project
),
class:
dom_class
(
project
)
do
=
link_to
project_path
(
project
),
class:
dom_class
(
project
)
do
...
...
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