archare_ui 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 8966815e438365c742494b9c2db2b518d5cd9831
+  data.tar.gz: 4edbd15952ff740d6820291983a685ee025d8710
+SHA512:
+  metadata.gz: 761ef9e323f44c67665d33f795fb98406a626f5ed44b821bb68ff287f86826b155feabc23df1c2b3687c85c2329e7ff5f89f83fc79bb8ce13cc0b350730eb0f5
+  data.tar.gz: eeaf352545e071524d17612087686a37f8cacfc89e37168a06fc77668804318880d11bed40aa5cfd6b459840f73a5727757d5b91bb67b63daff7eb8afb77e31b

data/.gitignore

@@ -0,0 +1,9 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,49 @@
+# Contributor Code of Conduct
+
+As contributors and maintainers of this project, and in the interest of
+fostering an open and welcoming community, we pledge to respect all people who
+contribute through reporting issues, posting feature requests, updating
+documentation, submitting pull requests or patches, and other activities.
+
+We are committed to making participation in this project a harassment-free
+experience for everyone, regardless of level of experience, gender, gender
+identity and expression, sexual orientation, disability, personal appearance,
+body size, race, ethnicity, age, religion, or nationality.
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery
+* Personal attacks
+* Trolling or insulting/derogatory comments
+* Public or private harassment
+* Publishing other's private information, such as physical or electronic
+  addresses, without explicit permission
+* Other unethical or unprofessional conduct
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+By adopting this Code of Conduct, project maintainers commit themselves to
+fairly and consistently applying these principles to every aspect of managing
+this project. Project maintainers who do not follow or enforce the Code of
+Conduct may be permanently removed from the project team.
+
+This code of conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community.
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting a project maintainer at xhan@wpi.edu. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. Maintainers are
+obligated to maintain confidentiality with regard to the reporter of an
+incident.
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 1.3.0, available at
+[http://contributor-covenant.org/version/1/3/0/][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/3/0/

data/Gemfile

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

data/README.md

@@ -0,0 +1,40 @@
+<<<<<<< HEAD
+# ArchareUi
+
+Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/archare_ui`. To experiment with that code, run `bin/console` for an interactive prompt.
+
+TODO: Delete this and the text above, and describe your gem
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'archare_ui'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install archare_ui
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/archare_ui. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+=======
+# archare_ui
+>>>>>>> 213fc7381e214c36b34038e5596cbba3d7218b15

data/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+task :default => :spec

data/app/assets/javascripts/archare_ui.js

@@ -0,0 +1 @@
+//= require_tree .

data/app/assets/javascripts/test.js

@@ -0,0 +1,3 @@
+$(document).ready(function(d){
+	console.log("archare-ui");
+});

data/app/assets/stylesheets/archare-sass.scss

@@ -0,0 +1,554 @@
+@import "bootstrap";
+
+$tablet-width: 768px;
+$desktop-width: 1024px;
+
+@mixin tablet{
+  @media (min-width: $tablet-width) and (max-width: $desktop-width - 1px){
+    @content;
+  }
+}
+
+@mixin desktop{
+  @media (min-width: $desktop-width){
+    @content;
+  }
+}
+
+
+@mixin mobile{
+  @media (max-width: $tablet-width - 1px){
+    @content;
+  }
+}
+
+@mixin ah-animation($attribute, $duration){
+
+  @if not $attribute{
+    $attribute: all;
+  }
+
+  // transition animation
+  -webkit-transition: $attribute $duration ease;   
+     -moz-transition: $attribute $duration ease;
+       -o-transition: $attribute $duration ease;
+          transition: $attribute $duration ease;
+
+}
+
+
+
+
+
+$mb-sidebar-width: 60px;
+$sidebar-width: 100px;
+
+$sidebar-bg-color: lighten(#000, 20%); // gray dark of bootstrap;
+
+
+
+
+$cube-blue: #6666ff;
+$cube-red: #ff3333;
+$cube-green: #66ff66;
+
+$cube-width: 50px;
+
+
+.ah-wrapper.sb-collapsed {
+  // wrapper is in sidebar-collapsed mode
+
+  padding-left: 0px;
+  margin-left: 0px;
+
+  .ah-fixed-top-nav{
+
+    margin-left: 0px;
+    padding: 20px;
+    background-color: transparent;
+  }
+
+
+  .ah-sidebar-wrapper {
+    width: 0px;
+  }
+
+  .ah-page-content {
+
+    position: relative;
+    margin-right: -250px;
+
+    @include mobile{
+      
+      position: relative;
+      margin-right: 0;
+    }
+  }
+}
+
+
+// normal, non-collapsed mode
+.ah-wrapper {
+
+
+  margin-left: $sidebar-width;
+
+  @include mobile{
+    margin-left: $mb-sidebar-width;
+  }
+  
+  @include ah-animation(all, 0.5s);
+}
+
+.ah-fixed-top-nav{
+
+  margin-left: $sidebar-width;
+  padding: 20px;
+  // background: white;
+  height: 60px;
+
+  @include ah-animation(all, 0.5s);
+
+  @include mobile{
+
+    margin-left: $mb-sidebar-width;
+  }
+}
+
+
+.ah-sidebar-wrapper {
+
+  position: fixed;
+
+
+  width: $sidebar-width;
+  left: $sidebar-width;
+  margin-left: -$sidebar-width;
+
+  @include mobile{
+
+    width: $mb-sidebar-width;
+    left: $mb-sidebar-width;
+    margin-left: -$mb-sidebar-width;
+  }
+
+  height: 100%;
+
+  overflow-y: auto;
+  background: $sidebar-bg-color;
+
+  @include ah-animation(all, 0.5s);
+}
+
+.ah-page-content {
+
+
+
+
+
+  
+  width: 100%;
+  position: absolute;
+  // padding: 10px;
+
+  @include mobile {
+    padding: 0px;
+    position: absolute;
+  }
+}
+
+
+// sidebar
+.ah-sidebar {
+
+  position: absolute;
+
+  top: 0;
+
+  width: $sidebar-width;
+
+  margin: 0;
+  padding: 0;
+
+  list-style: none;
+  text-align: center; 
+  @include ah-animation(all, 0.5s);
+
+
+  @include mobile{
+    width: $mb-sidebar-width;
+  }
+}
+
+
+
+// ah sidebar brand
+.ah-sidebar-brand {
+
+  height: 65px;
+
+
+  font-size: 20px;
+  font-weight: 600; //semi bold
+  font-family: 'Open Sans', sans-serif;
+  line-height: 60px;
+
+
+  @include mobile{
+    font-size: 15px;
+  }
+}
+
+
+.ah-sidebar li {
+
+  font-family: 'Varela Round', sans-serif;
+}
+
+.ah-sidebar li{
+  left-padding: 0;
+}
+
+.ah-sidebar > .ah-sidebar-brand a {
+  text-decoration: none;
+  color: #b3b3b3;
+}
+
+.ah-sidebar > .ah-sidebar-brand a:hover {
+  text-decoration: none;
+  color: #fff;
+  background: none;
+}
+
+
+
+
+
+// cube styles
+
+
+$cube-font-size: 15px;
+$cube-border-width: 2px;
+
+$mobile-cube-ratio: 0.8;
+
+// default cube style
+.ah-nav-cube  {
+
+  display: inline-block;
+
+  // text and fonts
+  text-decoration: none;
+  color: white;
+  font-size: $cube-font-size;
+
+  text-align: center;
+
+
+  // round rect border
+  border-radius: 5px;
+  border-style: solid;
+  border-width: $cube-border-width;
+  border-color: white;
+
+
+  z-index: 10;
+
+
+  // margin and padding
+  margin: 0 auto;
+  padding-top: ($cube-width - $cube-font-size)/2 - 2 * $cube-border-width;  // a little bit less padding top
+
+  box-sizing: border-box;
+
+
+  width: $cube-width;
+  height: $cube-width;
+
+  @include mobile{
+
+    width: $mobile-cube-ratio * $cube-width;
+    height: $mobile-cube-ratio * $cube-width;
+    padding-top: $mobile-cube-ratio * ($cube-width - $cube-font-size)/2 - 2 * $cube-border-width;  // a little bit less padding top
+    font-size: $cube-font-size * $mobile-cube-ratio;
+  }
+
+  @include ah-animation(background-color, 1s);
+}
+
+
+
+.ah-nav-cube{
+
+
+
+  // different states for cube
+  &:hover {
+
+    text-decoration: none;
+
+
+    // rotate
+    transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    transition-duration: 1s;
+    transition-property: transform;
+  }
+
+
+  &:active, &:focus {
+
+    text-decoration: none;
+  }
+
+
+  // styles ah blue cube
+  &.ah-blue-cube{
+
+    color: white;
+    border-color: $cube-blue;
+
+    &:hover{
+
+      color: white;
+      background-color: $cube-blue;
+    }
+  }
+
+  
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.ah-sb-sublist{
+
+  text-align: center;
+  // display: none;
+  opacity: 0;
+  visibility: hidden;
+  height: 0;
+
+  @include ah-animation(opacity, 1s);
+
+
+  &:hover{
+
+    display: block;
+    opacity: 1;
+    visibility: visible;
+    height: auto;
+  }
+}
+
+.ah-sb-sublist-btn{
+
+  &:hover, 
+  &:active, 
+  &:focus{
+    & ~ .ah-sb-sublist{
+      display: block;
+      opacity: 1;
+      visibility: visible;
+      height: auto;
+    }
+  }
+}
+
+
+
+
+
+
+$line-width: 2px;
+
+
+// archare veritical line for connecting the cubes
+.ah-ver-line {
+
+  display: block;
+  background-color: $cube-blue;
+
+  width: 2px;
+  height: 20px;
+  margin: 0 auto;
+
+
+  &.ah-blue-line{
+
+    background-color: $cube-blue;
+  }
+}
+
+
+// archare horizontal line for connecting the cubes
+.ah-hor-line {
+
+  display: inline-block;
+
+  background-color: $cube-blue;
+
+  width: $cube-width/2;
+
+  margin-top: ($cube-width - $line-width)/2;
+
+  height: $line-width;
+  margin-bottom: $cube-width - ($cube-width - $line-width)/2;
+
+
+
+  &.ah-blue-line{
+
+    background-color: $cube-blue;
+  }
+}
+
+
+.ah-nav-cube:active,
+.ah-nav-cube:focus{
+  & + .tooltip{
+    opacity: 0;
+  }
+}
+
+
+.ah-nav-cube.ah-blue-cube + .tooltip {
+
+  z-index: 100;
+
+  & > .tooltip-inner { 
+    background-color: $cube-blue; 
+    opacity: 0.8;
+  }
+  & > .tooltip-arrow { 
+    border-top-color: $cube-blue; 
+    opacity: 0.8;
+  }
+}
+
+
+
+
+// old ideas for horizontal cube list and vertical cubelist
+/*
+
+
+// horizontal cubelist
+.ah-hor-cubelist {
+
+  position: fixed;
+  display: inline-block;
+
+
+  font-size: 0;  //remove space between inline blocks
+
+  height: 50px;
+
+
+  opacity: 0;
+  visibility: hidden;
+  
+  @include ah-animation(all, 0.3);
+
+
+  .ah-nav-cube{
+    // position: fixed;
+    margin: 0 auto;
+    // display: inline-block;
+    font-size: 15px; 
+    color: $cube-blue;
+    z-index: 100;
+  }
+
+
+  > *{
+
+    vertical-align: middle;
+  }
+ 
+}
+
+
+.ah-hor-cubelist:hover,
+.ah-cubelist-btn:hover + .ah-hor-cubelist,
+.ah-cubelist-btn:active + .ah-hor-cubelist{
+
+  visibility: visible;
+  opacity: 1;
+}
+
+.ah-hor-cubelist .ah-nav-cube:hover{
+  color: #fff;
+}
+
+
+
+
+
+// vertical cubelist 
+.ah-ver-cubelist {
+
+  position: fixed;
+  display: block;
+
+
+
+  font-size: 0;  //remove space between inline blocks
+
+  width: 50px;
+
+  text-align: center;
+
+  opacity: 0;
+  visibility: hidden;
+
+  
+  @include ah-animation(all, 0.3s);
+
+  .ah-nav-cube{
+    // position: fixed;
+    margin: 0 auto;
+    display: block;
+    font-size: 15px; 
+    color: $cube-blue;
+    z-index: 100;
+  }
+
+}
+
+
+
+.ah-ver-cubelist:hover,
+.ah-cubelist-btn:hover + .ah-ver-cubelist,
+.ah-cubelist-btn:active + .ah-ver-cubelist{
+
+  visibility: visible;
+  opacity: 1;
+}
+
+.ah-ver-cubelist .ah-nav-cube:hover{
+  color: #fff;
+}
+
+
+
+
+*/
+
+
+
+
+
+