psique 1.0.0 → 1.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 45c48f298942dab9a7d2bed373906cc97993a75a
-  data.tar.gz: 4b9880b8f21309a31256aab8f05773a593c059d6
+  metadata.gz: b351867c206cd89d1374f9759a5fc2ae2094932a
+  data.tar.gz: 84a1e96bf70fe227a52411297d3599a4ac11597a
 SHA512:
-  metadata.gz: fd32b612c51e0b85ec61cb1937bf9ecf43a4acc6ea6d2e4f0e5dd199bd00a1a8e85df177d5702da794c27354a7372af055ab40451d1f8ff79bf0af174e03f357
-  data.tar.gz: 6140fad793c0b16b25ff577c64d8e5cca6a7ced846792a6425f15a7e2d5dc9e5dfb259673ab7a47e20f1e6448e6208da60d5dd6924b24cc5c45c3917571a8007
+  metadata.gz: c6bdaf2154147c7e6ae3f948b772d125d387ff7082c90abe25de073428ed3c56b9ff01b08cc8a30be8088afd8205736df798e6fdd25b5c35052d907caf5894d8
+  data.tar.gz: dc427d548e5eb99bc54c280ae7cd0b23db5f3736065754e24813d0edde9055636c1a4dd15c178fbc3bb0750f4ebf909dc029eef152801df9fc2bab442e0ccbee

data/app/assets/javascripts/psique/offcanvas.js.coffee

@@ -0,0 +1,47 @@
+do ($ = jQuery, window, document) ->
+
+  # OFF-CANVAS DEFAULTS
+  # ===================
+
+  defaults =
+    menu: 'offcanvas-menu'
+    page: 'offcanvas-page'
+
+  # OFF-CANVAS PUBLIC CLASS DEFINITION
+  # ==================================
+
+  class OffCanvas
+    constructor: (@element) ->
+      @$body    = $ 'body'
+      @$element = $ @element
+      @$menu    = $ @$element.data(defaults.menu)
+      @$page    = $ @$element.data(defaults.page)
+      @init()
+
+    init: ->
+      @resize(@$page)
+
+      @$menu.addClass(defaults.menu).appendTo(@$body)
+      @$page.addClass(defaults.page)
+      @$body.addClass('offcanvas')
+
+      @$element.on click: (event) =>
+        event.stopPropagation()
+        @open()
+      @$page.on click: => @close()
+
+    open: ->
+      @$body.toggleClass('is-open')
+
+    close: ->
+      @$body.removeClass('is-open')
+
+    resize: ($item) ->
+      $(window).on 'load resize': =>
+        $item.css('min-height', window.innerHeight)
+
+  # OFF-CANVAS AUTOLOAD
+  # ===================
+
+  if $("[data-#{defaults.menu}]").length > 0
+    new OffCanvas("[data-#{defaults.menu}]")

data/app/assets/javascripts/psique/psique.js.coffee

@@ -0,0 +1 @@
+#= require psique/offcanvas

data/app/assets/stylesheets/psique/components/_button.scss

@@ -40,6 +40,20 @@
   }
 }
 
+// ----- Button menu toggle ----- //
+
+.btn-menu {
+  background: none;
+  border: 0;
+
+  &:focus { outline: 0; }
+
+  .icon {
+    color: $btn-menu-color;
+    font-size: em(28px);
+  }
+}
+
 // -------------------------------------
 //   Modifiers
 // -------------------------------------

data/app/assets/stylesheets/psique/foundation/_config.scss

@@ -17,3 +17,36 @@ $kashmir: #486197;
 $matisse: #21689d;
 $seashell: #f1f1f1;
 $vermilion: #fa4a00;
+
+// ----- Structures ----- //
+
+// Offcanvas
+
+$offcanvas-menu-background: $matisse;
+$offcanvas-page-background: #fff;
+
+// Menu
+
+$menu--side-background: $matisse;
+$menu-sub-background: #4e4e4e;
+$menu-item-color: #fff;
+
+// Search
+
+$search-background: #2e2e2e;
+$search-input-background: #4e4e4e;
+$search-button-background: #2e2e2e;
+
+// ----- Components ----- //
+
+// Button menu toggle
+
+$btn-menu-color: $matisse;
+
+// -------------------------------------
+//   Structures
+// -------------------------------------
+
+// ----- Offcanvas ----- //
+
+$offcanvas-width: em(260px);

data/app/assets/stylesheets/psique/foundation/_tools.scss

@@ -0,0 +1,15 @@
+// *************************************
+//
+//   Tools
+//   -> Global utilities
+//
+// *************************************
+
+// -------------------------------------
+//   Positioning
+// -------------------------------------
+
+.poar {
+  position: absolute;
+  right: 0;
+}

data/app/assets/stylesheets/psique/psique.scss

@@ -10,6 +10,7 @@
 // -------------------------------------
 
 @import 'normalize-rails';
+@import 'font-awesome';
 @import 'bourbon';
 @import 'neat';
 
@@ -34,10 +35,16 @@
 //   Structures
 // -------------------------------------
 
+@import 'structures/menu';
+@import 'structures/offcanvas';
+@import 'structures/search';
+
 // -------------------------------------
 //   Foundation - Tools
 // -------------------------------------
 
+@import 'foundation/tools';
+
 // -------------------------------------
 //   Inbox
 // -------------------------------------

data/app/assets/stylesheets/psique/structures/_menu.scss

@@ -0,0 +1,73 @@
+// *************************************
+//
+//   Menu
+//   -> Space for user navigation
+//
+// *************************************
+
+// -------------------------------------
+//   Base
+// -------------------------------------
+
+.menu {
+  margin: 0;
+  padding: 0;
+}
+
+// -------------------------------------
+//   Modifiers
+// -------------------------------------
+
+// ----- Side ----- //
+
+.menu--side {
+  background: $menu--side-background;
+
+  // Scaffolding
+
+  .menu-item {
+    display: block;
+    position: relative;
+    a { border-bottom: 1px solid darken($menu--side-background, 15%); }
+    .fa { right: 1em; }
+  }
+}
+
+// -------------------------------------
+//   Scaffolding
+// -------------------------------------
+
+// ----- Menu item ----- //
+
+.menu-item {
+  @include appearance(none);
+  color: $menu-item-color;
+  display: inline-block;
+
+  > a {
+    color: $menu-item-color;
+    display: block;
+    padding: 1em;
+    text-decoration: none;
+  }
+}
+
+// ----- Submenu ----- //
+
+.menu-sub {
+  background-color: $menu-sub-background;
+  display: none;
+
+  .menu-item {
+    background-color: $menu-sub-background;
+    a { border-bottom-color: lighten($menu-sub-background, 10%); }
+  }
+}
+
+// -------------------------------------
+//   States
+// -------------------------------------
+
+// ----- Is active ----- //
+
+.menu-sub.is-active {  display: block; }

data/app/assets/stylesheets/psique/structures/_offcanvas.scss

@@ -0,0 +1,79 @@
+// *************************************
+//
+//   Offcanvas
+//   -> Setting up an off-canvas layout
+//
+// *************************************
+
+// -------------------------------------
+//   Base
+// -------------------------------------
+
+.offcanvas {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+// -------------------------------------
+//   Scaffolding
+// -------------------------------------
+
+// ----- Menu ----- //
+
+.offcanvas-menu {
+  @include backface-visibility(hidden);
+  @include transition(opacity .001s linear .2s);
+  background: $offcanvas-menu-background;
+  display: block !important;
+  height: 100%;
+  opacity: 0;
+  overflow-y: auto;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  width: $offcanvas-width;
+  z-index: -1;
+}
+
+// ----- Page ----- //
+
+.offcanvas-page {
+  @include transition(transform .2s ease);
+  @include backface-visibility(hidden);
+  background: $offcanvas-page-background;
+  box-shadow: 0 0 em(8px) rgba(0, 0, 0, .5);
+  height: 100%;
+  position: relative;
+  z-index: 1;
+}
+
+// -------------------------------------
+//   States
+// -------------------------------------
+
+// ----- Is open ----- //
+
+.offcanvas.is-open {
+
+  // Offcanvas is open
+
+  overflow: hidden;
+
+  // Menu is open
+
+  .offcanvas-menu {
+    @include transition(opacity .001s linear 0s);
+    opacity: 1;
+    pointer-events: all;
+    z-index: 0;
+  }
+
+  // Page is open
+
+  .offcanvas-page {
+    @include transform(translateX($offcanvas-width));
+    * { pointer-events: none; }
+  }
+}

data/app/assets/stylesheets/psique/structures/_search.scss

@@ -0,0 +1,45 @@
+// *************************************
+//
+//   Search
+//   -> Styles for a search box
+//
+// *************************************
+
+// -------------------------------------
+//   Base
+// -------------------------------------
+
+.search {
+  @include outer-container;
+  background-color: $search-background;
+  height: 50px;
+  overflow: hidden;
+  padding: .65em .85em;
+}
+
+// -------------------------------------
+//   Scaffolding
+// -------------------------------------
+
+// ----- Search input ----- //
+
+.search-input {
+  @include span-columns(10);
+  background-color: $search-input-background;
+  border: 0;
+  border-radius: 0;
+  color: #fff;
+  height: 30px;
+}
+
+// ----- Search button ----- //
+
+.search-button {
+  @include span-columns(2);
+  background-color: $search-button-background;
+  border: 0;
+  color: #fff;
+  font-size: 22px;
+  outline: 0;
+  text-align: right;
+}

data/app/helpers/psique/application_helper.rb

@@ -1,7 +1,7 @@
 module Psique
   module ApplicationHelper
-    def ui_element(slug, properties = {})
-      render "psique/elements/#{slug}", properties
+    def ui_element(slug, options = {})
+      render "psique/elements/#{ slug }", options
     end
   end
 end

data/app/views/psique/elements/_search_box.html.haml

@@ -0,0 +1,4 @@
+= form_tag(options[:url], class: 'search', method: :get) do
+  = search_field_tag 'q', nil, class: 'form-input search-input', placeholder: 'Buscar...'
+  = button_tag '', class: 'search-button' do
+    = fa_icon 'search', class: 'icon'

data/app/views/psique/elements/navigation/_item.html.haml

@@ -0,0 +1,8 @@
+%li.menu-item
+  = link_to item[:url], { title: item[:title] } do
+    = item[:name]
+    = fa_icon 'angle-double-down', class: 'poar' if item[:submenu]
+
+  - if item[:submenu]
+    %ul.menu.menu-sub{ class: ('is-active' if item[:active]) }
+      = render partial: 'psique/elements/navigation/item', collection: item[:submenu]

data/app/views/psique/elements/navigation/_mobile.html.haml

@@ -0,0 +1,9 @@
+%button{ class: 'btn-menu', data: { offcanvas: { menu: "##{options[:id]}", page: "##{options[:target]}" } } }
+  = fa_icon 'navicon', class: 'icon'
+
+%nav{ id: options[:id], role: 'navigation', style: 'display: none' }
+  - if options[:searcher]
+    = ui_element('search_box', options: options[:searcher])
+
+  %ul.menu.menu--side
+    = render partial: 'psique/elements/navigation/item', collection: options[:items]

data/lib/psique/version.rb

@@ -1,3 +1,3 @@
 module Psique
-  VERSION = '1.0.0'
+  VERSION = '1.0.1'
 end

data/lib/psique.rb

@@ -1,5 +1,6 @@
 require 'sass-rails'
 require 'normalize-rails'
+require 'font-awesome-rails'
 require 'haml'
 require 'bourbon'
 require 'neat'

data/test/dummy/app/views/layouts/application.html.haml

@@ -0,0 +1,13 @@
+!!!
+%html
+  %head
+    %title Dummy
+    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' }
+    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
+    = csrf_meta_tags
+
+  %body
+    = yield
+
+  %script{ src: '//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js' }
+  = javascript_include_tag 'application', 'data-turbolinks-track' => false

data/test/dummy/app/views/test/index.html.haml

@@ -0,0 +1,11 @@
+- buscador = { url: '/buscar',  }
+
+- menu = { id: 'menu1', target: 'main', searcher: buscador,
+           items: [{ name: 'Blogs', url: '#', submenu: [{ name: 'Principal', url: '#' }, { name: 'Secundario', url: '#' }] }, { name: 'Foros', url: root_path }] }
+#main
+  %header.mobile-header
+    .container
+      .col-3= ui_element('navigation/mobile', options: menu)
+      .col-6= image_tag 'logo-mobile.jpg', class: 'logo'
+
+  = image_tag 'mockup.png', class: 'logo'