tietokonepaja/runosaari.net
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Performer photo on form, page + styling.

Browse Source
This commit is contained in:
codevictory
2021-06-02 19:31:28 +03:00
parent dfd636f3d6
commit 2f912e6153
7 changed files with 77 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
assets/css/pages/form.scss
View File

@@ -5,6 +5,7 @@ form {
.checkbox-container { .checkbox-container {
display: flex; display: flex;
align-items: baseline;
label { label {
text-align: left; text-align: left;
@@ -55,6 +56,10 @@ form {
i { i {
margin-top: 30px; margin-top: 30px;
} }
label {
margin-top: 20px;
}
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {

29
assets/css/pages/performer.scss
View File

@@ -1,5 +1,6 @@
.performer-img { .performer-img {
max-width: 57%; max-width: 57%;
margin-top: 10px;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
@@ -8,20 +9,30 @@
} }
} }
.performer-paragraph {
text-align: left;
}
.performers-container { .performers-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: 80%; width: 80%;
justify-content: space-between; justify-content: space-evenly;
align-items: baseline; font-size: 1.2em;
.performer-name { .performer-name {
width: 30%; width: 40%;
font-size: x-large;
border-right: solid 1px;
border-left: solid 1px;
margin-bottom: 4%; margin-bottom: 4%;
border-radius: 3px; 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%; margin-bottom: 10%;
text-align: left; text-align: left;
padding-left: 5%; padding-left: 5%;
}
.performer-name::before { a {
content: '>> '; text-decoration: underline;
}
} }
} }
} }

8
assets/css/shared.scss
View File

@@ -11,6 +11,7 @@ section.main {
p { p {
padding: 0px 20px; padding: 0px 20px;
max-width: 56%; max-width: 56%;
width: 100%;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
@@ -18,6 +19,13 @@ section.main {
max-width: none; max-width: none;
} }
} }
.link-back {
font-weight: bolder;
margin-top: 20px;
margin-bottom: 20px;
text-decoration: underline;
}
} }
section.logo ~ section.main { section.logo ~ section.main {

1
lib/runosaari_web/templates/layout/app.html.eex
View File

@@ -10,6 +10,7 @@
rel="stylesheet" rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Crimson+Text" href="https://fonts.googleapis.com/css?family=Crimson+Text"
/> />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script> <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</head> </head>
<body> <body>

27
lib/runosaari_web/templates/performer/form.html.eex
View File

@@ -9,15 +9,32 @@
<%= text_input form, :name %> <%= text_input form, :name %>
<%= error_tag form, :name %> <%= error_tag form, :name %>
<%= label form, :desc, "Seloste" %> <hr />
<%= textarea form, :desc %> <%= label form, :paragraph1, "Kappale 1 (max 2000 merkkiä)" %>
<%= error_tag form, :desc %> <%= 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)" %> <%= label form, :seqnum, "Prioriteetti (1 on korkein)" %>
<%= number_input form, :seqnum %> <%= number_input form, :seqnum %>
<%= error_tag 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 %> <%= file_input form, :photo %>
<%= error_tag form, :photo %> <%= error_tag form, :photo %>
@@ -27,7 +44,7 @@
<%= error_tag form, :confirmed %> <%= error_tag form, :confirmed %>
</div> </div>
<div> <div class="submit-button">
<%= submit "Tallenna" %> <%= submit "Tallenna" %>
</div> </div>
<% end %> <% end %>

5
lib/runosaari_web/templates/performer/index.html.eex
View File

@@ -6,7 +6,10 @@
<% end %> <% end %>
<div class="performers-container"> <div class="performers-container">
<%= for performer <- @performers do %> <%= for performer <- @performers do %>
<%= link "#{performer.name}", to: Routes.performer_path(@conn, :show, performer), class: "performer-name" %> <div class="performer-name">
<span class="fa fa-chevron-right" ></span>
<%= link "#{performer.name}", to: "#{Routes.performer_path(@conn, :show, performer)}#performer-start" %>
</div>
<% end %> <% end %>
</div> </div>
</section> </section>

19
lib/runosaari_web/templates/performer/show.html.eex
View File

@@ -1,5 +1,20 @@
<section class="main"> <section class="main performer" id="performer-start">
<h1><%= @performer.name %></h1> <h1><%= @performer.name %></h1>
<p><%= @performer.desc %></p> <%= if @performer.paragraph1 != nil do %>
<p class="performer-paragraph"><%= @performer.paragraph1 %></p>
<% end %>
<%= if @performer.paragraph2 != nil do %>
<p class="performer-paragraph"><%= @performer.paragraph2 %></p>
<% end %>
<%= if @performer.paragraph3 != nil do %>
<p class="performer-paragraph"><%= @performer.paragraph3 %></p>
<% end %>
<%= if @performer.paragraph4 != nil do %>
<p class="performer-paragraph"><%= @performer.paragraph4 %></p>
<% end %>
<%= if @performer.paragraph5 != nil do %>
<p class="performer-paragraph"><%= @performer.paragraph5 %></p>
<% end %>
<img src="<%= @performer.photo_path %>" alt="Esiintyjän kuva" class="performer-img" /> <img src="<%= @performer.photo_path %>" alt="Esiintyjän kuva" class="performer-img" />
<span class="link-back"><%= link "Takaisin esiintyjälistalle", to: Routes.performer_path(@conn, :index) %></span>
</section> </section>