Deployment and lifecycle management for Nix
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

web: cleanup some tables/display for small screens

+37 -24
+1 -1
apps/sower/lib/sower_web/components/core_components.ex
··· 387 387 def header(assigns) do 388 388 ~H""" 389 389 <header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}> 390 - <div> 390 + <div class="min-w-0"> 391 391 <h1 class="text-lg font-semibold leading-8 text-zinc-900 dark:text-zinc-300 "> 392 392 {render_slot(@inner_block)} 393 393 </h1>
+1 -1
apps/sower/lib/sower_web/components/sower_components.ex
··· 29 29 end 30 30 31 31 ~H""" 32 - <div class="overflow-x-auto px-4 sm:overflow-visible sm:px-0"> 32 + <div class="px-4 sm:overflow-visible sm:px-0"> 33 33 <table class="w-full mt-11"> 34 34 <thead class="text-sm text-left leading-6 text-zinc-500 dark:text-zinc-400"> 35 35 <tr>
+19 -9
apps/sower/lib/sower_web/live/agent_live/show.html.heex
··· 103 103 104 104 <section> 105 105 <h2 class="text-sm font-semibold text-zinc-900 dark:text-zinc-200 mb-4">Deployments</h2> 106 - <.responsive_table 106 + <.table 107 107 id="deployments" 108 108 rows={@deployments} 109 109 row_click={fn deployment -> JS.navigate(~p"/deployments/#{deployment.sid}") end} 110 110 > 111 - <:col :let={deployment} label="Status"> 111 + <:col :let={deployment} label=""> 112 112 <.deployment_status state={deployment.state} result={deployment.result} /> 113 113 </:col> 114 - <:col :let={deployment} label="SID">{deployment.sid}</:col> 115 - <:col :let={deployment} label="Created"> 114 + <:col :let={deployment} label="SID"> 115 + <span 116 + class="sm:hidden truncate max-w-[8rem] inline-block align-bottom" 117 + title={deployment.sid} 118 + > 119 + {deployment.sid} 120 + </span> 121 + <span class="hidden sm:inline">{deployment.sid}</span> 122 + </:col> 123 + <:col :let={deployment} label="Created" hide_on={:mobile}> 116 124 <.local_datetime datetime={deployment.inserted_at} user_timezone={@user_timezone} /> 117 125 </:col> 118 - <:col :let={deployment} label=""> 119 - <.button 126 + <:action :let={deployment}> 127 + <button 120 128 :if={deployment.state in [:completed, :stale]} 121 129 type="button" 122 130 phx-click="retry_deployment" 123 131 phx-value-deployment_sid={deployment.sid} 132 + phx-stop-propagation 124 133 phx-disable-with="Retrying..." 134 + class="hidden sm:inline text-sm text-zinc-700 dark:text-zinc-200 hover:text-orange-500 dark:hover:text-orange-400 disabled:opacity-50" 125 135 disabled={@retrying_deployment == deployment.sid} 126 136 > 127 137 Retry 128 - </.button> 129 - </:col> 130 - </.responsive_table> 138 + </button> 139 + </:action> 140 + </.table> 131 141 <p 132 142 :if={@deployments == []} 133 143 class="text-sm text-zinc-500 dark:text-zinc-400 italic"
+12 -9
apps/sower/lib/sower_web/live/deployment_live/index.ex
··· 17 17 rows={@streams.deployments} 18 18 row_click={fn {_id, deployment} -> JS.navigate(~p"/deployments/#{deployment}") end} 19 19 > 20 - <:col :let={{_id, deployment}} label="Status"> 20 + <:col :let={{_id, deployment}} label=""> 21 21 <.deployment_status state={deployment.state} result={deployment.result} /> 22 22 </:col> 23 - <:col :let={{_id, deployment}} label="sid">{deployment.sid}</:col> 24 - <:col :let={{_id, deployment}} label="agent" hide_on={:mobile}> 23 + <:col :let={{_id, deployment}} label="sid"> 24 + <span 25 + class="sm:hidden truncate max-w-[8rem] inline-block align-bottom" 26 + title={deployment.sid} 27 + > 28 + {deployment.sid} 29 + </span> 30 + <span class="hidden sm:inline">{deployment.sid}</span> 31 + </:col> 32 + <:col :let={{_id, deployment}} label="agent"> 25 33 {get_in(deployment.agent.name) || "-"} 26 34 </:col> 27 35 <:col :let={{_id, deployment}} label="completed" hide_on={:mobile}> ··· 35 43 phx-value-sid={deployment.sid} 36 44 phx-stop-propagation 37 45 phx-disable-with="Retrying..." 38 - class="text-sm text-zinc-700 dark:text-zinc-200 hover:text-orange-500 dark:hover:text-orange-400 disabled:opacity-50" 46 + class="hidden sm:inline text-sm text-zinc-700 dark:text-zinc-200 hover:text-orange-500 dark:hover:text-orange-400 disabled:opacity-50" 39 47 disabled={@retrying_deployment_sid == deployment.sid} 40 48 > 41 49 Retry 42 50 </button> 43 - </:action> 44 - <:action :let={{_id, deployment}}> 45 - <div class="sr-only"> 46 - <.link navigate={~p"/deployments/#{deployment}"}>Show</.link> 47 - </div> 48 51 </:action> 49 52 </.table> 50 53 </Layouts.app>
+4 -4
apps/sower/lib/sower_web/live/deployment_live/show.ex
··· 8 8 ~H""" 9 9 <Layouts.app flash={@flash} current_user={@current_user}> 10 10 <.header> 11 - <div class="flex items-center space-x-2"> 11 + <div class="flex items-center space-x-2 min-w-0"> 12 12 <.deployment_status state={@deployment.state} result={@deployment.result} /> 13 - <span>{@deployment.sid}</span> 13 + <span class="truncate" title={@deployment.sid}>{@deployment.sid}</span> 14 14 </div> 15 15 <:actions> 16 16 <.button ··· 70 70 id={"seed-log-#{sd.seed.sid}"} 71 71 class="rounded-lg border border-zinc-200/50 dark:border-zinc-700/50 p-4" 72 72 > 73 - <div class="flex items-center justify-between gap-4"> 74 - <div class="text-sm font-semibold text-zinc-900 dark:text-zinc-200 flex flex-wrap items-center gap-2"> 73 + <div class="flex flex-wrap items-center justify-between gap-2 sm:gap-4"> 74 + <div class="text-sm font-semibold text-zinc-900 dark:text-zinc-200 flex flex-wrap items-center gap-2 min-w-0"> 75 75 <.link 76 76 navigate={~p"/seeds/#{sd.seed.sid}"} 77 77 class="hover:text-orange-500 dark:hover:text-orange-400"