Use flexbox instead of bootstrap columns

This commit is contained in:
Annabel Dunstone Gray 2017-11-08 16:27:41 -07:00
parent 5c909f2b71
commit 95ab3bf5b1
No known key found for this signature in database
GPG Key ID: 7C8C78A372AD7A2D
4 changed files with 102 additions and 91 deletions

View File

@ -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;

View File

@ -1,28 +1,25 @@
.row
.col-md-6
= 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-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?
.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.
= 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.

View File

@ -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
- 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 new_group_path, class: "blank-state-link" do
.blank-state
.blank-state-icon
= custom_icon("lightbulb", size: 50)
= custom_icon("add_new_group", size: 50)
.blank-state-body
%h3.blank-state-title
Learn more about GitLab
Create a group
%p.blank-state-text
Take a look at the documentation to discover all of GitLab's capabilities.
Groups are the best way to manage projects and members.
- 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.

View File

@ -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"