#35 Update front desgin.

Author: Yuma Soga

Gemfile

@@ -27,22 +27,30 @@ gem 'travis'
 
 gem 'haml-rails'
 
-gem "kramdown", "~> 1.1.0"
+# gem 'kramdown', '~> 1.1.0'
 
-gem "font-awesome-rails"
+gem 'font-awesome-rails'
 
 gem 'bcrypt', '3.1.11'
 
 gem 'omniauth-slack'
 
 gem 'bootsnap'
 
-gem "pg"
+gem 'pg'
+
+gem 'bootstrap', '~> 4.1.1'
+
+gem 'simple_form'
+
+gem 'redcarpet'
+
+gem 'slack-notifier'
+
+gem 'toastr-rails'
 
 group :development, :test do
-  # Use sqlite3 as the database for Active Record
   gem 'sqlite3'
-  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
   gem 'byebug'
 
   gem 'rspec-rails'
@@ -52,9 +60,9 @@ group :development, :test do
 end
 
 group :test do
-  gem "simplecov"
-  gem "codeclimate-test-reporter", "~> 1.0.0"
-  gem "timecop"
+  gem 'simplecov'
+  gem 'codeclimate-test-reporter', '~> 1.0.0'
+  gem 'timecop'
 end
 
 group :development do

Gemfile.lock

@@ -44,12 +44,18 @@ GEM
       tzinfo (~> 1.1)
     addressable (2.4.0)
     arel (9.0.0)
+    autoprefixer-rails (8.6.4)
+      execjs
     backports (3.11.3)
     bcrypt (3.1.11)
     binding_of_caller (0.8.0)
       debug_inspector (>= 0.0.1)
     bootsnap (1.3.0)
       msgpack (~> 1.0)
+    bootstrap (4.1.1)
+      autoprefixer-rails (>= 6.0.3)
+      popper_js (>= 1.12.9, < 2)
+      sass (>= 3.5.2)
     builder (3.2.3)
     byebug (10.0.2)
     codeclimate-test-reporter (1.0.8)
@@ -125,7 +131,6 @@ GEM
       thor (>= 0.14, < 2.0)
     json (1.8.6)
     jwt (1.5.6)
-    kramdown (1.1.0)
     launchy (2.4.3)
       addressable (~> 2.3)
     listen (3.1.5)
@@ -172,6 +177,7 @@ GEM
     omniauth-slack (2.3.0)
       omniauth-oauth2 (~> 1.3.1)
     pg (1.0.0)
+    popper_js (1.12.9)
     pusher-client (0.6.2)
       json
       websocket (~> 1.0)
@@ -211,6 +217,7 @@ GEM
     rb-inotify (0.9.10)
       ffi (>= 0.5.0, < 2)
     rdoc (4.3.0)
+    redcarpet (3.4.0)
     rest-client (2.0.2)
       http-cookie (>= 1.0.2, < 2.0)
       mime-types (>= 1.16, < 4.0)
@@ -250,11 +257,15 @@ GEM
       json (~> 1.7, >= 1.7.7)
       rdoc (~> 4.0)
     sexp_processor (4.11.0)
+    simple_form (4.0.1)
+      actionpack (>= 5.0)
+      activemodel (>= 5.0)
     simplecov (0.13.0)
       docile (~> 1.1.0)
       json (>= 1.8, < 3)
       simplecov-html (~> 0.10.0)
     simplecov-html (0.10.2)
+    slack-notifier (2.3.2)
     spring (2.0.2)
       activesupport (>= 4.2)
     sprockets (3.7.2)
@@ -270,6 +281,8 @@ GEM
     thread_safe (0.3.6)
     tilt (2.0.8)
     timecop (0.9.1)
+    toastr-rails (1.0.3)
+      railties (>= 3.1.0)
     travis (1.8.8)
       backports
       faraday (~> 0.9)
@@ -307,6 +320,7 @@ PLATFORMS
 DEPENDENCIES
   bcrypt (= 3.1.11)
   bootsnap
+  bootstrap (~> 4.1.1)
   byebug
   codeclimate-test-reporter (~> 1.0.0)
   coffee-rails (~> 4.2.1)
@@ -316,20 +330,23 @@ DEPENDENCIES
   haml-rails
   jbuilder (~> 2.0)
   jquery-rails
-  kramdown (~> 1.1.0)
   listen
   omniauth-slack
   pg
   rails (= 5.2.0)
   rails-controller-testing
+  redcarpet
   rest-client
   rspec-rails
   sass-rails (~> 5.0.5)
   sdoc (~> 0.4.0)
+  simple_form
   simplecov
+  slack-notifier
   spring
   sqlite3
   timecop
+  toastr-rails
   travis
   turbolinks
   uglifier (>= 1.3.0)

app/assets/images/index/introduction-image/dojo-image-06.jpg

@@ -10,7 +10,10 @@
 // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
 // about supported directives.
 //
-//= require jquery
-//= require jquery_ujs
+//= require rails-ujs
 //= require turbolinks
-//= require_tree .
+//= require jquery3
+//= require toastr
+//= require popper
+//= require bootstrap
+//= require_tree .

app/assets/images/index/introduction-image/dojo-image-07.png

@@ -0,0 +1,75 @@
+(function($) {
+  "use strict"; // Start of use strict
+
+  // Smooth scrolling using jQuery easing
+  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
+    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+      var target = $(this.hash);
+      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+      if (target.length) {
+        $('html, body').animate({
+          scrollTop: (target.offset().top - 57)
+        }, 1000, "easeInOutExpo");
+        return false;
+      }
+    }
+  });
+
+  // Closes responsive menu when a scroll trigger link is clicked
+  $('.js-scroll-trigger').click(function() {
+    $('.navbar-collapse').collapse('hide');
+  });
+
+  // Activate scrollspy to add active class to navbar items on scroll
+  $('body').scrollspy({
+    target: '#mainNav',
+    offset: 57
+  });
+
+  // Collapse Navbar
+  var navbarCollapse = function() {
+    if ($("#mainNav").offset().top > 100) {
+      $("#mainNav").addClass("navbar-shrink");
+    } else {
+      $("#mainNav").removeClass("navbar-shrink");
+    }
+  };
+  // Collapse now if page is not at top
+  navbarCollapse();
+  // Collapse the navbar when page is scrolled
+  $(window).scroll(navbarCollapse);
+
+  // Scroll reveal calls
+  window.sr = ScrollReveal();
+  sr.reveal('.sr-icons', {
+    duration: 600,
+    scale: 0.3,
+    distance: '0px'
+  }, 200);
+  sr.reveal('.sr-button', {
+    duration: 1000,
+    delay: 200
+  });
+  sr.reveal('.sr-contact', {
+    duration: 600,
+    scale: 0.3,
+    distance: '0px'
+  }, 300);
+
+  // Magnific popup calls
+  $('.popup-gallery').magnificPopup({
+    delegate: 'a',
+    type: 'image',
+    tLoading: 'Loading image #%curr%...',
+    mainClass: 'mfp-img-mobile',
+    gallery: {
+      enabled: true,
+      navigateByImgClick: true,
+      preload: [0, 1]
+    },
+    image: {
+      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
+    }
+  });
+
+})(jQuery); // End of use strict

app/assets/javascripts/application.js

@@ -0,0 +1,9 @@
+$(document).on 'turbolinks:load', ->
+  if $.trim($('#info > .notice').html())!=''
+    toastr.success $('#info > .notice').text()
+    console.log 'Show Notice:' + $('#info > .notice').text()
+  else if $.trim($('#info > .alert').html())!=''
+    toastr.error $('#info > .alert').text()
+    console.log 'Show Alert:' + $('#info > .alert').text()
+  else
+    console.log 'No Words'

app/assets/javascripts/creative.js

@@ -0,0 +1,2 @@
+$ ->
+  $('[data-toggle="tooltip"]').tooltip()

app/assets/javascripts/toast-massage.coffee

@@ -10,13 +10,22 @@
  * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
  * file per style scope.
  *
- *= require_tree .
- *= require_self
- *= require font-awesome
  */
-body {
-    background-color: floralwhite;
-}
+
+
+@import "font-awesome";
+
+@import "toastr";
+
+@import "bootstrap-creative/creative";
+@import "pages";
+@import "posts";
+@import "bootstrap";
+
+//
+// body {
+//     background-color: floralwhite;
+// }
 ::-webkit-scrollbar{
   width: 12px;
 }
@@ -29,14 +38,3 @@ body {
   border-radius: 1rem;
   box-shadow: none;
 }
-.clearfix:after {
-    visibility: hidden;
-    display: block;
-    content: " ";
-    clear: both;
-    height: 0;
-}
-
-.mdl-layout__drawer-button {
-  color: black;
-}

app/assets/javascripts/tool-tips.coffee

@@ -0,0 +1,5 @@
+#about {
+  p {
+    font-size: 1rem;
+  }
+}

app/assets/stylesheets/application.css renamed to app/assets/stylesheets/application.scss

@@ -0,0 +1,12 @@
+.shake_text_line {
+    display: inline-block;
+    animation: shake_line .3s  infinite;
+}
+
+@keyframes shake_line {
+  0% {transform: translate(0px, 0px) rotateZ(0deg)}
+  25% {transform: translate(2px, 2px) rotateZ(1deg)}
+  50% {transform: translate(0px, 2px) rotateZ(0deg)}
+  75% {transform: translate(2px, 0px) rotateZ(-1deg)}
+  100% {transform: translate(0px, 0px) rotateZ(0deg)}
+}

app/assets/stylesheets/bootstrap-creative/_about.scss

@@ -0,0 +1,32 @@
+
+// Bootstrap overrides for this template
+.text-primary {
+  color: $primary !important;
+}
+
+.btn {
+  font-weight: 700 !important;
+  text-transform: uppercase !important;
+  border: none !important;
+  border-radius: 300px !important;
+  @include sans-serif-font;
+}
+
+.btn-xl {
+  padding: 1rem 2rem !important;
+}
+
+.btn-primary {
+  background-color: $primary !important;
+  border-color: $primary !important;
+  &:hover,
+  &:focus,
+  &:active {
+    color: $white;
+    background-color: darken($primary, 5%) !important;
+  }
+  &:active,
+  &:focus {
+    box-shadow: 0 0 0 0.2rem rgba(240, 95, 64,.5) !important;
+  }
+}