more-responsive-less-ui 0.0.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 108b5c81e807b5e6dac95c956df8dd7d36b27cf6
+  data.tar.gz: 3b2c3f7c0d1bd67b812d825d61bfdb85524c0a46
+SHA512:
+  metadata.gz: 33a2cef60854a8009188d48e582ac1ced22a46f21bcf677dcba7187650630016c9bd63a66850bf804b8c92c7ec6cdd1228709ffcb12e67849cc82c47897ba39a
+  data.tar.gz: 48382317a08267294fcfb09cc56287f05fe176cdd60fd059dc7c218beadb1b9f88d476c394c68c598bbd7bf0e6aa88ca2cb5d7b6385c374ed3aba15748219807

data/..gemspec

@@ -0,0 +1,23 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require './version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "."
+  spec.version       = .::VERSION
+  spec.authors       = ["d-theus"]
+  spec.email         = ["slma0x02@gmail.com"]
+  spec.summary       = %q{TODO: Write a short summary. Required.}
+  spec.description   = %q{TODO: Write a longer description. Optional.}
+  spec.homepage      = ""
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0")
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.7"
+  spec.add_development_dependency "rake", "~> 10.0"
+end

data/.gitignore

@@ -0,0 +1,14 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+*.bundle
+*.so
+*.o
+*.a
+mkmf.log

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in more-responsive-less-ui.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2015 d-theus
+
+MIT License
+
+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,31 @@
+# More::Responsive::Less::Ui
+
+TODO: Write a gem description
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'more-responsive-less-ui'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install more-responsive-less-ui
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Contributing
+
+1. Fork it ( https://github.com/[my-github-username]/more-responsive-less-ui/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request

data/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+

data/app/assets/javascripts/elements/collapse.js.coffee

@@ -0,0 +1,12 @@
+ready = ()->
+  toggles = document.getElementsByClassName('toggle')
+  Array.prototype.forEach.call(toggles, (t)->
+    collapse_id = t.dataset.collapse
+    collapse = document.getElementById(collapse_id)
+    t.onclick = ->
+        $(collapse).toggleClass('rolled-down')
+        $(t).toggleClass('rotated')
+  )
+
+$(document).on 'page:load', ready
+$(document).ready ready

data/app/assets/javascripts/elements/contextmenu.js.coffee

@@ -0,0 +1,19 @@
+ready = () ->
+  menus = document.getElementsByClassName('context-menu')
+  Array.prototype.forEach.call(menus, (menu)->
+    context_id = menu.dataset.context
+    context    = document.getElementById(context_id)
+    $(context).on 'click', (e)->
+      $(menu).css {
+        top:  e.pageY,
+        left: e.pageX
+      }
+      $(menu).addClass('opened')
+      e.stopPropagation()
+
+    $(window).on 'click', ->
+      $(menu).removeClass('opened')
+  )
+
+$(document).on 'page:load', ready
+$(document).ready ready

data/app/assets/javascripts/more-responsive-ui.js.coffee

@@ -0,0 +1,2 @@
+#= require 'collapse.js'
+#= require 'contextmenu.js'

data/app/assets/stylesheets/elements/buttons.less

@@ -0,0 +1,39 @@
+@btn-text: @clprim1;
+.btn{
+  color: @btn-text;
+  background: @clseca3;
+  border-radius: 4px;
+  border:       none;
+
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  font-family: 'Quicksand';
+  padding: 3px;
+  &:hover{
+    background: lighten(@clseca3, 10%);
+  }
+
+  .icon, .icon-16, .icon-24, .icon-32, .icon-48{
+    svg{
+      fill: @btn-text;
+    }
+  }
+}
+
+.btn-small{
+  .btn;
+  border-radius: 12px;
+  min-width: 21px;
+  padding: 0;
+}
+
+.btn-bold{
+  font-weight: bold;
+}
+
+.btn-danger{
+  color: @clprim4;
+  background: @clprim3;
+}

data/app/assets/stylesheets/elements/collapse.less

@@ -0,0 +1,64 @@
+.collapse{
+  @media(min-width: @media-bp){
+    flex-direction: row-reverse;
+    .toggle { visibility: hidden }
+    * :not(.toggle){
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+  }
+
+  @media (max-width: @media-bp) and (min-width: 480px),
+  (max-device-width: 8in){
+    flex-direction: row;
+    align-items: center;
+    .toggle {
+      visibility: visible;
+    }
+
+    .collapses {
+      visibility: hidden;
+
+      position: absolute;
+      top: @header-height + 10px;
+      width: 100%;
+      left: 0px;
+      margin: 0px;
+      padding: 0px;
+      flex-direction: column;
+
+      float: none;
+      z-index: 100;
+
+      li,div:not(.toggle){
+        padding: 0px 10px;
+        position: relative;
+        width: 100%;
+        min-height: @header-height;
+        left: 0px;
+        border-bottom: 1px solid @clprim2;
+      }
+    }
+  }
+
+  .rolled-down{
+    visibility: visible;
+    transform-origin: 50% 0;
+    animation: rollDown 0.1s ease-in-out forwards;
+  }
+
+  .rotated{
+    transform-origin: 50% 50%;
+    animation: rotate 0.1s ease-in-out forwards;
+  }
+}
+
+@keyframes rollDown{
+  from { transform: scaleY(0) }
+  to   { transform: scaleY(1) }
+}
+
+@keyframes rotate{
+  from { }
+  to {   transform: rotate(-90deg) }
+}

data/app/assets/stylesheets/elements/contextmenu.less

@@ -0,0 +1,56 @@
+.context-menu{
+  position: absolute;
+  visibility: hidden;
+  z-index: 100;
+
+  background: @clprim1;
+  border: 1px solid @clprim2;
+  border-radius: 4px;
+  border-top-left-radius: 0px;
+
+  ul{
+    position: relative;
+    padding: 5px 4px;
+    margin: 0px 4px;
+
+    li{
+      width: 100%;
+      position: relative;
+
+      list-style: none;
+      border-bottom: 1px solid lighten(@clprim2, 10);
+      &:last-of-type{ border-bottom: none }
+      a{
+        width: 100%;
+        display: inline-flex;
+        flex-direction: row;
+        align-content: flex-start;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: nowrap;
+
+        padding: 3px;
+
+        &:hover{
+          color: @clprim1;
+          background: @text;
+          svg { fill: @clprim1 }
+        }
+      }
+    }
+
+    &.disabled{
+      &:hover {}
+    }
+  }
+}
+
+@keyframes slideRight{
+  from { transform: scaleX(0) }
+  to { transform: scaleX(1) }
+}
+.opened{
+  visibility: visible;
+  transform-origin: 0 50%;
+  animation: slideRight 0.05s ease-out forwards;
+}

data/app/assets/stylesheets/elements/fonts.less

@@ -0,0 +1,58 @@
+@font-face {
+  font-family: 'Cutive Mono';
+  src: font-url('CutiveMono-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Quicksand';
+  src: font-url('Quicksand-Regular.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Quicksand';
+  src: font-url('Quicksand-Bold.otf') format('opentype');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Quicksand';
+  src: font-url('Quicksand-Light.otf') format('opentype');
+  font-style: oblique;
+}
+
+@font-face {
+  font-family: 'Libre Baskerville';
+  src: font-url('LibreBaskerville-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Libre Baskerville';
+  src: font-url('LibreBaskerville-Bold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Libre Baskerville';
+  src: font-url('LibreBaskerville-Italic.ttf') format('truetype');
+  font-weight: normal;
+  font-style: italic;
+}
+
+@media(max-device-width: 8in){
+  html{
+    body {
+      span,p,a { font-size: 36pt; }
+    }
+    article {
+      span,p,a { font-size: 32pt;}
+    }
+  }
+}

data/app/assets/stylesheets/elements/icons.less

@@ -0,0 +1,66 @@
+.icon{
+  display: inline-block;
+  content: ' ';
+  svg {
+    position: relative;
+    width: 100% ;
+    height: 100% ;
+    top: 0;
+    left: 0;
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.icon-16{
+  .icon;
+  width: 16px;
+  height: 16px;
+}
+
+.icon-24{
+  .icon;
+  width: 24px;
+  height: 24px;
+}
+
+.icon-32{
+  .icon;
+  width: 32px;
+  height: 32px;
+}
+
+.icon-48{
+  .icon;
+  width: 48px;
+  height: 48px;
+}
+
+.icon-56{
+  .icon;
+  width: 56px;
+  height: 56px;
+}
+
+.icon-64{
+  .icon;
+  width: 64px;
+  height: 64px;
+}
+
+.icon-72{
+  .icon;
+  width: 72px;
+  height: 72px;
+}
+
+.icon-86{
+  .icon;
+  width: 86px;
+  height: 86px;
+}
+.icon-96{
+  .icon;
+  width: 96px;
+  height: 96px;
+}

data/app/assets/stylesheets/elements/navbar.less

@@ -0,0 +1,67 @@
+@import 'collapse.less';
+
+header{
+  display: flex;
+  height: @header-height;
+  position: relative;
+  border-bottom: 2px solid @clprim2;
+
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: stretch;
+  flex-wrap: nowrap;
+
+  .logo{
+    flex-grow: 100;
+    display: inline-block;
+    height: 100%;
+    width: 200px;
+    overflow: visible;
+    color: @clprim3;
+    content: ' ';
+    background-repeat: no-repeat;
+    background-size: contain;
+    @media (max-width: 2048px) and (min-width: 720px){
+      background-image: image-url('logo.svg');
+    }
+    @media (max-width: 720px){
+      background-image: image-url('logo-sm.svg');
+    }
+  }
+
+  nav {
+    flex-grow: 1;
+    display: flex;
+    height: 100%;
+    ul {
+      height: 100%;
+      padding: 0;
+      margin: 0;
+      display: flex;
+    }
+    li{
+      background: @clprim1;
+      &:hover{
+        background: @text;
+        a { color:      @clprim1; }
+      }
+      a{
+        display: flex;
+        padding: 0 3px;
+        list-style: none;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    .icon,
+    .icon-16,
+    .icon-24,
+    .icon-32,
+    .icon-48{
+      fill: @text;
+    }
+  }
+  .clearfix;
+}

data/app/assets/stylesheets/more-responsive-ui.less

@@ -0,0 +1,6 @@
+    @import 'elements/buttons.less'
+    @import 'elements/collapse.less'
+    @import 'elements/contextmenu.less'
+    @import 'elements/fonts.less'
+    @import 'elements/icons.less'
+    @import 'elements/navbar.less'

data/lib/..rb

@@ -0,0 +1,5 @@
+require "./version"
+
+module .
+  # Your code goes here...
+end

data/lib/more-responsive-less-ui.rb

@@ -0,0 +1,4 @@
+require_relative "./version"
+
+module MoreResponsiveLessUI
+end

data/lib/version.rb

@@ -0,0 +1,3 @@
+module MoreResponsiveLessUI
+  VERSION = "0.0.2"
+end

data/more-responsive-less-ui.gemspec

@@ -0,0 +1,25 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "more-responsive-less-ui"
+  spec.version       = MoreResponsiveLessUI::VERSION
+  spec.authors       = ["d-theus"]
+  spec.email         = ["slma0x02@gmail.com"]
+  spec.summary       = %q{Simple and responsive web ui framework}
+  spec.homepage      = ""
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0")
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ["lib"]
+
+  spec.add_dependency "less-rails" 
+  spec.add_dependency "coffee-rails" 
+
+  spec.add_development_dependency "bundler", "~> 1.7"
+  spec.add_development_dependency "rake", "~> 10.0"
+end

metadata

@@ -0,0 +1,121 @@
+--- !ruby/object:Gem::Specification
+name: more-responsive-less-ui
+version: !ruby/object:Gem::Version
+  version: 0.0.2
+platform: ruby
+authors:
+- d-theus
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-04-17 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: less-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: coffee-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.7'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.7'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '10.0'
+description: 
+email:
+- slma0x02@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ..gemspec
+- .gitignore
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- app/assets/javascripts/elements/collapse.js.coffee
+- app/assets/javascripts/elements/contextmenu.js.coffee
+- app/assets/javascripts/more-responsive-ui.js.coffee
+- app/assets/stylesheets/elements/buttons.less
+- app/assets/stylesheets/elements/collapse.less
+- app/assets/stylesheets/elements/contextmenu.less
+- app/assets/stylesheets/elements/fonts.less
+- app/assets/stylesheets/elements/icons.less
+- app/assets/stylesheets/elements/navbar.less
+- app/assets/stylesheets/more-responsive-ui.less
+- lib/..rb
+- lib/more-responsive-less-ui.rb
+- lib/version.rb
+- more-responsive-less-ui.gemspec
+homepage: ''
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.0.14
+signing_key: 
+specification_version: 4
+summary: Simple and responsive web ui framework
+test_files: []
+has_rdoc: