Skip to content

Commit

Permalink
Style that UI
Browse files Browse the repository at this point in the history
  • Loading branch information
cheshire137 committed May 6, 2016
1 parent b046495 commit aeb8319
Show file tree
Hide file tree
Showing 6 changed files with 244 additions and 14 deletions.
10 changes: 7 additions & 3 deletions app/assets/javascripts/familiar.coffee
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
$ ->
$('.catchphrase[data-url]').each ->
container = this
$.getJSON this.getAttribute('data-url'), (response) ->
if response.catchphrase && response.catchphrase.length > 0
container.innerHTML = response.catchphrase
container.closest('.container').style.display = 'inline-block'
31 changes: 28 additions & 3 deletions app/assets/javascripts/psychic.coffee
Original file line number Diff line number Diff line change
@@ -1,3 +1,28 @@
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
$ ->
$('.cast-spell').click ->
button = this
url = button.getAttribute('data-url')
container = $('#spell-results')
$('#angry-response').hide()
if container.is(':visible')
container.fadeOut()
$('#angry-response').fadeIn()
button.setAttribute('disabled', 'disabled')
return
$.getJSON url, (response) ->
$('#result').text(response.spell)
container.fadeIn()

$('.see-future').click ->
button = this
url = button.getAttribute('data-url')
container = $('#prediction')
$('#angry-response').hide()
on_success = (response) ->
$('#prediction-result').text(response.prediction)
container.fadeIn()
on_error = ->
container.fadeOut()
$('#angry-response').fadeIn()
button.setAttribute('disabled', 'disabled')
$.getJSON(url).success(on_success).error(on_error)
15 changes: 12 additions & 3 deletions app/assets/stylesheets/familiar.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
// Place all the styles related to the Familiar controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
.catchphrase {
display: inline-block;
color: #F18783;

&:before {
content: "\a0\201C";
}

&:after {
content: "\201D";
}
}
131 changes: 128 additions & 3 deletions app/assets/stylesheets/psychic.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,128 @@
// Place all the styles related to the Psychic controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
@import url(https://fonts.googleapis.com/css?family=Oregano:400);
@import url(https://fonts.googleapis.com/css?family=Merriweather+Sans:400);

body {
background-color: #464866;
color: #fff;
font-family: "Merriweather Sans", sans-serif;
font-weight: 400;
}

h1, h2 {
color: #C76F6C;
}

@-webkit-keyframes color_change {
from { color: #F18783; }
to { color: #FFB295; }
}
@-moz-keyframes color_change {
from { color: #F18783; }
to { color: #FFB295; }
}
@-ms-keyframes color_change {
from { color: #F18783; }
to { color: #FFB295; }
}
@-o-keyframes color_change {
from { color: #F18783; }
to { color: #FFB295; }
}
@keyframes color_change {
from { color: #F18783; }
to { color: #FFB295; }
}

a {
color: #fff;
text-decoration: none;
transition: color 0.3s ease-in-out;

&:hover, &:focus {
-webkit-animation: color_change 0.3s infinite ease-in-out;
-moz-animation: color_change 0.3s infinite ease-in-out;
-ms-animation: color_change 0.3s infinite ease-in-out;
-o-animation: color_change 0.3s infinite ease-in-out;
animation: color_change 0.3s infinite ease-in-out;
}
}

.psychic {
font-family: "Oregano", sans-serif;
font-size: 72px;
margin-bottom: 80px;

span {
color: #FFB295;
}
}

.sub-psychic {
font-size: 36px;

span {
color: #F18783;
}

+ .sub-psychic {
margin-top: 40px;
}
}

.familiars {
dt {
font-family: "Oregano", sans-serif;
font-size: 42px;
}

dd {
margin-left: 0;
}

dd + dt {
margin-top: 20px;
border-top: 1px solid #AF8DAC;
padding-top: 20px;
}
}

.return-link {
margin-top: 80px;
font-size: 12px;
}

hr {
border: 1px solid #AF8DAC;
border-bottom: none;
margin: 40px 0;
}

button {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 34px;
font-family: "Oregano", sans-serif;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid #C76F6C;
border-radius: 4px;
color: #464866;
background-color: #FFB295;

&:disabled {
background-color: #C76F6C;
color: #F18783;
}
}
15 changes: 15 additions & 0 deletions app/views/psychic/index.html.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<h1>🎀 PSYCHIC OF THE DAY 🎀</h1>

<div class="psychic">
<%= link_to (psychic = @psychics.first).name, psychic %><br>
<span>Astral color:</span> <%= psychic.color %>
</div>

<h2>LESS OPULENT BEINGS 😒</h2>

<% @psychics.drop(1).each do |psychic| %>
<div class="sub-psychic">
<%= link_to psychic.name, psychic %><br>
<span>Astral color:</span> <%= psychic.color %>
</div>
<% end %>
56 changes: 54 additions & 2 deletions app/views/psychic/show.html.erb
Original file line number Diff line number Diff line change
@@ -1,2 +1,54 @@
<h1>Psychic#show</h1>
<p>Find me in app/views/psychic/show.html.erb</p>
<div class="psychic">
<%= @psychic.name %><br>
<span>Astral color:</span> <%= @psychic.color %>
</div>

<h2>CELESTIAL ACTIONS</h2>

<button type="button" class="cast-spell" data-url="<%= cast_spell_path(@psychic) %>">
Cast Spell ⭐️
</button>

<button type="button" class="see-future" data-url="<%= see_future_path(@psychic) %>">
See Future 👀
</button>

<hr>

<div id="angry-response" style="display: none">
<h2>THE SPIRITS ARE DISPLEASED</h2>
<hr>
</div>

<div id="spell-results" style="display: none">
<h2>STIRRINGS ON THE ASTRAL PLANE</h2>
<p id="result"></p>
<hr>
</div>

<div id="prediction" style="display: none">
<h2>EIGHT BALL SAYS...</h2>
<p id="prediction-result"></p>
<hr>
</div>

<h2>FAMILIARS</h2>

<dl class="familiars">
<% Familiar.all.each do |familiar| %>
<dt><%= familiar.name %></dt>
<dd>
is a <%= familiar.species %>
<span class="container" style="display: none">
&mdash; Latest Tweet 🤔:
<span class="catchphrase" data-url="<%= catchphrase_path(familiar) %>"></span>
</span>
</dd>
<% end %>
</dl>

<p class="return-link">
<%= link_to root_path do %>
&larr; Psychics
<% end %>
</p>

0 comments on commit aeb8319

Please sign in to comment.