1. 시작 누르면 자동 스크롤 이동

2. 결과 영역에서 삭제, 수정 기능 되는 버그 해결 3. 이름 SADARI로 수정 4. 디자인 수정
tg0825 · Nov 5, 2017 · fb0548b · fb0548b
1 parent 2930450
commit fb0548b
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 39 deletions.
diff --git a/index.html b/index.html
@@ -7,11 +7,11 @@
 <link rel="stylesheet" href="style.css">
 <script src="https://unpkg.com/jquery@1.12.4/dist/jquery.js"></script>
 <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
-<title>공포의 사다리</title>
+<title>SADARI</title>
 </head>
 <body>
     <div class="dice wrap">
-        <h1 class="dice title">공포의 사다리</h1>
+        <h1 class="dice title">SADARI</h1>
         <div class="member-list wrap">
             <div class="member-list body"> </div>
             <div class="member-list number"></div>

diff --git a/script.js b/script.js
@@ -508,31 +508,31 @@ $(function () {
 
             $input.val(oldText);
             $self
-            .text('')
-            .addClass('edit')
-            .append($input)
-            .find($input)
-            .focus()
-            .on({
-                focusout: function () {
-                    var text = $(this).val();
-                    endEdit.call(self, text, idx);
-                },
-                keypress: function (e) {
-                    if (e.keyCode == 13) {
-                        $(this).trigger('focusout');
+                .text('')
+                .addClass('edit')
+                .append($input)
+                .find($input)
+                .focus()
+                .on({
+                    focusout: function () {
+                        var text = $(this).val();
+                        endEdit.call(self, text, idx);
+                    },
+                    keypress: function (e) {
+                        if (e.keyCode == 13) {
+                            $(this).trigger('focusout');
+                        }
                     }
-                }
-            });
+                });
         },
         mouseenter: function () {
             $(this).find('.remove').remove();
             $(this).append('<span class="remove">x</span>');
         }
-    }, '.member-list.member');
+    }, '.member-list.body .member-list.member');
 
     // 구성원 삭제
-    $(document).on('click', '.member-list.member .remove', function (e) {
+    $(document).on('click', '.member-list.wrap .member-list.member .remove', function (e) {
         e.stopPropagation();
         var idx = $(this).parent().index();
         remove(clonebackpacker, idx);
@@ -601,10 +601,20 @@ $(function () {
     });
 
     // 사다리 시작
-    $('.start').on('click', function () {
+    $('.start').on('click', function (e) {
         game[diceType]();
+        scrollMove('.dice-select');
     });
 
+    function scrollMove(offsetElm) {
+        var elm = offsetElm;
+        var pos = $(elm).offset().top;
+
+        $('body, html').animate({
+            scrollTop: pos
+        }, 300);
+    }
+
     // 게임 종류 선택
     $('.dice-select').find('button').on('click', function () {
         var idx = $(this).parent().index();

diff --git a/style.css b/style.css
@@ -92,21 +92,23 @@ input:focus {
 
 .dice.title {
     text-align: center;
-    font-size: 34px;
+    font-size: 38px;
     margin-top: 40px;
-    margin-bottom: 20px;
-    color: #630000;
+    margin-bottom: 40px;
+    color: #333;
 }
 
 .member-list.wrap {
-    /*position: fixed;
-    top: 0;
-    left: 0;
-    bottom:55%;
-    right:350px;*/
+    width: 480px;
+    margin: -5px auto 20px;
     position: relative;
 }
 
+.member-list.title {
+    font-size: 16px;
+    vertical-align: middle;
+}
+
 .member-list.number {
     font-size: 20px;
     color: #262626;
@@ -124,14 +126,7 @@ input:focus {
     margin-right: 4px;
 }
 
-.member-list.title {
-    font-size: 16px;
-    vertical-align: middle;
-}
-
 .member-list.body {
-    width: 480px;
-    margin: -5px auto 20px;
 }
 
 .member-list.body:after {
@@ -255,7 +250,7 @@ input:focus {
     z-index: 100;
 }
 
-.member-list.member .remove {
+.member-list.body .member-list.member .remove {
     display: none;
     position: absolute;
     top: -5px;
@@ -271,13 +266,13 @@ input:focus {
     z-index: 100;
 }
 
-.member-list.member:hover .remove {
+.member-list.body .member-list.member:hover .remove {
     display: block;
 }
 
 .group.item {
     display: inline-block;
-    margin: 20px 10px;
+    margin: 10px;
     padding: 10px;
     background: #dedede;
     border-radius: 20px;
@@ -317,7 +312,7 @@ input:focus {
 .start-group,
 .start {
     width: 100%;
-    height: 40px;
+    height: 50px;
     background: #eb4949;
     color: #fff;
     font-size: 16px;