From cd27bead2e16586f9dcb1c9a467afce18f39fcb0 Mon Sep 17 00:00:00 2001 From: Ezekiel Kigbo Date: Thu, 2 May 2019 14:49:11 +0200 Subject: [PATCH] Cleanup css classes and styles Use class and id syntax for button attributes Use feature flag variable and shorthand if expression Use shorthand if expression Use a classname instead of tag Simplify common rules Use size variable Move flex grow and shrink to utility classes Extract redused classes Remove unecessary styles --- app/assets/stylesheets/pages/projects.scss | 34 +++++++------------ app/views/dashboard/_projects_head.html.haml | 2 +- app/views/dashboard/projects/_nav.html.haml | 2 +- app/views/explore/projects/_filter.html.haml | 3 +- .../shared/projects/_search_bar.html.haml | 9 ++--- .../shared/projects/_sort_dropdown.html.haml | 2 +- 6 files changed, 22 insertions(+), 30 deletions(-) diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 6bd45ba3d4e..151af843c95 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -1476,10 +1476,16 @@ pre.light-well { .filtered-search { min-width: 30%; - flex: 1 1 0; + flex-basis: 0; .project-filter-form .project-filter-form-field { - padding-right: 8px; + padding-right: $gl-padding-8; + } + + .filtered-search, + .filtered-search-nav, + .filtered-search-dropdown { + flex-basis: 0; } @include media-breakpoint-down(lg) { @@ -1495,16 +1501,12 @@ pre.light-well { } } - .qa-reverse-sort { - max-width: 38px; - } - .filtered-search-box { border-radius: 3px 0 0 3px; } .dropdown-menu-toggle { - margin-left: 8px; + margin-left: $gl-padding-8; } @include media-breakpoint-down(md) { @@ -1514,27 +1516,15 @@ pre.light-well { .filtered-search-dropdown { width: 50%; - } - .filtered-search-dropdown .dropdown { - display: flex; - flex: 1 1 0; - } - - .filtered-search-dropdown .dropdown button { - width: 100%; + .dropdown-menu-toggle { + width: 100%; + } } } @include media-breakpoint-down(xs) { - .dropdown-menu-toggle { - width: 100%; - } - - .filtered-search, - .filtered-search-nav, .filtered-search-dropdown { - flex: 1 1 0; width: 100%; } } diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml index 1d349572091..97a446dbeec 100644 --- a/app/views/dashboard/_projects_head.html.haml +++ b/app/views/dashboard/_projects_head.html.haml @@ -14,7 +14,7 @@ .top-area.scrolling-tabs-container.inner-page-scroll-tabs .fade-left= icon('angle-left') .fade-right= icon('angle-right') - %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs{ class: feature_project_list_filter_bar ? "border-0" : "" } + %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs{ class: ('border-0' if feature_project_list_filter_bar) } = nav_link(page: [dashboard_projects_path, root_path]) do = link_to dashboard_projects_path, class: 'shortcuts-activity', data: {placement: 'right'} do = _("Your projects") diff --git a/app/views/dashboard/projects/_nav.html.haml b/app/views/dashboard/projects/_nav.html.haml index fdab2bde095..f9b61bf1f3e 100644 --- a/app/views/dashboard/projects/_nav.html.haml +++ b/app/views/dashboard/projects/_nav.html.haml @@ -4,7 +4,7 @@ - is_explore_trending = project_tab_filter == :explore_trending - feature_project_list_filter_bar = Feature.enabled?(:project_list_filter_bar) -.nav-block{ class: Feature.enabled?(:project_list_filter_bar) ? "w-100" : "" } +.nav-block{ class: ("w-100" if feature_project_list_filter_bar) } - if feature_project_list_filter_bar .btn-group.button-filter-group.d-flex.m-0.p-0 - if project_tab_filter == :explore || is_explore_trending diff --git a/app/views/explore/projects/_filter.html.haml b/app/views/explore/projects/_filter.html.haml index ebc3f6b85ce..d00a3d266d8 100644 --- a/app/views/explore/projects/_filter.html.haml +++ b/app/views/explore/projects/_filter.html.haml @@ -1,7 +1,8 @@ - has_label = local_assigns.fetch(:has_label, false) +- feature_project_list_filter_bar = Feature.enabled?(:project_list_filter_bar) - if current_user - .dropdown.js-project-filter-dropdown-wrap + .dropdown.js-project-filter-dropdown-wrap{ class: ('d-flex flex-grow-1 flex-shrink-1' if feature_project_list_filter_bar) } %button.dropdown-menu-toggle{ href: '#', "data-toggle" => "dropdown", 'data-display' => 'static' } - unless has_label = icon('globe', class: 'mt-1') diff --git a/app/views/shared/projects/_search_bar.html.haml b/app/views/shared/projects/_search_bar.html.haml index 0620cd86db7..c1f2eaba284 100644 --- a/app/views/shared/projects/_search_bar.html.haml +++ b/app/views/shared/projects/_search_bar.html.haml @@ -1,12 +1,13 @@ - @sort ||= sort_value_latest_activity - project_tab_filter = local_assigns.fetch(:project_tab_filter, "") +- flex_grow_and_shrink_xs = 'd-flex flex-xs-grow-1 flex-xs-shrink-1 flex-grow-0 flex-shrink-0' .filtered-search-block.row-content-block.bt-0 .filtered-search-wrapper.d-flex.flex-nowrap.flex-column.flex-sm-wrap.flex-sm-row.flex-xl-nowrap - unless project_tab_filter == :starred - .filtered-search-nav.d-flex.mb-2.mb-lg-0 + .filtered-search-nav.mb-2.mb-lg-0{ class: flex_grow_and_shrink_xs } = render 'dashboard/projects/nav', project_tab_filter: project_tab_filter - .filtered-search.d-flex.w-100.mb-2.mb-lg-0{ class: project_tab_filter == :starred ? "extended-filtered-search-box ml-0 mb-2 mb-lg-0" : "ml-0 ml-sm-3" } + .filtered-search.d-flex.flex-grow-1.flex-shrink-1.w-100.mb-2.mb-lg-0.ml-0{ class: project_tab_filter == :starred ? "extended-filtered-search-box mb-2 mb-lg-0" : "ml-sm-3" } .btn-group.w-100{ role: "group" } .btn-group.w-100{ role: "group" } .filtered-search-box.m-0 @@ -14,12 +15,12 @@ = render 'shared/projects/search_form', admin_view: false, search_form_placeholder: _("Search projects...") %button.btn.btn-secondary{ type: 'submit', form: 'project-filter-form' } = sprite_icon('search', size: 16, css_class: 'search-icon ') - .filtered-search-dropdown.d-flex.flex-row.align-items-center.mb-2.m-sm-0#filtered-search-visibility-dropdown + .filtered-search-dropdown.flex-row.align-items-center.mb-2.m-sm-0#filtered-search-visibility-dropdown{ class: flex_grow_and_shrink_xs } .filtered-search-dropdown-label.p-0.pl-sm-3.font-weight-bold %span = _("Visibility") = render 'explore/projects/filter', has_label: true - .filtered-search-dropdown.d-flex.flex-row.align-items-center.m-sm-0#filtered-search-sorting-dropdown + .filtered-search-dropdown.flex-row.align-items-center.m-sm-0#filtered-search-sorting-dropdown{ class: flex_grow_and_shrink_xs } .filtered-search-dropdown-label.p-0.pl-sm-3.font-weight-bold %span = _("Sort by") diff --git a/app/views/shared/projects/_sort_dropdown.html.haml b/app/views/shared/projects/_sort_dropdown.html.haml index 0bb2eb371dc..f5f940db189 100644 --- a/app/views/shared/projects/_sort_dropdown.html.haml +++ b/app/views/shared/projects/_sort_dropdown.html.haml @@ -3,7 +3,7 @@ .btn-group.w-100{ role: "group" } .btn-group.w-100.dropdown.js-project-filter-dropdown-wrap{ role: "group" } - %button.dropdown-menu-toggle{ id: 'sort-projects-dropdown', type: 'button', data: { toggle: 'dropdown', display: 'static' }, class: 'btn btn-default' } + %button#sort-projects-dropdown.btn.btn-default.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } } = toggle_text = icon('chevron-down') %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable