Use flexbox instead of bootstrap columns3615-improve-welcome-screen

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"