Merge pull request #175 from MyDry/develop

Develop

app/assets/stylesheets/mandalarts.scss

@@ -1,7 +1,6 @@
 // Place all the styles related to the mandalarts controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
-
 .mandalart{
 
   width: 900px;
@@ -60,8 +59,8 @@
   }
   .pop{
     position: absolute;
-    left: 1400px;
-    top: 165px;
+    left: 1100px;
+    top: 110px;
     width: 100px;
     height: 100px;
     text-align: center;
@@ -122,3 +121,116 @@
     }
   }
 }
+
+/* modal window */
+.modal_popUp,
+input[name="modal_switch"],
+#modal_open + label ~ label {
+  display: none;
+}
+/* HAND MARK */
+#modal_open + label{
+  position: relative;
+  top: -85px;
+  left: 300px;
+  margin-right:100px;
+  margin-top:10px;
+  color:#006e6f;
+  font-size:20px;
+  cursor: pointer;
+}
+#modal_close-button + label {
+  margin-right:100px;
+  margin-top:10px;
+  color:#006e6f;
+  font-size:20px;
+  cursor: pointer;
+}
+
+.modal_popUp {
+  animation: fadeIn 1s ease 0s 1 normal;
+}
+#modal_open:checked ~ #modal_close-button + label{
+  animation: fadeIn 2s ease 0s 1 normal;
+}
+@keyframes fadeIn {
+  0% {opacity: 0;}
+  100% {opacity: 1;}
+}
+
+#modal_open:checked + label ~ .modal_popUp {
+  background: #fff;
+  display: block;
+  width: 1350px;
+  height: 80%;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  z-index: 998;
+}
+
+#modal_open:checked + label ~ .modal_popUp > .modal_popUp-content {
+  width: calc(100% - 40px);
+  height: calc(100% - 20px - 44px );
+  padding: 10px 20px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling:touch;
+}
+
+#modal_open:checked + label + #modal_close-overlay + label {
+  background: rgba(0, 0, 0, 0.70);
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-indent: 100%;
+  z-index: 997;
+}
+
+/* CLOSE BTN */
+#modal_open:checked ~ #modal_close-button + label {
+  display: block;
+  margin-left: 30px;
+  background: #fff;
+  text-align: center;
+  font-size: 25px;
+  line-height: 44px;
+  width: 1300px;
+  height: 44px;
+  position: fixed;
+  bottom: 10%;
+  left: 5%;
+  z-index: 999;
+}
+
+#modal_open:checked ~ #modal_close-button + label::before {
+  content: '×';
+}
+#modal_open:checked ~ #modal_close-button + label::after {
+  content: 'CLOSE';
+  margin-left: 5px;
+  font-size: 80%;
+}
+
+/* CONTENT */
+.contents{
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  margin-top: 30px;
+  //float: left;
+  .mandal-img{
+    width: 50%;
+    img{
+      width: 90%;
+    }
+  }
+  .modal-contents{
+    width: 50%;
+  }
+}

app/assets/stylesheets/topic.scss

@@ -139,3 +139,91 @@
     text-transform: uppercase;
   }
 }
+
+#smart_topic_pannel{
+  width: 100%;
+  height: 210px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-bottom: solid 1px silver;
+  .idea-count{
+    padding-top: 40px;
+    width: 15%;
+    height: 100%;
+    float: left;
+    color: gray;
+    text-align: center;
+    font-size: 50px;
+    font-weight: bold;
+    p{
+      font-size: 20px;
+    }
+  }
+  .idea-count2{
+    padding-top: 40px;
+    width: 15%;
+    height: 100%;
+    float: left;
+    color: #ff6347;
+    text-align: center;
+    font-size: 50px;
+    font-weight: bold;
+    p{
+      font-size: 20px;
+    }
+  }
+  .topic-information{
+    width: 80%;
+    height: 100%;
+    float: left;
+    padding-left: 10px;
+    padding-top: 10px;
+    a.topic-title{
+      display: block;
+      color: #3c6666;
+      width: 90%;
+      padding-top: 5px;
+      padding-bottom: 5px;
+      font-size: 35px;
+      font-weight: bold;
+      text-decoration: none;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    a.topic-information:hover{
+      color: dimgray;
+      text-decoration: none;
+    }
+    a.topic-detail{
+      display: block;
+      color: dimgray;
+      width: 90%;
+      font-size: 30px;
+      font-weight: bold;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    a.topic-information:hover{
+      color: dimgray;
+      text-decoration: none;
+    }
+    .user-image{
+      padding-top: 10px;
+      a{
+        color: #007B96;
+        font-size: 30px;
+        //font-weight: 700;
+        text-decoration: none;
+      }
+      a:hover{
+        text-decoration: none;
+      }
+      span{
+        float: right;
+        padding-top: 15px;
+      }
+    }
+  }
+}

app/assets/stylesheets/users.scss

@@ -60,3 +60,21 @@
     margin: 50px auto;
     width: 500px;
 }
+
+.trophy {
+  height: 500px;
+  .trophy-item {
+    .attainment {
+      img{
+        float: left;
+        width: 128px;
+      }
+    }
+    .non-attainment {
+      img{
+        float: left;
+        width: 128px;
+      }
+    }
+  }
+}

app/views/mandalarts/index.html.erb

@@ -1,6 +1,53 @@
 <div class="main">
   <div class="container">
     <h1>マンダラート</h1>
+    <!-- modal window explain mandalart -->
+      <div>
+        <input id="modal_open" type="radio" name="modal_switch" />
+        <label for="modal_open"><i class="fa fa-question-circle" style="font-size:48px;color:#627295"></i></label>
+        <input id="modal_close-overlay" type="radio" name="modal_switch" />
+        <label for="modal_close-overlay">窓の外を触ると閉じるんだよっ</label>
+        <input id="modal_close-button" type="radio" name="modal_switch" />
+        <label for="modal_close-button"></label>
+        <div class="modal_popUp">
+        <div class="modal_popUp-content"> 
+        <!-- CONTENT -->
+        <div class="contents">
+          <div class="mandal-img"><%= image_tag('mandal-default.png') %></div>
+          <div class="modal-contents">
+            <h2>マンダラートはアイデア・思考の整理を支援します！</h2>
+            <h4>テーマや問題を細分化・関連付けして情報整理をして<br>新たな課題やアイデアの発見につなげましょう！</h4>
+          </div>
+        </div>
+          <hr>
+        <div class="contents">
+          <div class="mandal-img"><%= image_tag('explain-mandalart.gif') %></div>
+          <div class="modal-contents">
+            <h2>使い方</h2>
+            <p>1.黄色のマスに全体のテーマ・キーワードを置きます</p>
+            <p>2.周りの灰色のマスに黄色のマスと関連する情報・キーワードを置きます</p>
+            <p>3.最後に白色のマスに灰色のマスと関連する情報・キーワードを置いて完成です</p>
+            <p>※SAVEボタンは完成してから押してください</p>
+          </div>
+        </div>
+          <hr>
+        <div class="contents">
+          <div class="mandal-img"><%= image_tag('mandalart-example.png') %></div>
+          <div class="modal-contents">
+            <h2>使用例</h2>
+            <h3>ニーズ「楽しい夢が見たい！」</h3>
+            <p>まず夢を見るための情報を整理するために、テーマに「睡眠」と入れました</p>
+            <p>左図の通り情報を書き出し、これらを踏まえてアイデアを考えてみます</p>
+            <p>夢にはレム睡眠が強く関係があるような気がします</p>
+            <p>脳波について調べてみると、睡眠時には複数の脳波が存在するようです</p>
+            <h3>思いついたアイデア<br>「脳波を音楽などで操作してみよう！」<br>「睡眠前に楽しい記憶を思い返そう！」</h3>
+          </div>
+        </div>
+        <!-- CONTENT END-->
+        </div>
+       </div>
+      </div>
+      <!-- end modal window -->
     <div id="index">
       <div class="square_btn"><%= link_to '新規作成', new_mandalart_path %></div>