fix: Table and Select example fixes (#719)

coingaming · Sep 21, 2023 · 818f4c8 · 818f4c8
1 parent db99133
commit 818f4c8
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 16 deletions.
diff --git a/lib/moon/design/form/select.ex b/lib/moon/design/form/select.ex
@@ -39,7 +39,9 @@ defmodule Moon.Design.Form.Select do
   @doc "Some additional styling will be set to indicate the field is invalid. Generally should be set by Form.Field component"
   prop(error, :boolean, from_context: :error)
 
-  @doc "If field does support multiselect, multiple attribute for select tag in HTML terms"
+  @doc """
+  Experimental: If field does support multiselect, multiple attribute for select tag in HTML terms
+  """
   prop(is_multiple, :boolean)
 
   def render(assigns) do

diff --git a/lib/moon_web/examples/design/table_example/responsive.ex b/lib/moon_web/examples/design/table_example/responsive.ex
@@ -29,11 +29,6 @@ defmodule MoonWeb.Examples.Design.TableExample.Responsive do
   def render(assigns) do
     ~F"""
     <Table items={model <- @models} selected={nil}>
-      <Table.Column class="table-cell sm:hidden">
-        #{model.id}: {model.name} by {model.user} at {Timex.format!(model.created_at, "%b %d, %Y", :strftime)}
-        <br>
-        {model.long_text |> String.slice(0, 30)}...
-      </Table.Column>
       <Table.Column label="ID" width="hidden 2xl:table-cell">
         {model.id}
       </Table.Column>
@@ -54,6 +49,11 @@ defmodule MoonWeb.Examples.Design.TableExample.Responsive do
         <p class="hidden xl:block">{model.long_text}</p>
         <p class="block xl:hidden">{model.long_text |> String.slice(0, 70)}...</p>
       </Table.Column>
+      <Table.Column class="table-cell sm:hidden">
+        #{model.id}: {model.name} by {model.user} at {Timex.format!(model.created_at, "%b %d, %Y", :strftime)}
+        <br>
+        {model.long_text |> String.slice(0, 30)}...
+      </Table.Column>
     </Table>
     """
   end
@@ -80,13 +80,8 @@ defmodule MoonWeb.Examples.Design.TableExample.Responsive do
 
     def render(assigns) do
       ~F\"""
-      <Table items={model <- @models} selected={nil} head_row_class="table-row sm:hidden">
-        <Table.Column width="table-cell sm:hidden">
-          \#{model.id}: {model.name} by {model.user} at {Timex.format!(model.created_at, "%b %d, %Y", :strftime)}
-          <br />
-          {model.long_text |> String.slice(0, 30)}...
-          </Table.Column>
-        <Table.Column label="ID" width="hidden sm:table-cell">
+      <Table items={model <- @models} selected={nil}>
+        <Table.Column label="ID" width="hidden 2xl:table-cell">
           {model.id}
         </Table.Column>
         <Table.Column label="Name" width="hidden sm:table-cell">
@@ -96,7 +91,7 @@ defmodule MoonWeb.Examples.Design.TableExample.Responsive do
           <p class="hidden xl:block">{Timex.format!(model.created_at, "%b %d, %Y, %H:%M:%S", :strftime)}</p>
           <p class="block xl:hidden">{Timex.format!(model.created_at, "%b %d, %Y", :strftime)}</p>
         </Table.Column>
-        <Table.Column label="User" width="hidden 2xl:table-cell">
+        <Table.Column label="User" width="hidden xl:table-cell">
           {model.user}
         </Table.Column>
         <Table.Column label="Short text" width="hidden lg:table-cell">
@@ -106,6 +101,11 @@ defmodule MoonWeb.Examples.Design.TableExample.Responsive do
           <p class="hidden xl:block">{model.long_text}</p>
           <p class="block xl:hidden">{model.long_text |> String.slice(0, 70)}...</p>
         </Table.Column>
+        <Table.Column class="table-cell sm:hidden">
+          \#{model.id}: {model.name} by {model.user} at {Timex.format!(model.created_at, "%b %d, %Y", :strftime)}
+          <br>
+          {model.long_text |> String.slice(0, 30)}...
+        </Table.Column>
       </Table>
       \"""
     end

diff --git a/lib/moon_web/pages/design/form/select_page.ex b/lib/moon_web/pages/design/form/select_page.ex
@@ -48,8 +48,8 @@ defmodule MoonWeb.Pages.Design.Form.SelectPage do
         SelectExample.Sizes,
         SelectExample.WithLabel,
         SelectExample.DisabledAndError,
-        SelectExample.WithHint,
-        SelectExample.MultipleChoices
+        SelectExample.WithHint
+        # SelectExample.MultipleChoices
       ]} />
 
       <PropsTable module={Moon.Design.Form.Select} />