Read about our upcoming Code of Conduct on this issue

Commit b1230bbd authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets
Browse files

Merge branch 'group-navigation-redesign' into 'master'

Redesign navigation for group pages

Part of #14838. This MR targets on desktop version. Mobile version improvements will be in separate merge request 

See merge request !3980
......@@ -28,6 +28,7 @@
&.s46 { width: 46px; height: 46px; margin-right: 15px; }
&.s48 { width: 48px; height: 48px; margin-right: 10px; }
&.s60 { width: 60px; height: 60px; margin-right: 12px; }
&.s70 { width: 70px; height: 70px; margin-right: 14px; }
&.s90 { width: 90px; height: 90px; margin-right: 15px; }
&.s110 { width: 110px; height: 110px; margin-right: 15px; }
&.s140 { width: 140px; height: 140px; margin-right: 20px; }
......
......@@ -155,6 +155,41 @@
right: auto;
}
}
&.groups-cover-block {
background: $white-light;
border-bottom: 1px solid $border-color;
text-align: left;
padding: 24px 0;
.group-info {
.cover-title {
margin-top: 9px;
}
p {
margin-bottom: 0;
}
}
@media (max-width: $screen-xs-max) {
text-align: center;
.avatar {
float: none;
}
}
}
.group-info {
h1 {
display: inline;
font-weight: normal;
font-size: 24px;
color: $gl-title-color;
}
}
}
.block-connector {
......
......@@ -30,6 +30,10 @@ header {
border: none;
border-bottom: 1px solid $border-color;
&.with-horizontal-nav {
border-bottom: none;
}
.container-fluid {
width: 100% !important;
filter: none;
......
......@@ -30,7 +30,7 @@
}
.rss-btn {
display: none !important;
display: none;
}
.project-home-links {
......
......@@ -26,8 +26,8 @@
}
&.active a {
color: #000;
border-bottom: 2px solid #4688f1;
border-bottom: 2px solid $link-underline-blue;
color: $black;
}
.badge {
......@@ -140,6 +140,12 @@
}
}
.project-filter-form {
input {
background-color: $background-color;
}
}
@media (max-width: $screen-xs-max) {
padding-bottom: 0;
......@@ -187,13 +193,31 @@
}
.layout-nav {
position: fixed;
top: $header-height;
width: 100%;
z-index: 1;
background: $background-color;
border-bottom: 1px solid $border-color;
transition-duration: .3s;
.controls {
float: right;
position: relative;
top: 10px;
padding: 7px 5px 0 0;
i {
color: $layout-link-gray;
}
.fa-rss,
.fa-cog {
font-size: 16px;
}
.fa-caret-down {
margin-left: 5px;
color: $gl-icon-color;
}
.dropdown {
margin-left: 7px;
......@@ -202,5 +226,34 @@
.nav-links {
border-bottom: none;
height: 51px;
white-space: nowrap;
overflow-x: auto;
li {
a {
padding-top: 10px;
}
a, i {
color: $layout-link-gray;
}
&.active {
a, i {
color: $black;
}
}
.badge {
color: $gl-icon-color;
}
}
}
}
.page-with-layout-nav {
margin-top: 50px;
}
......@@ -3,6 +3,7 @@
position: absolute;
width: 58px;
cursor: pointer;
margin-top: 8px;
}
.page-with-sidebar {
......@@ -62,7 +63,7 @@
float: left;
height: $header-height;
width: 100%;
padding: 11px 0 11px 22px;
padding-left: 22px;
overflow: hidden;
outline: none;
transition-duration: .3s;
......@@ -85,7 +86,7 @@
margin: 0;
margin-left: 50px;
font-size: 19px;
line-height: 41px;
line-height: 50px;
font-weight: normal;
}
}
......@@ -254,6 +255,10 @@
}
}
}
.layout-nav {
padding-right: $sidebar_collapsed_width;
}
}
.page-sidebar-expanded {
......@@ -280,6 +285,10 @@
}
}
}
.layout-nav {
padding-right: $sidebar_width;
}
}
.right-sidebar-collapsed {
......
......@@ -66,7 +66,7 @@ $gl-padding-top: 10px;
$row-hover: #f4f8fe;
$progress-color: #c0392b;
$avatar_radius: 50%;
$header-height: 58px;
$header-height: 50px;
$fixed-layout-width: 1280px;
$gl-avatar-size: 40px;
$error-exclamation-point: #e62958;
......@@ -75,6 +75,8 @@ $btn-transparent-color: #8f8f8f;
$settings-icon-size: 18px;
$provider-btn-group-border: #e5e5e5;
$provider-btn-not-active-color: #4688f1;
$link-underline-blue: #4a8bee;
$layout-link-gray: #7e7c7c;
/*
* Color schema
......@@ -109,6 +111,7 @@ $red-light: #e52c5a;
$red-normal: #d22852;
$red-dark: darken($red-normal, 5%);
$black: #000;
$black-transparent: rgba(0, 0, 0, 0.3);
$border-white-light: #f1f2f4;
......
......@@ -205,3 +205,21 @@
text-align: center;
}
}
.user-profile {
@media (max-width: $screen-xs-max) {
.cover-block {
padding-top: 20px;
}
.cover-controls {
position: static;
margin-bottom: 20px;
.btn {
display: inline-block;
width: 48%;
}
}
}
}
......@@ -34,10 +34,13 @@ def page_gutter_class
end
def nav_header_class
if nav_menu_collapsed?
"header-collapsed"
else
"header-expanded"
end
class_name =
if nav_menu_collapsed?
"header-collapsed"
else
"header-expanded"
end
class_name += " with-horizontal-nav" if defined?(nav) && nav
class_name
end
end
......@@ -3,7 +3,6 @@
= auto_discovery_link_tag(:atom, group_url(@group, format: :atom, private_token: current_user.private_token), title: "#{@group.name} activity")
- page_title "Activity"
- header_title group_title(@group, "Activity", activity_group_path(@group))
%section.activities
= render 'activities'
- header_title group_title(@group, "Settings", edit_group_path(@group))
.panel.panel-default.prepend-top-default
.panel-heading
Group settings
......
- page_title "Members"
- header_title group_title(@group, "Members", group_group_members_path(@group))
.group-members-page.prepend-top-default
- if current_user && current_user.can?(:admin_group_member, @group)
......
- page_title "Issues"
- header_title group_title(@group, "Issues", issues_group_path(@group))
= content_for :meta_tags do
- if current_user
= auto_discovery_link_tag(:atom, issues_group_url(@group, format: :atom, private_token: current_user.private_token), title: "#{@group.name} issues")
......
- page_title "Merge Requests"
- header_title group_title(@group, "Merge Requests", merge_requests_group_path(@group))
.top-area
= render 'shared/issuable/nav', type: :merge_requests
......
- page_title "Milestones"
- header_title group_title(@group, "Milestones", group_milestones_path(@group))
.top-area
= render 'shared/milestones_filter'
......
- page_title "Projects"
- header_title group_title(@group, "Projects", projects_group_path(@group))
.panel.panel-default.prepend-top-default
.panel-heading
......
......@@ -4,28 +4,20 @@
- if current_user
= auto_discovery_link_tag(:atom, group_url(@group, format: :atom, private_token: current_user.private_token), title: "#{@group.name} activity")
.cover-block
.cover-controls
- if @group && can?(current_user, :admin_group, @group)
= link_to icon('pencil'), edit_group_path(@group), class: 'btn'
- if current_user
= link_to icon('rss'), group_path(@group, { format: :atom, private_token: current_user.private_token }), title: "Feed", class: 'btn rss-btn'
.avatar-holder
.cover-block.groups-cover-block
.container-fluid.container-limited
= link_to group_icon(@group), target: '_blank' do
= image_tag group_icon(@group), class: "avatar group-avatar s90"
.cover-title
%h1
= @group.name
%span.visibility-icon.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
= visibility_level_icon(@group.visibility_level, fw: false)
.cover-desc.username
@#{@group.path}
- if @group.description.present?
.cover-desc.description
= markdown(@group.description, pipeline: :description)
= image_tag group_icon(@group), class: "avatar group-avatar s70"
.group-info
.cover-title
%h1
@#{@group.path}
%span.visibility-icon.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
= visibility_level_icon(@group.visibility_level, fw: false)
- if @group.description.present?
.cover-desc.description
= markdown(@group.description, pipeline: :description)
%div{ class: container_class }
.top-area
......
......@@ -26,7 +26,7 @@
.layout-nav
.container-fluid
= render "layouts/nav/#{nav}"
.content-wrapper
.content-wrapper{ class: ('page-with-layout-nav' if defined?(nav) && nav) }
= render "layouts/flash"
= yield :flash_message
%div{ class: (container_class unless @no_container) }
......
- page_title @group.name
- page_description @group.description unless page_description
- header_title group_title(@group) unless header_title
- sidebar "group" unless sidebar
- nav "group"
= render template: "layouts/application"
- page_title "Settings"
- header_title group_title(@group, "Settings", edit_group_path(@group))
- sidebar "group_settings"
- nav "group"
= render template: "layouts/group"
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment