criando tela equipes-nucleos sem figma

peapescarte · Jan 30, 2024 · 3523ce1 · 3523ce1
1 parent b9de9b8
commit 3523ce1
Show file tree

Hide file tree

Showing 9 changed files with 214 additions and 17 deletions.
diff --git a/assets/css/app.scss b/assets/css/app.scss
@@ -172,6 +172,7 @@ footer {
 @import "./tabela.scss";
 @import "./label.scss";
 @import "./dropdown.scss";
+@import "./equipe.scss";
 
 // Páginas
 // Sem autenticação
@@ -184,4 +185,4 @@ footer {
 @import "./pages/app/researcher/relatorio/report.scss";
 
 // Páginas de Erros
-@import "./errors/404.scss";
+@import "./errors/404.scss";
diff --git a/assets/css/equipe.scss b/assets/css/equipe.scss
@@ -0,0 +1,56 @@
+.equipe-grid {
+  overflow: scroll;
+  display: grid;
+  gap: 2rem;
+  grid-template-areas:
+    "title"
+    "links"
+    "about"
+    "bottom-banner";
+}
+.title {
+  @apply justify-center w-full;
+
+  grid-area: title;
+}
+.bottom-banner {
+  @apply w-full;
+
+  height: 30rem;
+  grid-area: bottom-banner;
+}
+.links {
+  @apply flex flex-wrap justify-center md:mt-10;
+
+  .links-item {
+    @apply flex flex-col justify-end m-4;
+    height: 20.875rem;
+    width: 20.125rem;
+    border-radius: 8px;
+    background: linear-gradient(180deg, rgba(16, 16, 16, 0) 0%, #101010 100%);
+
+    img {
+      @apply absolute;
+      z-index: -10;
+      height: inherit;
+      width: inherit;
+    }
+
+    h3 {
+      padding-left: 1rem;
+    }
+
+    p {
+      width: 85%;
+      margin-top: 0.5rem;
+      padding: 0 1rem 1.5rem 1rem;
+    }
+  }
+}
+.news {
+  h1 {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 5rem;
+  }
+}
diff --git a/lib/pescarte_web/controllers/equipe_controller.ex b/lib/pescarte_web/controllers/equipe_controller.ex
@@ -0,0 +1,7 @@
+defmodule PescarteWeb.EquipeController do
+  use PescarteWeb, :controller
+
+  def show(conn, _params) do
+    render(conn, :show)
+  end
+end
diff --git a/lib/pescarte_web/design_system.ex b/lib/pescarte_web/design_system.ex
@@ -430,10 +430,9 @@ defmodule PescarteWeb.DesignSystem do
             <Lucideicons.chevron_down class="text-blue-100" />
           </li>
           <li class="nav-item">
-            <DesignSystem.link href={~p"/xx"} class="text-sm font-semibold">
+            <DesignSystem.link href={~p"/equipe"} class="text-sm font-semibold">
               <.text size="h4" color="text-blue-100">Equipes</.text>
             </DesignSystem.link>
-            <Lucideicons.chevron_down class="text-blue-100" />
           </li>
           <li class="nav-item">
             <DesignSystem.link href={~p"/xx"} class="text-sm font-semibold">

diff --git a/lib/pescarte_web/live/pesquisa/relatorio_live/index.ex b/lib/pescarte_web/live/pesquisa/relatorio_live/index.ex
@@ -20,29 +20,32 @@ defmodule PescarteWeb.Pesquisa.RelatorioLive.Index do
   @impl true
   def handle_event("mensal_report", _, socket) do
     pesquisador_id = socket.assigns.current_researcher.id_publico
+
     {:noreply,
-    socket
-    |> assign(:type, "mensal")
-    |> assign(:pesquisador_id, pesquisador_id)
-    |> push_patch(to: ~p"/app/pesquisa/relatorios/new")}
+     socket
+     |> assign(:type, "mensal")
+     |> assign(:pesquisador_id, pesquisador_id)
+     |> push_patch(to: ~p"/app/pesquisa/relatorios/new")}
   end
 
   def handle_event("trimestral_report", _, socket) do
     pesquisador_id = socket.assigns.current_researcher.id_publico
+
     {:noreply,
-    socket
-    |> assign(:type, "trimestral")
-    |> assign(:pesquisador_id, pesquisador_id)
-    |> push_patch(to: ~p"/app/pesquisa/relatorios/new")}
+     socket
+     |> assign(:type, "trimestral")
+     |> assign(:pesquisador_id, pesquisador_id)
+     |> push_patch(to: ~p"/app/pesquisa/relatorios/new")}
   end
 
   def handle_event("anual_report", _, socket) do
     pesquisador_id = socket.assigns.current_researcher.id_publico
+
     {:noreply,
-    socket
-    |> assign(:type, "anual")
-    |> assign(:pesquisador_id, pesquisador_id)
-    |> push_patch(to: ~p"/app/pesquisa/relatorios/new")}
+     socket
+     |> assign(:type, "anual")
+     |> assign(:pesquisador_id, pesquisador_id)
+     |> push_patch(to: ~p"/app/pesquisa/relatorios/new")}
   end
 
   defp apply_action(socket, :edit, %{"id" => id}) do

diff --git a/lib/pescarte_web/router.ex b/lib/pescarte_web/router.ex
@@ -43,6 +43,12 @@ defmodule PescarteWeb.Router do
     post("/acessar", LoginController, :create)
   end
 
+  scope "/equipe", PescarteWeb do
+    pipe_through(:browser)
+    get("/", EquipeController, :show)
+  end
+
+
   scope "/app/pesquisa", PescarteWeb.Pesquisa do
     pipe_through(:browser)
     # pipe_through [:browser, :require_authenticated_user]

diff --git a/lib/pescarte_web/templates/equipe_html.ex b/lib/pescarte_web/templates/equipe_html.ex
@@ -0,0 +1,10 @@
+defmodule PescarteWeb.EquipeHTML do
+  use PescarteWeb, :html
+
+  embed_templates("equipe_html/*")
+
+ def handle_event("dialog", _value, socket) do
+    IO.puts("HHHHHHHHEEEEEEEEELLLLLLLLLOOOOOOOOOOOOOOOOOOOOO")
+    {:noreply, socket}
+  end
+ end
diff --git a/lib/pescarte_web/templates/equipe_html/show.html.heex b/lib/pescarte_web/templates/equipe_html/show.html.heex
@@ -0,0 +1,112 @@
+<main class="equipe-grid">
+  <div class="news">
+    <.text size="h1" color="text-blue-100">
+      Núcleos de Atuação
+    </.text>
+  </div>
+  <div class="links">
+    <div class="links-item">
+      <img src={~p"/images/landing/pesquisa.png"} />
+      <DesignSystem.link href={~p"/equipe/norte"} class="text-sm font-semibold">
+        <.text size="h3" color="text-white-100">Norte</.text>
+        <.text size="base" color="text-white-100">
+          Equipe Norte
+        </.text>
+        <.button style="primary">
+          Saiba mais <Lucideicons.arrow_right class="text-white-100" />
+        </.button>
+      </DesignSystem.link>
+    </div>
+
+    <div class="links-item">
+      <img src={~p"/images/landing/pesquisa.png"} />
+      <DesignSystem.link href={~p"/foto"} class="text-sm font-semibold">
+        <.text size="h3" color="text-white-100">Sul</.text>
+        <.text size="base" color="text-white-100">
+          Equipe Sul
+        </.text>
+        <.button style="primary">
+          Saiba mais <Lucideicons.arrow_right class="text-white-100" />
+        </.button>
+      </DesignSystem.link>
+    </div>
+
+    <div class="links-item">
+      <img src={~p"/images/landing/pesquisa.png"} />
+      <DesignSystem.link href={~p"/foto"} class="text-sm font-semibold">
+        <.text size="h3" color="text-white-100">Pesquisa</.text>
+        <.text size="base" color="text-white-100">
+          Equipe Pesquisa
+        </.text>
+        <.button style="primary">
+          Saiba mais <Lucideicons.arrow_right class="text-white-100" />
+        </.button>
+      </DesignSystem.link>
+    </div>
+
+    <div class="links-item">
+      <img src={~p"/images/landing/pesquisa.png"} />
+      <DesignSystem.link href={~p"/foto"} class="text-sm font-semibold">
+        <.text size="h3" color="text-white-100">Pedagógico</.text>
+        <.text size="base" color="text-white-100">
+          Equipe do Pedagógico
+        </.text>
+        <.button style="primary">
+          Saiba mais <Lucideicons.arrow_right class="text-white-100" />
+        </.button>
+      </DesignSystem.link>
+    </div>
+
+    <div class="links-item">
+      <img src={~p"/images/landing/pesquisa.png"} />
+      <DesignSystem.link href={~p"/foto"} class="text-sm font-semibold">
+        <.text size="h3" color="text-white-100">Criativo</.text>
+        <.text size="base" color="text-white-100">
+          Equipe Criativo
+        </.text>
+        <.button style="primary">
+          Saiba mais <Lucideicons.arrow_right class="text-white-100" />
+        </.button>
+      </DesignSystem.link>
+    </div>
+
+    <div class="links-item">
+      <img src={~p"/images/landing/pesquisa.png"} />
+      <DesignSystem.link href={~p"/foto"} class="text-sm font-semibold">
+        <.text size="h3" color="text-white-100">Social</.text>
+        <.text size="base" color="text-white-100">
+          Equipe
+        </.text>
+        <.button style="primary">
+          Saiba mais <Lucideicons.arrow_right class="text-white-100" />
+        </.button>
+      </DesignSystem.link>
+    </div>
+
+    <div class="links-item">
+      <img src={~p"/images/landing/pesquisa.png"} />
+      <DesignSystem.link href={~p"/foto"} class="text-sm font-semibold">
+        <.text size="h3" color="text-white-100">Administrativo</.text>
+        <.text size="base" color="text-white-100">
+          Equipe Admin
+        </.text>
+        <.button style="primary">
+          Saiba mais <Lucideicons.arrow_right class="text-white-100" />
+        </.button>
+      </DesignSystem.link>
+    </div>
+
+    <div class="links-item">
+      <img src={~p"/images/landing/pesquisa.png"} />
+      <DesignSystem.link href={~p"/foto"} class="text-sm font-semibold">
+        <.text size="h3" color="text-white-100">Agenda Ambiental</.text>
+        <.text size="base" color="text-white-100">
+          Equipe Ambiental
+        </.text>
+        <.button style="primary">
+          Saiba mais <Lucideicons.arrow_right class="text-white-100" />
+        </.button>
+      </DesignSystem.link>
+    </div>
+  </div>
+</main>
diff --git a/lib/pescarte_web/templates/landing_html/show.html.heex b/lib/pescarte_web/templates/landing_html/show.html.heex
@@ -33,7 +33,10 @@
           Livros...em construção
         </.text>
       </DesignSystem.link>
-        <DesignSystem.link href={"https://drive.google.com/drive/u/1/folders/1w961gkYNiUKWUF2S8zkRBAI46iMkh9CR"} class="text-sm font-semibold">
+      <DesignSystem.link
+        href="https://drive.google.com/drive/u/1/folders/1w961gkYNiUKWUF2S8zkRBAI46iMkh9CR"
+        class="text-sm font-semibold"
+      >
         <.button style="primary">
           Saiba mais (Boletins) <Lucideicons.arrow_right class="text-white-100" />
         </.button>
@@ -124,7 +127,7 @@
           <DesignSystem.link href={~p"/noti-1"} class="text-sm font-semibold">
             <.button style="primary">
               <a href="https://drive.google.com/drive/u/1/folders/1w961gkYNiUKWUF2S8zkRBAI46iMkh9CR">
-              <.text size="base" color="text-white-100">Ler mais</.text>
+                <.text size="base" color="text-white-100">Ler mais</.text>
               </a>
             </.button>
           </DesignSystem.link>