16 (2) 23 - <div class="col-12 col-md-4"> </div> 23 + <div class="col-12 col-md-4 bg-info text-white text-md-right"> </div> HTML bg-info #17

Size: px

Start display at page:

Download "16 (2) 23 - <div class="col-12 col-md-4"> </div> 23 + <div class="col-12 col-md-4 bg-info text-white text-md-right"> </div> HTML bg-info #17"

よしたかみしま
5 years ago
Views:

1 16 (2) Elixir/Phoenix 16.1 web/templates/plan_items/show.html.eex 3 - <div class="col-12 col-md-4"> </div> 3 + <div class="col-12 col-md-4 bg-info text-white text-md-right"> </div> 7 - <div class="col-12 col-md-4"> </div> 7 + <div class="col-12 col-md-4 bg-info text-white text-md-right"> </div> 15 - <div class="col-12 col-md-4"> </div> 15 + <div class="col-12 col-md-4 bg-info text-white text-md-right"> </div> 185

2 16 (2) 23 - <div class="col-12 col-md-4"> </div> 23 + <div class="col-12 col-md-4 bg-info text-white text-md-right"> </div> HTML bg-info #17a2b8 info bg-primary #007bff bg-secondary #868e96 bg-success #28a745 bg-danger #dc3545 bg-warning #ffc107 bg-info #17a2b8 bg-light #f8f9fa bg-dark #343a40 bg-white #ffffff HTML text-white HTML text-md-right Medium 768px right left center md sm lg xl text-right text-left text-center HTML

3 plan_item.scss web/static/css/plan_item.scss (New) 1 div.plan-item { 187

$16 (2) 2 div.row { 3 margin-bottom 0.5rem; 4 } 5 div.rowlast-child { 6 margin-bottom 0; 7 } 8 } plan_items.scss HTML plan-item row 0.$

4 16 (2) 2 div.row { 3 margin-bottom 0.5rem; 4 } 5 div.rowlast-child { 6 margin-bottom 0; 7 } 8 } plan_items.scss HTML plan-item row 0.5rem 8px 0 web/templates/plan_items/show.html.eex 1 - <div class="container-fluid"> 1 + <div class="container-fluid plan-item">

16.3 16.4 16.3 web/templates/plan_items/index.html.eex 4 <div class="col-12 col-md-4"> 5 - <span class="plan-item-name"><%= item.

5 web/templates/plan_items/index.html.eex 4 <div class="col-12 col-md-4"> 5 - <span class="plan-item-name"><%= item.name %></span> 5 + <span class="plan-item-name"> 6 + <%= link item.name, to plan_items_path(@conn, show, item.id) %> 7 + </span> 8 </div> http//localhost4000/plan_items/

6 16 (2) 16.5 index.html.eex 6 <%= link item.name, to plan_items_path(@conn, show, item.id) %> item PlanItem link/2 1 to URL item.name item PlanItem name URL plan_items_path/3 plan_items#show get "/plan_items/id", PlanItemsController, show URL id plan_items_path/3 190

7 item.id 3 URL /plan_items/ web/templates/plan_items/show.html.eex 1 <div class="container-fluid plan-item"> 2 + <div class="row"> 3 + <div class="col-12 d-md-none text-right"> 4 + <%= link to plan_items_path(@conn, index) do %> 5 + <i class="fa fa-list fa-lg"></i> 6 + <% end %> 7 + </div> 8 + <div class="col-md-12 d-none d-md-block text-right"> 9 + <%= link to plan_items_path(@conn, index), 10 + class "btn btn-secondary btn-sm" do %> 11 + <i class="fa fa-list"></i> 12 + <% end %> 13 + </div> 14 + </div> 15 <div class="row"> 16 <div class="col-12 col-md-4 bg-info text-white text-md-right"> </div> row div

8 16 (2) <div class="col-12 d-md-none text-right"> HTML d-md-none md 768px 1 d CSS display display none md 768px 192

9 16.4 md 768px 4 6 <%= link to plan_items_path(@conn, index) do %> <i class="fa fa-list fa-lg"></i> <% end %> Font Awesome list fa-list HTML fa-lg large HTML 33% 16.2 HTML 16.2 HTML HTML fa-lg fa-2x fa-3x fa-4x fa-5x 33% <div class="col-md-12 d-none d-md-block text-right"> 3 div md 768px HTML d-none HTML d-md-block md 768px 193

10 16 (2) HTML d-none d-md-block d-lg-inline HTML block inline 9 12 <%= link to plan_items_path(@conn, index), class "btn btn-secondary btn-sm" do %> <i class="fa fa-list"></i> <% end %> HTML btn HTML btn-secondary secondary primary success danger warning info btn-primary #007bff btn-secondary #868e96 btn-success #28a745 btn-danger #dc3545 btn-warning #ffc107 btn-info #17a2b8 btn-light #f8f9fa btn-dark #343a40 HTML btn-sm small btn-lg 16.5 format_datetime/1 plan_items#index 194

11 16.6 web/views plan_items_view.ex 25 Strftime.format! item.ends_at, "%Y %-m %-d %H%M" 26 end 27 end def format_datetime(datetime) do 30 + Strftime.format! datetime, "%Y %-m %-d %H%M" 31 + end 32 end web/templates/plan_items show.html.eex web/templates/plan_items/show.html.eex 30 - <%= "%Y %-m %-d %H%M" %> 30 + <%= %> 36 - <%= "%Y %-m %-d %H%M" %> 36 + <%= %> 16.6 format_wday/1 195

12 16 (2) 12 6 ( ) ( ) ( ) 0000 format_wday/1 29 def format_datetime(datetime) do 30 Strftime.format! datetime, "%Y %-m %-d %H%M" 31 end defp format_wday(datetime) do 34 + Enum.at ~w( ), 35 + Timex.days_to_beginning_of_week(datetime, sun) 36 + end 37 end Enum.at/3 1 2 index 1 Timex.days_to_beginning_of_week/2 1 Timex.Date Timex.DateTime 2 sun mon 0 6 ~w Enum.at [" ", " ", " ", " ", " ", " ", " "], format_wday/1 196

13 defp format_starts_at(item) do 10 time_zone = Application.get_env(nano_planner, default_time_zone) 11 + w = format_wday(item.starts_at) 12 if item.starts_at.year == Timex.now(timezone).year do w 12 if item.starts_at.year == Timex.now(timezone).year do 13 - Strftime.format! item.starts_at, "%-m %-d %H%M" 13 + Strftime.format! item.starts_at, "%-m %-d (#{w}) %H%M" 14 else 15 - Strftime.format! item.starts_at, "%Y %-m %-d %H%M" 15 + Strftime.format! item.starts_at, "%Y %-m %-d (#{w}) %H%M" 16 end 19 defp format_ends_at(item) do 20 + w = format_wday(item.ends_at) 21 cond do 21 cond do 22 Timex.to_date(item.ends_at) == Timex.to_date(item.starts_at) -> 197

$16 (2) 23 Strftime.format! item.ends_at, "%H%M" 24 item.ends_at.year == item.starts_at.year -> 25 - Strftime.format! item.ends_at, "%-m %-d %H%M" 25 + Strftime.format! item.ends_at, "%-m %-d (#{w}) %H%M" 26 true -> 27 - Strftime.$

14 16 (2) 23 Strftime.format! item.ends_at, "%H%M" 24 item.ends_at.year == item.starts_at.year -> 25 - Strftime.format! item.ends_at, "%-m %-d %H%M" 25 + Strftime.format! item.ends_at, "%-m %-d (#{w}) %H%M" 26 true -> 27 - Strftime.format! item.ends_at, "%Y %-m %-d %H%M" 27 + Strftime.format! item.ends_at, "%Y %-m %-d (#{w}) %H%M" 28 end format_datetime/1 198

16.6 31 def format_datetime(datetime) do 32 + w = format_wday(datetime) 33 Strftime.format! datetime, "%Y %-m %-d %H%M" 34 end 33 - Strftime.

15 def format_datetime(datetime) do 32 + w = format_wday(datetime) 33 Strftime.format! datetime, "%Y %-m %-d %H%M" 34 end 33 - Strftime.format! datetime, "%Y %-m %-d %H%M" 33 + Strftime.format! datetime, "%Y %-m %-d (#{w}) %H%M" Elixir/Phoenix 199

8 7 + <div class='col-12 col-md-8'> 8 <%= item.description %> 9 </div> 10 </div> 11 <% end %> 12 </div> class container container-fluid PicoPlan

8 7 + <div class='col-12 col-md-8'> 8 <%= item.description %> 9 </div> 10 </div> 11 <% end %> 12 </div> class container container-fluid PicoPlan 8 Bootstrap 8.1 PicoPlanner responsive web design PC plan_items#index app/views/plan_items/index.html.erb 1 - 1 + 2 3 - 3 +