comable_frontend 0.2.3 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 32dbeca21c4c86948b916e807e6aaa2ed9bc0bcf
-  data.tar.gz: a54136ef96d2c802dbcd42b400877d1a1d93abea
+  metadata.gz: f4d18df624943b7ddad7e0d53f8d7aa716d1e053
+  data.tar.gz: f6193aaa016436a1b8260edadc950930a15ff03d
 SHA512:
-  metadata.gz: 8c5bf6ff78e805fc86083aea2d7165d96ede22ef59bedd72f937a7c18bcd06a45f46970a866f9973eaf70088d21b3d3b3ac13bd8f6ca1bed19d551d18abe0515
-  data.tar.gz: 327fa0e0ae8e74745ecdceaaccd77fa998246c6f2389ec933bf7219303c0a7d53aba68f42fea3906d50ed21c4926c12ce7a1cc65e471bd7ab0e1029d10709015
+  metadata.gz: 0388b3d0f3a8e4fa8711dfc9bad2b45ecd4efb8f82998c8cdb53c8c015aa058ac7e42c299789fd594eb0c668a030c1e20939042d8c7fa14af17ca551eb52c17c
+  data.tar.gz: 3c2390f677786a193c026d0d5fcc0cd02a79eeb97de0ff487fed9cce83ba022c20aa6944d8304d9d756237527b3a69f3dae5934c498805ccd22d9440429f40ab

data/MIT-LICENSE

@@ -1,4 +1,4 @@
-Copyright 2014 YOURNAME
+Copyright 2015 YOSHIDA Hiroki
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

data/Rakefile

@@ -69,16 +69,28 @@ if File.exist?('comable.gemspec')
     end
   end
 
-  task default: ['app:spec:all', 'rubocop']
+  task default: ['app:spec:all', 'rubocop', 'brakeman:all']
+else
+  task default: ['app:spec', 'rubocop', 'brakeman']
 end
 
-task default: ['app:spec', 'rubocop']
-
 Bundler::GemHelper.install_tasks
 
 # from https://github.com/rspec/rspec-rails/issues/936
 task 'test:prepare'
 
 task :rubocop do
-  exec 'rubocop'
+  sh 'rubocop'
+end
+
+task :brakeman do
+  sh 'brakeman --exit-on-warn --ignore-config .brakeman.ignore'
+end
+
+namespace :brakeman do
+  task :all do
+    FRAMEWORKS.each do |framework|
+      sh "brakeman --exit-on-warn --ignore-config .brakeman.ignore #{framework}"
+    end
+  end
 end

data/app/assets/javascripts/comable/frontend/application.coffee

@@ -0,0 +1,5 @@
+#= require jquery
+#= require jquery-ujs
+#= require jquery-ui
+#= require bootstrap-sprockets
+#= require_tree

data/app/assets/stylesheets/comable/frontend/application.scss

@@ -0,0 +1,434 @@
+//= require jquery-ui
+//= require_tree
+
+$lighten-bg: #139bab;
+$darken-bg: darken($lighten-bg, 10%);
+
+// brand
+$brand-primary: $lighten-bg;
+// navbar
+$navbar-default-bg: $lighten-bg;
+$navbar-default-color: #fff;
+// navbar > link
+$navbar-default-link-color: $navbar-default-color;
+$navbar-default-link-active-color: $navbar-default-link-color;
+$navbar-default-link-hover-color: $navbar-default-link-color;
+$navbar-default-link-hover-bg: $darken-bg;
+$navbar-default-link-active-bg: $darken-bg;
+$navbar-default-link-hover-bg: darken($navbar-default-bg, 10%);
+$navbar-default-link-active-bg: darken($navbar-default-bg, 10%);
+// navbar > brand
+$navbar-default-brand-color: $navbar-default-link-color;
+$navbar-default-brand-hover-color: $navbar-default-brand-color;
+// navbar > toggle
+$navbar-default-toggle-icon-bar-bg: $navbar-default-link-color;
+$navbar-default-toggle-hover-bg: $navbar-default-link-hover-bg;
+// button
+$btn-primary-bg: invert($lighten-bg);
+$btn-default-border: $btn-primary-bg;
+$btn-default-border: $btn-primary-bg;
+$btn-default-color: $btn-primary-bg;
+
+@import "bootstrap-sprockets";
+@import "bootstrap";
+@import "compass/utilities";
+@import "compass/css3";
+
+body.comable-checkout-layout {
+  margin: 30px;
+
+  nav {
+    .navbar-brand,
+    .navbar-brand:hover, {
+      color: $lighten-bg;
+    }
+    background: transparent;
+    border: none;
+  }
+}
+
+nav {
+  &.navbar {
+    @include border-radius(0);
+  }
+
+  .navbar-nav > li > a {
+    @include transition(all .15s ease-in);
+  }
+
+  // HACK:
+  // from http://stackoverflow.com/questions/18552714/bootstrap-3-how-to-maximize-input-width-inside-navbar/18562948#18562948
+  .form-group {
+    display: inline !important;
+    .input-group {
+      display: table;
+      padding: 0 6px;
+      .input-group-btn {
+        width: 1% !important;
+      }
+    }
+  }
+
+  .form-control,
+  .btn-default,
+  .btn-default:hover {
+    color: #333;
+    border-color: darken($navbar-default-bg, 10%);
+  }
+}
+
+.comable-navbar-top {
+  font-size: 11px;
+  height: 30px;
+  line-height: 30px;
+  font-weight: bold;
+  background-color: darken($navbar-default-bg, 10%);
+
+  .navbar-text {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .navbar-nav > li > a {
+    padding-top: 0;
+    padding-bottom: 0;
+    line-height: 30px;
+    &:hover {
+      color: lighten($navbar-default-link-hover-bg, 40%);
+    }
+  }
+
+  .container {
+    padding-left: 0;
+  }
+
+  a:hover {
+    background-color: transparent;
+  }
+}
+
+button {
+  @extend .btn;
+}
+
+input[type="submit"] {
+  @extend .btn;
+  @extend .btn-primary;
+
+  &.btn-default {
+    @extend .btn-default;
+  }
+}
+
+select,
+input[type="password"],
+input[type="email"],
+input[type="text"] {
+  @extend .form-control;
+  margin-right: 0.5em;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+table {
+  @extend .table;
+}
+
+// Megamenu
+// from http://jsfiddle.net/apougher/ydcMQ/
+.menu-large {
+  position: static !important;
+
+  .megamenu {
+    padding: 20px 0px;
+    width: 100%;
+  }
+
+  .megamenu > li > ul {
+    padding: 0;
+    margin: 0;
+  }
+
+  .megamenu > li > ul > li {
+    list-style: none;
+  }
+
+  .megamenu > li > ul > li > a {
+    display: block;
+    padding: 3px 20px;
+    clear: both;
+    font-weight: normal;
+    line-height: 1.428571429;
+    color: #333333;
+    white-space: normal;
+  }
+
+  .megamenu > li ul > li > a:hover,
+  .megamenu > li ul > li > a:focus {
+    text-decoration: none;
+    color: #262626;
+    background-color: #f5f5f5;
+  }
+
+  .megamenu.disabled > a,
+  .megamenu.disabled > a:hover,
+  .megamenu.disabled > a:focus {
+    color: #999999;
+  }
+
+  .megamenu.disabled > a:hover,
+  .megamenu.disabled > a:focus {
+    text-decoration: none;
+    background-color: transparent;
+    background-image: none;
+    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+    cursor: not-allowed;
+  }
+
+  .megamenu.dropdown-header {
+    color: #428bca;
+    font-size: 18px;
+  }
+
+  @media(max-width: 768px) {
+    .megamenu {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    .megamenu > li {
+      margin-bottom: 30px;
+    }
+
+    .megamenu > li:last-child {
+      margin-bottom: 0;
+    }
+
+    .megamenu.dropdown-header {
+      padding: 3px 15px !important;
+    }
+
+    .navbar-nav .open .dropdown-menu .dropdown-header {
+      color: #fff;
+    }
+  }
+}
+
+// checkout-flow
+.comable-checkout-flow {
+  $weight: 1px;
+  $size: 11px + $weight;
+  $border-darken: #aaa;
+  $border-lighten: #fff;
+  $color-darken: #aaa;
+  $color-lighten: $lighten-bg;
+
+  font-size: 75%;
+  color: $color-darken;
+  height: $navbar-height;
+  position: relative;
+  background: url('data:image/gif;base64,R0lGODdhAQABAIAAAKqqqgAAACwAAAAAAQABAAACAkQBADs=') repeat-x 0 34px; // #aaa
+  background-size: $weight;
+  overflow: hidden;
+  width: 60%;
+
+  & > li {
+    padding-top: 7px;
+    width: 25%;
+    text-align: center;
+    vertical-align: top;
+
+    &:before {
+      width: $weight;
+      height: $size;
+      display: block;
+      background-color: $border-darken;
+      position: absolute;
+      top: 28px;
+    }
+
+    &:first-child:before {
+      content: '';
+      left: 0px;
+    }
+
+    &:last-child:before {
+      content: '';
+      right: 0px;
+    }
+
+    &:after {
+      content: '';
+      display: block;
+      width: $size;
+      height: $size;
+      border-radius: $size;
+      background-color: $border-darken;
+      border: 2px solid $border-lighten;
+      position: absolute;
+      top: 22px + ($size / 2);
+      left: 50%;
+      margin-left: -($size / 2);
+    }
+
+    &.active {
+      color: $color-lighten;
+
+      &:after {
+        background-color: $border-lighten;
+        border-color: $color-lighten;
+      }
+    }
+  }
+
+  @media(max-width: 768px) {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+
+    & > li {
+      float: left;
+    }
+  }
+}
+
+// main
+main {
+}
+
+#comable-order {
+  input[type="submit"] {
+    @extend .btn-block;
+  }
+  .comable-bill_address,
+  .comable-ship_address {
+    form {
+      @extend .form-horizontal;
+      @extend .col-sm-6;
+    }
+  }
+}
+
+footer {
+  margin: 30px;
+  text-align: center;
+}
+
+.comable-mini-cart {
+  $width: 250px;
+  $image-size: 40px;
+  $padding: 10px;
+
+  width: $width + $padding * 3;
+
+  & > li > a {
+    display: block;
+    padding: $padding;
+    vertical-align: middle;
+
+    .comable-image {
+      float: left;
+      margin-right: $padding;
+      width: $image-size;
+      height: $image-size;
+      overflow: hidden;
+    }
+
+    .comable-name {
+      display: block;
+      color: $link-color;
+      white-space: nowrap;
+      overflow: hidden;
+      @include ellipsis;
+    }
+  }
+
+  .comable-show-cart {
+    margin: $padding;
+    text-align: center;
+
+    a {
+      @extend .btn;
+      @extend .btn-primary;
+      display: block;
+      color: $btn-primary-color;
+    }
+  }
+}
+
+.category {
+  & > ul:not(.category-path) {
+    list-style: none;
+    padding-left: 2em;
+  }
+
+  a {
+    display: block;
+    color: $text-color;
+  }
+}
+
+.category-path {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  & > li {
+    & > a:before {
+      @include inline-block;
+      content: '<';
+      width: 1em;
+    }
+
+    &.active {
+      font-weight: bold;
+
+      &:before {
+        @include inline-block;
+        content: ' ';
+        width: 1em;
+      }
+    }
+  }
+}
+
+.category-breadcrumb {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  & > li {
+    @include inline-block;
+
+    &:not(:last-child):after {
+      content: '>';
+      margin-left: 0.5em;
+      margin-right: 0.5em;
+    }
+  }
+}
+
+#comable-product {
+  .products > .row {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    margin-bottom: 20px;
+    padding-bottom: 20px;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid $list-group-border;
+    }
+  }
+}
+
+.without-titlebar .ui-dialog-titlebar {
+  display: none;
+}
+
+.stop-scrolling {
+  height: 100%;
+  overflow: hidden;
+}