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
This commit is contained in:
parent
6accad69e2
commit
cd27bead2e
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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")
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -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")
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue