LitCharts · r4doshka · Mar 12, 2018 · Mar 12, 2018 · Mar 13, 2018 · Mar 13, 2018
diff --git a/.gitignore b/.gitignore
@@ -11,5 +11,7 @@
 /log/*
 !/log/.keep
 /tmp
+.idea
+.ruby-version
 
 config/database.yml
diff --git a/Gemfile b/Gemfile
@@ -23,7 +23,7 @@ gem 'jquery-rails'
 gem 'jbuilder', '~> 2.0'
 # bundle exec rake doc:rails generates the API under doc/api.
 gem 'sdoc', '~> 0.4.0', group: :doc
-
+gem 'faker'
 # Use ActiveModel has_secure_password
 # gem 'bcrypt', '~> 3.1.7'
 

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -50,6 +50,8 @@ GEM
     debug_inspector (0.0.3)
     erubis (2.7.0)
     execjs (2.7.0)
+    faker (1.8.7)
+      i18n (>= 0.7)
     ffi (1.9.23)
     globalid (0.4.1)
       activesupport (>= 4.2.0)
@@ -167,6 +169,7 @@ PLATFORMS
 DEPENDENCIES
   bootstrap-sass (~> 3.3.7)
   byebug
+  faker
   haml-rails
   jbuilder (~> 2.0)
   jquery-rails
@@ -182,4 +185,4 @@ RUBY VERSION
    ruby 2.2.5p319
 
 BUNDLED WITH
-   1.14.6
+   1.16.1
diff --git a/app/assets/javascripts/themes.js b/app/assets/javascripts/themes.js
@@ -0,0 +1,4 @@
+$(document).click('.sidebar .filter-box input', function(e){
+  $('.sidebar .modal.modal_access').addClass('modal_open');
+  return false;
+});
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -102,3 +102,4 @@ $light-text-color: lighten($text-color, 10%);
 //////////////////////////////////////////////
 
 @import "views/layouts/default";
+@import "views/_base";
diff --git a/app/assets/stylesheets/views/_base.scss b/app/assets/stylesheets/views/_base.scss
@@ -0,0 +1,11 @@
+@import './lists';
+@import "main";
+@import "related";
+@import "sidebar";
+@import "filter-box";
+@import "theme-box";
+@import "cards";
+@import 'modal';
+@import "remark";
+@import "closed-box";
+@import "controls";
diff --git a/app/assets/stylesheets/views/cards.scss b/app/assets/stylesheets/views/cards.scss
@@ -0,0 +1,60 @@
+$block: '.card';
+
+#{$block}{
+  &#{$block}{
+    &_theme{
+      margin-bottom: 30px;
+      #{$block}{
+        &__title{
+          margin-bottom: 20px;
+          font-size: 16px;
+          line-height: 20px;
+           @media(max-width: 992px) {
+             margin-bottom: 10px;
+           }
+        }
+        &__description{
+          padding-right: 50px;
+          font-size: 16px;
+          line-height: 1.5;
+          @media(max-width: 992px) {
+            padding-right: 0;
+            font-size: 14px;
+          }
+        }
+        &__icon{
+          height: 145px;
+          width: 140px;
+          margin: 0 auto;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 50%;
+          max-width: 100%;
+           @media(max-width: 992px) {
+             width: 100px;
+             height: 100px;
+           }
+            @media(max-width: 768px) {
+              max-height: 140px;
+              width: 140px;
+              margin-bottom: 20px;
+           }
+           @media(max-width: 500px) {
+             height: 80px;
+           }
+          img{
+            width: 70%;
+             @media(max-width: 768px) {
+               max-width: 50%;
+             }
+          }
+          &.theme-1-color{
+            background: #ff6967;
+          }
+        }
+      }
+    }
+  }
+
+}
diff --git a/app/assets/stylesheets/views/closed-box.scss b/app/assets/stylesheets/views/closed-box.scss
@@ -0,0 +1,11 @@
+$block: '.closed-box';
+
+#{$block}{
+  position: relative;
+  &__container{
+    &_blurred{
+      filter: blur(8px);
+      -webkit-filter: blur(8px);
+    }
+  }
+}
diff --git a/app/assets/stylesheets/views/controls.scss b/app/assets/stylesheets/views/controls.scss
@@ -0,0 +1,26 @@
+$block: '.btn';
+
+#{$block}{
+  &#{$block}{
+    &_action{
+      padding: 8px 22px;
+      border: none;
+      border-radius: 6px;
+      font-size: 16px;
+      font-weight: 400;
+      background: #ff6967;
+      color: $white;
+    }
+    &_close{
+      position: absolute;
+      background: transparent;
+      padding: 0;
+        top: 3px;
+    right: 10px;
+    font-size: 24px;
+    font-weight: 600;
+    transform: rotate(45deg);
+      color: #c8c8c8;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/views/filter-box.scss b/app/assets/stylesheets/views/filter-box.scss
@@ -0,0 +1,8 @@
+$block: '.filter-box';
+
+#{$block}{
+  margin-bottom: 25px;
+  &:last-child{
+    margin-bottom: 0;
+  }
+}
diff --git a/app/assets/stylesheets/views/lists.scss b/app/assets/stylesheets/views/lists.scss
@@ -0,0 +1,43 @@
+$block: '.list';
+
+#{$block}{
+    padding: 0;
+  &#{$block} {
+    &_checkbox {
+        .header{
+          color: $white;
+          -webkit-border-radius: 4px;
+          border-radius: 4px;
+          background-clip: padding-box;
+          font-size: 18px;
+          margin-bottom: 6px;
+          margin-top: 4px;
+          padding: 2px 8px;
+          background: #9a9b9b;
+        }
+      label{
+        cursor: pointer;
+        font-size: 16px;
+        font-weight: normal;
+        margin: 0;
+      }
+      .checkbox-wrapper{
+        display: flex;
+        align-items: center;
+        input[type="checkbox"]{
+          margin: 0 5px 2px 0;
+        }
+      }
+      #{$block} {
+        &__item{
+          list-style: none;
+          margin-bottom: 10px;
+          &:last-child{
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
diff --git a/app/assets/stylesheets/views/main.scss b/app/assets/stylesheets/views/main.scss
@@ -0,0 +1,3 @@
+.ital{
+  font-style: italic;
+}
diff --git a/app/assets/stylesheets/views/modal.scss b/app/assets/stylesheets/views/modal.scss
@@ -0,0 +1,95 @@
+$block: '.modal';
+
+#{$block}{
+   &#{$block}{
+     &_access {
+       position: absolute;
+       &.modal_open{
+         display: block;
+       }
+       #{$block}{
+         &__content{
+            display: block;
+            position: absolute;
+            top: 100px;
+            right: 0;
+            left: 0;
+            bottom: auto;
+            width: 600px;
+            margin: 0 auto;
+            padding: 15px;
+            background: #f3f9fe;
+            border: 3px solid #1293f6;
+           @media(max-width: 992px) {
+             width: 100%;
+           }
+         }
+         &__header{
+           display: flex;
+           flex-direction: column;
+           align-items: center;
+         }
+         &__title{
+
+         }
+         &__controls{
+           margin-bottom: 25px;
+         }
+         &__footer{
+           display: flex;
+           flex-direction: column;
+           align-items: center;
+         }
+         &__image{
+           display: flex;
+           justify-content: center;
+           align-self: center;
+           margin-bottom: 10px;
+         }
+       }
+       .remark{
+         margin-bottom: 20px;
+         &.remark_small{
+           margin-bottom: 0;
+           align-self: flex-start;
+           @media(max-width: 768px) {
+             align-self: center;
+           }
+           .link{
+             @media(max-width: 768px) {
+               display: block;
+             }
+           }
+         }
+       }
+       .video-box{
+         margin: 50px 0;
+         color: #1293f6;
+         font-size: 26px;
+         text-align: center;
+         font-weight: 600;
+       }
+       &.modal_access-small{
+         #{$block}{
+            &__content{
+              max-width: 98%;
+              top: 83px;
+              padding-top: 0;
+              padding-bottom: 20px;
+            }
+           &__image{
+             margin-bottom: 0;
+             width: 130px;
+           }
+           &__controls{
+             margin-bottom: 0;
+           }
+         }
+         .remark{
+           font-size: 18px;
+         }
+       }
+     }
+   }
+}
+
diff --git a/app/assets/stylesheets/views/related.scss b/app/assets/stylesheets/views/related.scss
@@ -0,0 +1,15 @@
+.related{
+  padding-top: 40px;
+  .title {
+    font-size: 18px;
+    display: inline-block;
+    margin-bottom: 10px;
+    position: relative;
+    .a-plus-icon {
+     height: 24px;
+     margin-left: -4px;
+     margin-top: -16px;
+    }
+  }
+}
+
diff --git a/app/assets/stylesheets/views/remark.scss b/app/assets/stylesheets/views/remark.scss
@@ -0,0 +1,11 @@
+$block: '.remark';
+
+#{$block}{
+  text-align: center;
+  font-size: 16px;
+  &#{$block}{
+    &_small{
+      font-size: 12px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/views/sidebar.scss b/app/assets/stylesheets/views/sidebar.scss
@@ -0,0 +1,27 @@
+$block: '.sidebar';
+
+#{$block}{
+  position: relative;
+   @media(max-width: 767px) {
+     display: none;
+    }
+  &__header{
+    display: flex;
+    position: relative;
+  }
+  &__title{
+    font-size: 18px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    padding-right: 16px;
+  }
+  &__image{
+    position: absolute;
+    right: 0;
+    top: -22px;
+    width: 36px;
+  }
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -102,3 +102,4 @@ $light-text-color: lighten($text-color, 10%);
		//////////////////////////////////////////////

		@import "views/layouts/default";
		@import "views/_base";