Merge branch 'ee-3615-improve-welcome-screen' into 'master'

Reorganize landing page for new users - EE

See merge request gitlab-org/gitlab-ee!3317

app/assets/stylesheets/framework/blank.scss

@@ -7,29 +7,68 @@
     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-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  height: 100%;
+}
+
+.blank-state-welcome {
   text-align: center;
+  padding: 20px 0 40px;
+
+  .blank-state-welcome-title {
+    font-size: 24px;
+  }
+
+  .blank-state-text {
+    margin-bottom: 0;
+  }
+}
+
+.blank-state-link {
+  display: block;
+  color: $gl-text-color;
+  flex: 0 0 100%;
+  margin-bottom: 15px;
 
-  &.blank-state-welcome {
-    .blank-state-welcome-title {
-      font-size: 24px;
+  @media (min-width: $screen-sm-min) {
+    flex: 0 0 49%;
+
+    &:nth-child(odd) {
+      margin-right: 5px;
     }
 
-    .blank-state-text {
-      margin-bottom: 0;
+    &:nth-child(even) {
+      margin-left: 5px;
     }
   }
 
-  .blank-state-icon {
-    padding-bottom: 20px;
+  &:hover {
+    background-color: $gray-light;
+    text-decoration: none;
+    color: $gl-text-color;
+  }
+}
+
+.blank-state {
+  padding: 20px;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-default;
 
+  @media (min-width: $screen-sm-min) {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    padding: 50px 30px;
+  }
+
+  .blank-state-icon {
     svg {
       display: block;
       margin: auto;
@@ -38,33 +77,46 @@
 
   .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 {
+    @media (max-width: $screen-xs-max) {
+      text-align: center;
+      margin-top: 20px;
+    }
+
+    @media (min-width: $screen-sm-min) {
+      padding-left: 20px;
+    }
   }
 }
 
 /* EE-specific Styles */
-@media (min-width: $screen-md-min) {
-  .blank-state-parent-container.has-start-trial-container {
-    display: flex;
+
+@media (min-width: $screen-lg-min) {
+  .column-large {
+    flex: 2;
   }
-}
 
-.section-ee-trial {
-  .section-body {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  .column-small {
+    flex: 1;
+    margin-bottom: 15px;
 
     .blank-state {
-      padding: 20px;
-      text-align: center;
+      max-width: 400px;
+      flex-wrap: wrap;
+      margin-left: 15px;
     }
+
+    .blank-state-icon {
+      margin-bottom: 30px;
+    }
+  }
+}
+
+@media (max-width: $screen-xs-max) {
+  .blank-state-icon svg {
+    width: 315px;
   }
 }

app/views/dashboard/projects/_blank_state_admin_welcome.html.haml

-.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
+.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.
 
-.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?
+    = 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
+    = 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 people
+          %p.blank-state-text
+            Add your team members and others to GitLab.
+
+  = 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.

app/views/dashboard/projects/_blank_state_welcome.html.haml

 - 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-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)
+        .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
+      .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.
 
-.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.
-    - if current_user.can_create_project?
-      = link_to new_project_path, class: "btn btn-new" do
-        New project
+  - if current_user.can_create_group?
+    = 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
-  .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
+    = 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.
+
+  = 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.

app/views/dashboard/projects/_zero_authorized_projects.html.haml

 - admin_without_ee_license = !current_license && current_user.admin?
 
-.row.blank-state-parent-container{ class: ('has-start-trial-container' if admin_without_ee_license) }
+.blank-state-parent-container{ class: ('has-start-trial-container' if admin_without_ee_license) }
   .section-container.section-welcome{ class: ('col-md-6' if admin_without_ee_license) }
     .container.section-body
-      .blank-state.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"
-  - if admin_without_ee_license
-    .col-md-6.section-container.section-ee-trial
-      .container.section-body
-        = render "blank_state_ee_trial"
+      .row
+        .blank-state-welcome
+          %h2.blank-state-welcome-title
+            Welcome to GitLab
+          %p.blank-state-text
+            Code, test, and deploy together
+        .blank-state-row
+          %div{ class: ('column-large' if admin_without_ee_license) }
+            - if current_user.admin?
+              = render "blank_state_admin_welcome"
+            - else
+              = render "blank_state_welcome"
+          - if admin_without_ee_license
+            .column-small
+              = render "blank_state_ee_trial"

app/views/shared/icons/_add_new_project.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="78" height="82" viewBox="0 0 78 82"><g fill="none" fill-rule="evenodd"><path fill="#F9F9F9" d="M2.12 42c-.08.99-.12 1.99-.12 3 0 20.435 16.565 37 37 37s37-16.565 37-37c0-1.01-.04-2.01-.12-3C74.353 61.032 58.425 76 39 76 19.575 76 3.647 61.032 2.12 42z"/><path fill="#EEE" fill-rule="nonzero" d="M39 78C17.46 78 0 60.54 0 39S17.46 0 39 0s39 17.46 39 39-17.46 39-39 39zm0-4c19.33 0 35-15.67 35-35S58.33 4 39 4 4 19.67 4 39s15.67 35 35 35z"/><path fill="#FEE1D3" fill-rule="nonzero" d="M30 24a4 4 0 0 0-4 4v22a4 4 0 0 0 4 4h18a4 4 0 0 0 4-4V28a4 4 0 0 0-4-4H30zm0-4h18a8 8 0 0 1 8 8v22a8 8 0 0 1-8 8H30a8 8 0 0 1-8-8V28a8 8 0 0 1 8-8z"/><path fill="#FC6D26" d="M33 30h8a2 2 0 1 1 0 4h-8a2 2 0 1 1 0-4zm0 7h12a2 2 0 1 1 0 4H33a2 2 0 1 1 0-4zm0 7h12a2 2 0 1 1 0 4H33a2 2 0 1 1 0-4z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="78" height="82" viewBox="0 0 78 82"><g fill="none" fill-rule="evenodd"><path fill="#F9F9F9" d="M2.12 42c-.08.99-.12 1.99-.12 3 0 20.435 16.565 37 37 37s37-16.565 37-37c0-1.01-.04-2.01-.12-3C74.353 61.032 58.425 76 39 76S3.647 61.032 2.12 42z"/><path fill="#EEE" fill-rule="nonzero" d="M39 78C17.46 78 0 60.54 0 39S17.46 0 39 0s39 17.46 39 39-17.46 39-39 39zm0-4c19.33 0 35-15.67 35-35S58.33 4 39 4 4 19.67 4 39s15.67 35 35 35z"/><path fill="#E1DBF2" fill-rule="nonzero" d="M30 24c-2.21 0-4 1.79-4 4v22c0 2.21 1.79 4 4 4h18c2.21 0 4-1.79 4-4V28c0-2.21-1.79-4-4-4H30zm0-4h18c4.418 0 8 3.582 8 8v22c0 4.418-3.582 8-8 8H30c-4.418 0-8-3.582-8-8V28c0-4.418 3.582-8 8-8z"/><path fill="#6B4FBB" d="M33 30h8c1.105 0 2 .895 2 2s-.895 2-2 2h-8c-1.105 0-2-.895-2-2s.895-2 2-2zm0 7h12c1.105 0 2 .895 2 2s-.895 2-2 2H33c-1.105 0-2-.895-2-2s.895-2 2-2zm0 7h12c1.105 0 2 .895 2 2s-.895 2-2 2H33c-1.105 0-2-.895-2-2s.895-2 2-2z"/></g></svg>
\ No newline at end of file

app/views/shared/icons/_lightbulb.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="78" height="82" viewBox="0 0 78 82"><g fill="none" fill-rule="evenodd"><path fill="#F9F9F9" d="M2.12 42c-.08.99-.12 1.99-.12 3 0 20.435 16.565 37 37 37s37-16.565 37-37c0-1.01-.04-2.01-.12-3C74.353 61.032 58.425 76 39 76S3.647 61.032 2.12 42z"/><path fill="#EEE" fill-rule="nonzero" d="M39 78C17.46 78 0 60.54 0 39S17.46 0 39 0s39 17.46 39 39-17.46 39-39 39zm0-4c19.33 0 35-15.67 35-35S58.33 4 39 4 4 19.67 4 39s15.67 35 35 35z"/><path fill="#6B4FBB" d="M33 52h12c1.105 0 2 .895 2 2s-.895 2-2 2H33c-1.105 0-2-.895-2-2s.895-2 2-2zm1 5h10c1.105 0 2 .895 2 2s-.895 2-2 2H34c-1.105 0-2-.895-2-2s.895-2 2-2z"/><path fill="#E1DBF2" fill-rule="nonzero" d="M45.542 46.932l.346-2.36c.198-1.348.737-2.623 1.566-3.705 3.025-3.946 4.485-7.29 4.547-9.96C52.153 24.41 46.843 20 39 20c-7.777 0-13 4.374-13 11 0 2.4 1.462 5.73 4.573 9.846.815 1.08 1.343 2.345 1.536 3.683l.353 2.456 13.08-.054zm-17.038.624L28.15 45.1c-.097-.67-.36-1.303-.768-1.842C23.794 38.51 22 34.424 22 31c0-9.39 7.61-15 17-15s17.218 5.614 17 15c-.085 3.64-1.875 7.74-5.37 12.3-.416.54-.685 1.18-.784 1.853l-.346 2.36c-.288 1.958-1.963 3.41-3.942 3.42l-13.08.053c-1.994.008-3.69-1.455-3.974-3.43z"/><path fill="#6B4FBB" d="M41 38.732c-.598-.345-1-.992-1-1.732 0-1.105.895-2 2-2s2 .895 2 2c0 .74-.402 1.387-1 1.732V42c0 .552-.448 1-1 1s-1-.448-1-1v-3.268zm-6 0c-.598-.345-1-.992-1-1.732 0-1.105.895-2 2-2s2 .895 2 2c0 .74-.402 1.387-1 1.732V42c0 .552-.448 1-1 1s-1-.448-1-1v-3.268z"/></g></svg>

changelogs/unreleased/3615-improve-welcome-screen.yml

+---
+title: Reorganize welcome page for new users
+merge_request:
+author:
+type: other