From 0a7a9bbd2fd9aa5685f1aae9ac415c3750c88fd6 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Fri, 3 Nov 2017 12:32:00 -0700 Subject: Reorganize landing page for new users --- app/assets/stylesheets/framework/blank.scss | 47 +++++++---- .../projects/_blank_state_admin_welcome.html.haml | 63 +++++++------- .../projects/_blank_state_welcome.html.haml | 97 ++++++++++++---------- .../projects/_zero_authorized_projects.html.haml | 2 +- .../unreleased/3615-improve-welcome-screen.yml | 5 ++ 5 files changed, 120 insertions(+), 94 deletions(-) create mode 100644 changelogs/unreleased/3615-improve-welcome-screen.yml diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss index 6bb096fc5bd..9c3df7299b8 100644 --- a/app/assets/stylesheets/framework/blank.scss +++ b/app/assets/stylesheets/framework/blank.scss @@ -7,29 +7,43 @@ width: 100%; height: 100%; padding-bottom: 25px; - border: 1px solid $border-color; border-radius: $border-radius-default; } } -.blank-state { - padding-top: 20px; - padding-bottom: 20px; +.blank-state-welcome { text-align: center; + padding: 20px 0 40px; - &.blank-state-welcome { - .blank-state-welcome-title { - font-size: 24px; - } + .blank-state-welcome-title { + font-size: 24px; + } - .blank-state-text { - margin-bottom: 0; - } + .blank-state-text { + margin-bottom: 0; } +} - .blank-state-icon { - padding-bottom: 20px; +.blank-state-link { + display: block; + color: $gl-text-color; + &:hover { + background-color: $gray-light; + text-decoration: none; + color: $gl-text-color; + } +} + +.blank-state { + display: flex; + align-items: center; + padding: 50px 30px; + margin-bottom: 30px; + border: 1px solid $border-color; + border-radius: $border-radius-default; + + .blank-state-icon { svg { display: block; margin: auto; @@ -38,13 +52,10 @@ .blank-state-title { margin-top: 0; - margin-bottom: 10px; font-size: 18px; } - .blank-state-text { - max-width: $container-text-max-width; - margin: 0 auto $gl-padding; - font-size: 14px; + .blank-state-body { + padding-left: 20px; } } diff --git a/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml b/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml index 57544559824..486ca8d3924 100644 --- a/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml +++ b/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml @@ -1,33 +1,34 @@ -.blank-state - .blank-state-icon - = custom_icon("add_new_user", size: 50) - .blank-state-body - %h3.blank-state-title - Add user - %p.blank-state-text - Add your team members and others to GitLab. - = link_to new_admin_user_path, class: "btn btn-new" do - New user +.row + .col-md-6 + = link_to new_admin_user_path, class: "blank-state-link" do + .blank-state + .blank-state-icon + = custom_icon("add_new_user", size: 50) + .blank-state-body + %h3.blank-state-title + Add user + %p.blank-state-text + Add your team members and others to GitLab. -.blank-state - .blank-state-icon - = custom_icon("configure_server", size: 50) - .blank-state-body - %h3.blank-state-title - Configure GitLab - %p.blank-state-text - Make adjustments to how your GitLab instance is set up. - = link_to admin_root_path, class: "btn btn-new" do - Configure + - if current_user.can_create_group? + .col-md-6 + = link_to admin_root_path, class: "blank-state-link" do + .blank-state + .blank-state-icon + = custom_icon("add_new_group", size: 50) + .blank-state-body + %h3.blank-state-title + Create a group + %p.blank-state-text + Groups are a great way to organize projects and people. -- if current_user.can_create_group? - .blank-state - .blank-state-icon - = custom_icon("add_new_group", size: 50) - .blank-state-body - %h3.blank-state-title - Create a group - %p.blank-state-text - Groups are a great way to organize projects and people. - = link_to new_group_path, class: "btn btn-new" do - New group + .col-md-6 + = link_to admin_root_path, class: "blank-state-link" do + .blank-state + .blank-state-icon + = custom_icon("configure_server", size: 50) + .blank-state-body + %h3.blank-state-title + Configure GitLab + %p.blank-state-text + Make adjustments to how your GitLab instance is set up. diff --git a/app/views/dashboard/projects/_blank_state_welcome.html.haml b/app/views/dashboard/projects/_blank_state_welcome.html.haml index a93a3415ee1..91874784531 100644 --- a/app/views/dashboard/projects/_blank_state_welcome.html.haml +++ b/app/views/dashboard/projects/_blank_state_welcome.html.haml @@ -1,48 +1,57 @@ - public_project_count = ProjectsFinder.new(current_user: current_user).execute.count -- if current_user.can_create_group? - .blank-state - .blank-state-icon - = custom_icon("add_new_group", size: 50) - .blank-state-body - %h3.blank-state-title - Create a group for several dependent projects. - %p.blank-state-text - Groups are the best way to manage projects and members. - = link_to new_group_path, class: "btn btn-new" do - New group - -.blank-state - .blank-state-icon - = custom_icon("add_new_project", size: 50) - .blank-state-body - %h3.blank-state-title - Create a project - %p.blank-state-text - - if current_user.can_create_project? - You don't have access to any projects right now. - You can create up to - %strong= number_with_delimiter(current_user.projects_limit) - = succeed "." do - = "project".pluralize(current_user.projects_limit) - - else - If you are added to a project, it will be displayed here. +.row + .col-md-6 - if current_user.can_create_project? - = link_to new_project_path, class: "btn btn-new" do - New project + = link_to new_project_path, class: "blank-state-link" do + .blank-state + .blank-state-icon + = custom_icon("add_new_project", size: 50) + .blank-state-body + %h3.blank-state-title + Create a project + %p.blank-state-text + You don't have access to any projects right now. + You can create up to + %strong= number_with_delimiter(current_user.projects_limit) + = succeed "." do + = "project".pluralize(current_user.projects_limit) + - else + .blank-state + .blank-state-icon + = custom_icon("add_new_project", size: 50) + .blank-state-body + %h3.blank-state-title + Create a project + %p.blank-state-text + If you are added to a project, it will be displayed here. + + - if current_user.can_create_group? + .col-md-6 + = link_to new_group_path, class: "blank-state-link" do + .blank-state + .blank-state-icon + = custom_icon("add_new_group", size: 50) + .blank-state-body + %h3.blank-state-title + Create a group for several dependent projects. + %p.blank-state-text + Groups are the best way to manage projects and members. + + .clearfix -- if public_project_count > 0 - .blank-state - .blank-state-icon - = custom_icon("globe", size: 50) - .blank-state-body - %h3.blank-state-title - Explore public projects - %p.blank-state-text - There are - = number_with_delimiter(public_project_count) - public projects on this server. - Public projects are an easy way to allow - everyone to have read-only access. - = link_to trending_explore_projects_path, class: "btn btn-new" do - Browse projects + - if public_project_count > 0 + .col-md-6 + = link_to trending_explore_projects_path, class: "blank-state-link" do + .blank-state + .blank-state-icon + = custom_icon("globe", size: 50) + .blank-state-body + %h3.blank-state-title + Explore public projects + %p.blank-state-text + There are + = number_with_delimiter(public_project_count) + public projects on this server. + Public projects are an easy way to allow + everyone to have read-only access. diff --git a/app/views/dashboard/projects/_zero_authorized_projects.html.haml b/app/views/dashboard/projects/_zero_authorized_projects.html.haml index ad3fac6d164..1b564629e16 100644 --- a/app/views/dashboard/projects/_zero_authorized_projects.html.haml +++ b/app/views/dashboard/projects/_zero_authorized_projects.html.haml @@ -1,7 +1,7 @@ .row.blank-state-parent-container .section-container.section-welcome{ class: "#{ 'section-admin-welcome' if current_user.admin? }" } .container.section-body - .blank-state.blank-state-welcome + .blank-state-welcome %h2.blank-state-welcome-title Welcome to GitLab %p.blank-state-text diff --git a/changelogs/unreleased/3615-improve-welcome-screen.yml b/changelogs/unreleased/3615-improve-welcome-screen.yml new file mode 100644 index 00000000000..862efddb162 --- /dev/null +++ b/changelogs/unreleased/3615-improve-welcome-screen.yml @@ -0,0 +1,5 @@ +--- +title: Reorganize welcome page for new users +merge_request: +author: +type: other -- cgit v1.2.1 From 6377821a7f74ccc6465cdf7ccc85183d61fce481 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Mon, 6 Nov 2017 17:18:25 -0700 Subject: Add mobile styles --- app/assets/stylesheets/framework/blank.scss | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss index 9c3df7299b8..28cece67165 100644 --- a/app/assets/stylesheets/framework/blank.scss +++ b/app/assets/stylesheets/framework/blank.scss @@ -36,13 +36,17 @@ } .blank-state { - display: flex; - align-items: center; - padding: 50px 30px; + padding: 20px; margin-bottom: 30px; border: 1px solid $border-color; border-radius: $border-radius-default; + @media (min-width: $screen-sm-min) { + display: flex; + align-items: center; + padding: 50px 30px; + } + .blank-state-icon { svg { display: block; @@ -56,6 +60,13 @@ } .blank-state-body { - padding-left: 20px; + @media (max-width: $screen-xs-max) { + text-align: center; + margin-top: 20px; + } + + @media (min-width: $screen-sm-min) { + padding-left: 20px; + } } } -- cgit v1.2.1 From 250d606aab8a6f3450f1bfdc40047337a5ac19c5 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Mon, 6 Nov 2017 17:43:35 -0700 Subject: Update new project icon --- app/views/shared/icons/_add_new_project.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/shared/icons/_add_new_project.svg b/app/views/shared/icons/_add_new_project.svg index 3c1e15453df..cf8762944ca 100644 --- a/app/views/shared/icons/_add_new_project.svg +++ b/app/views/shared/icons/_add_new_project.svg @@ -1 +1 @@ - \ No newline at end of file + -- cgit v1.2.1 From f014fce11901f9815c9da038c212775a4780e05e Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Tue, 7 Nov 2017 12:53:02 -0700 Subject: Add four blocks to each welcome page --- .../projects/_blank_state_admin_welcome.html.haml | 19 +++++++++++++++---- .../dashboard/projects/_blank_state_welcome.html.haml | 19 +++++++++++++------ 2 files changed, 28 insertions(+), 10 deletions(-) diff --git a/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml b/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml index 486ca8d3924..4fe40054170 100644 --- a/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml +++ b/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml @@ -1,14 +1,14 @@ .row .col-md-6 - = link_to new_admin_user_path, class: "blank-state-link" do + = link_to new_project_path, class: "blank-state-link" do .blank-state .blank-state-icon - = custom_icon("add_new_user", size: 50) + = custom_icon("add_new_project", size: 50) .blank-state-body %h3.blank-state-title - Add user + Create a project %p.blank-state-text - Add your team members and others to GitLab. + Projects are where you store your code, access issues, wiki and other features of GitLab. - if current_user.can_create_group? .col-md-6 @@ -22,6 +22,17 @@ %p.blank-state-text Groups are a great way to organize projects and people. + .col-md-6 + = link_to "new_admin_user_path", class: "blank-state-link" do + .blank-state + .blank-state-icon + = custom_icon("add_new_user", size: 50) + .blank-state-body + %h3.blank-state-title + Add user + %p.blank-state-text + Add your team members and others to GitLab. + .col-md-6 = link_to admin_root_path, class: "blank-state-link" do .blank-state diff --git a/app/views/dashboard/projects/_blank_state_welcome.html.haml b/app/views/dashboard/projects/_blank_state_welcome.html.haml index 91874784531..981609797a7 100644 --- a/app/views/dashboard/projects/_blank_state_welcome.html.haml +++ b/app/views/dashboard/projects/_blank_state_welcome.html.haml @@ -11,11 +11,7 @@ %h3.blank-state-title Create a project %p.blank-state-text - You don't have access to any projects right now. - You can create up to - %strong= number_with_delimiter(current_user.projects_limit) - = succeed "." do - = "project".pluralize(current_user.projects_limit) + Projects are where you store your code, access issues, wiki and other features of GitLab. - else .blank-state .blank-state-icon @@ -34,7 +30,7 @@ = custom_icon("add_new_group", size: 50) .blank-state-body %h3.blank-state-title - Create a group for several dependent projects. + Create a group %p.blank-state-text Groups are the best way to manage projects and members. @@ -55,3 +51,14 @@ public projects on this server. Public projects are an easy way to allow everyone to have read-only access. + + .col-md-6 + = link_to "https://docs.gitlab.com/", class: "blank-state-link" do + .blank-state + .blank-state-icon + = custom_icon("globe", size: 50) + .blank-state-body + %h3.blank-state-title + Learn more about GitLab + %p.blank-state-text + Take a look at the documentation to discover all of GitLab's capabilities. -- cgit v1.2.1 From 5c909f2b71af760c88d8574328630b8d87479700 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Wed, 8 Nov 2017 13:04:21 -0700 Subject: Add new icon; update content --- app/views/dashboard/projects/_blank_state_admin_welcome.html.haml | 4 ++-- app/views/dashboard/projects/_blank_state_welcome.html.haml | 2 +- app/views/shared/icons/_lightbulb.svg | 1 + 3 files changed, 4 insertions(+), 3 deletions(-) create mode 100644 app/views/shared/icons/_lightbulb.svg diff --git a/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml b/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml index 4fe40054170..28a24653bfa 100644 --- a/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml +++ b/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml @@ -23,13 +23,13 @@ Groups are a great way to organize projects and people. .col-md-6 - = link_to "new_admin_user_path", class: "blank-state-link" do + = link_to new_admin_user_path, class: "blank-state-link" do .blank-state .blank-state-icon = custom_icon("add_new_user", size: 50) .blank-state-body %h3.blank-state-title - Add user + Add people %p.blank-state-text Add your team members and others to GitLab. diff --git a/app/views/dashboard/projects/_blank_state_welcome.html.haml b/app/views/dashboard/projects/_blank_state_welcome.html.haml index 981609797a7..cd88b3ea365 100644 --- a/app/views/dashboard/projects/_blank_state_welcome.html.haml +++ b/app/views/dashboard/projects/_blank_state_welcome.html.haml @@ -56,7 +56,7 @@ = link_to "https://docs.gitlab.com/", class: "blank-state-link" do .blank-state .blank-state-icon - = custom_icon("globe", size: 50) + = custom_icon("lightbulb", size: 50) .blank-state-body %h3.blank-state-title Learn more about GitLab diff --git a/app/views/shared/icons/_lightbulb.svg b/app/views/shared/icons/_lightbulb.svg new file mode 100644 index 00000000000..2fcc4c65f99 --- /dev/null +++ b/app/views/shared/icons/_lightbulb.svg @@ -0,0 +1 @@ + -- cgit v1.2.1 From 95ab3bf5b14213bf1edb19d1e936bb6548836124 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Wed, 8 Nov 2017 16:27:41 -0700 Subject: Use flexbox instead of bootstrap columns --- app/assets/stylesheets/framework/blank.scss | 22 +++++- .../projects/_blank_state_admin_welcome.html.haml | 54 +++++++------- .../projects/_blank_state_welcome.html.haml | 86 ++++++++++------------ .../projects/_zero_authorized_projects.html.haml | 21 +++--- 4 files changed, 97 insertions(+), 86 deletions(-) diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss index 28cece67165..10f9e9b70b0 100644 --- a/app/assets/stylesheets/framework/blank.scss +++ b/app/assets/stylesheets/framework/blank.scss @@ -11,6 +11,13 @@ } } +.blank-state-row { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + height: 100%; +} + .blank-state-welcome { text-align: center; padding: 20px 0 40px; @@ -27,6 +34,20 @@ .blank-state-link { display: block; color: $gl-text-color; + flex: 0 0 100%; + margin-bottom: 15px; + + @media (min-width: $screen-sm-min) { + flex: 0 0 49%; + + &:nth-child(odd) { + margin-right: 5px; + } + + &:nth-child(even) { + margin-left: 5px; + } + } &:hover { background-color: $gray-light; @@ -37,7 +58,6 @@ .blank-state { padding: 20px; - margin-bottom: 30px; border: 1px solid $border-color; border-radius: $border-radius-default; diff --git a/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml b/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml index 28a24653bfa..573a4b93d67 100644 --- a/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml +++ b/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml @@ -1,28 +1,25 @@ -.row - .col-md-6 - = link_to new_project_path, class: "blank-state-link" do +.blank-state-row + = link_to new_project_path, class: "blank-state-link" do + .blank-state + .blank-state-icon + = custom_icon("add_new_project", size: 50) + .blank-state-body + %h3.blank-state-title + Create a project + %p.blank-state-text + Projects are where you store your code, access issues, wiki and other features of GitLab. + + - if current_user.can_create_group? + = link_to admin_root_path, class: "blank-state-link" do .blank-state .blank-state-icon - = custom_icon("add_new_project", size: 50) + = custom_icon("add_new_group", size: 50) .blank-state-body %h3.blank-state-title - Create a project + Create a group %p.blank-state-text - Projects are where you store your code, access issues, wiki and other features of GitLab. + Groups are a great way to organize projects and people. - - if current_user.can_create_group? - .col-md-6 - = link_to admin_root_path, class: "blank-state-link" do - .blank-state - .blank-state-icon - = custom_icon("add_new_group", size: 50) - .blank-state-body - %h3.blank-state-title - Create a group - %p.blank-state-text - Groups are a great way to organize projects and people. - - .col-md-6 = link_to new_admin_user_path, class: "blank-state-link" do .blank-state .blank-state-icon @@ -33,13 +30,12 @@ %p.blank-state-text Add your team members and others to GitLab. - .col-md-6 - = link_to admin_root_path, class: "blank-state-link" do - .blank-state - .blank-state-icon - = custom_icon("configure_server", size: 50) - .blank-state-body - %h3.blank-state-title - Configure GitLab - %p.blank-state-text - Make adjustments to how your GitLab instance is set up. + = link_to admin_root_path, class: "blank-state-link" do + .blank-state + .blank-state-icon + = custom_icon("configure_server", size: 50) + .blank-state-body + %h3.blank-state-title + Configure GitLab + %p.blank-state-text + Make adjustments to how your GitLab instance is set up. diff --git a/app/views/dashboard/projects/_blank_state_welcome.html.haml b/app/views/dashboard/projects/_blank_state_welcome.html.haml index cd88b3ea365..8d5bddbb288 100644 --- a/app/views/dashboard/projects/_blank_state_welcome.html.haml +++ b/app/views/dashboard/projects/_blank_state_welcome.html.haml @@ -1,18 +1,8 @@ - public_project_count = ProjectsFinder.new(current_user: current_user).execute.count -.row - .col-md-6 - - if current_user.can_create_project? - = link_to new_project_path, class: "blank-state-link" do - .blank-state - .blank-state-icon - = custom_icon("add_new_project", size: 50) - .blank-state-body - %h3.blank-state-title - Create a project - %p.blank-state-text - Projects are where you store your code, access issues, wiki and other features of GitLab. - - else +.blank-state-row + - if current_user.can_create_project? + = link_to new_project_path, class: "blank-state-link" do .blank-state .blank-state-icon = custom_icon("add_new_project", size: 50) @@ -20,45 +10,49 @@ %h3.blank-state-title Create a project %p.blank-state-text - If you are added to a project, it will be displayed here. + Projects are where you store your code, access issues, wiki and other features of GitLab. + - else + .blank-state + .blank-state-icon + = custom_icon("add_new_project", size: 50) + .blank-state-body + %h3.blank-state-title + Create a project + %p.blank-state-text + If you are added to a project, it will be displayed here. - if current_user.can_create_group? - .col-md-6 - = link_to new_group_path, class: "blank-state-link" do - .blank-state - .blank-state-icon - = custom_icon("add_new_group", size: 50) - .blank-state-body - %h3.blank-state-title - Create a group - %p.blank-state-text - Groups are the best way to manage projects and members. - - .clearfix + = link_to new_group_path, class: "blank-state-link" do + .blank-state + .blank-state-icon + = custom_icon("add_new_group", size: 50) + .blank-state-body + %h3.blank-state-title + Create a group + %p.blank-state-text + Groups are the best way to manage projects and members. - if public_project_count > 0 - .col-md-6 - = link_to trending_explore_projects_path, class: "blank-state-link" do - .blank-state - .blank-state-icon - = custom_icon("globe", size: 50) - .blank-state-body - %h3.blank-state-title - Explore public projects - %p.blank-state-text - There are - = number_with_delimiter(public_project_count) - public projects on this server. - Public projects are an easy way to allow - everyone to have read-only access. - - .col-md-6 - = link_to "https://docs.gitlab.com/", class: "blank-state-link" do + = link_to trending_explore_projects_path, class: "blank-state-link" do .blank-state .blank-state-icon - = custom_icon("lightbulb", size: 50) + = custom_icon("globe", size: 50) .blank-state-body %h3.blank-state-title - Learn more about GitLab + Explore public projects %p.blank-state-text - Take a look at the documentation to discover all of GitLab's capabilities. + There are + = number_with_delimiter(public_project_count) + public projects on this server. + Public projects are an easy way to allow + everyone to have read-only access. + + = link_to "https://docs.gitlab.com/", class: "blank-state-link" do + .blank-state + .blank-state-icon + = custom_icon("lightbulb", size: 50) + .blank-state-body + %h3.blank-state-title + Learn more about GitLab + %p.blank-state-text + Take a look at the documentation to discover all of GitLab's capabilities. diff --git a/app/views/dashboard/projects/_zero_authorized_projects.html.haml b/app/views/dashboard/projects/_zero_authorized_projects.html.haml index 1b564629e16..18a82feb189 100644 --- a/app/views/dashboard/projects/_zero_authorized_projects.html.haml +++ b/app/views/dashboard/projects/_zero_authorized_projects.html.haml @@ -1,12 +1,13 @@ -.row.blank-state-parent-container +.blank-state-parent-container .section-container.section-welcome{ class: "#{ 'section-admin-welcome' if current_user.admin? }" } .container.section-body - .blank-state-welcome - %h2.blank-state-welcome-title - Welcome to GitLab - %p.blank-state-text - Code, test, and deploy together - - if current_user.admin? - = render "blank_state_admin_welcome" - - else - = render "blank_state_welcome" + .row + .blank-state-welcome + %h2.blank-state-welcome-title + Welcome to GitLab + %p.blank-state-text + Code, test, and deploy together + - if current_user.admin? + = render "blank_state_admin_welcome" + - else + = render "blank_state_welcome" -- cgit v1.2.1