Merge pull request #32 from CoderDojo-Konan-Okayama/add/card_button_and_image

 #30 #31 Add next event button and image at About Section

Author: Yuma Soga (YuSan | ゆ～さん)

.gitignore

@@ -15,4 +15,5 @@
 /log/*
 !/log/.keep
 /tmp
-/coverage
+/coverage
+/config/master.key

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

@@ -15,7 +15,7 @@
  *= require font-awesome
  */
 body {
-    background-color: whitesmoke;
+    background-color: floralwhite;
 }
 ::-webkit-scrollbar{
   width: 12px;

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

@@ -3,8 +3,8 @@
 // You can use Sass (SCSS) here: http://sass-lang.com/
 .pages-layout {
     .pages-layout__header {
-        background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), image-url('coderdojo-konan-header-image-1.jpg');
-        background-size: cover;
+    	background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), image-url('coderdojo-konan-header-image-1.jpg');
+    	background-size: cover;
     	background-position: center;
         .mdl-layout__header-row {
             margin-top: 0.5rem;

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

@@ -51,9 +51,15 @@
 }
 main {
 article {
-    margin: 0.5rem;
+    margin-top: 3rem;
+    margin: 1rem;
     #about-section {
-      padding: 0.8rem;
+      padding: 1rem;
+      .mdl-card__title {
+        height: 25rem;
+        background: linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8)  90%, rgba(0, 0, 0, 1)), image-url('index/introduction-image/dojo-image-05.jpg') center / cover;
+        color: snow;
+      }
       .twitter-share-button-style {
         vertical-align: top;
         display: inline-block;
@@ -67,11 +73,14 @@ article {
       .about-section-card {
         width: 100%;
         height: 100%;
-        padding: 0.5rem;
+        // padding: 0.5rem;
+      }
+      .next-event-button {
+        margin: 1rem;
       }
     }
     #language-section {
-      padding: 0.8rem;
+      padding: 1rem;
       .language-section-card {
         width: 100%;
         height: 100%;
@@ -88,15 +97,15 @@ article {
       }
     }
     #summary-section {
-      padding: 0.8rem;
+      padding: 1rem;
       .summary-section-card {
         width: 100%;
         height: 100%;
         padding: 0.5rem;
       }
     }
     #partner-section {
-      padding: 0.8rem;
+      padding: 1rem;
       .partner-section-card {
         width: 100%;
         height: 100%;
@@ -140,7 +149,7 @@ article {
       }
     }
     #contact-section {
-      padding: 0.8rem;
+      padding: 1rem;
       .contact-section-card {
         width: 100%;
         height: 100%;

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

@@ -66,26 +66,29 @@
                 %li PHP, Python, Ruby, Unity
                 %li Arduino, Raspberry Pi など
               %p 道場ごとに内容も規模も違いますが、Ninjaの自主性を重視している姿勢は一緒です。
+            - unless next_event_url.nil?
+              .mdl-card__actions.mdl-card--borde.next-event-button
+                = link_to "次回の開催Check!", next_event_url, class: 'btn mdl-button mdl-button--colored mdl-button--raised mdl-js-button mdl-js-ripple-effect'
         %section#language-section
           .language-section-card.mdl-card.mdl-shadow--2dp
             .mdl-card__title
               %h1.mdl-card__title-text CoderDojo 岡山 岡南での主な言語・ツール
             .mdl-card__supporting-text
               .mdl-grid
                 .mdl-cell.mdl-cell--3-col.mdl-cell--8-col-tablet.language-section-card-cell
-                  %img{:alt => "Scratch Cat", :src => "#{asset_path "scratch-cat.png"}"}/
+                  %img{:alt => "Scratch Cat", :src => "#{asset_path "index/scratch-cat.png"}"}/
                   %p
                     %a{:href => "https://scratch.mit.edu/"} Scratch
                 .mdl-cell.mdl-cell--3-col.mdl-cell--8-col-tablet.language-section-card-cell
-                  %img{:alt => "Java Logo", :src => "#{asset_path "java-original.png"}"}/
+                  %img{:alt => "Java Logo", :src => "#{asset_path "index/java-original.png"}"}/
                   %p
                     %a{:href => "https://www.java.com/ja/"} Java
                 .mdl-cell.mdl-cell--3-col.mdl-cell--8-col-tablet.language-section-card-cell
-                  %img{:alt => "Web系言語", :src => "#{asset_path "web-lang.png"}"}/
+                  %img{:alt => "Web系言語", :src => "#{asset_path "index/web-lang.png"}"}/
                   %p
                     %a HTML・CSS・JavaScript
                 .mdl-cell.mdl-cell--3-col.mdl-cell--8-col-tablet.language-section-card-cell
-                  %img{:alt => "Ruby (on Rails)", :src => "#{asset_path "ruby-original.png"}"}/
+                  %img{:alt => "Ruby (on Rails)", :src => "#{asset_path "index/ruby-original.png"}"}/
                   %p
                     %a{:href => "https://www.ruby-lang.org/ja/"} Ruby (on Rails)
         %section#summary-section
@@ -112,15 +115,15 @@
               %h3 CoderDojo 岡山 岡南 は、これらのパートナー様のご支援によって成り立っております！
               %ul.partner-list
                 %li.partner-list-item
-                  %img#sakura-internet-logo{:src => "#{asset_path "sakura-internet.png"}"}/
+                  %img#sakura-internet-logo{:src => "#{asset_path "index/supporter/sakura-internet.png"}"}/
                   .mdl-tooltip{"data-mdl-for" => "sakura-internet-logo"} 「さくらのクラウド」の無償提供
                   %p SAKURA INTERNET INC. 様
                 %li.partner-list-item
-                  %img#esa-io-logo{:src => "#{asset_path "esa.png"}"}/
+                  %img#esa-io-logo{:src => "#{asset_path "index/supporter/esa.png"}"}/
                   .mdl-tooltip{"data-mdl-for" => "esa-io-logo"} ドキュメント共有サービスの提供
                   %p ESA.IO 様
                 %li.partner-list-item
-                  %img#rimgate-logo{:src => "#{asset_path "non-logo.png"}"}/
+                  %img#rimgate-logo{:src => "#{asset_path "index/supporter/non-logo.png"}"}/
                   .mdl-tooltip{"data-mdl-for" => "rimgate-logo"} サーバー・ドメイン代などの支援
                   %p リムゲイト株式会社 様
         %section#contact-section