alban
/
fast-insiders
1
0
Fork 0
Code Issues 11 Pull Requests 1 Packages Projects Releases Wiki Activity

feat/Expand/collapse filters

Browse Source
pull/3/head
Miroito 3 years ago
parent f34a2e1fb5
commit 0b89f0f999
5 changed files with 87 additions and 61 deletions
Show Stats Download Patch File Download Diff File

6
client/src/components/base_async_select.rs
Unescape View File

@ -66,20 +66,20 @@ where
let input2 = input.clone();
view! {
input (bind:value=input, class="p-2 w-full rounded-md bg-slate-200 dark:bg-slate-700", on:blur=hide_dropdown) {}
input (bind:value=input, class="p-2 w-full rounded-md bg-slate-300 dark:bg-slate-800", on:blur=hide_dropdown) {}
div (class="relative") {
(
cloned!((visible, item_list, input2, selected_item, selected) => {
if *visible.get() {
view! {
div (class="absolute -top-1 w-80 rounded-b-md dark:bg-slate-700 bg-slate-200") {
div (class="absolute -top-1 w-80 rounded-b-md dark:bg-slate-800 bg-slate-300") {
ul {
Indexed(IndexedProps {
iterable: item_list.handle(),
template: move |x| {
view! {
li (
class="w-full p-2 cursor-pointer dark:hover:bg-slate-800 hover:bg-slate-300",
class="w-full p-2 cursor-pointer dark:hover:bg-slate-900 hover:bg-slate-400",
on:mousedown=cloned!(
(x, input2, selected_item, visible, selected) => move |_| {
selected.set(true);

2
client/src/components/base_button.rs
Unescape View File

@ -19,7 +19,7 @@ pub fn create_component(
view! {
button (
class="my-2 z-0 p-2 bg-slate-300 dark:bg-slate-700 hover:bg-slate-400 dark:hover:bg-slate-800 disabled:cursor-not-allowed hover:cursor-pointer rounded-md ",
class="my-2 z-0 p-2 bg-slate-300 dark:bg-slate-800 hover:bg-slate-400 dark:hover:bg-slate-900 disabled:cursor-not-allowed hover:cursor-pointer rounded-md ",
disabled=*disabled.get(),
on:click=click_event,
) {

2
client/src/components/paginated_data_table.rs
Unescape View File

@ -89,7 +89,7 @@ where
p (class="text-right") { (format!("{} transactions", n_rows.get())) }
div (class="flex flex-row justify-between") {
select (bind:value=page_size_string,
class="p-2 justify-end text-slate-700 dark:text-slate-100 bg-slate-100 dark:bg-slate-800 rounded-md",
class="p-2 justify-end text-slate-700 dark:text-slate-100 bg-slate-200 dark:bg-slate-800 rounded-md",
id="size-select",
) {
option (value="20") { "20" }

29
client/src/templates/index.rs
Unescape View File

@ -24,6 +24,20 @@ pub fn index_page(IndexPageStateRx { req }: IndexPageStateRx, global_state: AppS
let dark_mode_2 = dark_mode.clone();
let dark_mode_3 = dark_mode.clone();
let expand = Signal::new(false);
let filter_expand = BaseButtonStateRx {
label: Signal::new("Filters".to_string()).handle(),
disabled: Signal::new(false).handle(),
clicked: Signal::new(false),
};
create_effect(cloned!((filter_expand, expand) => move || {
if *filter_expand.clicked.get() {
filter_expand.clicked.set(false);
expand.set(!*expand.get());
}
}));
let toggle_dark_mode = cloned!(() => move |_| dark_mode_2.set(!*dark_mode.get()));
let paginated_table_state: PaginatedTableStateRx<TransactionCompany> = PaginatedTableStateRx {
@ -46,6 +60,7 @@ pub fn index_page(IndexPageStateRx { req }: IndexPageStateRx, global_state: AppS
create_effect(cloned!((search_button) => move || {
if *search_button.clicked.get() {
search_button.clicked.set(false);
navigate(&format!("/index/{}", (*async_select_prop2.selected_item.get()).clone().map_or("".to_string(), |c| c.slug)));
}
}));
@ -76,10 +91,16 @@ pub fn index_page(IndexPageStateRx { req }: IndexPageStateRx, global_state: AppS
"Insider Transactions published by the AMF"
}
}
div (class="w-80") {
p () {"Search for a company:"}
BaseAsyncSelect(async_select_prop)
BaseButton(search_button)
BaseButton(filter_expand)
div () {} // Without this useless div, the code doesn't run in the browser
div (class=format!("p-2 border rounded-lg border-slate-200 dark:border-slate-800 bg-slate-200 dark:bg-slate-700 transition-all ease-in {}",
(*expand.get()).then_some("h-40 visible").unwrap_or("h-0 collapse"),
)) {
div (class="w-80") {
p () {"Search for a company:"}
BaseAsyncSelect(async_select_prop)
BaseButton(search_button)
}
}
PaginatedTable(paginated_table_state)
}

109
client/static/tailwind.css
Unescape View File

@ -517,8 +517,8 @@ video {
visibility: visible;
}
.\!visible {
visibility: visible !important;
.collapse {
visibility: collapse;
}
.static {
@ -557,26 +557,21 @@ video {
margin: 2.5rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.my-10 {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
.mb-20 {
margin-bottom: 5rem;
}
@ -585,10 +580,6 @@ video {
margin-right: 2.5rem;
}
.inline {
display: inline;
}
.flex {
display: flex;
}
@ -609,26 +600,34 @@ video {
height: 3rem;
}
.h-2 {
height: 0.5rem;
.h-40 {
height: 10rem;
}
.w-full {
width: 100%;
.h-0 {
height: 0px;
}
.w-4\/5 {
width: 80%;
.h-auto {
height: auto;
}
.h-\[320\] {
height: 320;
}
.w-10 {
width: 2.5rem;
.w-full {
width: 100%;
}
.w-80 {
width: 20rem;
}
.w-4\/5 {
width: 80%;
}
.table-auto {
table-layout: auto;
}
@ -665,14 +664,14 @@ video {
justify-content: space-between;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-full {
border-radius: 9999px;
}
@ -704,11 +703,21 @@ video {
border-color: rgb(100 116 139 / var(--tw-border-opacity));
}
.border-slate-200 {
--tw-border-opacity: 1;
border-color: rgb(226 232 240 / var(--tw-border-opacity));
}
.bg-slate-200 {
--tw-bg-opacity: 1;
background-color: rgb(226 232 240 / var(--tw-bg-opacity));
}
.bg-slate-300 {
--tw-bg-opacity: 1;
background-color: rgb(203 213 225 / var(--tw-bg-opacity));
}
.bg-slate-100 {
--tw-bg-opacity: 1;
background-color: rgb(241 245 249 / var(--tw-bg-opacity));
@ -724,9 +733,9 @@ video {
background-color: rgb(251 207 232 / var(--tw-bg-opacity));
}
.bg-slate-300 {
.bg-slate-700 {
--tw-bg-opacity: 1;
background-color: rgb(203 213 225 / var(--tw-bg-opacity));
background-color: rgb(51 65 85 / var(--tw-bg-opacity));
}
.p-2 {
@ -802,6 +811,16 @@ video {
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.ease-in {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.hover\:cursor-pointer:hover {
cursor: pointer;
}
@ -833,18 +852,14 @@ video {
cursor: not-allowed;
}
.disabled\:bg-slate-200:disabled {
--tw-bg-opacity: 1;
background-color: rgb(226 232 240 / var(--tw-bg-opacity));
}
.disabled\:text-red-500:disabled {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
.dark .dark\:border-slate-800 {
--tw-border-opacity: 1;
border-color: rgb(30 41 59 / var(--tw-border-opacity));
}
.disabled\:opacity-50:disabled {
opacity: 0.5;
.dark .dark\:bg-slate-700 {
--tw-bg-opacity: 1;
background-color: rgb(51 65 85 / var(--tw-bg-opacity));
}
.dark .dark\:bg-slate-800 {
@ -861,11 +876,6 @@ video {
background-color: rgb(219 39 119 / var(--tw-bg-opacity));
}
.dark .dark\:bg-slate-700 {
--tw-bg-opacity: 1;
background-color: rgb(51 65 85 / var(--tw-bg-opacity));
}
.dark .dark\:bg-slate-600 {
--tw-bg-opacity: 1;
background-color: rgb(71 85 105 / var(--tw-bg-opacity));
@ -886,9 +896,9 @@ video {
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
}
.dark .dark\:hover\:bg-slate-300:hover {
.dark .dark\:hover\:bg-slate-900:hover {
--tw-bg-opacity: 1;
background-color: rgb(203 213 225 / var(--tw-bg-opacity));
background-color: rgb(15 23 42 / var(--tw-bg-opacity));
}
.dark .dark\:hover\:text-indigo-600:hover {
@ -896,11 +906,6 @@ video {
color: rgb(79 70 229 / var(--tw-text-opacity));
}
.dark .dark\:disabled\:bg-slate-700:disabled {
--tw-bg-opacity: 1;
background-color: rgb(51 65 85 / var(--tw-bg-opacity));
}
@media (min-width: 640px) {
.sm\:p-2 {
padding: 0.5rem;

Write Preview
Loading…
Cancel
Save