searchkit-rails 0.0.1 → 0.0.2

data/lib/assets/stylesheets/searchkit/components/_selected-filters.scss

@@ -0,0 +1,45 @@
+@import "../vars.scss";
+
+.sk-selected-filters {
+  display:flex;
+  flex-flow: row wrap;
+  margin-right:10px;
+  
+  &__item {
+    flex:0 0 auto;
+    margin:0 10px 10px 0;
+  }
+  
+  &-option {
+    background:$sk-selected-filters-background;
+    border:none;
+    display:flex;
+    padding:10px 0 10px 10px;
+    font-size:$sk-text-font-size;
+    line-height:20px;
+    border-radius:3px;
+
+
+    &__name {
+      flex:auto;
+      color:$sk-action-text-color;
+    }
+
+    &__remove-action {
+      flex:auto;
+      padding:0 10px;
+      cursor:pointer;
+      font-size:16px;
+      line-height:18px;
+      color:$sk-action-text-color;
+      font-weight:700;
+      border-left:1px solid #ddd;
+      padding: 0 15px 0 10px;
+      margin-left:10px;
+
+      &:hover {
+        color: $sk-remove-action-color;
+      }
+    }
+  }
+}

data/lib/assets/stylesheets/searchkit/components/_sorting-selector.scss

@@ -0,0 +1,38 @@
+@import "../vars.scss";
+
+.sk-sorting-selector {
+  position:relative;
+  cursor:pointer;
+
+  &.is-disabled {
+    display:none
+  }
+
+  select {
+    -webkit-appearance: none;
+    -moz-appearance:    none;
+    appearance:         none;
+    background:none;
+    padding:6px 10px;
+    border:1px solid $sk-border-color;
+    outline:0;
+    font-weight:$sk-bold-weight;
+    font-size:$sk-text-font-size;
+    border-radius:$sk-border-radius;
+    color:#000;
+  }
+
+  &:after {
+    content:"";
+    position:absolute;
+    top:50%;
+    margin-top:-3px;
+    right:10px;
+    width:0;
+    height:0;
+    border-left:6px solid transparent;
+    border-right:6px solid transparent;
+    border-top:6px solid #666;
+  }
+
+}

data/lib/assets/stylesheets/searchkit/components/_table.scss

@@ -0,0 +1,80 @@
+/* TODO : This style is copied from PureCSS for testing purpose, please come back and update !! */
+
+.sk-table {
+    /* Remove spacing between table cells (from Normalize.css) */
+    border-collapse: collapse;
+    border-spacing: 0;
+    empty-cells: show;
+    border: 1px solid #cbcbcb;
+    
+
+  caption {
+      color: #000;
+      font: italic 85%/1 arial, sans-serif;
+      padding: 1em 0;
+      text-align: center;
+  }
+
+  td,
+  th {
+      border-left: 1px solid #cbcbcb;/*  inner column border */
+      border-width: 0 0 0 1px;
+      font-size: inherit;
+      margin: 0;
+      overflow: visible; /*to make ths where the title is really long work*/
+      padding: 0.5em 1em; /* cell padding */
+  }
+
+  /* Consider removing this next declaration block, as it causes problems when
+  there's a rowspan on the first cell. Case added to the tests. issue#432 */
+  td:first-child,
+  th:first-child {
+      border-left-width: 0;
+  }
+
+  thead {
+      background-color: #e0e0e0;
+      color: #000;
+      text-align: left;
+      vertical-align: bottom;
+  }
+
+  /*
+  striping:
+    even - #fff (white)
+    odd  - #f2f2f2 (light gray)
+  */
+  td {
+      background-color: transparent;
+  }
+  &-odd td {
+      background-color: #f2f2f2;
+  }
+
+  /* nth-child selector for modern browsers */
+  &-striped tr:nth-child(2n-1) td {
+      background-color: #f2f2f2;
+  }
+
+  /* BORDERED TABLES */
+  &-bordered td {
+      border-bottom: 1px solid #cbcbcb;
+  }
+  &-bordered tbody > tr:last-child > td {
+      border-bottom-width: 0;
+  }
+
+
+  /* HORIZONTAL BORDERED TABLES */
+
+  &-horizontal td,
+  &-horizontal th {
+      border-width: 0 0 1px 0;
+      border-bottom: 1px solid #cbcbcb;
+  }
+  &-horizontal tbody > tr:last-child > td {
+      border-bottom-width: 0;
+  }
+
+}
+

data/lib/assets/stylesheets/searchkit/components/_tabs.scss

@@ -0,0 +1,54 @@
+@import "../vars.scss";
+
+.sk-tabs {
+  width: 100%;
+  border-bottom: 1px solid $sk-border-color;
+  list-style: none;
+  padding: 0;
+  margin: 4px 0;
+
+  &.is-disabled {
+    display:none;
+  }
+
+  &-option {
+    cursor:pointer;
+    display: inline-block;
+    font-weight: $sk-medium-weight;
+    font-size:$sk-list-font-size;
+    color: $sk-action-text-color;
+    padding: 10px 15px;
+    text-decoration: none;
+    margin-bottom: -1px;
+    border: 1px solid transparent;
+    border-radius: $sk-border-radius $sk-border-radius 0 0;
+
+    &.is-active {
+      background-color: white;
+      color:$sk-list-text-color;
+      border-color:$sk-active-bg-color;
+      cursor: default;
+      border: 1px solid $sk-border-color;
+      border-bottom-color: transparent;
+    }
+
+    &.is-disabled {
+      cursor: initial;
+      color: $sk-border-color;
+    }
+
+    &__text, &__count {
+      display: inline;
+    }
+
+    &__count {
+      &:before {
+        content: " ("
+      }
+
+      &:after {
+        content: ")"
+      }
+    }
+  }
+}

data/lib/assets/stylesheets/searchkit/components/_tag-cloud.scss

@@ -0,0 +1,55 @@
+@import "../vars.scss";
+
+.sk-tag-cloud {
+  text-align: justify;
+  word-wrap: break-word;
+  line-height: 16px;
+  font-size: 10px;
+
+  &.is-disabled {
+    display:none;
+  }
+
+  &-option {
+    display: inline;
+    cursor:pointer;
+    font-weight: $sk-light-weight;
+    color: $sk-list-text-color;
+    padding:4px 2px;
+    border-right:none;
+    text-decoration: none;
+
+    &__text, &__count {
+      display: inline;
+    }
+
+    &:before {
+      content: ' ';
+      display: inline;
+    }
+
+    &:after {
+      content: ' ';
+      display: inline;
+    }
+
+    &__count {
+      &:before {
+        content: ' (';
+      }
+      &:after {
+        content: ')';
+      }
+    }
+
+    &.is-active &__text {
+      color: $sk-action-active-color;
+      font-weight: $sk-medium-weight;
+    }
+
+    &.is-disabled {
+      cursor: initial;
+      color: $sk-disabled-text-color;
+    }
+  }
+}

data/lib/assets/stylesheets/searchkit/components/_tag-filter.scss

@@ -0,0 +1,22 @@
+@import "../vars.scss";
+
+.sk-tag-filter {
+  cursor: pointer;
+}
+
+.sk-tag-filter-list {
+  display: inline;
+  
+  .sk-tag-filter{
+    display: inline;
+  
+    &:after {
+      content: ", ";
+      cursor: initial;
+    }
+    
+    &:last-child:after {
+      content: "";
+    }
+  }
+}

data/lib/assets/stylesheets/searchkit/components/_toggle.scss

@@ -0,0 +1,61 @@
+@import "../vars.scss";
+
+.sk-toggle {
+  display: flex;
+  align-content:center;
+  text-align: center;
+  border-radius: $sk-border-radius;
+  max-height:30px;
+
+  &.is-disabled {
+    display:none;
+  }
+
+  &-option {
+    flex:1;
+    background-color: $sk-selector-background;
+    border:1px solid $sk-selector-border-color;
+    cursor:pointer;
+    font-weight: $sk-medium-weight;
+    font-size:$sk-list-font-size;
+    color: $sk-selector-text-color;
+    padding:5px 10px;
+    border-right:none;
+    text-decoration: none;
+    white-space: nowrap;
+
+    &:first-child {
+      border-radius: $sk-border-radius 0 0 $sk-border-radius;
+    }
+
+    &:last-child {
+      border-radius: 0 $sk-border-radius $sk-border-radius 0;
+      border-right:1px solid $sk-selector-border-color;
+    }
+
+    &.is-active {
+      background-color:$sk-selector-active-background;
+      color:$sk-selector-active-text-color;
+      border-color:$sk-selector-active-background;
+    }
+
+    &.is-disabled {
+      cursor: initial;
+      color: $sk-disabled-text-color;
+    }
+
+    &__text, &__count {
+      display: inline;
+    }
+
+    &__count {
+      &:before {
+        content: " ("
+      }
+
+      &:after {
+        content: ")"
+      }
+    }
+  }
+}

data/lib/assets/stylesheets/searchkit/components/_view-switcher.scss

@@ -0,0 +1,39 @@
+@import "../vars.scss";
+
+.sk-view-switcher {
+  display:flex;
+  align-content:center;
+  text-align: center;
+  border-radius:$sk-border-radius;
+
+  &.is-disabled {
+    display:none;
+  }
+
+  &__action {
+    flex:1;
+    border:1px solid $sk-border-color;
+    cursor:pointer;
+    font-weight: $sk-medium-weight;
+    font-size:$sk-list-font-size;
+    color: $sk-action-text-color;
+    padding:5px 10px;
+    border-right:none;
+
+    &:first-child {
+      border-radius: $sk-border-radius 0 0 $sk-border-radius;
+    }
+
+    &:last-child {
+      border-radius: 0 $sk-border-radius $sk-border-radius 0;
+      border-right:1px solid $sk-border-color;
+    }
+
+    &.is-active {
+      background-color:$sk-active-bg-color;
+      color:white;
+      font-weight: $sk-bold-weight;
+      border-color:$sk-active-bg-color;
+    }
+  }
+}

data/lib/assets/stylesheets/searchkit/images/search.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+
+<!-- The icon can be used freely in both personal and commercial projects with no attribution required, but always appreciated. 
+You may NOT sub-license, resell, rent, redistribute or otherwise transfer the icon without express written permission from iconmonstr.com -->
+
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+
+	 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+
+<path id="magnifier-2-icon" d="M460.355,421.59L353.844,315.078c20.041-27.553,31.885-61.437,31.885-98.037
+
+	C385.729,124.934,310.793,50,218.686,50C126.58,50,51.645,124.934,51.645,217.041c0,92.106,74.936,167.041,167.041,167.041
+
+	c34.912,0,67.352-10.773,94.184-29.158L419.945,462L460.355,421.59z M100.631,217.041c0-65.096,52.959-118.056,118.055-118.056
+
+	c65.098,0,118.057,52.959,118.057,118.056c0,65.096-52.959,118.056-118.057,118.056C153.59,335.097,100.631,282.137,100.631,217.041
+
+	z"/>
+
+</svg>
+

data/lib/assets/stylesheets/searchkit/theme.scss

@@ -0,0 +1,369 @@
+@import "vars.scss";
+@import "components.scss";
+
+body {
+  margin:0;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+.sk-layout {
+  box-sizing: border-box;
+  background: $sk-layout-background;
+  font-family: $sk-font-family;
+
+  &__top-bar {
+    background: $sk-primary-theme-color;
+    height:60px;
+    position: fixed;
+    top: 0;
+    left:0;
+    right:0;
+    width: 100%;
+    padding:10px 0;
+    z-index:100;
+    display:flex;
+    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
+  }
+
+  &__body {
+    display:flex;
+    margin:60px auto 0;
+    min-width:600px;
+  }
+
+  &__filters {
+    background:$sk-layout-panel-background;
+    padding:15px;
+    margin:15px 0 15px 15px;
+    flex:0 0 246px;
+    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.08);
+
+    .sk-refinement-list,
+    .sk-range-filter,
+    .sk-hierarchical-menu-list,
+    .sk-numeric-refinement-list,
+    .sk-hierarchical-refinement-list {
+      margin-bottom:20px;
+    }
+
+    .sk-select {
+      width:100%;
+    }
+
+    .sk-range-input {
+      margin-top:10px;
+    }
+
+    // .sk-selected-filters {
+    //   flex-flow: column nowrap;
+    //   &-option {
+    //     margin-right:0;
+    //     margin-bottom:10px;
+    //   }
+    // }
+  }
+
+  &__results {
+    background:$sk-layout-panel-background;
+    margin:15px 15px 15px 15px;
+    flex:auto;
+    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.08);
+    min-height:600px;
+  }
+
+}
+
+.sk-top-bar {
+  &__content {
+    display:flex;
+    margin:0 auto;
+    padding:0 15px;
+    width:100%;
+  }
+}
+
+.sk-layout {
+
+  &__size-l {
+    .sk-top-bar__content {
+      width:1280px;
+    }
+
+    .sk-layout__body {
+      max-width:1280px;
+    }
+  }
+
+  &__size-m {
+
+    .sk-top-bar__content {
+      width:960px;
+    }
+
+    .sk-layout__body {
+      max-width:960px;
+    }
+
+  }
+}
+
+.sk-action-bar {
+  display:flex;
+  flex-flow: column wrap;
+  margin:0 15px 15px;
+
+  &-row {
+    display:flex;
+    flex-flow: row wrap;
+    margin:0px 0 10px;
+
+    &:last-child {
+      margin:0;
+    }
+  }
+
+  .sk-hits-stats {
+    line-height: 30px;
+  }
+}
+
+.sk-results-list {
+  padding:15px 0;
+}
+
+// components
+
+.sk-search-box {
+  background: rgba(255,255,255,.15);
+  border-radius: $sk-border-radius;
+  position: relative;
+  display: flex;
+  flex:1;
+
+  &.is-focused {
+    background:white;
+  }
+
+  &.is-focused &__text {
+    color:$sk-text-color;
+  }
+
+  &.is-focused &__text::-webkit-input-placeholder  {
+    color:$sk-text-color;
+    font-weight:$sk-light-weight;
+  }
+
+  form {
+    width:100%;
+  }
+
+  &__text {
+    background:transparent;
+    color:#fff;
+    font-size:16px;
+    padding-left:10px;
+    &::-webkit-input-placeholder  {
+      color:rgba(255,255,255,1);
+      font-weight:100;
+    }
+  }
+
+  &__icon {
+    margin:10px 0 0 15px;
+  }
+
+  &__action {
+    display:none;
+  }
+}
+
+.sk-hits-stats {
+  align-self: flex-start;
+  flex:1;
+}
+
+.sk-sorting-selector {
+  flex:200px 0 0;
+  select {
+    width:200px;
+  }
+}
+
+.sk-range-filter {
+  .rc-slider-handle {
+    border-color: $sk-primary-theme-color;
+  }
+  .rc-slider-track {
+    background-color: rgba(156, 162, 153, 0.5);
+  }
+}
+
+.sk-reset-filters {
+  border:none;
+  display:flex;
+  font-size:14px;
+  margin:0;
+  padding-left:0;
+}
+
+.sk-pagination-navigation {
+  width:300px;
+  margin:10px auto;
+
+  &.is-numbered {
+    width:600px;
+  }
+
+}
+
+.sk-pagination-select {
+  margin: 10px auto;
+  text-align:center;
+}
+
+.sk-hits-grid, .sk-hits-list {
+  margin:0 15px 20px;
+}
+
+.sk-hits-grid {
+  display:flex;
+  flex-flow: row wrap;
+  align-items: flex-start;
+
+  &__no-results {
+    text-align:center;
+    margin-top:60px;
+  }
+
+  &__item {
+    flex:1 1 250px;
+    display:flex;
+    margin-bottom:20px;
+  }
+}
+
+.sk-hits-grid-hit {
+  padding:10px;
+  max-width:250px;
+  flex-flow: column nowrap;
+  align-content: center;
+  align-items: center;
+  flex: 190px 0 0;
+
+  em {
+    background:yellow;
+  }
+
+  a {
+    text-decoration: none;
+    color: $sk-action-text-color;
+  }
+  &__title {
+    margin-top:10px;
+    font-size:14px;
+  }
+}
+
+.sk-hits-list {
+  display:flex;
+  flex-flow: column wrap;
+  align-items: flex-start;
+
+  em {
+    background:yellow;
+  }
+
+  a {
+    text-decoration: none;
+    color: $sk-action-text-color;
+  }
+
+  &__no-results {
+    text-align:center;
+    margin-top:60px;
+  }
+
+  &__item {
+    display:flex;
+    margin-bottom:20px;
+  }
+}
+
+.sk-hits-list-hit {
+  display:flex;
+
+  &__poster {
+    width:200px;
+    flex:0 0 200px;
+    padding:0px 20px;
+
+    img {
+      max-width:100%;
+      margin:0 auto;
+    }
+
+  }
+
+  &__details {
+    flex:1 0 0;
+    padding:10px;
+  }
+
+  &__title {
+    line-height:20px;
+    margin:0 0 5px;
+    font-size:18px;
+  }
+
+  &__subtitle {
+    line-height:20px;
+    margin:0 0 5px;
+    font-size:14px;
+    color:#666;
+    font-weight:300;
+  }
+
+  &__tags {
+    line-height: 20px;
+    margin:0;
+    font-size: 14px;
+    color: #666;
+    font-weight: 300;
+    list-style: none;
+    padding:0;
+    margin-bottom:10px;
+
+    .sk-tag-filter {
+      &:hover {
+        color: $sk-action-text-color;
+      }
+
+      &:active {
+        color: black;
+      }
+    }
+  }
+
+  &__text {
+    line-height:22px;
+    max-width:800px;
+  }
+
+}
+
+.sk-action-bar {
+
+  .sk-select, .sk-toggle {
+    margin-left:15px;
+  }
+}
+
+.sk-layout__filters {
+
+  .sk-select select {
+    width: 100%
+  }
+}