mekari_lvsg 0.1.0.pre.beta

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 5d787270215c233df5e24bd4c77e991462b79d8248c022ac887445fd528967b1
+  data.tar.gz: 6d71696a897371677884dce7923dffd1f906a3fca4c11bffaccca374de180625
+SHA512:
+  metadata.gz: d6bcb110935ee4e5330b6f8d1b3b3843e21feadc6a58e290ed9e83faad9db1ce842d611c873b6672355fa7132967a89c4b62535f4cadf473b5bc27c841c1ca21
+  data.tar.gz: 97d94e1ee683d029edd488e41c15b9ee1b47b97a5e87c533aa5cab8e5316513dc08f06a3d4ae7a803450540c8fec1ad40e0915588e11d7aaa063d8416ae61b91

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2019 Edo Muhardo Syafri
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,30 @@
+# MekariLvsg
+Sample living style guide by using mounting_view as an engine with semantic-ui.
+
+Mekari is just name of my current company, it's not related with company existing repository. So, it's free to use!!
+
+## Usage
+How to use my plugin.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'mekari_lvsg'
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install mekari_lvsg
+```
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,22 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'MekariLvsg'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("spec/dummy/Rakefile", __dir__)
+load 'rails/tasks/engine.rake'
+
+load 'rails/tasks/statistics.rake'
+
+require 'bundler/gem_tasks'

data/app/assets/config/mekari_lvsg_manifest.js

@@ -0,0 +1,2 @@
+//= link_directory ../javascripts/mekari_lvsg .js
+//= link_directory ../stylesheets/mekari_lvsg .css

data/app/assets/javascripts/mekari_lvsg/mekari.js.erb

@@ -0,0 +1,19 @@
+<% require_asset 'mountain_view/styleguide' %>
+
+<% if Dir.exist?(MountainView.configuration.components_path) %>
+  <% depend_on MountainView.configuration.components_path.to_s %>
+  <%
+    Dir.glob(MountainView.configuration.components_path.join('*')).each do |component_dir|
+      component = File.basename component_dir
+      begin
+        require_asset "#{component}/#{component}.js"
+      rescue Sprockets::FileNotFound
+        Rails.logger.debug("MountainView: javascript not found for component '#{component}'")
+      end
+    end
+  %>
+<% else %>
+  <% depend_on Rails.root.join('app').to_s %>
+<% end %>
+
+<% require_asset 'mekari_lvsg/ms_base' %>

data/app/assets/javascripts/mekari_lvsg/ms_base.js

@@ -0,0 +1,2 @@
+//= require lodash/lodash.custom.min
+//= require lazysizes/lazysizes.min

data/app/assets/javascripts/mountain_view/styleguide.js

@@ -0,0 +1,3 @@
+//= require jquery
+//= require jquery_ujs
+//= require semantic_ui/semantic_ui

data/app/assets/javascripts/pages/demo.js

@@ -0,0 +1,4 @@
+$(document).ready(function() {
+  toggleProductHighlightMobileOnScroll('.section__hide-product-highlight');
+});
+

data/app/assets/stylesheets/mekari_lvsg/components.scss

@@ -0,0 +1,21 @@
+@import 'mekari_lvsg/variables';
+
+body.pages {
+  background-color: $frosty-grey;
+  .headtitle {
+    @media (min-width: $computerBreakpoint) {
+      width: 62.5%;
+    }
+  }
+}
+
+footer {
+  background-color: $navy-blue;
+  color: $mercury-grey;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  text-align: center;
+  a {
+    color: $snow-white;
+  }
+}

data/app/assets/stylesheets/mekari_lvsg/mekari.css.erb

@@ -0,0 +1,22 @@
+<% MountainView.configuration.included_stylesheets.each do |included_stylesheet| %>
+  <%= require_asset included_stylesheet %>
+<% end %>
+<% if Dir.exist?(MountainView.configuration.components_path) %>
+  <% depend_on MountainView.configuration.components_path.to_s %>
+  <%
+      Dir.glob(MountainView.configuration.components_path.join('*')).each do |component_dir|
+        component = File.basename component_dir
+        begin
+          require_asset "#{component}/#{component}.css"
+        rescue Sprockets::FileNotFound
+          Rails.logger.debug("MountainView: stylesheet not found for component '#{component}'")
+        end
+      end
+  %>
+<% else %>
+  <% depend_on Rails.root.join('app').to_s %>
+<% end %>
+
+/* adding asset here */
+<% require_asset 'mekari_lvsg/ms_base' %>
+<% require_asset 'mekari_lvsg/components' %>

data/app/assets/stylesheets/mekari_lvsg/ms_base.less

@@ -0,0 +1,3 @@
+@import "ms_base/variables.less";
+@import "ms_base/typography.less";
+@import "ms_base/plugins/jquery.daterangepicker.less";

data/app/assets/stylesheets/mekari_lvsg/ms_base/legacy_variables.less

@@ -0,0 +1,20 @@
+// -------------------
+// Colors
+// -------------------
+
+// green
+@mint-green: #8cba00;
+
+// blue
+@ash-blue: #6581a1;
+@dark-ash-blue: #34495e;
+@darker-ash-blue: #21364a;
+@sea-blue: #3498db;
+
+// grey
+@grey: #bfc6c6;
+@dark-grey: #7f8c8d;
+@darkest-grey: #555555;
+
+// red
+@tomato-red: #e74c3c;

data/app/assets/stylesheets/mekari_lvsg/ms_base/plugins/jquery.daterangepicker.less

@@ -0,0 +1,4 @@
+body .date-picker-wrapper {
+  font-family: @pageFont;
+  z-index: 2;
+}

data/app/assets/stylesheets/mekari_lvsg/ms_base/typography.less

@@ -0,0 +1,23 @@
+// Typekit
+
+// Rocketship Font
+// Kit ID: cnc8rvf
+
+// Domains:
+// localhost,
+// 127.0.0.1,
+// *.moneysmart.co,
+// *.moneysmart.sg,
+// *.moneysmart.hk
+
+// Light (27kb), Semi-bold (29kb)
+
+@import url("https://use.typekit.net/cnc8rvf.css");
+@import "font-awesome-sprockets";
+@import "font-awesome";
+
+// antialias
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

data/app/assets/stylesheets/mekari_lvsg/ms_base/variables.less

@@ -0,0 +1,71 @@
+// -------------------
+// Fonts
+// -------------------
+
+@pageFont: 'sofia-pro', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Fira Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+
+// -------------------
+// Colors
+// -------------------
+
+// White
+@snow-white: #fff;
+
+// Grey
+@frosty-grey: #f1f1f1;
+@line-grey: #ebebeb;
+@gradient-grey: #f7f7f7;
+@mercury-grey: #ccc;
+@pepper-grey: #333;
+@slate-grey: #808080;
+
+// Blue
+@dark-blue: #17324c;
+@marine-blue: #0044dd;
+@marine-shadow: #0025c6;
+@navy-blue: #0036dc;
+@shallow-blue: #6e8ddb;
+@true-blue: #21405f;
+
+// Green
+@promo-green: #f0faf0;
+@smart-green: #5ccc5e;
+@text-green: #55c05a;
+
+// Yellow
+@epic-yellow: #ffd100;
+
+// Red
+@pome-red: #e83819;
+@vibrant-red: #f55335;
+@vivid-tangerine: #ff917d;
+
+// Others
+@fresh-cyan: #00d7e1;
+@trusty-peach: #ff917d;
+
+// Box Shadows
+@default-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.07);
+@darker-box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.21);
+@hover-box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.14);
+
+// Border Shadows
+@light-shadow: rgba(0, 0, 0, 0.1);
+
+
+// -------------------
+// Responsive
+// -------------------
+
+// Breakpoints
+@mobileBreakpoint            : 320px;
+@tabletBreakpoint            : 768px;
+@computerBreakpoint          : 992px;
+@largeMonitorBreakpoint      : 1200px;
+@widescreenMonitorBreakpoint : 1920px;
+
+// Media Query
+@largestMobileScreen : (@tabletBreakpoint - 1px);
+@largestTabletScreen : (@computerBreakpoint - 1px);
+@largestSmallMonitor : (@largeMonitorBreakpoint - 1px);
+@largestLargeMonitor : (@widescreenMonitorBreakpoint - 1px);

data/app/assets/stylesheets/mekari_lvsg/theme.css

@@ -0,0 +1,4 @@
+/*
+ *= require semantic_ui/semantic_ui
+ *= require mountain_view/override
+ */

data/app/assets/stylesheets/mekari_lvsg/variables.scss

@@ -0,0 +1,37 @@
+// Grey
+$frosty-grey: #f1f1f1;
+$gradient-grey: #f7f7f7;
+$line-grey: #ebebeb;
+$mercury-grey: #ccc;
+$pepper-grey: #333;
+$slate-grey: #808080;
+
+// Blue
+$marine-blue: #04d;
+$navy-blue: #21364a;
+
+$epic-yellow: #ffd100;
+$snow-white: #fff;
+
+// Box shadow color
+$box-shadow-color: rgba(0, 0, 0, 0.07);
+$darker-box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.21);
+$darker-bottom-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.21);
+
+// Green
+$promo-green: #f0faf0;
+$smart-green: #5ccc5e;
+$text-green: #55c05a;
+
+// Screen Size Breakpoints
+$mobileBreakpoint: 320px;
+$tabletBreakpoint: 768px;
+$computerBreakpoint: 992px;
+$largeMonitorBreakpoint: 1200px;
+$widescreenMonitorBreakpoint: 1920px;
+
+// Calculated Screen sizes
+$largestMobileScreen: ($tabletBreakpoint - 1px);
+$largestTabletScreen: ($computerBreakpoint - 1px);
+$largestSmallMonitor: ($largeMonitorBreakpoint - 1px);
+$largestLargeMonitor: ($widescreenMonitorBreakpoint - 1px);

data/app/assets/stylesheets/mountain_view/override.less

@@ -0,0 +1,5 @@
+@import "mekari_lvsg/ms_base/typography";
+
+.mv-main {
+  background-color: #eee;
+}

data/app/components/footer/_footer.html.slim

@@ -0,0 +1,35 @@
+.footer
+  .footer-top
+    .ui.container
+      .ui.divided.equal.height.stackable.grid
+        .footer-top__container.three.wide.column
+          .footer-top__logo
+            a.logo__link href=(properties[:footer_logo_link])
+              = image_tag properties[:footer_logo_path], alt: properties[:footer_logo_alt]
+
+        .footer-top__container.ten.wide.column
+          .footer-top__menu.ui.menu.horizontal.stackable
+            - (properties[:footer_nav_items] || []).each do |footer_nav_item|
+              .item
+                a href=(footer_nav_item[:url]) data-purpose=(footer_nav_item.dig(:data, :purpose))
+                  = footer_nav_item[:name]
+
+        .footer-top__container.three.wide.column
+          .footer-top__social
+            span.social__text = properties[:footer_social]
+            a.social__icon target="_blank" href=(properties[:footer_social_fb])
+              i.facebook.icon
+            a.social__icon target="_blank" href=(properties[:footer_social_tw])
+              i.twitter.square.icon
+
+  .footer-bottom
+    .ui.container
+      .ui.grid
+        .footer-bottom__text.sixteen.wide.column
+          | © #{ Date.today.year } 
+          = properties[:copyright]
+          a.footer-bottom__terms target="_blank" href=properties[:term_path]
+            = properties[:term_text]
+          = properties[:and]
+          a.footer-bottom__policy target="_blank" href=properties[:privacy_path]
+            = properties[:privacy_text]

data/app/components/footer/footer.less

@@ -0,0 +1,150 @@
+@import "mekari_lvsg/ms_base/variables.less";
+
+.footer-top {
+  background-color: @true-blue;
+
+  @media only screen and (min-width: @computerBreakpoint) {
+    padding-top: 34px;
+    padding-bottom: 38px;
+  }
+
+  @media only screen and (max-width: @largestMobileScreen) {
+    padding: 2rem 0;
+  }
+
+  @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+    padding: 50px 0;
+
+    &__social {
+      display: flex;
+    }
+  }
+
+  &__container {
+    padding: 1rem;
+
+    @media only screen and (max-width: @largestTabletScreen) {
+      width: 100%;
+    }
+  }
+
+  &__menu {
+    a {
+      color: @snow-white;
+      font-size: 16px;
+      font-weight: 600;
+
+      &:hover,
+      &:active {
+        color: @smart-green;
+      }
+    }
+
+    @media only screen and (max-width: @largestMobileScreen) {
+      &.ui.menu {
+        .item {
+          padding: 0 0 12px;
+
+          &:last-child {
+            padding-bottom: 0;
+          }
+        }
+      }
+    }
+
+    @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+      &.ui.menu {
+        .item {
+          padding-top: 0;
+          padding-bottom: 0;
+
+          &:first-child {
+            padding-left: 0;
+          }
+        }
+      }
+    }
+  }
+
+  &__social {
+    .social {
+      &__text {
+        color: @mercury-grey;
+        font-size: 16px;
+        font-weight: 300;
+        margin-right: 15px;
+      }
+      &__icon {
+        color: @snow-white;
+        font-size: 30px;
+        @media only screen and (min-width: @computerBreakpoint) {
+          position: relative;
+          top: 3px;
+        }
+        &.active,
+        &:hover {
+          color: @smart-green;
+        }
+      }
+    }
+
+    @media only screen and (max-width: @largestMobileScreen) {
+      display: flex
+    }
+
+    @media only screen and (min-width: @computerBreakpoint) {
+      display: flex;
+      align-items: center;
+      padding: 8px 0;
+    }
+  }
+}
+
+.footer-bottom {
+  background-color: @dark-blue;
+  text-align: center;
+
+  &__text {
+    color: @mercury-grey;
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 300;
+
+    a {
+      color: @snow-white;
+      font-weight: 600;
+      &:hover,
+      &:active {
+        color: @smart-green;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+  .footer-bottom {
+    &__text {
+      margin-bottom: 20px;
+      margin-top: 8px;
+    }
+  }
+}
+
+@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+  .ui.grid {
+    .footer-bottom__text.column {
+      margin-bottom : 15px;
+    }
+  }
+
+  .footer-top {
+    .ui > .grid {
+      margin: 0;
+
+      .column {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+    }
+  }
+}