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.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: https://sass-lang.com/
.label {
font-size: 20px;
color: black;
}
$bg-primary: #0d6efd;
$text-color-white: #fff;
.ribbon {
font-weight: 400;
line-height: 1.5;
color: #212529;
display: flex;
.item {
display: inline-flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
text-align: center;
ul {
list-style: none;
display: flex;
justify-content: center;
padding: 20px;
font-size: 1rem;
font-weight: 700;
line-height: 1.5;
color: #6c757d;
text-align: center;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: none;
border-radius: .25rem;
.circle {
display: inline-flex;
-ms-flex-line-pack: center;
align-content: center;
-ms-flex-pack: center;
justify-content: center;
width: 2em;
height: 2em;
padding: .5em 0;
margin: .25rem;
line-height: 1em;
color: #fff;
background-color: #6c757d;
border-radius: 50%
align-items: center;
width: 100%;
margin: 0;
padding: 0;
.item {
display: block;
float: left;
width: 30%;
height: 100%;
background: #f3f5fa;
text-align: center;
padding: 12px;
position: relative;
font-size: 14px;
text-decoration: none;
color: #808080;
.circle {
display: inline-flex;
-ms-flex-line-pack: center;
align-content: center;
-ms-flex-pack: center;
justify-content: center;
width: 1.6em;
height: 1.6em;
padding: 0.25em 0;
margin-right: 10px;
line-height: 1em;
font-size: 1em;
color: #808080;
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;
}
}
}
.current-page {
color: #0d6efd;
.circle {
background: #0d6efd;
.active {
background: $bg-primary;
color: $text-color-white;
.circle {
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
-if current_page?(action: 'new')
li.item.current-page
span.circle
| 1
.ribbon.my-5
ul
li class=("item #{'active' if action_name == 'new'}")
span.circle
| 1
| Apply
-else
li.item
span.circle
| 1
| Apply
.line
-if current_page?(action: 'confirm')
li.item.current-page
span.circle
| 2
| Confimation
-else
li.item
span.circle
li class=("item #{'active' if action_name == 'confirm'}")
span.circle
| 2
| Confimation
.line
-if current_page?(action: 'create')
li.item.current-page
span.circle
| Confirm
li class=("item #{'active' if action_name == 'create'}")
span.circle
| 3
| Done
-else
li.item
span.circle
| 3
| Done
\ No newline at end of file
\ No newline at end of file
app/views/applies/confirm.html.slim
......@@ -10,31 +10,34 @@
.col
= 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'
.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'
span.mx-2.label
= @apply.user_name
= f.hidden_field :user_name, value: @apply.user_name, class: 'form-control'
.mb-5
= f.label :email, 'Email:', class: 'form-label label'
span.mx-2.label
= @apply.email
= f.hidden_field :email, value: @apply.email, class: 'form-control'
.mb-5
span
= f.hidden_field :cv, value: @apply.cv, class: 'form-control'
.row.mb-5
.col-2
= f.label :email, 'Email:', class: 'form-label label'
.col-10
span.mx-2.label.form-control
= @apply.email
= f.hidden_field :email, value: @apply.email, class: 'form-control'
.row.mb-5
.col-2
/ = f.hidden_field :cv, value: @apply.cv, class: 'form-control'
= 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'
= url_for(@apply.cv)
span.form-control
= url_for(@apply.cv)
.row.justify-content-between
.col-6
= link_to 'Edit', apply_path(job_id: @job.id), class: 'btn btn-secondary py-2 px-4 w-100'
.col-6
= 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 @@
.col
= form_with(model: @apply, url: confirm_path, local: true) do |f|
= render 'shared/error_messages', object: f.object
.mb-5
.row.mb-5
= f.hidden_field :job_id, value: @job.id, class: 'form-control'
= f.label :user_name, 'Full name', class: 'form-label label'
= f.text_field :user_name, class: 'form-control'
.mb-5
= f.label :email, class: 'form-label label'
= f.text_field :email, class: 'form-control'
.mb-5
.col-2
= f.label :user_name, 'Full name', class: 'form-label label'
.col-10
= f.text_field :user_name, class: 'form-control'
.row.mb-5
.col-2
= f.label :email, class: 'form-label label'
.col-10
= f.text_field :email, class: 'form-control'
.row.mb-5
/ - if @user.cv.attached?
/ = url_for(@user.cv)
span.label
= f.file_field :cv, accept: 'application/pdf, application/msword, application/zip, application/xls, application/xlsx'
.col-2
= 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'
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