Merge pull request #445 from SUSE/ui-second-iteration

Ui second iteration

app/assets/javascripts/teams.coffee

@@ -7,9 +7,11 @@ $(document).on "page:change", ->
         $('#add_team_user_btn i').addClass("fa-minus-circle")
         $('#add_team_user_btn i').removeClass("fa-plus-circle")
         $('#team_user_user').focus()
+        layout_resizer()
       else
         $('#add_team_user_btn i').removeClass("fa-minus-circle")
         $('#add_team_user_btn i').addClass("fa-plus-circle")
+        layout_resizer()
 
   $('body').on('click', '.btn-edit-role', (event) ->
     el = $(this).find('i.fa')
@@ -30,21 +32,24 @@ $(document).on "page:change", ->
       $('#change_description_namespace_' + event.currentTarget.value).toggle()
   )
 
-  $('#add_namespace_btn').on 'click', (event) ->
+  $('#add_namespace_btn').unbind('click').on 'click', (event) ->
     $('#namespace_namespace').val('')
 
     # When we are creating this on the namespaces page.
     if $('#namespace_team') && $('#namespace_team').is(':visible')
       $('#namespace_team').val('')
+      $('#namespace_description').val('')
 
     $('#add_namespace_form').toggle 400, "swing", ->
       if $('#add_namespace_form').is(':visible')
         $('#add_namespace_btn i').addClass("fa-minus-circle")
         $('#add_namespace_btn i').removeClass("fa-plus-circle")
         $('#namespace_namespace').focus()
+        layout_resizer()
       else
         $('#add_namespace_btn i').removeClass("fa-minus-circle")
         $('#add_namespace_btn i').addClass("fa-plus-circle")
+        layout_resizer()
 
   $('#add_team_btn').on 'click', (event) ->
     $('#team_name').val('')
@@ -53,8 +58,10 @@ $(document).on "page:change", ->
         $('#add_team_btn i').addClass("fa-minus-circle")
         $('#add_team_btn i').removeClass("fa-plus-circle")
         $('#team_name').focus()
+        layout_resizer()
       else
         $('#add_team_btn i').removeClass("fa-minus-circle")
         $('#add_team_btn i').addClass("fa-plus-circle")
+        layout_resizer()
 
   openSearchForm()

app/assets/stylesheets/activities.scss

@@ -0,0 +1,76 @@
+// Overwriting so we fa-user elements are actually shown in the
+// activities list.
+.activity .fa-user {
+  color: $gray-mid;
+}
+
+.activity {
+  border-left: 1px solid $gray-light;
+  margin-left: 2em;
+  margin-top: -15px;
+  img {
+    border-radius: 100%;
+    border: 4px solid $gray-light;
+    width: 40px;
+  }
+  li {
+    list-style: none;
+    margin-left: -4.6em;
+    padding-bottom: 3em ;
+    &:first-of-type {
+      padding-top: 3em;
+    }
+    &:last-of-type {
+      background: $white;
+      padding-bottom: 1em ;
+    }
+    .user-image, .activity-type, .description {
+      display: inline-block;
+      margin-right: 1.2em;
+      vertical-align: top;
+    }
+    .description {
+      background: $white;
+      max-width: 400px;
+      h6 {
+        margin: 0;
+      }
+    }
+    .activity-type {
+      border-radius: 100%;
+      background: red;
+      height: 40px;
+      width: 40px;
+      text-align: center;
+      i.fa {
+        font-size: 1.5em;
+        color: $white;
+        margin-top: 10px;
+      }
+      &.repo-pushed {
+        background: $activity-repo-pushed;
+      }
+      &.team-created {
+        background: $activity-team-created;
+      }
+      &.change-role {
+        background: $activity-change-role;
+      }
+      &.remove-member-team {
+        background: $activity-remove-member-team;
+      }
+      &.add-member-team {
+        background: $activity-add-member-team;
+      }
+      &.change-namespace-visibility {
+        background: $activity-change-namespace-visibility;
+      }
+      &.create-namespace {
+        background: $activity-create-namespace;
+      }
+      &.change-description {
+        background: $activity-change-description;
+      }
+    }
+  }
+}

app/assets/stylesheets/application.scss

@@ -1,5 +1,6 @@
 @import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
 @import url(//fonts.googleapis.com/css?family=Raleway:400,300,700,900);
+@import url(https://fonts.googleapis.com/css?family=Pacifico);
 
 @import "bootstrap-sprockets";
 @import 'bootstrap/variables';
@@ -10,21 +11,13 @@
 @import 'lifeitup/lifeitup';
 
 //custom style overriding lifeitup
+@import 'labels';
 @import 'layout';
+@import 'activities';
 @import 'buttons';
 @import 'images';
 @import 'dashboard';
 @import 'panels';
 @import 'tables';
 @import 'forms';
 @import 'types';
-
-#profile .panel {
-  max-width: 700px;
-}
-
-// Overwriting so we fa-user elements are actually shown in the
-// activities list.
-.activity .fa-user {
-  color: $gray-mid;
-}

app/assets/stylesheets/buttons.scss

@@ -2,19 +2,6 @@ header .btn-default {
   @include button-variant($white, transparent, $white);
 }
 
-.login {
-  input[type="text"] {
-    border-radius: 4px 4px 0 0;
-  }
-  input[type="password"] {
-    border-radius: 0 0 4px 4px;
-  }
-  button[type="submit"] {
-    margin-bottom: 1em;
-  }
-
-}
-
 header #logout.btn.btn-default {
   background: rgba(255,255,255,0.2);
   border: 1px solid transparent;

app/assets/stylesheets/forms.scss

@@ -12,3 +12,28 @@ section.sign-up {
     border: 0px;
   }
 }
+
+.login {
+  input[type="text"] {
+    border-radius: 4px 4px 0 0;
+  }
+  input[type="password"] {
+    border-radius: 0 0 4px 4px;
+  }
+  input[type="text"], input[type="password"], input[type="email"] {
+    background: rgba(0,0,0,0.1);
+    @include input-placeholder(lighten($second-colour,20%));
+    font-size: 15px;
+    color: $logo-text-colour;
+  }
+  button[type="submit"] {
+    margin-bottom: 1em;
+  }
+  input[type="email"]:last-of-type {
+    border-radius: 4px;
+    border: 0px;
+  }
+  .btn-link {
+    color: $white
+  }
+}

app/assets/stylesheets/images.scss

@@ -5,3 +5,4 @@
 .user-picture {
   background-color: #fff;
 }
+

app/assets/stylesheets/labels.scss

@@ -0,0 +1,4 @@
+//labels
+.label.label-info{
+  background: $primary-colour;
+}

app/assets/stylesheets/layout.scss

@@ -36,7 +36,7 @@ header {
         border-bottom: 1px solid $white;
         border-right: 0px solid $white;
         color: $white;
-        @include input-placeholder($white);
+        @include input-placeholder($white);
       }
       button[type="submit"] {
         border-radius: 0 4px 4px 0;
@@ -66,12 +66,14 @@ header {
 }
 
 body.login {
-  background: image-url("layout/bg-login.png") no-repeat;
-  background-size: cover;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
-  background-position: top center;
+  background: $first-colour; /* Old browsers */
+  background: -moz-linear-gradient(-45deg,  $first-colour 0%, $second-colour 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,$first-colour), color-stop(100%,$second-colour)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(-45deg,  $first-colour 0%,$second-colour 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(-45deg,  $first-colour 0%,$second-colour 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(-45deg,  $first-colour 0%,$second-colour 100%); /* IE10+ */
+  background: linear-gradient(135deg,  $first-colour 0%,$second-colour 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#205683', endColorstr='#68b0ab',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
   .alert {
     .fa-3x {
       font-size: 1.5em
@@ -85,15 +87,50 @@ body.login {
   }
 }
 
-.center-panel {
-  margin-top: 2em
+.oops {
+  padding-top: 2em;
+  text-align: center;
+  .broken-lighthouse {
+    margin: 2em 0;
+  }
+  h1, h3 {
+    color: $third-colour;
+    line-height: 0;
+    color: $logo-text-colour;
+  }
+  h1 {
+    font-size: 4em;
+    font-family: 'Pacifico', cursive;
+    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
+  }
+  h3 {
+    padding-top: 2em;
+    font-size: 1.5em;
+  }
+}
+.error-fixes {
+  background: rgba(255,255,255,0.3);
+  color: $third-colour;
+  border-radius: 4px;
+  margin-top: 2em;
+  padding: 2em;
 }
+
+
 @media (max-width: $screen-sm-max) {
   .center-panel {
     margin-top: 2em
   }
 }
 
+footer {
+  font-size: 1em;
+  font-family: Raleway;
+  i.fa {
+    color: $primary-colour
+  }
+}
+
 i.fa {
   padding: 0 0.3em;
 }

app/assets/stylesheets/panels.scss

@@ -22,5 +22,8 @@
       background: $overview-icon-namespaces-bg;
     }
   }
+}
 
+#profile .panel {
+  max-width: 700px;
 }