more-responsive-less-ui 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 108b5c81e807b5e6dac95c956df8dd7d36b27cf6
4
+ data.tar.gz: 3b2c3f7c0d1bd67b812d825d61bfdb85524c0a46
5
+ SHA512:
6
+ metadata.gz: 33a2cef60854a8009188d48e582ac1ced22a46f21bcf677dcba7187650630016c9bd63a66850bf804b8c92c7ec6cdd1228709ffcb12e67849cc82c47897ba39a
7
+ data.tar.gz: 48382317a08267294fcfb09cc56287f05fe176cdd60fd059dc7c218beadb1b9f88d476c394c68c598bbd7bf0e6aa88ca2cb5d7b6385c374ed3aba15748219807
data/..gemspec ADDED
@@ -0,0 +1,23 @@
1
+ # coding: utf-8
2
+ lib = File.expand_path('../lib', __FILE__)
3
+ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
+ require './version'
5
+
6
+ Gem::Specification.new do |spec|
7
+ spec.name = "."
8
+ spec.version = .::VERSION
9
+ spec.authors = ["d-theus"]
10
+ spec.email = ["slma0x02@gmail.com"]
11
+ spec.summary = %q{TODO: Write a short summary. Required.}
12
+ spec.description = %q{TODO: Write a longer description. Optional.}
13
+ spec.homepage = ""
14
+ spec.license = "MIT"
15
+
16
+ spec.files = `git ls-files -z`.split("\x0")
17
+ spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
18
+ spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
19
+ spec.require_paths = ["lib"]
20
+
21
+ spec.add_development_dependency "bundler", "~> 1.7"
22
+ spec.add_development_dependency "rake", "~> 10.0"
23
+ end
data/.gitignore ADDED
@@ -0,0 +1,14 @@
1
+ /.bundle/
2
+ /.yardoc
3
+ /Gemfile.lock
4
+ /_yardoc/
5
+ /coverage/
6
+ /doc/
7
+ /pkg/
8
+ /spec/reports/
9
+ /tmp/
10
+ *.bundle
11
+ *.so
12
+ *.o
13
+ *.a
14
+ mkmf.log
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in more-responsive-less-ui.gemspec
4
+ gemspec
data/LICENSE.txt ADDED
@@ -0,0 +1,22 @@
1
+ Copyright (c) 2015 d-theus
2
+
3
+ MIT License
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining
6
+ a copy of this software and associated documentation files (the
7
+ "Software"), to deal in the Software without restriction, including
8
+ without limitation the rights to use, copy, modify, merge, publish,
9
+ distribute, sublicense, and/or sell copies of the Software, and to
10
+ permit persons to whom the Software is furnished to do so, subject to
11
+ the following conditions:
12
+
13
+ The above copyright notice and this permission notice shall be
14
+ included in all copies or substantial portions of the Software.
15
+
16
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,31 @@
1
+ # More::Responsive::Less::Ui
2
+
3
+ TODO: Write a gem description
4
+
5
+ ## Installation
6
+
7
+ Add this line to your application's Gemfile:
8
+
9
+ ```ruby
10
+ gem 'more-responsive-less-ui'
11
+ ```
12
+
13
+ And then execute:
14
+
15
+ $ bundle
16
+
17
+ Or install it yourself as:
18
+
19
+ $ gem install more-responsive-less-ui
20
+
21
+ ## Usage
22
+
23
+ TODO: Write usage instructions here
24
+
25
+ ## Contributing
26
+
27
+ 1. Fork it ( https://github.com/[my-github-username]/more-responsive-less-ui/fork )
28
+ 2. Create your feature branch (`git checkout -b my-new-feature`)
29
+ 3. Commit your changes (`git commit -am 'Add some feature'`)
30
+ 4. Push to the branch (`git push origin my-new-feature`)
31
+ 5. Create a new Pull Request
data/Rakefile ADDED
@@ -0,0 +1,2 @@
1
+ require "bundler/gem_tasks"
2
+
@@ -0,0 +1,12 @@
1
+ ready = ()->
2
+ toggles = document.getElementsByClassName('toggle')
3
+ Array.prototype.forEach.call(toggles, (t)->
4
+ collapse_id = t.dataset.collapse
5
+ collapse = document.getElementById(collapse_id)
6
+ t.onclick = ->
7
+ $(collapse).toggleClass('rolled-down')
8
+ $(t).toggleClass('rotated')
9
+ )
10
+
11
+ $(document).on 'page:load', ready
12
+ $(document).ready ready
@@ -0,0 +1,19 @@
1
+ ready = () ->
2
+ menus = document.getElementsByClassName('context-menu')
3
+ Array.prototype.forEach.call(menus, (menu)->
4
+ context_id = menu.dataset.context
5
+ context = document.getElementById(context_id)
6
+ $(context).on 'click', (e)->
7
+ $(menu).css {
8
+ top: e.pageY,
9
+ left: e.pageX
10
+ }
11
+ $(menu).addClass('opened')
12
+ e.stopPropagation()
13
+
14
+ $(window).on 'click', ->
15
+ $(menu).removeClass('opened')
16
+ )
17
+
18
+ $(document).on 'page:load', ready
19
+ $(document).ready ready
@@ -0,0 +1,2 @@
1
+ #= require 'collapse.js'
2
+ #= require 'contextmenu.js'
@@ -0,0 +1,39 @@
1
+ @btn-text: @clprim1;
2
+ .btn{
3
+ color: @btn-text;
4
+ background: @clseca3;
5
+ border-radius: 4px;
6
+ border: none;
7
+
8
+ display: inline-flex;
9
+ flex-direction: row;
10
+ justify-content: space-around;
11
+ align-items: center;
12
+ font-family: 'Quicksand';
13
+ padding: 3px;
14
+ &:hover{
15
+ background: lighten(@clseca3, 10%);
16
+ }
17
+
18
+ .icon, .icon-16, .icon-24, .icon-32, .icon-48{
19
+ svg{
20
+ fill: @btn-text;
21
+ }
22
+ }
23
+ }
24
+
25
+ .btn-small{
26
+ .btn;
27
+ border-radius: 12px;
28
+ min-width: 21px;
29
+ padding: 0;
30
+ }
31
+
32
+ .btn-bold{
33
+ font-weight: bold;
34
+ }
35
+
36
+ .btn-danger{
37
+ color: @clprim4;
38
+ background: @clprim3;
39
+ }
@@ -0,0 +1,64 @@
1
+ .collapse{
2
+ @media(min-width: @media-bp){
3
+ flex-direction: row-reverse;
4
+ .toggle { visibility: hidden }
5
+ * :not(.toggle){
6
+ margin-left: 5px;
7
+ margin-right: 5px;
8
+ }
9
+ }
10
+
11
+ @media (max-width: @media-bp) and (min-width: 480px),
12
+ (max-device-width: 8in){
13
+ flex-direction: row;
14
+ align-items: center;
15
+ .toggle {
16
+ visibility: visible;
17
+ }
18
+
19
+ .collapses {
20
+ visibility: hidden;
21
+
22
+ position: absolute;
23
+ top: @header-height + 10px;
24
+ width: 100%;
25
+ left: 0px;
26
+ margin: 0px;
27
+ padding: 0px;
28
+ flex-direction: column;
29
+
30
+ float: none;
31
+ z-index: 100;
32
+
33
+ li,div:not(.toggle){
34
+ padding: 0px 10px;
35
+ position: relative;
36
+ width: 100%;
37
+ min-height: @header-height;
38
+ left: 0px;
39
+ border-bottom: 1px solid @clprim2;
40
+ }
41
+ }
42
+ }
43
+
44
+ .rolled-down{
45
+ visibility: visible;
46
+ transform-origin: 50% 0;
47
+ animation: rollDown 0.1s ease-in-out forwards;
48
+ }
49
+
50
+ .rotated{
51
+ transform-origin: 50% 50%;
52
+ animation: rotate 0.1s ease-in-out forwards;
53
+ }
54
+ }
55
+
56
+ @keyframes rollDown{
57
+ from { transform: scaleY(0) }
58
+ to { transform: scaleY(1) }
59
+ }
60
+
61
+ @keyframes rotate{
62
+ from { }
63
+ to { transform: rotate(-90deg) }
64
+ }
@@ -0,0 +1,56 @@
1
+ .context-menu{
2
+ position: absolute;
3
+ visibility: hidden;
4
+ z-index: 100;
5
+
6
+ background: @clprim1;
7
+ border: 1px solid @clprim2;
8
+ border-radius: 4px;
9
+ border-top-left-radius: 0px;
10
+
11
+ ul{
12
+ position: relative;
13
+ padding: 5px 4px;
14
+ margin: 0px 4px;
15
+
16
+ li{
17
+ width: 100%;
18
+ position: relative;
19
+
20
+ list-style: none;
21
+ border-bottom: 1px solid lighten(@clprim2, 10);
22
+ &:last-of-type{ border-bottom: none }
23
+ a{
24
+ width: 100%;
25
+ display: inline-flex;
26
+ flex-direction: row;
27
+ align-content: flex-start;
28
+ justify-content: space-between;
29
+ align-items: center;
30
+ flex-wrap: nowrap;
31
+
32
+ padding: 3px;
33
+
34
+ &:hover{
35
+ color: @clprim1;
36
+ background: @text;
37
+ svg { fill: @clprim1 }
38
+ }
39
+ }
40
+ }
41
+
42
+ &.disabled{
43
+ &:hover {}
44
+ }
45
+ }
46
+ }
47
+
48
+ @keyframes slideRight{
49
+ from { transform: scaleX(0) }
50
+ to { transform: scaleX(1) }
51
+ }
52
+ .opened{
53
+ visibility: visible;
54
+ transform-origin: 0 50%;
55
+ animation: slideRight 0.05s ease-out forwards;
56
+ }
@@ -0,0 +1,58 @@
1
+ @font-face {
2
+ font-family: 'Cutive Mono';
3
+ src: font-url('CutiveMono-Regular.ttf') format('truetype');
4
+ font-weight: normal;
5
+ font-style: normal;
6
+ }
7
+
8
+ @font-face {
9
+ font-family: 'Quicksand';
10
+ src: font-url('Quicksand-Regular.otf') format('opentype');
11
+ font-weight: normal;
12
+ font-style: normal;
13
+ }
14
+
15
+ @font-face {
16
+ font-family: 'Quicksand';
17
+ src: font-url('Quicksand-Bold.otf') format('opentype');
18
+ font-weight: bold;
19
+ font-style: normal;
20
+ }
21
+
22
+ @font-face {
23
+ font-family: 'Quicksand';
24
+ src: font-url('Quicksand-Light.otf') format('opentype');
25
+ font-style: oblique;
26
+ }
27
+
28
+ @font-face {
29
+ font-family: 'Libre Baskerville';
30
+ src: font-url('LibreBaskerville-Regular.ttf') format('truetype');
31
+ font-weight: normal;
32
+ font-style: normal;
33
+ }
34
+
35
+ @font-face {
36
+ font-family: 'Libre Baskerville';
37
+ src: font-url('LibreBaskerville-Bold.ttf') format('truetype');
38
+ font-weight: bold;
39
+ font-style: normal;
40
+ }
41
+
42
+ @font-face {
43
+ font-family: 'Libre Baskerville';
44
+ src: font-url('LibreBaskerville-Italic.ttf') format('truetype');
45
+ font-weight: normal;
46
+ font-style: italic;
47
+ }
48
+
49
+ @media(max-device-width: 8in){
50
+ html{
51
+ body {
52
+ span,p,a { font-size: 36pt; }
53
+ }
54
+ article {
55
+ span,p,a { font-size: 32pt;}
56
+ }
57
+ }
58
+ }
@@ -0,0 +1,66 @@
1
+ .icon{
2
+ display: inline-block;
3
+ content: ' ';
4
+ svg {
5
+ position: relative;
6
+ width: 100% ;
7
+ height: 100% ;
8
+ top: 0;
9
+ left: 0;
10
+ padding: 0;
11
+ margin: 0;
12
+ }
13
+ }
14
+
15
+ .icon-16{
16
+ .icon;
17
+ width: 16px;
18
+ height: 16px;
19
+ }
20
+
21
+ .icon-24{
22
+ .icon;
23
+ width: 24px;
24
+ height: 24px;
25
+ }
26
+
27
+ .icon-32{
28
+ .icon;
29
+ width: 32px;
30
+ height: 32px;
31
+ }
32
+
33
+ .icon-48{
34
+ .icon;
35
+ width: 48px;
36
+ height: 48px;
37
+ }
38
+
39
+ .icon-56{
40
+ .icon;
41
+ width: 56px;
42
+ height: 56px;
43
+ }
44
+
45
+ .icon-64{
46
+ .icon;
47
+ width: 64px;
48
+ height: 64px;
49
+ }
50
+
51
+ .icon-72{
52
+ .icon;
53
+ width: 72px;
54
+ height: 72px;
55
+ }
56
+
57
+ .icon-86{
58
+ .icon;
59
+ width: 86px;
60
+ height: 86px;
61
+ }
62
+ .icon-96{
63
+ .icon;
64
+ width: 96px;
65
+ height: 96px;
66
+ }
@@ -0,0 +1,67 @@
1
+ @import 'collapse.less';
2
+
3
+ header{
4
+ display: flex;
5
+ height: @header-height;
6
+ position: relative;
7
+ border-bottom: 2px solid @clprim2;
8
+
9
+ flex-direction: row;
10
+ justify-content: space-between;
11
+ align-items: stretch;
12
+ flex-wrap: nowrap;
13
+
14
+ .logo{
15
+ flex-grow: 100;
16
+ display: inline-block;
17
+ height: 100%;
18
+ width: 200px;
19
+ overflow: visible;
20
+ color: @clprim3;
21
+ content: ' ';
22
+ background-repeat: no-repeat;
23
+ background-size: contain;
24
+ @media (max-width: 2048px) and (min-width: 720px){
25
+ background-image: image-url('logo.svg');
26
+ }
27
+ @media (max-width: 720px){
28
+ background-image: image-url('logo-sm.svg');
29
+ }
30
+ }
31
+
32
+ nav {
33
+ flex-grow: 1;
34
+ display: flex;
35
+ height: 100%;
36
+ ul {
37
+ height: 100%;
38
+ padding: 0;
39
+ margin: 0;
40
+ display: flex;
41
+ }
42
+ li{
43
+ background: @clprim1;
44
+ &:hover{
45
+ background: @text;
46
+ a { color: @clprim1; }
47
+ }
48
+ a{
49
+ display: flex;
50
+ padding: 0 3px;
51
+ list-style: none;
52
+ height: 100%;
53
+ align-items: center;
54
+ justify-content: center;
55
+ }
56
+ }
57
+
58
+ .icon,
59
+ .icon-16,
60
+ .icon-24,
61
+ .icon-32,
62
+ .icon-48{
63
+ fill: @text;
64
+ }
65
+ }
66
+ .clearfix;
67
+ }
@@ -0,0 +1,6 @@
1
+ @import 'elements/buttons.less'
2
+ @import 'elements/collapse.less'
3
+ @import 'elements/contextmenu.less'
4
+ @import 'elements/fonts.less'
5
+ @import 'elements/icons.less'
6
+ @import 'elements/navbar.less'
data/lib/..rb ADDED
@@ -0,0 +1,5 @@
1
+ require "./version"
2
+
3
+ module .
4
+ # Your code goes here...
5
+ end
@@ -0,0 +1,4 @@
1
+ require_relative "./version"
2
+
3
+ module MoreResponsiveLessUI
4
+ end
data/lib/version.rb ADDED
@@ -0,0 +1,3 @@
1
+ module MoreResponsiveLessUI
2
+ VERSION = "0.0.2"
3
+ end
@@ -0,0 +1,25 @@
1
+ # coding: utf-8
2
+ lib = File.expand_path('../lib', __FILE__)
3
+ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
+ require 'version'
5
+
6
+ Gem::Specification.new do |spec|
7
+ spec.name = "more-responsive-less-ui"
8
+ spec.version = MoreResponsiveLessUI::VERSION
9
+ spec.authors = ["d-theus"]
10
+ spec.email = ["slma0x02@gmail.com"]
11
+ spec.summary = %q{Simple and responsive web ui framework}
12
+ spec.homepage = ""
13
+ spec.license = "MIT"
14
+
15
+ spec.files = `git ls-files -z`.split("\x0")
16
+ spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
17
+ spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
18
+ spec.require_paths = ["lib"]
19
+
20
+ spec.add_dependency "less-rails"
21
+ spec.add_dependency "coffee-rails"
22
+
23
+ spec.add_development_dependency "bundler", "~> 1.7"
24
+ spec.add_development_dependency "rake", "~> 10.0"
25
+ end
metadata ADDED
@@ -0,0 +1,121 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: more-responsive-less-ui
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.0.2
5
+ platform: ruby
6
+ authors:
7
+ - d-theus
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2015-04-17 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: less-rails
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - '>='
18
+ - !ruby/object:Gem::Version
19
+ version: '0'
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - '>='
25
+ - !ruby/object:Gem::Version
26
+ version: '0'
27
+ - !ruby/object:Gem::Dependency
28
+ name: coffee-rails
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - '>='
32
+ - !ruby/object:Gem::Version
33
+ version: '0'
34
+ type: :runtime
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - '>='
39
+ - !ruby/object:Gem::Version
40
+ version: '0'
41
+ - !ruby/object:Gem::Dependency
42
+ name: bundler
43
+ requirement: !ruby/object:Gem::Requirement
44
+ requirements:
45
+ - - ~>
46
+ - !ruby/object:Gem::Version
47
+ version: '1.7'
48
+ type: :development
49
+ prerelease: false
50
+ version_requirements: !ruby/object:Gem::Requirement
51
+ requirements:
52
+ - - ~>
53
+ - !ruby/object:Gem::Version
54
+ version: '1.7'
55
+ - !ruby/object:Gem::Dependency
56
+ name: rake
57
+ requirement: !ruby/object:Gem::Requirement
58
+ requirements:
59
+ - - ~>
60
+ - !ruby/object:Gem::Version
61
+ version: '10.0'
62
+ type: :development
63
+ prerelease: false
64
+ version_requirements: !ruby/object:Gem::Requirement
65
+ requirements:
66
+ - - ~>
67
+ - !ruby/object:Gem::Version
68
+ version: '10.0'
69
+ description:
70
+ email:
71
+ - slma0x02@gmail.com
72
+ executables: []
73
+ extensions: []
74
+ extra_rdoc_files: []
75
+ files:
76
+ - ..gemspec
77
+ - .gitignore
78
+ - Gemfile
79
+ - LICENSE.txt
80
+ - README.md
81
+ - Rakefile
82
+ - app/assets/javascripts/elements/collapse.js.coffee
83
+ - app/assets/javascripts/elements/contextmenu.js.coffee
84
+ - app/assets/javascripts/more-responsive-ui.js.coffee
85
+ - app/assets/stylesheets/elements/buttons.less
86
+ - app/assets/stylesheets/elements/collapse.less
87
+ - app/assets/stylesheets/elements/contextmenu.less
88
+ - app/assets/stylesheets/elements/fonts.less
89
+ - app/assets/stylesheets/elements/icons.less
90
+ - app/assets/stylesheets/elements/navbar.less
91
+ - app/assets/stylesheets/more-responsive-ui.less
92
+ - lib/..rb
93
+ - lib/more-responsive-less-ui.rb
94
+ - lib/version.rb
95
+ - more-responsive-less-ui.gemspec
96
+ homepage: ''
97
+ licenses:
98
+ - MIT
99
+ metadata: {}
100
+ post_install_message:
101
+ rdoc_options: []
102
+ require_paths:
103
+ - lib
104
+ required_ruby_version: !ruby/object:Gem::Requirement
105
+ requirements:
106
+ - - '>='
107
+ - !ruby/object:Gem::Version
108
+ version: '0'
109
+ required_rubygems_version: !ruby/object:Gem::Requirement
110
+ requirements:
111
+ - - '>='
112
+ - !ruby/object:Gem::Version
113
+ version: '0'
114
+ requirements: []
115
+ rubyforge_project:
116
+ rubygems_version: 2.0.14
117
+ signing_key:
118
+ specification_version: 4
119
+ summary: Simple and responsive web ui framework
120
+ test_files: []
121
+ has_rdoc: