From 62aac539b90c7f149ed1eb4c64419f67377a209c Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Mon, 21 Dec 2015 15:47:29 -0500 Subject: [PATCH 1/5] project header --- app/assets/stylesheets/framework/common.scss | 3 +- app/assets/stylesheets/pages/projects.scss | 36 +++++++++++++++++-- app/views/dashboard/_projects_head.html.haml | 27 ++++++++------ .../dashboard/projects/_projects.html.haml | 8 ----- 4 files changed, 52 insertions(+), 22 deletions(-) diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 7562ef6d24b..8b6c15a9c2d 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -376,11 +376,12 @@ table { .center-top-menu { @include nav-menu; - text-align: center; + text-align: left; margin-top: 5px; margin-bottom: $gl-padding; height: auto; margin-top: -$gl-padding; + border-bottom: 1px solid #EEE; &.no-bottom { margin-bottom: 0; diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 2ded32dba12..c379057698d 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -335,6 +335,29 @@ ul.nav.nav-projects-tabs { } } +.top-area { + border-bottom: 1px solid #EEE; + + ul.center-top-menu { + display: inline-block; + width: 50%; + margin-bottom: 0px; + border-bottom: none; + } + + .projects-search-form { + width: 50%; + display: inline-block; + float: right; + padding-top: 7px; + + .btn-green { + margin-top: -2px; + margin-left: 10px; + } + } +} + .fork-namespaces { .fork-thumbnail { text-align: center; @@ -412,11 +435,18 @@ pre.light-well { .projects-search-form { margin: -$gl-padding; - background-color: #f8fafc; padding: $gl-padding; margin-bottom: 0px; - border-top: 1px solid #e7e9ed; - border-bottom: 1px solid #e7e9ed; + + input { + display: inline-block; + width: calc(100% - 148px); + } + + .btn { + display: inline-block; + width: 135px; + } } .git-empty { diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml index 2e77afb7525..a977b241971 100644 --- a/app/views/dashboard/_projects_head.html.haml +++ b/app/views/dashboard/_projects_head.html.haml @@ -1,13 +1,20 @@ = content_for :flash_message do = render 'shared/project_limit' +.top-area + %ul.center-top-menu + = nav_link(page: [dashboard_projects_path, root_path]) do + = link_to dashboard_projects_path, title: 'Home', class: 'shortcuts-activity', data: {placement: 'right'} do + Your Projects + = nav_link(page: starred_dashboard_projects_path) do + = link_to starred_dashboard_projects_path, title: 'Starred Projects', data: {placement: 'right'} do + Starred Projects + = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path], html_options: { class: 'hidden-xs' }) do + = link_to explore_root_path, title: 'Explore', data: {placement: 'right'} do + Explore Projects -%ul.center-top-menu - = nav_link(page: [dashboard_projects_path, root_path]) do - = link_to dashboard_projects_path, title: 'Home', class: 'shortcuts-activity', data: {placement: 'right'} do - Your Projects - = nav_link(page: starred_dashboard_projects_path) do - = link_to starred_dashboard_projects_path, title: 'Starred Projects', data: {placement: 'right'} do - Starred Projects - = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path], html_options: { class: 'hidden-xs' }) do - = link_to explore_root_path, title: 'Explore', data: {placement: 'right'} do - Explore Projects + .projects-search-form + = search_field_tag :filter_projects, nil, placeholder: 'Filter by name...', class: 'projects-list-filter form-control', spellcheck: false + - if current_user.can_create_project? + = link_to new_project_path, class: 'btn btn-green' do + %i.fa.fa-plus + New Project diff --git a/app/views/dashboard/projects/_projects.html.haml b/app/views/dashboard/projects/_projects.html.haml index 81a5909e2d2..cea9ffcc748 100644 --- a/app/views/dashboard/projects/_projects.html.haml +++ b/app/views/dashboard/projects/_projects.html.haml @@ -1,11 +1,3 @@ .projects-list-holder - .projects-search-form - .input-group - = search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control', spellcheck: false - - if current_user.can_create_project? - %span.input-group-btn - = link_to new_project_path, class: 'btn btn-green' do - %i.fa.fa-plus - New Project = render 'shared/projects/list', projects: @projects, ci: true From 48ecb614e795668f40e03174c98ad7fb4adef7a2 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Mon, 21 Dec 2015 15:47:29 -0500 Subject: [PATCH 2/5] project header --- app/assets/stylesheets/framework/common.scss | 3 +- app/assets/stylesheets/pages/projects.scss | 36 +++++++++++++++++-- app/views/dashboard/_projects_head.html.haml | 27 ++++++++------ .../dashboard/projects/_projects.html.haml | 8 ----- 4 files changed, 52 insertions(+), 22 deletions(-) diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 7562ef6d24b..8b6c15a9c2d 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -376,11 +376,12 @@ table { .center-top-menu { @include nav-menu; - text-align: center; + text-align: left; margin-top: 5px; margin-bottom: $gl-padding; height: auto; margin-top: -$gl-padding; + border-bottom: 1px solid #EEE; &.no-bottom { margin-bottom: 0; diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 2ded32dba12..c379057698d 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -335,6 +335,29 @@ ul.nav.nav-projects-tabs { } } +.top-area { + border-bottom: 1px solid #EEE; + + ul.center-top-menu { + display: inline-block; + width: 50%; + margin-bottom: 0px; + border-bottom: none; + } + + .projects-search-form { + width: 50%; + display: inline-block; + float: right; + padding-top: 7px; + + .btn-green { + margin-top: -2px; + margin-left: 10px; + } + } +} + .fork-namespaces { .fork-thumbnail { text-align: center; @@ -412,11 +435,18 @@ pre.light-well { .projects-search-form { margin: -$gl-padding; - background-color: #f8fafc; padding: $gl-padding; margin-bottom: 0px; - border-top: 1px solid #e7e9ed; - border-bottom: 1px solid #e7e9ed; + + input { + display: inline-block; + width: calc(100% - 148px); + } + + .btn { + display: inline-block; + width: 135px; + } } .git-empty { diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml index 2e77afb7525..a977b241971 100644 --- a/app/views/dashboard/_projects_head.html.haml +++ b/app/views/dashboard/_projects_head.html.haml @@ -1,13 +1,20 @@ = content_for :flash_message do = render 'shared/project_limit' +.top-area + %ul.center-top-menu + = nav_link(page: [dashboard_projects_path, root_path]) do + = link_to dashboard_projects_path, title: 'Home', class: 'shortcuts-activity', data: {placement: 'right'} do + Your Projects + = nav_link(page: starred_dashboard_projects_path) do + = link_to starred_dashboard_projects_path, title: 'Starred Projects', data: {placement: 'right'} do + Starred Projects + = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path], html_options: { class: 'hidden-xs' }) do + = link_to explore_root_path, title: 'Explore', data: {placement: 'right'} do + Explore Projects -%ul.center-top-menu - = nav_link(page: [dashboard_projects_path, root_path]) do - = link_to dashboard_projects_path, title: 'Home', class: 'shortcuts-activity', data: {placement: 'right'} do - Your Projects - = nav_link(page: starred_dashboard_projects_path) do - = link_to starred_dashboard_projects_path, title: 'Starred Projects', data: {placement: 'right'} do - Starred Projects - = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path], html_options: { class: 'hidden-xs' }) do - = link_to explore_root_path, title: 'Explore', data: {placement: 'right'} do - Explore Projects + .projects-search-form + = search_field_tag :filter_projects, nil, placeholder: 'Filter by name...', class: 'projects-list-filter form-control', spellcheck: false + - if current_user.can_create_project? + = link_to new_project_path, class: 'btn btn-green' do + %i.fa.fa-plus + New Project diff --git a/app/views/dashboard/projects/_projects.html.haml b/app/views/dashboard/projects/_projects.html.haml index 81a5909e2d2..cea9ffcc748 100644 --- a/app/views/dashboard/projects/_projects.html.haml +++ b/app/views/dashboard/projects/_projects.html.haml @@ -1,11 +1,3 @@ .projects-list-holder - .projects-search-form - .input-group - = search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control', spellcheck: false - - if current_user.can_create_project? - %span.input-group-btn - = link_to new_project_path, class: 'btn btn-green' do - %i.fa.fa-plus - New Project = render 'shared/projects/list', projects: @projects, ci: true From 265750c80d8e8d1e9858b7b5f434f4aefbd351f7 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Wed, 23 Dec 2015 09:00:59 -0500 Subject: [PATCH 3/5] adds css for `left-top-menu`. Also hides buttons in certain for factors. --- app/assets/stylesheets/framework/common.scss | 8 ++++++-- app/assets/stylesheets/framework/mobile.scss | 2 +- app/assets/stylesheets/pages/projects.scss | 9 ++++++++- app/views/dashboard/_projects_head.html.haml | 4 ++-- 4 files changed, 17 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 8b6c15a9c2d..e864da15591 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -374,9 +374,9 @@ table { } } -.center-top-menu { +.center-top-menu, .left-top-menu { @include nav-menu; - text-align: left; + text-align: center; margin-top: 5px; margin-bottom: $gl-padding; height: auto; @@ -409,6 +409,10 @@ table { } } +.left-top-menu { + text-align: left; +} + .center-middle-menu { @include nav-menu; padding: 0; diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss index 6f44c323732..c00709fb6bb 100644 --- a/app/assets/stylesheets/framework/mobile.scss +++ b/app/assets/stylesheets/framework/mobile.scss @@ -81,7 +81,7 @@ display: none; } - .center-top-menu { + .center-top-menu, .left-top-menu { li a { font-size: 14px; padding: 19px 10px; diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index c379057698d..37197f61bc4 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -338,7 +338,7 @@ ul.nav.nav-projects-tabs { .top-area { border-bottom: 1px solid #EEE; - ul.center-top-menu { + ul.left-top-menu { display: inline-block; width: 50%; margin-bottom: 0px; @@ -350,12 +350,19 @@ ul.nav.nav-projects-tabs { display: inline-block; float: right; padding-top: 7px; + text-align: right; .btn-green { margin-top: -2px; margin-left: 10px; } } + + @media (max-width: $screen-xs-max) { + .projects-search-form { + padding-top: 15px; + } + } } .fork-namespaces { diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml index a977b241971..f4a3e3162bf 100644 --- a/app/views/dashboard/_projects_head.html.haml +++ b/app/views/dashboard/_projects_head.html.haml @@ -1,7 +1,7 @@ = content_for :flash_message do = render 'shared/project_limit' .top-area - %ul.center-top-menu + %ul.left-top-menu = nav_link(page: [dashboard_projects_path, root_path]) do = link_to dashboard_projects_path, title: 'Home', class: 'shortcuts-activity', data: {placement: 'right'} do Your Projects @@ -13,7 +13,7 @@ Explore Projects .projects-search-form - = search_field_tag :filter_projects, nil, placeholder: 'Filter by name...', class: 'projects-list-filter form-control', spellcheck: false + = search_field_tag :filter_projects, nil, placeholder: 'Filter by name...', class: 'projects-list-filter form-control hidden-xs', spellcheck: false - if current_user.can_create_project? = link_to new_project_path, class: 'btn btn-green' do %i.fa.fa-plus From 8831f5dcb5f43b31db152b0f81b911c6fa9e76cb Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Wed, 23 Dec 2015 10:41:29 -0500 Subject: [PATCH 4/5] moves border bottom to `left-menu-top` class. --- app/assets/stylesheets/framework/common.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index bf474fed534..11730000f85 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -376,12 +376,11 @@ table { .center-top-menu, .left-top-menu { @include nav-menu; - text-align: left; + text-align: center; margin-top: 5px; margin-bottom: $gl-padding; height: auto; margin-top: -$gl-padding; - border-bottom: 1px solid #EEE; &.no-bottom { margin-bottom: 0; @@ -411,6 +410,7 @@ table { .left-top-menu { text-align: left; + border-bottom: 1px solid #EEE; } .center-middle-menu { From 327c9680378346dfe7d6d49c90f90379c44a78cb Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Wed, 23 Dec 2015 10:48:42 -0500 Subject: [PATCH 5/5] fixes spacing between new project button and input --- app/assets/stylesheets/pages/projects.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 37197f61bc4..99006b9f5d1 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -447,7 +447,7 @@ pre.light-well { input { display: inline-block; - width: calc(100% - 148px); + width: calc(100% - 151px); } .btn {