Skip to content

V
VenJob
Commit a31c35be by Mai Hoang Thai Ha
Options

design ribbon, fix UI form

parent 4362da42
Showing with 123 additions and 118 deletions
app/assets/stylesheets/applies.scss
// Place all the styles related to the Applies controller here. $bg-primary: #0d6efd;
// They will automatically be included in application.css. $text-color-white: #fff;
// You can use Sass (SCSS) here: https://sass-lang.com/
.label {
font-size: 20px;
color: black;
}
.ribbon { .ribbon {
font-weight: 400; text-align: center;
line-height: 1.5; ul {
color: #212529; list-style: none;
display: flex; display: flex;
.item {
display: inline-flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center; justify-content: center;
padding: 20px; align-items: center;
font-size: 1rem; width: 100%;
font-weight: 700; margin: 0;
line-height: 1.5; padding: 0;
color: #6c757d; .item {
text-align: center; display: block;
text-decoration: none; float: left;
white-space: nowrap; width: 30%;
vertical-align: middle; height: 100%;
-webkit-user-select: none; background: #f3f5fa;
-moz-user-select: none; text-align: center;
-ms-user-select: none; padding: 12px;
user-select: none; position: relative;
background-color: transparent; font-size: 14px;
border: none; text-decoration: none;
border-radius: .25rem; color: #808080;
.circle { .circle {
display: inline-flex; display: inline-flex;
-ms-flex-line-pack: center; -ms-flex-line-pack: center;
align-content: center; align-content: center;
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
width: 2em; width: 1.6em;
height: 2em; height: 1.6em;
padding: .5em 0; padding: 0.25em 0;
margin: .25rem; margin-right: 10px;
line-height: 1em; line-height: 1em;
color: #fff; font-size: 1em;
background-color: #6c757d; color: #808080;
border-radius: 50% background-color: #e0e0e0;
border-radius: 50%;
}
&:after {
content: "";
border-top: 23px solid transparent;
border-bottom: 23px solid transparent;
border-left: 23px solid #f3f5fa;
position: absolute;
right: -23px;
top: 0;
z-index: 1;
}
&:last-child::after {
display: none;
}
&:first-child::before {
content: "";
border-top: 23px solid transparent;
border-bottom: 23px solid transparent;
border-left: 23px solid #fff;
position: absolute;
left: 0;
top: 0;
}
} }
} .active {
.current-page { background: $bg-primary;
color: #0d6efd; color: $text-color-white;
.circle { .circle {
background: #0d6efd; color: $bg-primary;
background-color: #fff;
}
&::after {
border-left-color: $bg-primary;
color: $text-color-white;
}
} }
} }
.line {
flex: 1 0 32px;
min-width: 1px;
min-height: 1px;
margin: auto;
background-color: rgba(0,0,0,.12);
}
} }
app/views/applies/_ribbon.html.slim
ul.ribbon .ribbon.my-5
-if current_page?(action: 'new') ul
li.item.current-page li class=("item #{'active' if action_name == 'new'}")
span.circle span.circle
| 1 | 1
| Apply | Apply
-else li class=("item #{'active' if action_name == 'confirm'}")
li.item span.circle
span.circle
| 1
| Apply
.line
-if current_page?(action: 'confirm')
li.item.current-page
span.circle
| 2
| Confimation
-else
li.item
span.circle
| 2 | 2
| Confimation | Confirm
.line li class=("item #{'active' if action_name == 'create'}")
-if current_page?(action: 'create') span.circle
li.item.current-page
span.circle
| 3 | 3
| Done | Done
-else
li.item
span.circle
| 3 \ No newline at end of file
| Done
\ No newline at end of file
app/views/applies/confirm.html.slim
...@@ -10,31 +10,34 @@ ...@@ -10,31 +10,34 @@
.col .col
= form_with(model: @apply, scope: :apply_job, url: done_path, local: true) do |f| = form_with(model: @apply, scope: :apply_job, url: done_path, local: true) do |f|
.mb-5 .row.mb-5
= f.hidden_field :job_id, value: @job.id, class: 'form-control' = f.hidden_field :job_id, value: @job.id, class: 'form-control'
.col-2
= f.label :name, 'Full name:', class: 'form-label label'
.col-10
span.mx-2.label.form-control
= @apply.user_name
= f.hidden_field :user_name, value: @apply.user_name, class: 'form-control'
= f.label :name, 'Full name:', class: 'form-label label' .row.mb-5
span.mx-2.label .col-2
= @apply.user_name = f.label :email, 'Email:', class: 'form-label label'
= f.hidden_field :user_name, value: @apply.user_name, class: 'form-control' .col-10
span.mx-2.label.form-control
.mb-5 = @apply.email
= f.label :email, 'Email:', class: 'form-label label' = f.hidden_field :email, value: @apply.email, class: 'form-control'
span.mx-2.label .row.mb-5
= @apply.email .col-2
= f.hidden_field :email, value: @apply.email, class: 'form-control' / = f.hidden_field :cv, value: @apply.cv, class: 'form-control'
.mb-5
span
= f.hidden_field :cv, value: @apply.cv, class: 'form-control'
= f.label :cv, 'Cv: ', class: 'form-label label' = f.label :cv, 'Cv: ', class: 'form-label label'
.col-10
= f.file_field :cv, accept: 'application/pdf, application/msword, application/zip, application/xls, application/xlsx' = f.file_field :cv, accept: 'application/pdf, application/msword, application/zip, application/xls, application/xlsx'
= url_for(@apply.cv) span.form-control
= url_for(@apply.cv)
.row.justify-content-between .row.justify-content-between
.col-6 .col-6
= link_to 'Edit', apply_path(job_id: @job.id), class: 'btn btn-secondary py-2 px-4 w-100' = link_to 'Edit', apply_path(job_id: @job.id), class: 'btn btn-secondary py-2 px-4 w-100'
.col-6 .col-6
= f.submit 'Confirm', class: 'btn btn-primary w-100' = f.submit 'Confirm', class: 'btn btn-primary w-100'
\ No newline at end of file
app/views/applies/new.html.slim
...@@ -8,17 +8,22 @@ ...@@ -8,17 +8,22 @@
.col .col
= form_with(model: @apply, url: confirm_path, local: true) do |f| = form_with(model: @apply, url: confirm_path, local: true) do |f|
= render 'shared/error_messages', object: f.object = render 'shared/error_messages', object: f.object
.mb-5 .row.mb-5
= f.hidden_field :job_id, value: @job.id, class: 'form-control' = f.hidden_field :job_id, value: @job.id, class: 'form-control'
.col-2
= f.label :user_name, 'Full name', class: 'form-label label' = f.label :user_name, 'Full name', class: 'form-label label'
= f.text_field :user_name, class: 'form-control' .col-10
.mb-5 = f.text_field :user_name, class: 'form-control'
= f.label :email, class: 'form-label label' .row.mb-5
= f.text_field :email, class: 'form-control' .col-2
.mb-5 = f.label :email, class: 'form-label label'
.col-10
= f.text_field :email, class: 'form-control'
.row.mb-5
/ - if @user.cv.attached? / - if @user.cv.attached?
/ = url_for(@user.cv) / = url_for(@user.cv)
span.label .col-2
= f.file_field :cv, accept: 'application/pdf, application/msword, application/zip, application/xls, application/xlsx' = f.label :cv, class: 'form-label label'
.col-10
= f.file_field :cv, accept: 'application/pdf, application/msword, application/zip, application/xls, application/xlsx', class: 'form-control'
= f.submit 'Confirm', class: 'btn btn-primary w-100' = f.submit 'Confirm', class: 'btn btn-primary w-100'
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment