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 {
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) {

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

@@ -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;
}
}
}
}

8
assets/css/shared.scss
View File

@@ -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 {

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

@@ -10,6 +10,7 @@
rel="stylesheet"
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>
</head>
<body>

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

@@ -9,15 +9,32 @@
<%= text_input form, :name %>
<%= error_tag form, :name %>
<%= label form, :desc, "Seloste" %>
<%= textarea form, :desc %>
<%= error_tag form, :desc %>
<hr />
<%= 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 %>
</div>
<div>
<div class="submit-button">
<%= submit "Tallenna" %>
</div>
<% end %>

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

@@ -6,7 +6,10 @@
<% end %>
<div class="performers-container">
<%= 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 %>
</div>
</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>
<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" />
<span class="link-back"><%= link "Takaisin esiintyjälistalle", to: Routes.performer_path(@conn, :index) %></span>
</section>