website with RoR - workshop

Ruby on Rails - Website

Workshop

Created by Andreas Grohmann / andreas.grohmann@gmx.de / twitter.com/grohmeo

check the rails app

http://localhost:3000

What went wrong?

http://localhost:3000

responsive design for footer
```
# .\rails_app\app\assets\stylesheets\application.css
...
 /* Footer */
	#footer
	{
		background: rgba(255, 255, 255, 0.8);
		position:fixed;
		bottom:0px;
		left:0px;
		right:0px;
		height:3em;
		margin-bottom:0px;
		box-shadow: 0 0 0.15em 0 rgba(0, 0, 0, 0.1);
		color: rgba(0,0,0,0.9);
	}

#footer ul.imprint {
			position: absolute;
			right: 2em;
			top: 0;
			height: 3em;
			line-height: 3em;
			margin: 0;
		}

#footer ul.imprint li {
				border-left-color: rgba(185, 186, 187, 0.2);
				font-size: 0.9em;
				display: inline;
                list-style-type: none;
				margin: 0 1em 0 0;
			}

@media screen and (max-width: 1000px) {

#footer {
		height: auto;
		line-height: inherit;
		text-align: center;
		padding: 1em 0.5em 1em 0.5em;
	}
		#footer a img {
			height: 1.5em !important;
		}

#footer ul.imprint {
				position: relative;
				right: 0;
				top: 0;
				height: auto;
				line-height: inherit;
			}

#footer ul.imprint li {
					margin: 0 0.5em 0 0;
				}

}

@media screen and (max-width: 736px) {

#footer {
		position:relative;
	}

#footer ul.imprint li {
			margin-top: 1em;
			border-left: 0;
			padding: 1em 0 0 0;
			margin: 0;
			display: block;
		}

#footer ul.imprint li:first-child {
				padding-top: 0;
			}

#footer ul.imprint li a {
				line-height: 1.5em;
			}

}
```

check the website

http://localhost:3000

build gradient css

https://www.cssmatic.com/gradient-generator

check the website

http://localhost:3000

check also the imprint page

http://localhost:3000/static_pages/imprint

build form template
```
# .\rails_app\app\views\static_pages\_form.html.erb
<%= form_for(@consumer_contact, url: { action: "create_consumer" }) do |form| %>
  <% if consumer_contact.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(consumer_contact.errors.count, "error") %> prohibited this consumer_contact from being saved:</h2>

```

check the website

http://localhost:3000

add some data

http://localhost:3000

check the succes content

http://localhost:3000

lets do some design improvements, background pictures and design form
add pictures to '.\rails_app\app\assets\images'
```
# .\rails_app\app\assets\stylesheets\static_pages.scss
// Place all the styles related to the StaticPages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

#background{
  background: rgba(0,196,197,1);
  background: -moz-linear-gradient(left, rgba(0,196,197,1) 0%, rgba(0,204,153,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,196,197,1)), color-stop(100%, rgba(0,204,153,1)));
  background: -webkit-linear-gradient(left, rgba(0,196,197,1) 0%, rgba(0,204,153,1) 100%);
  background: -o-linear-gradient(left, rgba(0,196,197,1) 0%, rgba(0,204,153,1) 100%);
  background: -ms-linear-gradient(left, rgba(0,196,197,1) 0%, rgba(0,204,153,1) 100%);
  background: image-url("image_character@2x.png") 3% 65% no-repeat, image-url("image_buildings.png") 2% 55% no-repeat, linear-gradient(to right, rgba(0,196,197,1) 0%, rgba(0,204,153,1) 100%);
  background-size: 30%, 50%, cover;
  min-height: 100%;
  display:block;
  overflow:auto;
}

@media screen and (max-width: 736px) {
		#background{
			background: rgba(0,196,197,1);
			background: -moz-linear-gradient(left, rgba(0,196,197,1) 0%, rgba(0,204,153,1) 100%);
			background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,196,197,1)), color-stop(100%, rgba(0,204,153,1)));
			background: -webkit-linear-gradient(left, rgba(0,196,197,1) 0%, rgba(0,204,153,1) 100%);
			background: -o-linear-gradient(left, rgba(0,196,197,1) 0%, rgba(0,204,153,1) 100%);
			background: -ms-linear-gradient(left, rgba(0,196,197,1) 0%, rgba(0,204,153,1) 100%);
			background: linear-gradient(to right, rgba(0,196,197,1) 0%, rgba(0,204,153,1) 100%);
			background-size: cover;
			display:block;
			overflow:auto;
		}
	}

#background_imprint{
    color: inherit;
    background: rgba(0,196,197,1);
    background: -moz-linear-gradient(left, rgba(0,196,197,1) 0%, rgba(0,204,153,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,196,197,1)), color-stop(100%, rgba(0,204,153,1)));
    background: -webkit-linear-gradient(left, rgba(0,196,197,1) 0%, rgba(0,204,153,1) 100%);
    background: -o-linear-gradient(left, rgba(0,196,197,1) 0%, rgba(0,204,153,1) 100%);
    background: -ms-linear-gradient(left, rgba(0,196,197,1) 0%, rgba(0,204,153,1) 100%);
	background: linear-gradient(to right, rgba(0,196,197,1) 0%, rgba(0,204,153,1) 100%);
    background-size: cover;
	min-height: 100%;
    min-width: 100%;
}

#content{
  padding: 6em 3em 6em 3em;
}

@media screen and (max-width: 736px) {
	#content h1{
	  line-height: 1em;
	}
}

#content .new_consumer_contact_wrapper{
  background: rgba(255,255,255,0.0);
  float: right;
  min-width: 30%;
}

#content .new_consumer_contact{
  min-width: 100%;
}

#content .new_consumer_contact_wrapper .new_consumer_contact .field .field_with_errors{
  outline:0;
  border: none;
}

#content .new_consumer_contact_wrapper .new_consumer_contact .field input[type=text]{
  color: inherit;
  background: rgba(255,255,255,0.0);
  box-sizing: border-box;
  border-color: rgba(255,255,255,0.8)!important;
  border-bottom: 1px solid;
  border-top: 0px solid;
  border-left: 0px solid;
  border-right: 0px solid;
  min-width: 100%;
  outline:0;
  line-height: 2.5em;
}

@media screen and (max-width: 736px) {
	#content .new_consumer_contact_wrapper .new_consumer_contact .field input[type=text]{
	  line-height: 1em;
	}
}

#content .new_consumer_contact_wrapper .new_consumer_contact .field input[type=text]:focus {
  color: inherit!important;
  background-color: rgba(173,216,230,0.5)!important;
}

#content .new_consumer_contact_wrapper .new_consumer_contact .field .field_with_errors{
  background: rgba(255,0,0,0.3);
  min-width: 100%;
  outline:0;
}

#content .new_consumer_contact_wrapper .new_consumer_contact .field .field_with_errors input[type=text]{
  background: rgba(255,0,0,0.3);
  box-sizing: border-box;
  border-color: rgba(255,255,255,0.8)!important;
  border-bottom: 1px solid;
  border-top: 0px solid;
  border-left: 0px solid;
  border-right: 0px solid;
  min-width: 100%;
  outline:0;
  line-height: 2.5em;
}

@media screen and (max-width: 736px) {
	#content .new_consumer_contact_wrapper .new_consumer_contact .field .field_with_errors input[type=text]{
	  line-height: 1em;
	}
}

#content .new_consumer_contact_wrapper .new_consumer_contact .field .field_with_errors input[type=text]:focus {
  outline:0;
  color: inherit!important;
  background-color: rgba(173,216,230,0.5)!important;
}

#content .new_consumer_contact .actions{
  text-align: center;
}

#content .new_consumer_contact .actions input{
  min-height: 3em;
  padding: 0 2em 0 2em;
  margin: 2.5em 0 0 0;
  background-color: #008CBA;
  border-radius: 12px;
  border: none;
  color: inherit!important;
  font-size: 1.25em;
  font-weight: bold;
}

#content .new_consumer_contact #error_explanation ul{
  color: rgba(0,0,0,0.5);
}
```

lets do some design improvements, background pictures and design form
```
# .\rails_app\app\views\static_pages\_form.html.erb
<%= form_for(@consumer_contact, url: { action: "create_consumer" }) do |form| %>
  <% if consumer_contact.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(consumer_contact.errors.count, "error") %> prohibited this consumer_contact from being saved:</h2>

```

check the website

http://localhost:3000

check other awesome gems

rubygems.org/

tutorial

www.railstutorial.org/book/beginning

Ruby on Rails - Website

Workshop

check the rails app

What went wrong?

check the rails app

play around

got a REST API from scratch

check the admin UI

check the admin UI

check the website

check the website

check the website

build gradient css

check the website

check also the imprint page

check the website

add some data

check the succes content

check the website

check other awesome gems

tutorial

Questions?