Commit cd27bead authored by Ezekiel Kigbo's avatar Ezekiel Kigbo

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
parent 6accad69
...@@ -1476,10 +1476,16 @@ pre.light-well { ...@@ -1476,10 +1476,16 @@ pre.light-well {
.filtered-search { .filtered-search {
min-width: 30%; min-width: 30%;
flex: 1 1 0; flex-basis: 0;
.project-filter-form .project-filter-form-field { .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) { @include media-breakpoint-down(lg) {
...@@ -1495,16 +1501,12 @@ pre.light-well { ...@@ -1495,16 +1501,12 @@ pre.light-well {
} }
} }
.qa-reverse-sort {
max-width: 38px;
}
.filtered-search-box { .filtered-search-box {
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
} }
.dropdown-menu-toggle { .dropdown-menu-toggle {
margin-left: 8px; margin-left: $gl-padding-8;
} }
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
...@@ -1514,27 +1516,15 @@ pre.light-well { ...@@ -1514,27 +1516,15 @@ pre.light-well {
.filtered-search-dropdown { .filtered-search-dropdown {
width: 50%; width: 50%;
}
.filtered-search-dropdown .dropdown { .dropdown-menu-toggle {
display: flex; width: 100%;
flex: 1 1 0; }
}
.filtered-search-dropdown .dropdown button {
width: 100%;
} }
} }
@include media-breakpoint-down(xs) { @include media-breakpoint-down(xs) {
.dropdown-menu-toggle {
width: 100%;
}
.filtered-search,
.filtered-search-nav,
.filtered-search-dropdown { .filtered-search-dropdown {
flex: 1 1 0;
width: 100%; width: 100%;
} }
} }
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
.top-area.scrolling-tabs-container.inner-page-scroll-tabs .top-area.scrolling-tabs-container.inner-page-scroll-tabs
.fade-left= icon('angle-left') .fade-left= icon('angle-left')
.fade-right= icon('angle-right') .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 = nav_link(page: [dashboard_projects_path, root_path]) do
= link_to dashboard_projects_path, class: 'shortcuts-activity', data: {placement: 'right'} do = link_to dashboard_projects_path, class: 'shortcuts-activity', data: {placement: 'right'} do
= _("Your projects") = _("Your projects")
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
- is_explore_trending = project_tab_filter == :explore_trending - is_explore_trending = project_tab_filter == :explore_trending
- feature_project_list_filter_bar = Feature.enabled?(:project_list_filter_bar) - 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 - if feature_project_list_filter_bar
.btn-group.button-filter-group.d-flex.m-0.p-0 .btn-group.button-filter-group.d-flex.m-0.p-0
- if project_tab_filter == :explore || is_explore_trending - if project_tab_filter == :explore || is_explore_trending
......
- has_label = local_assigns.fetch(:has_label, false) - has_label = local_assigns.fetch(:has_label, false)
- feature_project_list_filter_bar = Feature.enabled?(:project_list_filter_bar)
- if current_user - 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' } %button.dropdown-menu-toggle{ href: '#', "data-toggle" => "dropdown", 'data-display' => 'static' }
- unless has_label - unless has_label
= icon('globe', class: 'mt-1') = icon('globe', class: 'mt-1')
......
- @sort ||= sort_value_latest_activity - @sort ||= sort_value_latest_activity
- project_tab_filter = local_assigns.fetch(:project_tab_filter, "") - 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-block.row-content-block.bt-0
.filtered-search-wrapper.d-flex.flex-nowrap.flex-column.flex-sm-wrap.flex-sm-row.flex-xl-nowrap .filtered-search-wrapper.d-flex.flex-nowrap.flex-column.flex-sm-wrap.flex-sm-row.flex-xl-nowrap
- unless project_tab_filter == :starred - 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 = 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" }
.btn-group.w-100{ role: "group" } .btn-group.w-100{ role: "group" }
.filtered-search-box.m-0 .filtered-search-box.m-0
...@@ -14,12 +15,12 @@ ...@@ -14,12 +15,12 @@
= render 'shared/projects/search_form', admin_view: false, search_form_placeholder: _("Search projects...") = render 'shared/projects/search_form', admin_view: false, search_form_placeholder: _("Search projects...")
%button.btn.btn-secondary{ type: 'submit', form: 'project-filter-form' } %button.btn.btn-secondary{ type: 'submit', form: 'project-filter-form' }
= sprite_icon('search', size: 16, css_class: 'search-icon ') = 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 .filtered-search-dropdown-label.p-0.pl-sm-3.font-weight-bold
%span %span
= _("Visibility") = _("Visibility")
= render 'explore/projects/filter', has_label: true = 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 .filtered-search-dropdown-label.p-0.pl-sm-3.font-weight-bold
%span %span
= _("Sort by") = _("Sort by")
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
.btn-group.w-100{ role: "group" } .btn-group.w-100{ role: "group" }
.btn-group.w-100.dropdown.js-project-filter-dropdown-wrap{ 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 = toggle_text
= icon('chevron-down') = icon('chevron-down')
%ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
......
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