Trang chủ Khám phá Trợ giúp
Đăng ký Đăng nhập
hr
/
resume_builder
Xem 2
Star 0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu khéo về 0 Wiki
Browse Source

Reorganize styling code

theenglishway (time) 2 năm trước cách đây
mục cha
1a756c75e0
commit
d3237fd8db
8 tập tin đã thay đổi với 213 bổ sung và 159 xóa
Split View Hiển thị tình trạng sai khác
  1. 1 70
      lib/cv_gen_view.ex
  2. 9 89
      lib/templates/cv.html.heex
  3. 30 0
      lib/views/basics.ex
  4. 21 0
      lib/views/education.ex
  5. 11 0
      lib/views/language.ex
  6. 84 0
      lib/views/layout.ex
  7. 16 0
      lib/views/skill.ex
  8. 41 0
      lib/views/work.ex

+ 1 - 70
lib/cv_gen_view.ex
Xem Tập Tin 

@@ -1,79 +1,10 @@
 
 defmodule CvGenView do
 
   use Phoenix.Component
 
-  import CvGenView.Date, only: [date: 1]
 
+  alias CvGenView.{Layout, Basics, Work, Skill, Education, Language}
 
   @after_compile __MODULE__
 
 
   embed_templates("templates/*")
 
 
-  attr(:work, :map)
 
-
 
-  def work(assigns) do
 
-    ~H"""
 
-    <div>
 
-      <h1><%= @work.name %></h1>
 
-
 
-      <dl>
 
-        <dt class="position" lang="fr">Poste</dt>
 
-        <dd lang="fr"><%= @work.position %></dd>
 
-        <dt class="start_date">Date début</dt>
 
-        <dd><.date class="start_date" date={@work.startDate} /></dd>
 
-        <%= unless is_nil(@work[:endDate]) do %>
 
-          <dt class="end_date">Date fin</dt>
 
-          <dd><.date class="end_date" date={@work.endDate} /></dd>
 
-        <% end %>
 
-        <dt class="work_location"></dt>
 
-        <dd>Paris</dd>
 
-      </dl>
 
-
 
-      <p class="summary" lang="en"><%= @work.summary %></p>
 
-
 
-      <ul class="highlights">
 
-        <%= for highlight <- @work.highlights do %>
 
-          <li><%= highlight %></li>
 
-        <% end %>
 
-      </ul>
 
-    </div>
 
-    """
 
-  end
 
-
 
-  attr(:skill, :map)
 
-
 
-  def skill(assigns) do
 
-    ~H"""
 
-    <h1><%= @skill.name %></h1>
 
-    <ul>
 
-      <%= for kw <- @skill.keywords do %>
 
-        <li><%= kw %></li>
 
-      <% end %>
 
-    </ul>
 
-    """
 
-  end
 
-
 
-  attr(:educ, :map)
 
-
 
-  def education(assigns) do
 
-    ~H"""
 
-    <h1><%= @educ.institution %></h1>
 
-
 
-    <dl>
 
-      <dt class="location"></dt>
 
-      <dd><%= @educ[:location] %></dd>
 
-      <dt class="start_date">Date début</dt>
 
-      <dd><.date class="start_date" date={@educ.startDate} /></dd>
 
-      <dt class="end_date">Date fin</dt>
 
-      <dd><.date class="end_date" date={@educ.endDate} /></dd>
 
-    </dl>
 
-    """
 
-  end
 
-
 
-  attr(:lang, :map)
 
-
 
-  def language(assigns) do
 
-    ~H"""
 
-    <%= @lang.language %> (<%= @lang.fluency %>)
 
-    """
 
-  end
 
-
 
   def __after_compile__(_env, _bytecode) do
 
     CvGen.generate()
 
   end

+ 9 - 89
lib/templates/cv.html.heex
Xem Tập Tin 

@@ -14,66 +14,9 @@
 
     />
 
     <style>
 
       @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800);
 
-      @charset "utf-8";
 
 
-      @-webkit-viewport {
 
-        width: device-width;
 
-      }
 
-
 
-      @-moz-viewport {
 
-        width: device-width;
 
-      }
 
-
 
-      @-ms-viewport {
 
-        width: device-width;
 
-      }
 
-
 
-      @-o-viewport {
 
-        width: device-width;
 
-      }
 
-
 
-      @viewport {
 
-        width: device-width;
 
-      }
 
-
 
-      html {
 
-        background-color: rgb(51, 73, 96);
 
-      }
 
-
 
-      * {
 
-        box-sizing: border-box;
 
-      }
 
-
 
-      h1, h2, h3, h4, h5, h6 {
 
-        font-size: 1em;
 
-      }
 
-
 
-      ol,
 
-      ul {
 
-        list-style: none;
 
-        padding-inline: 0;
 
-      }
 
-
 
-      body {
 
-        width: 80;
 
-        max-width: 120ch;
 
-        margin-top: 2em;
 
-        margin-bottom: 2em;
 
-        margin-right: auto;
 
-        margin-left: auto;
 
-        padding: 1em;
 
-        background-color: white;
 
-        font-family: 'Open Sans', Arial, Tahoma;
 
-        font-weight: 400;
 
-
 
-        display: grid;
 
-        grid-template-areas:
 
-        "basics basics"
 
-        "work education"
 
-        "work skills"
 
-        "work languages"
 
-        "work _";
 
-      }
 
+      <%= Layout.resets() |> Phoenix.HTML.raw() %>
 
+      <%= Layout.page_css() |> Phoenix.HTML.raw() %>
 
 
       dl {
 
         display: grid;
 
@@ -88,21 +31,8 @@
 
         grid-column: 2/3;
 
       }
 
 
-      #basics {
 
-        grid-area: basics;
 
-
 
-        display: grid;
 
-        justify-items: center;
 
-      }
 
-
 
-      #work {
 
-        grid-area: work;
 
-      }
 
-
 
-      #basics>h1,
 
-      #basics>h2 {
 
-        text-transform: uppercase;
 
-      }
 
+      <%= Work.css() |> Phoenix.HTML.raw() %>
 
+      <%= Basics.css() |> Phoenix.HTML.raw() %>
 
 
       dt.work_location+dd::before {
 
         content: '🏢 ' attr(value);
 
@@ -117,22 +47,12 @@
 
       li h3 {
 
         font-weight: 500;
 
       }
 
-
 
-      #skills .tools::after {
 
-        content: "Outils";
 
-      }
 
     </style>
 
   </head>
 
 
   <body>
 
     <div id="basics">
 
-      <h1><%= @basics.name %></h1>
 
-      <h2><%= @basics.label %></h2>
 
-
 
-      <dl>
 
-        <dt class="location">Lieu</dt>
 
-        <dd><%= @basics.location.city %></dd>
 
-      </dl>
 
+      <Basics.basics basics={@basics} />
 
     </div>
 
 
     <div id="work">
 
@@ -140,7 +60,7 @@
 
       <ol>
 
         <%= for work <- @work do %>
 
           <li>
 
-            <.work work={work} />
 
+            <Work.work work={work} />
 
           </li>
 
         <% end %>
 
       </ol>
 
@@ -151,7 +71,7 @@
 
 
       <ul>
 
         <%= for skill <- @skills do %>
 
-          <li><.skill skill={skill} /></li>
 
+          <li><Skill.skill skill={skill} /></li>
 
         <% end %>
 
       </ul>
 
     </div>
 
@@ -161,7 +81,7 @@
 
 
       <ol>
 
         <%= for educ <- @education do %>
 
-          <li><.education educ={educ} /></li>
 
+          <li><Education.education educ={educ} /></li>
 
         <% end %>
 
       </ol>
 
     </div>
 
@@ -171,7 +91,7 @@
 
 
       <ul>
 
         <%= for lang <- @languages do %>
 
-          <li><.language lang={lang} /></li>
 
+          <li><Language.language lang={lang} /></li>
 
         <% end %>
 
       </ul>
 
     </div>

+ 30 - 0
lib/views/basics.ex
Xem Tập Tin 

@@ -0,0 +1,30 @@
 
+defmodule CvGenView.Basics do
 
+  use Phoenix.Component
 
+
 
+  attr(:basics, :map)
 
+
 
+  def basics(assigns) do
 
+    ~H"""
 
+    <h1><%= @basics.name %></h1>
 
+    <h2><%= @basics.label %></h2>
 
+
 
+    <dl>
 
+      <dt class="location">Lieu</dt>
 
+      <dd><%= @basics.location.city %></dd>
 
+    </dl>
 
+    """
 
+  end
 
+
 
+  def css(),
 
+    do: """
 
+    #basics {
 
+      display: grid;
 
+      justify-items: center;
 
+    }
 
+
 
+    #basics>h1,
 
+    #basics>h2 {
 
+      text-transform: uppercase;
 
+    }
 
+    """
 
+end

+ 21 - 0
lib/views/education.ex
Xem Tập Tin 

@@ -0,0 +1,21 @@
 
+defmodule CvGenView.Education do
 
+  use Phoenix.Component
 
+  import CvGenView.Date, only: [date: 1]
 
+
 
+  attr(:educ, :map)
 
+
 
+  def education(assigns) do
 
+    ~H"""
 
+    <h1><%= @educ.institution %></h1>
 
+
 
+    <dl>
 
+      <dt class="location"></dt>
 
+      <dd><%= @educ[:location] %></dd>
 
+      <dt class="start_date">Date début</dt>
 
+      <dd><.date class="start_date" date={@educ.startDate} /></dd>
 
+      <dt class="end_date">Date fin</dt>
 
+      <dd><.date class="end_date" date={@educ.endDate} /></dd>
 
+    </dl>
 
+    """
 
+  end
 
+end

+ 11 - 0
lib/views/language.ex
Xem Tập Tin 

@@ -0,0 +1,11 @@
 
+defmodule CvGenView.Language do
 
+  use Phoenix.Component
 
+
 
+  attr(:lang, :map)
 
+
 
+  def language(assigns) do
 
+    ~H"""
 
+    <%= @lang.language %> (<%= @lang.fluency %>)
 
+    """
 
+  end
 
+end

+ 84 - 0
lib/views/layout.ex
Xem Tập Tin 

@@ -0,0 +1,84 @@
 
+defmodule CvGenView.Layout do
 
+  def resets(),
 
+    do: """
 
+    @charset "utf-8";
 
+
 
+    @-webkit-viewport {
 
+      width: device-width;
 
+    }
 
+
 
+    @-moz-viewport {
 
+      width: device-width;
 
+    }
 
+
 
+    @-ms-viewport {
 
+      width: device-width;
 
+    }
 
+
 
+    @-o-viewport {
 
+      width: device-width;
 
+    }
 
+
 
+    @viewport {
 
+      width: device-width;
 
+    }
 
+
 
+    * {
 
+      box-sizing: border-box;
 
+    }
 
+
 
+    h1, h2, h3, h4, h5, h6 {
 
+      font-size: 1em;
 
+    }
 
+
 
+    ol,
 
+    ul {
 
+      list-style: none;
 
+      padding-inline: 0;
 
+    }
 
+    """
 
+
 
+  def page_css(),
 
+    do: """
 
+    html {
 
+      background-color: rgb(51, 73, 96);
 
+    }
 
+
 
+    body {
 
+      width: 80;
 
+      max-width: 120ch;
 
+      margin-top: 2em;
 
+      margin-bottom: 2em;
 
+      margin-right: auto;
 
+      margin-left: auto;
 
+      padding: 1em;
 
+      background-color: white;
 
+      font-family: 'Open Sans', Arial, Tahoma;
 
+      font-weight: 400;
 
+
 
+      display: grid;
 
+      grid-template-areas:
 
+      "basics basics"
 
+      "work skills"
 
+      "work education"
 
+      "work languages"
 
+      "work _";
 
+    }
 
+
 
+    #basics {
 
+      grid-area: basics;
 
+    }
 
+    #work {
 
+      grid-area: work;
 
+    }
 
+    #education {
 
+      grid-area: education;
 
+    }
 
+    #skills {
 
+      grid-area: skills;
 
+    }
 
+    #languages {
 
+      grid-area: languages;
 
+    }
 
+    """
 
+end

+ 16 - 0
lib/views/skill.ex
Xem Tập Tin 

@@ -0,0 +1,16 @@
 
+defmodule CvGenView.Skill do
 
+  use Phoenix.Component
 
+
 
+  attr(:skill, :map)
 
+
 
+  def skill(assigns) do
 
+    ~H"""
 
+    <h1><%= @skill.name %></h1>
 
+    <ul>
 
+      <%= for kw <- @skill.keywords do %>
 
+        <li><%= kw %></li>
 
+      <% end %>
 
+    </ul>
 
+    """
 
+  end
 
+end

+ 41 - 0
lib/views/work.ex
Xem Tập Tin 

@@ -0,0 +1,41 @@
 
+defmodule CvGenView.Work do
 
+  use Phoenix.Component
 
+  import CvGenView.Date, only: [date: 1]
 
+
 
+  attr(:work, :map)
 
+
 
+  def work(assigns) do
 
+    ~H"""
 
+    <div>
 
+      <h1><%= @work.name %></h1>
 
+
 
+      <dl>
 
+        <dt class="position" lang="fr">Poste</dt>
 
+        <dd lang="fr"><%= @work.position %></dd>
 
+        <dt class="start_date">Date début</dt>
 
+        <dd><.date class="start_date" date={@work.startDate} /></dd>
 
+        <%= unless is_nil(@work[:endDate]) do %>
 
+          <dt class="end_date">Date fin</dt>
 
+          <dd><.date class="end_date" date={@work.endDate} /></dd>
 
+        <% end %>
 
+        <dt class="work_location"></dt>
 
+        <dd>Paris</dd>
 
+      </dl>
 
+
 
+      <p class="summary" lang="en"><%= @work.summary %></p>
 
+
 
+      <ul class="highlights">
 
+        <%= for highlight <- @work.highlights do %>
 
+          <li><%= highlight %></li>
 
+        <% end %>
 
+      </ul>
 
+    </div>
 
+    """
 
+  end
 
+
 
+  def css,
 
+    do: """
 
+    #work {
 
+    }
 
+    """
 
+end