Skip to content

Commit

Permalink
clean up formatting and remove svg background
Browse files Browse the repository at this point in the history
  • Loading branch information
zacksiri committed Nov 19, 2024
1 parent ba39a5a commit bf30c76
Show file tree
Hide file tree
Showing 9 changed files with 76 additions and 53 deletions.
15 changes: 8 additions & 7 deletions lib/opsmaru/pages/card.ex
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,14 @@ defmodule Opsmaru.Pages.Card do
def changeset(card, params) do
%{
"_id" => id,
"card" => %{
"title" => title,
"heading" => heading,
"description" => description,
"slug" => %{"current" => slug},
"cover" => cover_params
} = card_params
"card" =>
%{
"title" => title,
"heading" => heading,
"description" => description,
"slug" => %{"current" => slug},
"cover" => cover_params
} = card_params
} = params

params =
Expand Down
6 changes: 5 additions & 1 deletion lib/opsmaru_web/components/base_components.ex
Original file line number Diff line number Diff line change
Expand Up @@ -257,7 +257,11 @@ defmodule OpsmaruWeb.BaseComponents do
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path>
</svg>
<a href={~p"/"} class="space-x-3 flex">
<img src={~p"/site/images/logo.svg"} alt="Opsmaru" class="h-9 overflow-visible" />
<img
src={~p"/site/images/logo.svg"}
alt="Opsmaru"
class="h-9 overflow-visible"
/>
<span class="font-medium text-xl mt-1"><%= gettext("Opsmaru") %></span>
</a>
</div>
Expand Down
14 changes: 11 additions & 3 deletions lib/opsmaru_web/components/course_components.ex
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ defmodule OpsmaruWeb.CourseComponents do
attr :categories, :list, required: true

def categories(assigns) do
infrastructure_setup_category = Enum.find(assigns.categories, &(&1.slug == "infrastructure-setup"))
infrastructure_setup_category =
Enum.find(assigns.categories, &(&1.slug == "infrastructure-setup"))

assigns = assign(assigns, :infrastructure_setup_category, infrastructure_setup_category)

Expand All @@ -56,11 +57,18 @@ defmodule OpsmaruWeb.CourseComponents do
<hr class="mt-6 border-t border-slate-200" />
<ul role="list" class="mx-auto mt-10 grid grid-cols-1 gap-8 lg:grid-cols-2">
<li :for={course <- @category.courses}>
<img src={course.main_technology.logo.url} alt={course.main_technology.logo.alt} class="h-14" />
<img
src={course.main_technology.logo.url}
alt={course.main_technology.logo.alt}
class="h-14"
/>
<p class="mt-6 max-w-lg text-sm/6 text-slate-500">
<%= course.description %>
</p>
<.link navigate={~p"/how-to/#{course.slug}"} class="mt-8 inline-flex items-center justify-center px-2 py-[calc(theme(spacing.[1.5])-1px)] rounded-lg border border-transparent shadow ring-1 ring-black/10 whitespace-nowrap text-sm font-medium text-gray-950 data-[disabled]:bg-transparent data-[hover]:bg-gray-50 data-[disabled]:opacity-40">
<.link
navigate={~p"/how-to/#{course.slug}"}
class="mt-8 inline-flex items-center justify-center px-2 py-[calc(theme(spacing.[1.5])-1px)] rounded-lg border border-transparent shadow ring-1 ring-black/10 whitespace-nowrap text-sm font-medium text-gray-950 data-[disabled]:bg-transparent data-[hover]:bg-gray-50 data-[disabled]:opacity-40"
>
<%= gettext("View course") %>
</.link>
</li>
Expand Down
43 changes: 26 additions & 17 deletions lib/opsmaru_web/components/home_components.ex
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,7 @@ defmodule OpsmaruWeb.HomeComponents do
</h2>
</div>
</div>
<div
id="slides"
class="relative bg-[url('/site/images/liquid-cheese.svg')] bg-cover bg-center bg-repeat bg-fixed py-32"
>
<div id="slides" class="relative bg-slate-200 py-32">
<div id="slides-container" class="relative">
<div
:for={slide <- @slides}
Expand Down Expand Up @@ -130,8 +127,13 @@ defmodule OpsmaruWeb.HomeComponents do
~H"""
<div class="max-lg:rounded-t-4xl lg:col-span-3 lg:rounded-tl-4xl group relative flex flex-col overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-black/5 data-[dark]:bg-gray-800 data-[dark]:ring-white/15">
<div class="relative h-80 shrink-0">
<div class="h-80 bg-[size:978px_345px] bg-[left_-8px_top_-12px] bg-no-repeat" style={"background-image: url(#{@card.cover.url})"}></div>
<div class="absolute inset-0 bg-gradient-to-t from-white to-50% group-data-[dark]:from-gray-800 group-data-[dark]:from-[-25%]"></div>
<div
class="h-80 bg-[size:978px_345px] bg-[left_-8px_top_-12px] bg-no-repeat"
style={"background-image: url(#{@card.cover.url})"}
>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-white to-50% group-data-[dark]:from-gray-800 group-data-[dark]:from-[-25%]">
</div>
</div>
<.card_content card={@card} />
</div>
Expand All @@ -144,7 +146,10 @@ defmodule OpsmaruWeb.HomeComponents do
~H"""
<div class="lg:col-span-3 lg:rounded-tr-4xl group relative flex flex-col overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-black/5 data-[dark]:bg-gray-800 data-[dark]:ring-white/15">
<div class="relative h-80 shrink-0">
<div class="absolute inset-0 bg-[size:1100px_647px] bg-[left_-12px_top_-15px] bg-no-repeat" style={"background-image: url(#{@card.cover.url})"}>
<div
class="absolute inset-0 bg-[size:1100px_647px] bg-[left_-12px_top_-15px] bg-no-repeat"
style={"background-image: url(#{@card.cover.url})"}
>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-white to-50% group-data-[dark]:from-gray-800 group-data-[dark]:from-[-25%]">
</div>
Expand All @@ -158,9 +163,12 @@ defmodule OpsmaruWeb.HomeComponents do

def bottom_left(assigns) do
~H"""
<div class="lg:col-span-2 lg:rounded-bl-4xl group relative flex flex-col overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-black/5 data-[dark]:bg-gray-800 data-[dark]:ring-white/15">
<div class="lg:col-span-2 lg:rounded-bl-4xl group relative flex flex-col overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-black/5 data-[dark]:bg-gray-800 data-[dark]:ring-white/15">
<div class="relative h-80 shrink-0">
<div class="absolute inset-0 bg-[size:720px_337px] bg-[left_0px_top_0px] bg-no-repeat" style={"background-image: url(#{@card.cover.url})"}>
<div
class="absolute inset-0 bg-[size:720px_337px] bg-[left_0px_top_0px] bg-no-repeat"
style={"background-image: url(#{@card.cover.url})"}
>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-white to-50% group-data-[dark]:from-gray-800 group-data-[dark]:from-[-25%]">
</div>
Expand All @@ -187,7 +195,10 @@ defmodule OpsmaruWeb.HomeComponents do
~H"""
<div class="max-lg:rounded-b-4xl lg:col-span-2 lg:rounded-br-4xl group relative flex flex-col overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-black/5 data-[dark]:bg-gray-800 data-[dark]:ring-white/15">
<div class="relative h-80 shrink-0">
<div class="absolute inset-0 bg-[size:720px_556px] bg-[left_-10px_top_-25px] bg-no-repeat" style={"background-image: url(#{@card.cover.url})"}>
<div
class="absolute inset-0 bg-[size:720px_556px] bg-[left_-10px_top_-25px] bg-no-repeat"
style={"background-image: url(#{@card.cover.url})"}
>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-white to-50% group-data-[dark]:from-gray-800 group-data-[dark]:from-[-25%]">
</div>
Expand Down Expand Up @@ -222,18 +233,16 @@ defmodule OpsmaruWeb.HomeComponents do

~H"""
<div
id="technologies"
data-technologies={Jason.encode!(@technologies)}
class="relative h-80 shrink-0"
phx-hook="MountTechnologies"
>
id="technologies"
data-technologies={Jason.encode!(@technologies)}
class="relative h-80 shrink-0"
phx-hook="MountTechnologies"
>
<div class="relative h-full overflow-hidden">
<div class="absolute inset-0"></div>
<div class="absolute left-1/2 h-full w-[26rem] -translate-x-1/2"></div>
</div>
</div>
"""
end


end
14 changes: 7 additions & 7 deletions lib/opsmaru_web/components/layouts/root.html.heex
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
<html lang="en" class="[scrollbar-gutter:stable]">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="csrf-token" content={get_csrf_token()} />
<meta name="theme-color" content="#0f172a" />
<link rel="apple-touch-icon" sizes="180x180" href={~p"/site/images/apple-touch-icon.png"}>
<link rel="icon" type="image/png" sizes="32x32" href={~p"/site/images/favicon-32x32.png"}>
<link rel="icon" type="image/png" sizes="16x16" href={~p"/site/images/favicon-16x16.png"}>
<link rel="manifest" href={~p"/site/images/site.webmanifest"}>
<link rel="mask-icon" href={~p"/site/images/safari-pinned-tab.svg"} color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<link rel="apple-touch-icon" sizes="180x180" href={~p"/site/images/apple-touch-icon.png"} />
<link rel="icon" type="image/png" sizes="32x32" href={~p"/site/images/favicon-32x32.png"} />
<link rel="icon" type="image/png" sizes="16x16" href={~p"/site/images/favicon-16x16.png"} />
<link rel="manifest" href={~p"/site/images/site.webmanifest"} />
<link rel="mask-icon" href={~p"/site/images/safari-pinned-tab.svg"} color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<.live_title>
<%= assigns[:page_title] || "Opsmaru" %>
</.live_title>
Expand Down
26 changes: 13 additions & 13 deletions lib/opsmaru_web/controllers/error_html/404.html.heex
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
<link rel="manifest" href="/images/site.webmanifest">
<link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#5bbad5">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png" />
<link rel="manifest" href="/images/site.webmanifest" />
<link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#5bbad5" />
<link
rel="stylesheet"
href="https://api.fontshare.com/css?f%5B%5D=switzer@400,500,600,700&amp;display=swap"
/>
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#0f172a">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
/>
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#0f172a" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
<%= gettext("Page Not Found") %> · Opsmaru
</title>
<link phx-track-static rel="stylesheet" href={~p"/site/assets/app.css"} />
</head>
<body class='antialiased font-sans bg-slate-900'>
<body class="antialiased font-sans bg-slate-900">
<div class="mx-auto mt-20 max-w-2xl text-center sm:mt-24">
<p class="text-base font-semibold leading-8 text-indigo-400"><%= gettext("404") %></p>
<h1 class="mt-4 text-3xl font-bold tracking-tight text-white sm:text-5xl">
Expand Down Expand Up @@ -55,7 +55,7 @@
</li>
<li class="relative flex gap-x-6 py-6">
<div class="flex h-10 w-10 flex-none items-center justify-center rounded-lg shadow-sm ring-1 ring-gray-900/10">
<.icon name="hero-squares-plus" class="h-6 w-6 text-indigo-400" />
<.icon name="hero-squares-plus" class="h-6 w-6 text-indigo-400" />
</div>
<div class="flex-auto">
<h3 class="text-sm font-semibold leading-6 text-slate-100">
Expand Down
2 changes: 1 addition & 1 deletion lib/opsmaru_web/live/course_live/index.ex
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ defmodule OpsmaruWeb.CourseLive.Index do
def mount(_params, _session, socket) do
page = Content.show_page(@page_slug)

header_section = Enum.find(page.sections, & &1.slug == "learn-header")
header_section = Enum.find(page.sections, &(&1.slug == "learn-header"))

categories = Courses.list_categories()

Expand Down
8 changes: 5 additions & 3 deletions lib/opsmaru_web/live/legal_live.ex
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ defmodule OpsmaruWeb.LegalLive do
def mount(%{"id" => slug}, _session, socket) do
with %Content.Page{} = page <- Content.show_page(slug) do
main_section =
Enum.find(page.sections, & &1.slug == "#{slug}-main")
Enum.find(page.sections, &(&1.slug == "#{slug}-main"))

main_content =
Enum.find(main_section.contents, & &1.slug == "#{slug}-main-content")
Enum.find(main_section.contents, &(&1.slug == "#{slug}-main-content"))

socket =
socket
Expand All @@ -42,7 +42,9 @@ defmodule OpsmaruWeb.LegalLive do
<%= @main_section.title %>
</h1>
<p class="mt-6 max-w-3xl text-2xl font-medium text-slate-500">
<%= gettext("Please read the following before using our product. By using our product you agree to these terms and conditions.") %>
<%= gettext(
"Please read the following before using our product. By using our product you agree to these terms and conditions."
) %>
</p>
</div>
</div>
Expand Down
1 change: 0 additions & 1 deletion priv/static/images/liquid-cheese.svg

This file was deleted.

0 comments on commit bf30c76

Please sign in to comment.