raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-03-01 02:03:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fatorize CSS between Selector and SuperSelector components

Browse Source
This commit is contained in:
Jean-Baptiste Bellet
2022-03-22 15:57:32 +01:00
parent 1adb22be71
commit 4fa88b9c18
4 changed files with 73 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/components/selector_component/selector_component.html.haml
View File

@@ -1,10 +1,11 @@
= component_controller do
.selector{ class: ("selector_close" if @state == :close) }
.selector_main
.selector_main_title
.selector{ class: ("selector-close" if @state == :close) }
.selector-main
.selector-main-title
= @title
.selector_arrow{data: reflex_data_attributes(:toggle)}
.selector_items
- @items.each do |item|
.selector_item{ class: ("selected" if item[:selected]), data: @data, "data-value": item[:value] }
= item[:label]
.selector-arrow{data: reflex_data_attributes(:toggle)}
.selector-wrapper
.selector-items
- @items.each do |item|
.selector-item{ class: ("selected" if item[:selected]), data: @data, "data-value": item[:value] }
= item[:label]

91
app/components/selector_component/selector_component.scss
View File

@@ -1,64 +1,85 @@
.selector {
.selector_main {
border: 1px solid #ccc;
position: relative;
.selector-main {
border: 1px solid #d2d2d2;
height: 3em;
position: relative;
.selector_main_title {
padding: 5px 10px;
.selector-main-title {
line-height: 3em;
padding-left: 10px;
padding-right: 10px;
}
.selector_arrow {
height: 2em;
width: 10px;
.selector-arrow {
position: absolute;
top: 1px;
right: 10px;
right: 0px;
height: 3em;
width: 1.5em;
top: -1px;
cursor: pointer;
&:after {
display: inline-block;
&:after {
content: "";
position: absolute;
top: 50%;
right: 5px;
margin-top: -5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #ccc;
border-top: 5px solid #d2d2d2;
}
}
}
.selector_items {
border: 1px solid #cCC;
.selector-wrapper {
position: absolute;
width: 100%;
margin-top: -1px;
left: 0px;
right: 0px;
z-index: 1;
background-color: white;
margin-top: -1px;
border: 1px solid #d2d2d2;
.selector_item {
padding-left: 10px;
padding-right: 10px;
border-bottom: 1px solid #CCC;
padding-top: 2px;
padding-bottom: 2px;
.selector-items {
overflow-y: auto;
min-height: 6em;
.selector-item {
padding-left: 10px;
padding-right: 10px;
border-bottom: 1px solid #d2d2d2;
position: relative;
height: 3em;
line-height: 3em;
&.selected {
&:after {
content: "✓";
display: inline-block;
position: absolute;
right: 10px;
top: 50%;
&:hover {
background-color: #eee;
cursor: pointer;
}
&:last-child {
border-bottom: none;
}
&.selected {
&:after {
content: "✓";
display: inline-block;
position: absolute;
right: 10px;
}
}
}
&:hover {
background-color: #eee;
cursor: pointer;
}
}
}
&.selector_close {
.selector_items {
&.selector-close {
.selector-wrapper {
display: none;
}
}

12
app/components/super_selector_component/super_selector_component.html.haml
View File

@@ -1,6 +1,6 @@
= component_controller do
.super-selector{ class: ("super-selector-close" if @state == :close) }
.super-selector-main
.super-selector.selector{ class: ("selector-close" if @state == :close) }
.selector-main
.super-selector-label
= @title
.super-selector-selected-items
@@ -12,11 +12,11 @@
- else
.super-selector-selected-item
= "#{@selected_items.length} categories selected"
.super-selector-arrow{data: reflex_data_attributes(:toggle)}
.super-selector-wrapper
.selector-arrow{data: reflex_data_attributes(:toggle)}
.selector-wrapper
.super-selector-search
%input{type: "text", placeholder: "Search", data: reflex_data_attributes("debounced:input->search"), value: @query}
.super-selector-items
.selector-items
- @filtered_items.each do |item|
.super-selector-item{ class: ("selected" if item[:selected]), data: @data, "data-value": item[:value] }
.selector-item{ class: ("selected" if item[:selected]), data: @data, "data-value": item[:value] }
= item[:label]

79
app/components/super_selector_component/super_selector_component.scss
View File

@@ -1,13 +1,8 @@
.super-selector {
margin-top: 5px;
position: relative;
.super-selector-main {
border: 1px solid #d2d2d2;
height: 3em;
position: relative;
.selector-main {
.super-selector-label {
padding-left: 5px;
padding-right: 5px;
@@ -16,28 +11,6 @@
top: -1em;
background-color: white;
}
.super-selector-arrow {
position: absolute;
right: 0px;
height: 3em;
width: 1.5em;
top: -1px;
cursor: pointer;
&:after {
content: "";
position: absolute;
top: 50%;
right: 5px;
margin-top: -5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #d2d2d2;
}
}
}
.super-selector-selected-items {
@@ -62,15 +35,7 @@
}
}
.super-selector-wrapper {
position: absolute;
left: 0px;
right: 0px;
z-index: 1;
background-color: white;
margin-top: -1px;
border: 1px solid #d2d2d2;
.selector-wrapper {
.super-selector-search {
border-bottom: 1px solid #d2d2d2;
padding: 10px 5px;
@@ -82,45 +47,5 @@
width: 100%;
}
}
.super-selector-items {
overflow-y: auto;
min-height: 6em;
.super-selector-item {
padding-left: 10px;
padding-right: 10px;
border-bottom: 1px solid #d2d2d2;
position: relative;
height: 3em;
line-height: 3em;
&:hover {
background-color: #eee;
cursor: pointer;
}
&:last-child {
border-bottom: none;
}
&.selected {
&:after {
content: "✓";
display: inline-block;
position: absolute;
right: 10px;
}
}
}
}
}
}
.super-selector-close {
&.super-selector {
.super-selector-wrapper {
display: none;
}
}
}