even fix

changmason · Nov 25, 2014 · e85cded · e85cded
1 parent bd34122
commit e85cded
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 875 deletions.
diff --git a/config.rb b/config.rb
@@ -0,0 +1,16 @@
+
+sourcemap = false # by Fire.app 
+css_dir = "stylesheets" # by Fire.app 
+sass_dir = "sass" # by Fire.app 
+images_dir = "images" # by Fire.app 
+javascripts_dir = "javascripts" # by Fire.app 
+fireapp_coffeescripts_dir = "coffeescripts" # by Fire.app 
+fireapp_livescripts_dir = "livescripts" # by Fire.app 
+fireapp_minifyjs_on_build = false # by Fire.app 
+fireapp_always_report_on_build = true # by Fire.app 
+output_style = :compressed # by Fire.app 
+relative_assets = false # by Fire.app 
+line_comments = false # by Fire.app 
+sass_options = {:debug_info=>false} # by Fire.app 
+fireapp_coffeescript_options = {:bare=>false} # by Fire.app 
+fireapp_livescript_options = {:bare=>false} # by Fire.app 
diff --git a/index.html b/index.html
@@ -37,37 +37,16 @@
   js.src = "//connect.facebook.net/zh_TW/sdk.js#xfbml=1&appId=792777814096777&version=v2.0";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
-<div class="navbar navbar-fixed-top">
-  <div class="container">
-    <div class="navbar-header">
-      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
-        <span class="sr-only">Toggle</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-      <a class="navbar-brand logo" href="#">7 號頭像產生器</a>
-    </div>
-    <nav class="collapse navbar-collapse" role="navigation">
-    <ul class="nav navbar-nav navbar-right">
-      <li>
-        <a href="https://www.facebook.com/kxgen" target="_blank"><i class="fa fa-facebook-square"></i> 朕的產生器</a>
-      </li>
-    </ul>
-  </div>
-</div>
+
 <div id="content" class="container">
   <div class="row">
-    <div class="col-sm-6 col-md-5 col-lg-4 text-center" id="generator">
-      <h1>7 號頭像產生器</h1>
+    <div class="text-center" id="generator">
       <div id="settings">
-        <hr>
-        <div class="col-sm-12">
+        <div class="col-sm-12 control-box">
+          <h1 class="logo">7號頭像產生器</h1>
           <a class="uploadBtn">請按此上傳圖片</a><span class="mobile-hide">，或將圖片拖曳到頁面中。</span><br>您可移動、縮放底圖至合適位置<br>完成後，請點擊下方按鈕下載圖片
         </div>
-        <hr>
-        <div class="col-sm-12">
-          <h4>選擇版型</h4>
+        <div class="col-sm-12 control-box">
           <div id="templates" class="text-center" data-toggle="buttons">
           <label class="template-label btn btn-default active" style="background-image: url(images/sample.jpg);">
             <img src="images/object/1.png">
@@ -111,23 +90,11 @@ <h4>選擇版型</h4>
           </label>
           </div>
         </div>
-        <hr>
         <div class="clear"></div>
       </div>
-      <div id="formbuttons">
-        <input type="button" value="下載圖片" class="submit btn btn-danger btn-block" id="normalSubmit" style="margin-bottom:10px;">
-        <div id="plzlike" class="plzlike">圖片產生成功，請幫忙按讚哦！謝謝。</div>
-      </div>
-      <div class="likebtn">
-        <fb:like href="http://7.kxgen.net/" width="120" layout="button_count" show_faces="true" send="false"></fb:like>
-      </div>
-      <div class="fbcomment">
-        <h3>意見回饋</h3>
-        <fb:comments href="http://7.kxgen.net/" num_posts="1" width="100%"></fb:comments>
-      </div>
-      <div class="left-bottom-corner"><div class="fb-like-box" data-href="https://www.facebook.com/kxgen" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="false" data-show-border="false"></div></div>
     </div>
-    <div class="col-sm-6 col-md-7 col-lg-8" style="height:inherit">
+    <div class="col-sm-12 control-box" style="height:inherit">
+
       <div class="preview">
         <div id="userimage">
           <div class="inner" style="background-image: url(images/sample.jpg)"></div>
@@ -138,18 +105,21 @@ <h3>意見回饋</h3>
           <div id="dragger"></div>
         </div>
         <div id="loading"><div class="drop"><img src="images/loading.gif"></div></div>
+
+      </div><!-- preview end -->
+
+      <div id="formbuttons" class="control-box text-center">
+        <h2><a href="#" id="normalSubmit">下載圖片</a></h2>
       </div>
+
+      <div class="left-bottom-corner"><div class="fb-like-box" data-href="https://www.facebook.com/kxgen" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="false" data-show-border="false"></div></div>
+
     </div>
   </div>
 </div>
-<div id="footer" class="container text-center">
-  <div class="row">
-    <div class="col-md-12">
-      <div id="copyright">© kxapp 出品</div>
-    </div>
-  </div>
-</div>
-<div class="gototop"><i class="glyphicon glyphicon-chevron-up"></i></div>
+
+<div id="copyright" class="text-center">©kxapp 出品</div>
+
 <img src="images/sample.jpg" id="loadimage" class="hide">
 <form action='#' onsubmit="return false;">
   <input type="file" name="Filedata" id="uploadInput">

diff --git a/sass/config/_color.scss b/sass/config/_color.scss
@@ -11,11 +11,11 @@ $main-color-dark     : darken($main-color, 10%);
 $background-color : $white;
 
 // text color
-$text-black         : #666;
+$text-black         : rgba(white,.7);
 $text-black-light   : #999;
 $text-gray          : #8A8A8A;
 $text-gray-light    : lighten($text-gray, 10%);
 
 // link color
-$link-color       : $main-color;
-$link-color-hover : $main-color;
+$link-color       : white;
+$link-color-hover : white;
diff --git a/sass/core/_global.scss b/sass/core/_global.scss
@@ -1,5 +1,6 @@
 html, body {
-  height: 100%;
+  // height: 100%;
+
 }
 body {
   -webkit-text-size-adjust: 100%;
@@ -9,10 +10,13 @@ body {
   color: $text-black;
   font-size: $base-font-size;
   line-height: $base-line-height;
+  padding: 20px 0;
+  background: #25aab2;
 }
 a {
   @include link-colors($link-color, $link-color-hover);
-  @include hover-link;
+  text-decoration: none;
+  border-bottom: 1px solid white;
 }
 #header {
 
@@ -21,7 +25,7 @@ a {
   position: relative;
   height: auto;
   // min-height: 75%;
-  margin-top: 70px;
+  margin-top: 30px;
   @include at-breakpoint($pad) {
     height: inherit;
   }

diff --git a/sass/partials/_corner.scss b/sass/partials/_corner.scss
@@ -4,10 +4,10 @@
   div {
     margin:0 auto;
   }
-  @include at-breakpoint($pad) {
-    position: fixed;
-    bottom: 0px;
-    left: 0;
-    z-index:100;
-  }
+  // @include at-breakpoint($pad) {
+  //   position: fixed;
+  //   bottom: 0px;
+  //   left: 0;
+  //   z-index:100;
+  // }
 }
diff --git a/sass/partials/_generator.scss b/sass/partials/_generator.scss
@@ -66,3 +66,7 @@
     height: 58px;
   }
 }
+
+.control-box {
+  margin: 3em 0;
+}
diff --git a/sass/partials/_preview.scss b/sass/partials/_preview.scss
@@ -10,25 +10,31 @@
   // z-index: -9999;
   // background: rgba(200,200,200,.8);
   // opacity: 0;
-  height: 500px;
+  position: relative;
+  max-width: 500px;
+  margin: 0 auto;
+  &:after {
+    z-index: -1;
+    content: "";
+    display: block;
+    padding-top: 100%;
+    margin-bottom: 80px;
+  }
 
   #userimage,
-  #coverimage, {
-    width: 90%;
+  #coverimage {
+    width: 100%;
     max-width: 500px;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto auto;
-    display: table;
     .inner {
       width: 100%;
       padding-top: 100%;
       background-repeat: no-repeat;
-      @include box-shadow(2px 2px 3px 0px rgba(50, 50, 50, 0.3));
-      outline: 1px solid #efefef;
       background-size: 100% auto;
       background-position: 50% 50%;
     }
@@ -58,20 +64,18 @@
     // opacity: 0;
 
     &.ui-widget-content {
-      border: none;
-      border-top: 2px solid #999;
       @include border-radius(0px);
       height: 1px;
 
       &:before {
         content: "";
         position: absolute;
-        top: -23px;
+        top: -21px;
         left: 0;
         display: block;
         width: 110%;
-        height: 42px;
-        background: rgba(230,230,230,0.9);
+        height: 40px;
+        background: white;
         @include border-radius(20px);
         margin-left: -5%;
       }
@@ -132,18 +136,18 @@
       margin-left: -21px;
     }
   }
-  @include at-breakpoint($pad) {
-    display: block;
-    position: relative;
-    // min-height: 75%;
-    top: inherit;
-    bottom: inherit;
-    left: inherit;
-    right: inherit;
-    // background: none;
-    margin-top: -60px;
-    // z-index: 1000;
-    // opacity: 1;
-    height: inherit;
-  }
+  // @include at-breakpoint($pad) {
+  //   display: block;
+  //   position: relative;
+  //   // min-height: 75%;
+  //   top: inherit;
+  //   bottom: inherit;
+  //   left: inherit;
+  //   right: inherit;
+  //   // background: none;
+  //   margin-top: -60px;
+  //   // z-index: 1000;
+  //   // opacity: 1;
+  //   height: inherit;
+  // }
 }