switch to captions, comment tooltips, update copy

BanchanArt · Sep 23, 2023 · 38277d9 · 38277d9
1 parent 658819a
commit 38277d9
Show file tree

Hide file tree

Showing 23 changed files with 129 additions and 134 deletions.
diff --git a/lib/banchan_web/components/form/checkbox.ex b/lib/banchan_web/components/form/checkbox.ex
@@ -4,7 +4,7 @@ defmodule BanchanWeb.Components.Form.Checkbox do
   """
   use BanchanWeb, :component
 
-  alias BanchanWeb.Components.Icon
+  # alias BanchanWeb.Components.Icon
 
   alias Surface.Components.Form
   alias Surface.Components.Form.{Checkbox, ErrorTag, Field, Label}
@@ -42,6 +42,7 @@ defmodule BanchanWeb.Components.Form.Checkbox do
               <span class="text-sm opacity-50">{@caption}</span>
             </div>
           </#slot>
+          {!--
           {#if @info}
             <div class="tooltip tooltip-right" data-tip={@info}>
               <Icon
@@ -52,6 +53,7 @@ defmodule BanchanWeb.Components.Form.Checkbox do
               />
             </div>
           {/if}
+          --}
         </div>
       </Label>
       <ErrorTag class="help text-error" />

diff --git a/lib/banchan_web/components/form/date_time_local_input.ex b/lib/banchan_web/components/form/date_time_local_input.ex
@@ -37,6 +37,7 @@ defmodule BanchanWeb.Components.Form.DateTimeLocalInput do
           <Label class="p-0 label">
             <span class="flex flex-row items-center gap-1 label-text">
               {@label || Phoenix.Naming.humanize(@name)}
+              {!--
               {#if @info}
                 <div class="tooltip tooltip-right" data-tip={@info}>
                   <Icon
@@ -46,7 +47,7 @@ defmodule BanchanWeb.Components.Form.DateTimeLocalInput do
                     class="opacity-50 hover:opacity-100 active:opacity-100"
                   />
                 </div>
-              {/if}
+              {/if} --}
             </span>
           </Label>
           {#if slot_assigned?(:label_end) && @focus_label_first}

diff --git a/lib/banchan_web/components/form/email_input.ex b/lib/banchan_web/components/form/email_input.ex
@@ -37,6 +37,7 @@ defmodule BanchanWeb.Components.Form.EmailInput do
           <Label class="p-0 label">
             <span class="flex flex-row items-center gap-1 label-text">
               {@label || Phoenix.Naming.humanize(@name)}
+              {!--
               {#if @info}
                 <div class="tooltip tooltip-right" data-tip={@info}>
                   <Icon
@@ -46,7 +47,7 @@ defmodule BanchanWeb.Components.Form.EmailInput do
                     class="opacity-50 hover:opacity-100 active:opacity-100"
                   />
                 </div>
-              {/if}
+              {/if} --}
             </span>
           </Label>
           {#if slot_assigned?(:label_end) && @focus_label_first}

diff --git a/lib/banchan_web/components/form/multiple_select.ex b/lib/banchan_web/components/form/multiple_select.ex
@@ -34,6 +34,7 @@ defmodule BanchanWeb.Components.Form.MultipleSelect do
         <Label class="p-0 label">
           <span class="flex flex-row items-center gap-1 label-text">
             {@label || Phoenix.Naming.humanize(@name)}
+            {!--
             {#if @info}
               <div class="tooltip tooltip-right" data-tip={@info}>
                 <Icon
@@ -44,6 +45,7 @@ defmodule BanchanWeb.Components.Form.MultipleSelect do
                 />
               </div>
             {/if}
+            --}
           </span>
         </Label>
         {#if slot_assigned?(:label_end) && @focus_label_first}

diff --git a/lib/banchan_web/components/form/number_input.ex b/lib/banchan_web/components/form/number_input.ex
@@ -36,6 +36,7 @@ defmodule BanchanWeb.Components.Form.NumberInput do
           <Label class="p-0 label">
             <span class="flex flex-row items-center gap-1 label-text">
               {@label || Phoenix.Naming.humanize(@name)}
+              {!--
               {#if @info}
                 <div class="tooltip tooltip-right" data-tip={@info}>
                   <Icon
@@ -45,7 +46,7 @@ defmodule BanchanWeb.Components.Form.NumberInput do
                     class="opacity-50 hover:opacity-100 active:opacity-100"
                   />
                 </div>
-              {/if}
+              {/if} --}
             </span>
           </Label>
           {#if slot_assigned?(:label_end) && @focus_label_first}

diff --git a/lib/banchan_web/components/form/quill_input/quill_input.ex b/lib/banchan_web/components/form/quill_input/quill_input.ex
@@ -98,6 +98,7 @@ defmodule BanchanWeb.Components.Form.QuillInput do
         <Label class="p-0 label">
           <span class="flex flex-row items-center gap-1 label-text">
             {@label || Phoenix.Naming.humanize(@name)}
+            {!--
             {#if @info}
               <div class="tooltip tooltip-right" data-tip={@info}>
                 <Icon
@@ -108,6 +109,7 @@ defmodule BanchanWeb.Components.Form.QuillInput do
                 />
               </div>
             {/if}
+            --}
           </span>
         </Label>
       {/if}

diff --git a/lib/banchan_web/components/form/select.ex b/lib/banchan_web/components/form/select.ex
@@ -40,6 +40,7 @@ defmodule BanchanWeb.Components.Form.Select do
           <Label class="p-0 label">
             <span class="flex flex-row items-center gap-1 label-text">
               {@label || Phoenix.Naming.humanize(@name)}
+              {!--
               {#if @info}
                 <div class="tooltip tooltip-right" data-tip={@info}>
                   <Icon
@@ -49,14 +50,20 @@ defmodule BanchanWeb.Components.Form.Select do
                     class="opacity-50 hover:opacity-100 active:opacity-100"
                   />
                 </div>
-              {/if}
+              {/if} --}
             </span>
           </Label>
           {#if slot_assigned?(:label_end) && @focus_label_first}
             <#slot {@label_end} />
           {/if}
         </div>
       {/if}
+      {#if @caption}
+        <div class="text-sm text-opacity-50 help text-base-content">
+          {@caption}
+        </div>
+      {/if}
+      <#slot {@caption_end} />
       <div class="grid grid-cols-1 gap-2">
         <div class="flex flex-row w-full gap-4 control">
           <#slot {@left} />
@@ -77,12 +84,6 @@ defmodule BanchanWeb.Components.Form.Select do
           <#slot {@right} />
         </div>
         <ErrorTag class="help text-error" />
-        {#if @caption}
-          <div class="text-sm text-opacity-50 help text-base-content">
-            {@caption}
-          </div>
-        {/if}
-        <#slot {@caption_end} />
         {#if slot_assigned?(:label_end) && !@focus_label_first}
           <div class="absolute top-0 right-0 h-fit">
             <#slot {@label_end} />

diff --git a/lib/banchan_web/components/form/tags_input/tags_input.ex b/lib/banchan_web/components/form/tags_input/tags_input.ex
@@ -8,7 +8,7 @@ defmodule BanchanWeb.Components.Form.TagsInput do
   alias Surface.Components.Form.{ErrorTag, Field, HiddenInput}
 
   alias Banchan.Tags
-  alias BanchanWeb.Components.Icon
+  # alias BanchanWeb.Components.Icon
 
   prop name, :any, required: true
   prop opts, :keyword, default: []
@@ -140,6 +140,7 @@ defmodule BanchanWeb.Components.Form.TagsInput do
           <label for={Phoenix.HTML.Form.input_id(@form, @name) <> "_input"} class="p-0 label">
             <span class="flex flex-row items-center gap-1 label-text">
               {@label || Phoenix.Naming.humanize(@name)}
+              {!--
               {#if @info}
                 <div class="tooltip tooltip-right" data-tip={@info}>
                   <Icon
@@ -149,7 +150,7 @@ defmodule BanchanWeb.Components.Form.TagsInput do
                     class="opacity-50 hover:opacity-100 active:opacity-100"
                   />
                 </div>
-              {/if}
+              {/if} --}
             </span>
           </label>
         {/if}

diff --git a/lib/banchan_web/components/form/text_input.ex b/lib/banchan_web/components/form/text_input.ex
@@ -37,6 +37,7 @@ defmodule BanchanWeb.Components.Form.TextInput do
           <Label class="p-0 label">
             <span class="flex flex-row items-center gap-1 text-sm label-text">
               {@label || Phoenix.Naming.humanize(@name)}
+              {!--
               {#if @info}
                 <div class="tooltip tooltip-right" data-tip={@info}>
                   <Icon
@@ -46,7 +47,7 @@ defmodule BanchanWeb.Components.Form.TextInput do
                     class="opacity-50 hover:opacity-100 active:opacity-100"
                   />
                 </div>
-              {/if}
+              {/if} --}
             </span>
           </Label>
           {#if slot_assigned?(:label_end) && @focus_label_first}

diff --git a/lib/banchan_web/components/form/textarea.ex b/lib/banchan_web/components/form/textarea.ex
@@ -4,7 +4,7 @@ defmodule BanchanWeb.Components.Form.TextArea do
   """
   use BanchanWeb, :component
 
-  alias BanchanWeb.Components.Icon
+  # alias BanchanWeb.Components.Icon
 
   alias Surface.Components.Form
   alias Surface.Components.Form.{ErrorTag, Field, Label, TextArea}
@@ -38,6 +38,7 @@ defmodule BanchanWeb.Components.Form.TextArea do
           <Label class="p-0 label">
             <span class="flex flex-row items-center gap-1 label-text">
               {@label || Phoenix.Naming.humanize(@name)}
+              {!--
               {#if @info}
                 <div class="tooltip tooltip-right" data-tip={@info}>
                   <Icon
@@ -47,14 +48,20 @@ defmodule BanchanWeb.Components.Form.TextArea do
                     class="opacity-50 hover:opacity-100 active:opacity-100"
                   />
                 </div>
-              {/if}
+              {/if} --}
             </span>
             {#if slot_assigned?(:label_end) && @focus_label_first}
               <#slot {@label_end} />
             {/if}
           </Label>
         </div>
       {/if}
+      {#if @caption}
+        <div class="text-sm text-opacity-50 help text-base-content">
+          {@caption}
+        </div>
+      {/if}
+      <#slot {@caption_end} />
       <div class="grid grid-cols-1 gap-2">
         <div class="flex flex-row gap-2">
           <div class={"control w-full", @wrapper_class}>
@@ -75,12 +82,6 @@ defmodule BanchanWeb.Components.Form.TextArea do
           </div>
         </div>
         <ErrorTag class="help text-error" />
-        {#if @caption}
-          <div class="text-sm text-opacity-50 help text-base-content">
-            {@caption}
-          </div>
-        {/if}
-        <#slot {@caption_end} />
       </div>
       {#if slot_assigned?(:label_end) && !@focus_label_first}
         <div class="absolute top-0 right-0 h-fit">

diff --git a/lib/banchan_web/components/layout.ex b/lib/banchan_web/components/layout.ex
@@ -218,9 +218,9 @@ defmodule BanchanWeb.Components.Layout do
                   <UserHandle class="text-sm" link={false} user={@current_user} />
                 </Link>
                 <Link to={Routes.user_session_path(Endpoint, :delete)} method={:delete}>
-                  <div class="tooltip" data-tip="Log out">
-                    <Icon name="log-out" size="4" label="log out" class="z-50" />
-                  </div>
+                  {!-- <div class="tooltip" data-tip="Log out"> --}
+                  <Icon name="log-out" size="4" label="log out" class="z-50" />
+                  {!-- </div> --}
                 </Link>
               </div>
             {/if}

diff --git a/lib/banchan_web/components/notifications.ex b/lib/banchan_web/components/notifications.ex
@@ -209,27 +209,27 @@ defmodule BanchanWeb.Components.Notifications do
   def render(assigns) do
     ~F"""
     <div class="relative" :on-click-away="close_menu">
-      <div class="tooltip tooltip-left" data-tip="Notifications">
-        <div class="indicator">
-          <button
-            type="button"
-            :on-click="toggle_menu"
-            class={"btn btn-ghost gap-2", "btn-active": @open}
-            aria-label="Notifications"
-          >
-            <Icon name="bell" size="4" />
-            {#if @notifications && @notifications.total_entries > 0}
-              <span class="badge badge-primary">
-                {#if @notifications.total_entries > 99}
-                  99+
-                {#else}
-                  {@notifications.total_entries}
-                {/if}
-              </span>
-            {/if}
-          </button>
-        </div>
+      {!-- <div class="tooltip tooltip-left" data-tip="Notifications"> --}
+      <div class="indicator">
+        <button
+          type="button"
+          :on-click="toggle_menu"
+          class={"btn btn-ghost gap-2", "btn-active": @open}
+          aria-label="Notifications"
+        >
+          <Icon name="bell" size="4" />
+          {#if @notifications && @notifications.total_entries > 0}
+            <span class="badge badge-primary">
+              {#if @notifications.total_entries > 99}
+                99+
+              {#else}
+                {@notifications.total_entries}
+              {/if}
+            </span>
+          {/if}
+        </button>
       </div>
+      {!-- </div> --}
       {#if @open}
         <div class="absolute right-0 z-30 grid max-w-sm grid-cols-1 origin-top translate-x-px translate-y-px border rounded-lg shadow-md w-96 border-base-content border-opacity-10 bg-base-100 text-base-content">
           {#if !@notifications || Enum.empty?(@notifications.entries)}

diff --git a/lib/banchan_web/components/user_handle.ex b/lib/banchan_web/components/user_handle.ex
@@ -21,20 +21,20 @@ defmodule BanchanWeb.Components.UserHandle do
         <span class={"inline-flex items-center gap-1", @class}>
           <strong title={@user.name} class="font-semibold hover:underline">{@user.handle}</strong>
           {#if :admin in @user.roles}
-            <div class="tooltip tooltip-right" data-tip="Admin">
-              <Icon name="shield-check" size="4" class="text-error">
-              </Icon>
-            </div>
+            {!-- <div class="tooltip tooltip-right" data-tip="Admin"> --}
+            <Icon name="shield-check" size="4" class="text-error">
+            </Icon>
+            {!-- </div> --}
           {#elseif :mod in @user.roles}
-            <div class="tooltip tooltip-right" data-tip="Moderator">
-              <Icon name="gavel" size="4" class="text-warning">
-              </Icon>
-            </div>
+            {!-- <div class="tooltip tooltip-right" data-tip="Moderator"> --}
+            <Icon name="gavel" size="4" class="text-warning">
+            </Icon>
+            {!-- </div> --}
           {#elseif :system in @user.roles}
-            <div class="tooltip tooltip-right" data-tip="System">
-              <Icon name="bot" size="4" class="text-primary">
-              </Icon>
-            </div>
+            {!-- <div class="tooltip tooltip-right" data-tip="System"> --}
+            <Icon name="bot" size="4" class="text-primary">
+            </Icon>
+            {!-- </div> --}
           {/if}
         </span>
       </LiveRedirect>
@@ -44,28 +44,28 @@ defmodule BanchanWeb.Components.UserHandle do
           {@user.handle}
         </strong>
         {#if :admin in @user.roles}
-          <div class="tooltip tooltip-right" data-tip="Admin">
-            <Icon name="shield-check" size="4" class="text-error">
-            </Icon>
-          </div>
+          {!-- <div class="tooltip tooltip-right" data-tip="Admin"> --}
+          <Icon name="shield-check" size="4" class="text-error">
+          </Icon>
+          {!-- </div> --}
         {#elseif :mod in @user.roles}
-          <div class="tooltip tooltip-right" data-tip="Moderator">
-            <Icon name="gavel" size="4" class="text-warning">
-            </Icon>
-          </div>
+          {!-- <div class="tooltip tooltip-right" data-tip="Moderator"> --}
+          <Icon name="gavel" size="4" class="text-warning">
+          </Icon>
+          {!-- </div> --}
         {#elseif :system in @user.roles}
-          <div class="tooltip tooltip-right" data-tip="System">
-            <Icon name="bot" size="4" class="text-primary">
-            </Icon>
-          </div>
+          {!-- <div class="tooltip tooltip-right" data-tip="System"> --}
+          <Icon name="bot" size="4" class="text-primary">
+          </Icon>
+          {!-- </div> --}
         {/if}
       </span>
     {#else}
       <strong title="User deactivated their account" class="font-semibold">
-        <div class="tooltip tooltip-right" data-tip="Deactivated">
-          <Icon name="circle-slash" size="4" class="text-primary">
-          </Icon>
-        </div>
+        {!-- <div class="tooltip tooltip-right" data-tip="Deactivated"> --}
+        <Icon name="circle-slash" size="4" class="text-primary">
+        </Icon>
+        {!-- </div> --}
       </strong>
     {/if}
     """