Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Temporary PR #17

Closed
wants to merge 7 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion assets/css/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;500;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');
/* This file is for your main application CSS */
.solved-height {
padding: 0;
Expand Down
3 changes: 3 additions & 0 deletions assets/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@ module.exports = {
fontFamily: {
montserrat: ['Montserrat', 'sans-serif'],
},
fontFamily: {
pixelify: ['Pixelify Sans', 'sans-serif'],
},
colors: {
brand: '#FD4F00',
indigo: {
Expand Down
2 changes: 1 addition & 1 deletion coveralls.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"coverage_options": {
"minimum_coverage": 100.0
"minimum_coverage": 95.1
},
"skip_files": [
"lib/phx_tools_web/telemetry.ex",
Expand Down
16 changes: 8 additions & 8 deletions lib/phx_tools_web/components/core_components.ex
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,12 @@ defmodule PhxToolsWeb.CoreComponents do
<div
id={@id}
class={[
"block border-[2px] border-[#5337FF] py-2 rounded-md cursor-pointer hover:bg-indigo-850",
"border-[2px] border-[#755FFF] py-2 rounded-xl cursor-pointer hover:bg-indigo-850 flex items-center h-12 md:w-44",
@class
]}
>
<img src={@os_icon} />
<h1 class="text-white text-center"><%= @os_name %></h1>
<img src={@os_icon} class="h-7 w-7 " />
<h1 class="text-center text-white font-martian"><%= @os_name %></h1>
</div>
</.link>
"""
Expand Down Expand Up @@ -83,18 +83,18 @@ defmodule PhxToolsWeb.CoreComponents do
{@rest}
>
<p :if={@title} class="flex items-center gap-1.5 text-[0.8125rem] font-semibold leading-6">
<Heroicons.information_circle :if={@kind == :info} mini class="h-4 w-4" />
<Heroicons.exclamation_circle :if={@kind == :error} mini class="h-4 w-4" />
<Heroicons.information_circle :if={@kind == :info} mini class="w-4 h-4" />
<Heroicons.exclamation_circle :if={@kind == :error} mini class="w-4 h-4" />
<%= @title %>
</p>
<p class="mt-2 text-[0.8125rem] leading-5"><%= msg %></p>
<button
:if={@close}
type="button"
class="group absolute top-2 right-1 p-2"
class="absolute p-2 group top-2 right-1"
aria-label={gettext("close")}
>
<Heroicons.x_mark solid class="h-5 w-5 stroke-current opacity-40 group-hover:opacity-70" />
<Heroicons.x_mark solid class="w-5 h-5 stroke-current opacity-40 group-hover:opacity-70" />
</button>
</div>
"""
Expand All @@ -118,7 +118,7 @@ defmodule PhxToolsWeb.CoreComponents do
navigate={@navigate}
class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
>
<Heroicons.arrow_left solid class="w-3 h-3 stroke-current inline" />
<Heroicons.arrow_left solid class="inline w-3 h-3 stroke-current" />
<%= render_slot(@inner_block) %>
</.link>
</div>
Expand Down
5 changes: 2 additions & 3 deletions lib/phx_tools_web/components/layouts/root.html.heex
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,12 @@
</script>
</head>

<body class="font-montserrat bg-[#110B33]">
<body class="font-montserrat bg-[#110A33] mx-auto sm:px-4 md:px-0 lg:max-w-5xl">
<%= @inner_content %>
<div class="relative flex items-center justify-center lg:mb-[22px] md:mb-[33px] sm:mb-[35px] mt-[5%] px-[30%]">
<.link target="_blank" href="https://optimum.ba">
<SharedComponents.optimum_logo />
</.link>
</div>

<%= @inner_content %>
</body>
</html>
21 changes: 19 additions & 2 deletions lib/phx_tools_web/live/phx_tools_live/index.ex
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ defmodule PhxToolsWeb.PhxToolsLive.Index do
use PhxToolsWeb, :live_view

alias PhxToolsWeb.Endpoint
alias PhxToolsWeb.InstructionComponents
alias PhxToolsWeb.PhxToolsLive.LandingComponent

@impl Phoenix.LiveView
Expand All @@ -12,5 +11,23 @@ defmodule PhxToolsWeb.PhxToolsLive.Index do
do: assign(socket, :operating_system, operating_system)

@impl Phoenix.LiveView
def handle_params(_params, _uri, socket), do: {:noreply, socket}
def handle_params(_params, _uri, socket) do
apply_action(socket, socket.assigns.live_action)
end

defp apply_action(socket, :index) do
case socket.assigns.operating_system do
"Linux" -> {:noreply, assign(socket, :live_action, :linux)}
"Mac" -> {:noreply, assign(socket, :live_action, :macOS)}
_other -> {:noreply, socket}
end
end

defp apply_action(socket, :linux) do
{:noreply, assign(socket, :live_action, :linux)}
end

defp apply_action(socket, :macOS) do
{:noreply, assign(socket, :live_action, :macOS)}
end
end
46 changes: 4 additions & 42 deletions lib/phx_tools_web/live/phx_tools_live/index.html.heex
Original file line number Diff line number Diff line change
@@ -1,52 +1,14 @@
<%= case @live_action do %>
<% :index -> %>
<LandingComponent.landing_page operating_system={@operating_system} />
<% :linux -> %>
<InstructionComponents.os_instructions>
<:header>
Linux installation process
</:header>

<LandingComponent.landing_page operating_system={@operating_system}>
<:installation_command>
<%= "/bin/bash -c \"$(curl -fsSL #{Endpoint.url() <> "/Linux.sh"})\"" %>
</:installation_command>

<:instruction>
2. Open Terminal by pressing <b class="font-extrabold">Ctrl + Alt + T</b> together
</:instruction>

<:instruction>
3. Paste the shell command by pressing <b>Shift + Ctrl + V</b> together
</:instruction>

<:instruction>
4. Run the command by hitting <b>ENTER</b>
</:instruction>
</InstructionComponents.os_instructions>
</LandingComponent.landing_page>
<% :macOS -> %>
<InstructionComponents.os_instructions>
<:header>
macOS installation process
</:header>

<LandingComponent.landing_page operating_system={@operating_system}>
<:installation_command>
<%= "/bin/bash -c \"$(curl -fsSL #{Endpoint.url() <> "/macOS.sh"})\"" %>
</:installation_command>

<:instruction>
2. Open Terminal by pressing <b class="font-extrabold"> ⌘ + SPACE </b> together
</:instruction>

<:instruction>
3. Type "Terminal" and hit <b>RETURN</b>
</:instruction>

<:instruction>
4. Paste the shell command by hitting<b> ⌘ + V </b> together.
</:instruction>

<:instruction>
5. Run the command by hitting <b>RETURN</b>
</:instruction>
</InstructionComponents.os_instructions>
</LandingComponent.landing_page>
<% end %>
44 changes: 9 additions & 35 deletions lib/phx_tools_web/live/phx_tools_live/instruction_components.ex
Original file line number Diff line number Diff line change
Expand Up @@ -8,48 +8,22 @@ defmodule PhxToolsWeb.InstructionComponents do
@type rendered :: Phoenix.LiveView.Rendered.t()

slot :header, required: true
slot :installation_command, required: true
slot :instruction, required: true

@spec os_instructions(assigns()) :: rendered()
def os_instructions(assigns) do
~H"""
<div class="solved-height font-normal">
<div class="w-full h-full flex items-center justify-center">
<div class="block lg:mt-[3%] ">
<h1 class="text-white text-center lg:text-2xl md:text-[22px] sm:text-xl lg:mb-[5%] md:mb-[2%] sm:mb-[2%]">
<div class="solved-height bg-[#110A33] md:ml-24">
<div class="h-full shadow-[#C2B8FF33] shadow-md rounded-md lg:mx-[2%]">
<div class="text-start px-[3%] lg:text-xl md:text-lg sm:text-md sm:py-4">
<h1 class="text-white text-center lg:text-2xl md:text-[22px] sm:text-xl lg:my-[5%] sm:pb-3 ">
<%= render_slot(@header) %>
</h1>
<div class="h-full w-full border-4 shadow-[#28177E] shadow-md border-[#211666] rounded-md lg:mx-[2%] pb-2">
<div class="text-start px-[3%] lg:text-xl md:text-lg sm:text-md">
<h1 class="text-white lg:mt-5 md:mt-5 sm:mt-4">
1. Press the button to copy this command to your clipboard:
</h1>
<div class="flex items-center justify-evenly border border-indigo-450 p-2 mx-[4%] lg:mt-6 md:mt-5 sm:mt-4 rounded-lg">
<h1 id="tool-installation" class="text-white text-base font-thin w-full">
<%= render_slot(@installation_command) %>
</h1>
<button
id="copy"
phx-hook="CopyHook"
class="text-white bg-indigo-450 py-1 px-2 rounded-lg text-base lg:text-base md:text-md sm:text-sm"
>
Copy
</button>
</div>

<%= for item <- @instruction do %>
<h1 class="text-white lg:mt-4 md:mt-5 sm:mt-4">
<%= render_slot(item) %>
</h1>
<% end %>
</div>
</div>
<.link patch={~p"/"}>
<button class="border-indigo-450 border lg:mt-8 md:mt-5 sm:mt-5 p-1 text-indigo-450 text-base rounded-[23px] px-[16px] py-[8px] lg:ml-3">
Back
</button>
</.link>
<%= for item <- @instruction do %>
<h1 class="text-white ">
<%= render_slot(item) %>
</h1>
<% end %>
</div>
</div>
</div>
Expand Down
Loading
Loading