From 2f912e6153829bd0c8e8d8ee3a4209758b8e80ba Mon Sep 17 00:00:00 2001 From: codevictory Date: Wed, 2 Jun 2021 19:31:28 +0300 Subject: [PATCH] Performer photo on form, page + styling. --- assets/css/pages/form.scss | 5 ++++ assets/css/pages/performer.scss | 29 +++++++++++++------ assets/css/shared.scss | 8 +++++ .../templates/layout/app.html.eex | 1 + .../templates/performer/form.html.eex | 27 +++++++++++++---- .../templates/performer/index.html.eex | 5 +++- .../templates/performer/show.html.eex | 19 ++++++++++-- 7 files changed, 77 insertions(+), 17 deletions(-) diff --git a/assets/css/pages/form.scss b/assets/css/pages/form.scss index 8896eb9..a6a2815 100644 --- a/assets/css/pages/form.scss +++ b/assets/css/pages/form.scss @@ -5,6 +5,7 @@ form { .checkbox-container { display: flex; + align-items: baseline; label { text-align: left; @@ -55,6 +56,10 @@ form { i { margin-top: 30px; } + + label { + margin-top: 20px; + } } @media screen and (max-width: 600px) { diff --git a/assets/css/pages/performer.scss b/assets/css/pages/performer.scss index 0b29704..25a02af 100644 --- a/assets/css/pages/performer.scss +++ b/assets/css/pages/performer.scss @@ -1,5 +1,6 @@ .performer-img { max-width: 57%; + margin-top: 10px; } @media screen and (max-width: 600px) { @@ -8,20 +9,30 @@ } } +.performer-paragraph { + text-align: left; +} + .performers-container { display: flex; flex-wrap: wrap; width: 80%; - justify-content: space-between; - align-items: baseline; + justify-content: space-evenly; + font-size: 1.2em; .performer-name { - width: 30%; - font-size: x-large; - border-right: solid 1px; - border-left: solid 1px; + width: 40%; margin-bottom: 4%; border-radius: 3px; + display: flex; + align-items: center; + padding: 5px; + } + + a { + color: #2f273e; + margin-left: 10px; + text-align: left; } } @@ -32,10 +43,10 @@ margin-bottom: 10%; text-align: left; padding-left: 5%; - } - .performer-name::before { - content: '>> '; + a { + text-decoration: underline; + } } } } diff --git a/assets/css/shared.scss b/assets/css/shared.scss index 20b153b..e21c006 100644 --- a/assets/css/shared.scss +++ b/assets/css/shared.scss @@ -11,6 +11,7 @@ section.main { p { padding: 0px 20px; max-width: 56%; + width: 100%; } @media screen and (max-width: 600px) { @@ -18,6 +19,13 @@ section.main { max-width: none; } } + + .link-back { + font-weight: bolder; + margin-top: 20px; + margin-bottom: 20px; + text-decoration: underline; + } } section.logo ~ section.main { diff --git a/lib/runosaari_web/templates/layout/app.html.eex b/lib/runosaari_web/templates/layout/app.html.eex index 54f841c..a7d6b0a 100644 --- a/lib/runosaari_web/templates/layout/app.html.eex +++ b/lib/runosaari_web/templates/layout/app.html.eex @@ -10,6 +10,7 @@ rel="stylesheet" href="https://fonts.googleapis.com/css?family=Crimson+Text" /> + diff --git a/lib/runosaari_web/templates/performer/form.html.eex b/lib/runosaari_web/templates/performer/form.html.eex index 169af93..0012417 100644 --- a/lib/runosaari_web/templates/performer/form.html.eex +++ b/lib/runosaari_web/templates/performer/form.html.eex @@ -9,15 +9,32 @@ <%= text_input form, :name %> <%= error_tag form, :name %> - <%= label form, :desc, "Seloste" %> - <%= textarea form, :desc %> - <%= error_tag form, :desc %> +
+ <%= label form, :paragraph1, "Kappale 1 (max 2000 merkkiä)" %> + <%= textarea form, :paragraph1 %> + <%= error_tag form, :paragraph1 %> + + <%= label form, :paragraph2, "Kappale 2 (max 2000 merkkiä)" %> + <%= textarea form, :paragraph2 %> + <%= error_tag form, :paragraph2 %> + + <%= label form, :paragraph3, "Kappale 3 (max 2000 merkkiä)" %> + <%= textarea form, :paragraph3 %> + <%= error_tag form, :paragraph3 %> + + <%= label form, :paragraph4, "Kappale 4 (max 2000 merkkiä)" %> + <%= textarea form, :paragraph4 %> + <%= error_tag form, :paragraph4 %> + + <%= label form, :paragraph5, "Kappale 5 (max 2000 merkkiä)" %> + <%= textarea form, :paragraph5 %> + <%= error_tag form, :paragraph5 %> <%= label form, :seqnum, "Prioriteetti (1 on korkein)" %> <%= number_input form, :seqnum %> <%= error_tag form, :seqnum %> - <%= label form, :photo, "Esiintyjän kuva" %> + <%= label form, :photo, "Esiintyjän kuva (muokatessa ei vaadi uudelleen lisäys vaikka tyhjä)" %> <%= file_input form, :photo %> <%= error_tag form, :photo %> @@ -27,7 +44,7 @@ <%= error_tag form, :confirmed %> -
+
<%= submit "Tallenna" %>
<% end %> diff --git a/lib/runosaari_web/templates/performer/index.html.eex b/lib/runosaari_web/templates/performer/index.html.eex index cacea36..6caac5a 100644 --- a/lib/runosaari_web/templates/performer/index.html.eex +++ b/lib/runosaari_web/templates/performer/index.html.eex @@ -6,7 +6,10 @@ <% end %>
<%= for performer <- @performers do %> - <%= link "#{performer.name}", to: Routes.performer_path(@conn, :show, performer), class: "performer-name" %> +
+ + <%= link "#{performer.name}", to: "#{Routes.performer_path(@conn, :show, performer)}#performer-start" %> +
<% end %>
diff --git a/lib/runosaari_web/templates/performer/show.html.eex b/lib/runosaari_web/templates/performer/show.html.eex index 7fb395c..cfd7e3a 100644 --- a/lib/runosaari_web/templates/performer/show.html.eex +++ b/lib/runosaari_web/templates/performer/show.html.eex @@ -1,5 +1,20 @@ -
+

<%= @performer.name %>

-

<%= @performer.desc %>

+ <%= if @performer.paragraph1 != nil do %> +

<%= @performer.paragraph1 %>

+ <% end %> + <%= if @performer.paragraph2 != nil do %> +

<%= @performer.paragraph2 %>

+ <% end %> + <%= if @performer.paragraph3 != nil do %> +

<%= @performer.paragraph3 %>

+ <% end %> + <%= if @performer.paragraph4 != nil do %> +

<%= @performer.paragraph4 %>

+ <% end %> + <%= if @performer.paragraph5 != nil do %> +

<%= @performer.paragraph5 %>

+ <% end %> Esiintyjän kuva + <%= link "Takaisin esiintyjälistalle", to: Routes.performer_path(@conn, :index) %>