Commit 9daac084 authored by Frédéric Caplette's avatar Frédéric Caplette

Merge branch 'cngo-tidy-dashboard-projects-empty-state' into 'master'

Improve dashboard projects blank state code

See merge request gitlab-org/gitlab!79782
parents 458ee618 38fb3bbd
......@@ -12,10 +12,10 @@ export default {
<template>
<div class="empty-state">
<div class="text-content">
<h4 class="blank-state-title js-blank-state-title">
<h4 class="js-blank-state-title">
{{ s__("Environments|You don't have any environments right now") }}
</h4>
<p class="blank-state-text">
<p>
{{
s__(`Environments|Environments are places where
code gets deployed, such as staging or production.`)
......
......@@ -46,7 +46,6 @@
@import 'framework/toggle';
@import 'framework/typography';
@import 'framework/zen';
@import 'framework/blank';
@import 'framework/wells';
@import 'framework/page_header';
@import 'framework/page_title';
......
.blank-state-parent-container {
.section-container {
padding: 10px;
}
.section-body {
width: 100%;
height: 100%;
padding-bottom: 25px;
border-radius: $border-radius-default;
}
}
.blank-state-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.blank-state-welcome {
text-align: center;
padding: $gl-padding 0 ($gl-padding * 2);
.blank-state-welcome-title {
font-size: 24px;
}
.blank-state-text {
margin-bottom: 0;
}
}
.blank-state-link {
color: $gl-text-color;
margin-bottom: 15px;
&:hover {
background-color: $gray-light;
text-decoration: none;
color: $gl-text-color;
}
}
.blank-state-center {
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
.blank-state {
display: flex;
align-items: center;
padding: 20px 50px;
border: 1px solid $border-color;
border-radius: $border-radius-default;
min-height: 240px;
margin-bottom: $gl-padding;
width: calc(50% - #{$gl-padding-8});
@include media-breakpoint-down(sm) {
width: 100%;
flex-direction: column;
justify-content: center;
padding: 50px 20px;
.column-small & {
width: 100%;
}
}
}
.blank-state,
.blank-state-center {
.blank-state-icon {
svg {
display: block;
margin: auto;
}
}
.blank-state-title {
margin-top: 0;
font-size: 18px;
}
.blank-state-body {
@include media-breakpoint-down(sm) {
text-align: center;
margin-top: 20px;
}
@include media-breakpoint-up(sm) {
padding-left: 20px;
}
}
}
@include media-breakpoint-up(lg) {
.column-large {
flex: 2;
}
.column-small {
flex: 1;
margin-bottom: 15px;
.blank-state {
max-width: 400px;
flex-wrap: wrap;
margin-left: 15px;
}
.blank-state-icon {
margin-bottom: 30px;
}
}
}
@import 'mixins_and_variables_and_functions';
.blank-state {
padding: 20px 50px;
min-height: 240px;
width: calc(50% - #{$gl-padding-8});
@include media-breakpoint-down(sm) {
width: 100%;
flex-direction: column;
justify-content: center;
padding: 50px 20px;
}
}
.blank-state-link {
&:hover {
background-color: $gray-light;
text-decoration: none;
color: $gl-text-color;
}
}
.blank-state-icon {
svg {
display: block;
}
}
.blank-state-body {
@include media-breakpoint-down(sm) {
text-align: center;
margin-top: 20px;
}
}
.blank-state-row
- link_classes = "blank-state blank-state-link gl-text-body gl-display-flex gl-align-items-center gl-border-1 gl-border-solid gl-border-gray-100 gl-rounded-base gl-mb-5"
.gl-display-flex.gl-flex-wrap.gl-justify-content-space-between
- if has_start_trial?
= render_if_exists "dashboard/projects/blank_state_ee_trial"
= link_to new_project_path, class: "blank-state blank-state-link" do
= link_to new_project_path, class: link_classes do
.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-body.gl-sm-pl-0.gl-pl-6
%h3.gl-font-size-h2.gl-mt-0
= _('Create a project')
%p
= _('Projects are where you store your code, access issues, wiki and other features of GitLab.')
- if current_user.can_create_group?
= link_to new_group_path, class: "blank-state blank-state-link" do
= link_to new_group_path, class: link_classes do
.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.
.blank-state-body.gl-sm-pl-0.gl-pl-6
%h3.gl-font-size-h2.gl-mt-0
= _('Create a group')
%p
= _('Groups are a great way to organize projects and people.')
= link_to new_admin_user_path, class: "blank-state blank-state-link" do
= link_to new_admin_user_path, class: link_classes do
.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.
.blank-state-body.gl-sm-pl-0.gl-pl-6
%h3.gl-font-size-h2.gl-mt-0
= _('Add people')
%p
= _('Add your team members and others to GitLab.')
= link_to admin_root_path, class: "blank-state blank-state-link" do
= link_to admin_root_path, class: link_classes do
.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.
.blank-state-body.gl-sm-pl-0.gl-pl-6
%h3.gl-font-size-h2.gl-mt-0
= _('Configure GitLab')
%p
= _('Make adjustments to how your GitLab instance is set up.')
.blank-state-row
- link_classes = "blank-state blank-state-link gl-text-body gl-display-flex gl-align-items-center gl-border-1 gl-border-solid gl-border-gray-100 gl-rounded-base gl-mb-5"
.gl-display-flex.gl-flex-wrap.gl-justify-content-space-between
- if current_user.can_create_project?
= link_to new_project_path, class: "blank-state blank-state-link" do
= link_to new_project_path, class: link_classes do
.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-body.gl-sm-pl-0.gl-pl-6
%h3.gl-font-size-h2.gl-mt-0
= _('Create a project')
%p
= _('Projects are where you store your code, access issues, wiki and other features of GitLab.')
- else
.blank-state
.blank-state.gl-display-flex.gl-align-items-center.gl-border-1.gl-border-solid.gl-border-gray-100.gl-rounded-base.gl-mb-5
.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-body.gl-sm-pl-0.gl-pl-6
%h3.gl-font-size-h2.gl-mt-0
= _('Create a project')
%p
= _('If you are added to a project, it will be displayed here.')
- if current_user.can_create_group?
= link_to new_group_path, class: "blank-state blank-state-link" do
= link_to new_group_path, class: link_classes do
.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.
.blank-state-body.gl-sm-pl-0.gl-pl-6
%h3.gl-font-size-h2.gl-mt-0
= _('Create a group')
%p
= _('Groups are the best way to manage projects and members.')
= link_to trending_explore_projects_path, class: "blank-state blank-state-link" do
= link_to trending_explore_projects_path, class: link_classes do
.blank-state-icon
= custom_icon("globe", size: 50)
.blank-state-body
%h3.blank-state-title
Explore public projects
%p.blank-state-text
Public projects are an easy way to allow
everyone to have read-only access.
.blank-state-body.gl-sm-pl-0.gl-pl-6
%h3.gl-font-size-h2.gl-mt-0
= _('Explore public projects')
%p
= _('Public projects are an easy way to allow everyone to have read-only access.')
= link_to "https://docs.gitlab.com/", class: "blank-state blank-state-link" do
= link_to "https://docs.gitlab.com/", class: link_classes do
.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.
.blank-state-body.gl-sm-pl-0.gl-pl-6
%h3.gl-font-size-h2.gl-mt-0
= _('Learn more about GitLab')
%p
= _('Take a look at the documentation to discover all of GitLab’s capabilities.')
.blank-state-parent-container
.section-container.section-welcome{ class: "#{ 'section-admin-welcome' if current_user.admin? }" }
.container.section-body
.row
.blank-state-welcome.w-100
%h2.blank-state-welcome-title{ data: { qa_selector: 'welcome_title_content' } }
.container
.gl-text-center.gl-pt-6.gl-pb-7
%h2.gl-font-size-h1{ data: { qa_selector: 'welcome_title_content' } }
= _('Welcome to GitLab')
%p.blank-state-text
%p.gl-m-0
= _('Faster releases. Better code. Less pain.')
- if current_user.admin?
= render "blank_state_admin_welcome"
......
......@@ -7,6 +7,7 @@
- page_title _("Projects")
- header_title _("Projects"), dashboard_projects_path
- add_page_specific_style 'page_bundles/dashboard_projects'
= render "projects/last_push"
- if show_projects?(@projects, params)
......
......@@ -14,7 +14,7 @@
.text-content
%h4.state-title
= _("You don't have any deployments right now.")
%p.blank-state-text
%p
= html_escape(_("Define environments in the deploy stage(s) in %{code_open}.gitlab-ci.yml%{code_close} to track deployments here.")) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
.text-center
= link_to _("Read more"), help_page_path("ci/environments/index.md"), class: "gl-button btn btn-confirm"
......
......@@ -257,6 +257,7 @@ module Gitlab
config.assets.precompile << "page_bundles/build.css"
config.assets.precompile << "page_bundles/ci_status.css"
config.assets.precompile << "page_bundles/cycle_analytics.css"
config.assets.precompile << "page_bundles/dashboard_projects.css"
config.assets.precompile << "page_bundles/dev_ops_reports.css"
config.assets.precompile << "page_bundles/environments.css"
config.assets.precompile << "page_bundles/epics.css"
......
-# EE:Self Managed
.blank-state
.blank-state.gl-display-flex.gl-align-items-center.gl-border-1.gl-border-solid.gl-border-gray-100.gl-rounded-base.gl-mb-5
.blank-state-icon
= image_tag("illustrations/lock_promotion.svg", { lazy: false })
.blank-state-body
%h3.blank-state-title
Unlock more features with GitLab Ultimate
%p.blank-state-text
GitLab is free to use.
Many features for larger teams are part of
our
= succeed "." do
= link_to "paid products", "https://about.gitlab.com/pricing/", target: "_blank", rel: "noopener noreferrer nofollow"
You can try Ultimate for free without
any obligation or payment details.
.blank-state-body.gl-sm-pl-0.gl-pl-6
%h3.gl-font-size-h2.gl-mt-0
= _('Unlock more features with GitLab Ultimate')
%p
= _('GitLab is free to use. Many features for larger teams are part of our %{link_start}paid products%{link_end}. You can try Ultimate for free without any obligation or payment details.').html_safe % { link_start: '<a href="https://about.gitlab.com/pricing/">'.html_safe, link_end: '</a>'.html_safe }
= link_to new_trial_url, class: "gl-button btn btn-success" do
Start free trial
= _('Start free trial')
......@@ -2200,6 +2200,9 @@ msgstr ""
msgid "Add or subtract spent time"
msgstr ""
msgid "Add people"
msgstr ""
msgid "Add previously merged commits"
msgstr ""
......@@ -2266,6 +2269,9 @@ msgstr ""
msgid "Add webhook"
msgstr ""
msgid "Add your team members and others to GitLab."
msgstr ""
msgid "Add/remove"
msgstr ""
......@@ -9099,6 +9105,9 @@ msgstr ""
msgid "Configure Dependency Scanning in `.gitlab-ci.yml`, creating this file if it does not already exist"
msgstr ""
msgid "Configure GitLab"
msgstr ""
msgid "Configure GitLab runners to start using the Web Terminal. %{helpStart}Learn more.%{helpEnd}"
msgstr ""
......@@ -10089,6 +10098,9 @@ msgstr ""
msgid "Create a Mattermost team for this group"
msgstr ""
msgid "Create a group"
msgstr ""
msgid "Create a merge request"
msgstr ""
......@@ -10113,6 +10125,9 @@ msgstr ""
msgid "Create a personal access token on your account to pull or push via %{protocol}."
msgstr ""
msgid "Create a project"
msgstr ""
msgid "Create an account using:"
msgstr ""
......@@ -14605,6 +14620,9 @@ msgstr ""
msgid "Explore public groups"
msgstr ""
msgid "Explore public projects"
msgstr ""
msgid "Explore snippets"
msgstr ""
......@@ -16349,6 +16367,9 @@ msgstr ""
msgid "GitLab is a single application for the entire software development lifecycle. From project planning and source code management to CI/CD, monitoring, and security."
msgstr ""
msgid "GitLab is free to use. Many features for larger teams are part of our %{link_start}paid products%{link_end}. You can try Ultimate for free without any obligation or payment details."
msgstr ""
msgid "GitLab is obtaining a Let's Encrypt SSL certificate for this domain. This process can take some time. Please try again later."
msgstr ""
......@@ -17459,6 +17480,12 @@ msgstr ""
msgid "Groups and subgroups"
msgstr ""
msgid "Groups are a great way to organize projects and people."
msgstr ""
msgid "Groups are the best way to manage projects and members."
msgstr ""
msgid "Groups to synchronize"
msgstr ""
......@@ -18138,6 +18165,9 @@ msgstr ""
msgid "If you add %{codeStart}needs%{codeEnd} to jobs in your pipeline you'll be able to view the %{codeStart}needs%{codeEnd} relationships between jobs in this tab as a %{linkStart}Directed Acyclic Graph (DAG)%{linkEnd}."
msgstr ""
msgid "If you are added to a project, it will be displayed here."
msgstr ""
msgid "If you did not initiate these sign-in attempts, please reach out to your administrator or enable two-factor authentication (2FA) on your account."
msgstr ""
......@@ -21169,6 +21199,9 @@ msgstr ""
msgid "Learn more about Auto DevOps"
msgstr ""
msgid "Learn more about GitLab"
msgstr ""
msgid "Learn more about Needs relationships"
msgstr ""
......@@ -21846,6 +21879,9 @@ msgstr ""
msgid "Maintenance mode"
msgstr ""
msgid "Make adjustments to how your GitLab instance is set up."
msgstr ""
msgid "Make and review changes in the browser with the Web IDE"
msgstr ""
......@@ -28594,6 +28630,9 @@ msgstr ""
msgid "Projects are organized into groups"
msgstr ""
msgid "Projects are where you store your code, access issues, wiki and other features of GitLab."
msgstr ""
msgid "Projects contributed to"
msgstr ""
......@@ -29245,6 +29284,9 @@ msgstr ""
msgid "Public projects Minutes cost factor"
msgstr ""
msgid "Public projects are an easy way to allow everyone to have read-only access."
msgstr ""
msgid "Publish to status page"
msgstr ""
......@@ -34242,6 +34284,9 @@ msgstr ""
msgid "Start date"
msgstr ""
msgid "Start free trial"
msgstr ""
msgid "Start merge train"
msgstr ""
......@@ -35316,6 +35361,9 @@ msgstr ""
msgid "TagsPage|protected"
msgstr ""
msgid "Take a look at the documentation to discover all of GitLab’s capabilities."
msgstr ""
msgid "Target Branch"
msgstr ""
......@@ -38488,6 +38536,9 @@ msgstr ""
msgid "Unlock account"
msgstr ""
msgid "Unlock more features with GitLab Ultimate"
msgstr ""
msgid "Unlock the discussion"
msgstr ""
......
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