Dev/restyle

Gemfile.lock

@@ -98,7 +98,7 @@ DEPENDENCIES
   rdiscount
   sass
   shotgun
-  sinatra
+  sinatra (~> 1.3.0)
   sinatra-content-for (~> 0.1.0)
   sinatra_auth_github
   thin

README.md

@@ -80,9 +80,14 @@ labels **name and color** must match in order to work.
 Go to https://github.com/settings/applications and register your
 application to get the application keys needed for OAuth.
 
-- URL: Pow: `http://huboard.dev`, Rack: `http://localhost:9292`
-- Callback: Pow: `http://huboard.dev/auth/github/callback`, Rack:
-  `http://localhost:9292/auth/github/callback`
+- URL: 
+  - Pow: `http://huboard.dev`
+  - Rack: `http://localhost:9292`
+  - Foreman: `http://localhost:5000` 
+- Callback: 
+  - Pow: `http://huboard.dev/auth/github/callback`
+  - Rack: `http://localhost:9292/auth/github/callback`
+  - Foreman: `http://localhost:5000/auth/github/callback`
 
 ## Configure Your App
 
@@ -120,6 +125,13 @@ or
 
 `bundle exec rackup config.ru`
 
+### Using Foreman
+
+`foreman start`
+
+Now connect to localhost:5000 to use application.
+
+
 # Deploy To Heroku
 
 **Please use the latest stable tag if you are hosting your own instance of huboard.**

public/css/scss/_arrow.scss

@@ -1,7 +1,7 @@
 
 
 .arrow {
-  margin-right: 20px;
+  margin-right: 15px;
   position: relative;
   box-sizing: border-box;
   margin-top: 0;
@@ -15,19 +15,19 @@
     position: absolute;
     pointer-events: none;
     border-radius: 2px;
-  }                        
+  }
   &:after {
     border-left-color: #f3f3f3;
-    border-width: 21px;
+    border-width: 14px;
     top: 50%;
-    margin-top: -21px;
+    margin-top: -14px;
   }
 
   &:before {
     border-left-color: #e5e5e5;
-    border-width: 22px;
+    border-width: 15px;
     top: 50%;
-    margin-top: -22px;
+    margin-top: -15px;
   }
 
 }

public/css/scss/_board.scss

@@ -53,9 +53,9 @@
 }
 #drawer {
     position:absolute;
-    width:352px;
+    width:280px;
     top:0;
-    left:-640px;
+    left:-497px;
 
    .board, .backlog, .filters {
      background: #fff;
@@ -82,7 +82,7 @@
 }
 
 
-.backlog { 
+.backlog {
   white-space: nowrap;
   overflow-x: auto;
   .column {
@@ -101,7 +101,8 @@
 .column h3 {
   line-height: 20px;
   margin-bottom: 10px;
-  padding: 10px;
+  padding: 3px;
+  padding-left: 10px;
   border: 1px solid #e5e5e5;
   background: #f3f3f3;
 
@@ -139,16 +140,27 @@
 
 .column li {
   list-style: none;
-  padding: 5px 5px 34px 5px;
+  padding: 0px 5px 5px 5px;
   margin: 10px 0;
   cursor:move;
   position:relative;
   background-color: #fff;
   border: 1px solid #e5e5e5;
-  border-bottom-color: darken(#e5e5e5, 5%); 
+  border-bottom-color: darken(#e5e5e5, 5%);
+  box-shadow: 1px 1px 5px rgba(162, 162, 162, 0.36);
+  line-height: 1.4em;
+  border-radius:3px;
+  &:hover{
+	    box-shadow: 1px 1px 7px rgb(162,162,162);
+}
+
   &.assignee-accept {
      border-color: #0069D6;
+	box-shadow: 1px 1px 5px #0069D6;
   }
+  .card-labels {
+  }
+  /*
   .card-labels {
     position: absolute;
     bottom: -3px;
@@ -180,38 +192,47 @@
         }
       }
   }
+  */
 
   .card-header {
-    border-bottom: 1px solid $borderColor;
-    padding: 5px 0;
+    /* Commented out until we have body stuff...
+	border-bottom: 1px solid $borderColor;*/
+    padding-top: 5px;
     color: $darkGrey;
   }
   .title {
-    padding-right: 20px;
+	font-size: 14px;
     word-wrap: break-word;
     white-space: normal;
     text-overflow: clip;
     overflow:auto;
-  }         
+	text-decoration: none;
+	color: black;
+	display: block;
+	width: 100%;
+	padding-right: 29px;
+	box-sizing: border-box;
+	border-bottom: 1px solid rgba(255, 255, 255, 0);
+
+	&:hover {
+	  //text-decoration: underline;
+	  color: #08C;
+	  background-color: lighten(#08C, 70%);
+	  border-bottom:1px solid;
+	}
+  }
   .milestone {
     color: $lightGrey;
     font-size:11px;
-  }         
+  }
   img {
-    position: absolute;
-    bottom:5px;
-    left: 5px;
-  }          
-  .number {
-    position: absolute;
-    vertical-align: bottom;
-    bottom:5px;
-    right: 5px;
-    font-size:2em;
-  }               
+	position: absolute;
+	top: 0;
+	right: -1px;
+	border-radius: 0 3px 0 0;
+  }
 }
 
-
 .column li a.close {
   position: absolute;
   top: 12px;
@@ -240,18 +261,18 @@
   background:#efefef;
 }
 
-
-
 .filters {
   list-style: none;
-  margin:0;
-  padding:0 20px 0 0;
+  margin:10px 0 0;
+  padding:0 10px 0 0;
+line-height: 16px;
 }
 
 .filters li {
-  margin-bottom: 10px;
+  margin-bottom: 3px;
   background: #fff;
   border-radius: 4px;
+  line-height: 14px;
 }
 .filters li.clear-filters, .filters li.clear-filters a {
   background: none;
@@ -267,15 +288,16 @@
 
 .filters li a {
   position:relative;
-  padding: 10px;
+  padding: 5px;
   display:block;
   padding-right:25px;
+  padding-left:10px;
   text-decoration: none;
   border-radius: 4px;
   color:#777;
 }
 
-.filters li a strong { 
+.filters li a strong {
   position: absolute;
   top:12px;
   right:10px;
@@ -294,10 +316,12 @@
 
 .filter {
   .ui-icon {
+	font-size: 12px;
+	height:12px;
     position: absolute;
-    top: 13px;
-    right: 3px;
-    width: 22px;
+    top: 7px;
+    right: 7px;
+    width: 12px;
     display:none;
     opacity: 0.8;
     &:hover {
@@ -309,7 +333,7 @@
     background-color:#efefef;
   }
 
-  .dim:hover, .active:hover { 
+  .dim:hover, .active:hover {
     .ui-icon {
       display:inline;
     }

public/css/scss/_footer.scss

@@ -7,7 +7,6 @@ body, html {
    height: auto !important;
    height: 100%;
    min-height: 100%;
-
    margin-bottom: -$footer-height;
 }
 

public/css/scss/_header.scss

@@ -1,5 +1,7 @@
-.header {
-  font-size: 24px;
+.page-header-wrapper .header {
+  font-size: 18px;
+  margin:0;
+  line-height:20px;
 
   .author{
     color: #08C;
@@ -9,24 +11,28 @@
     color: #08C;
   }
   input {
-    border: 0;
-    outline: 0;
-    background: #fff;
-    vertical-align: baseline;
-    line-height: 40px;
-    margin: 0;
-    padding:0;
-    font-size: 24px;
+    	border: 0;
+		outline: none;
+	    background: #fff;
+	    vertical-align: baseline;
+	    line-height: 20px;
+	    margin: 4px 10px;
+	    padding: 0 15px;
+	    font-size: 16px;
+		border-radius: 17px;
   }
 }
 %grow {
    @include transform(scale(1.25));
    @include transition (all 0.2s ease-in 0.1s);
 }
+ol.assignees{
+	margin:0;
+}
 .assignee {
   list-style: none;
-  line-height: 40px;
-  float:left;
+  line-height: 28px;
+  display:inline-block;
   margin:0 2px;
   cursor:pointer;
   &:hover, &.active {
@@ -49,7 +55,7 @@
   ol {
     margin: 0;
     padding: 0;
-    float: right;
+    float: left;
     list-style: none;
   }
 }

public/css/scss/_topbar.scss

@@ -1,10 +1,11 @@
-
 body {
   font-family: "ProximaNovaRegular", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
 }
 
 .navbar {
-  &.navbar-fixed-top, &.navbar-static-top {
+
+
+  &.navbar-fixed-top, &.navbar-static-top {	
     .navbar-inner {
       @include box-shadow(none);
     }