CSS styles and some website layout re-working. Login box fixes.

modified: app/assets/javascripts/angular/controllers/login.js modified: app/assets/javascripts/app.js -- added login box close functionality modified: app/assets/stylesheets/_base.css.scss modified: app/assets/stylesheets/_layout.css.scss modified: app/assets/stylesheets/_login_control.css.scss modified: app/assets/stylesheets/_projects.css.scss modified: app/assets/templates/error_404.html -- tiny change to add some (kind of) decent content. modified: app/assets/templates/projects_index.html -- changes for styling modified: app/views/layouts/application.html.erb -- changed layout to get sticky footer to work
QutEcoacoustics · Dec 18, 2012 · ee74ae1 · ee74ae1
1 parent c4e03db
commit ee74ae1
Show file tree

Hide file tree

Showing 9 changed files with 118 additions and 59 deletions.
diff --git a/app/assets/javascripts/angular/controllers/login.js b/app/assets/javascripts/angular/controllers/login.js
@@ -56,11 +56,10 @@ function LoginCtrl($scope, $http, $location, authService, AuthenticationProvider
     };
 
     $scope.cancelLogin = function(){
+        $location.path('/');
         $scope.$emit('event:auth-loginCancelled');
-        $location.path('/')
     };
 
-
     $scope.displayName = "";
     $scope.email = "";
 

diff --git a/app/assets/javascripts/app.js b/app/assets/javascripts/app.js
@@ -24,13 +24,14 @@ var bawApp = (function (undefined) {
         var detailsPath = path + "/" + id;
         var asset = "/assets/" + resourceName + "_index.html";
         var assetDetails = "/assets/" + singularResourceName + "_details.html";
+        var assetManage = "/assets/" + resourceName + "_manager.html";
 
         return this
             // many
             .when(path, {templateUrl: asset, controller: controllerMany})
             // manage
             .fluidIf(addManageView, function () {
-                this.when(path + "/manage", {templateUrl: asset.replace("index.html", "manager.html"), controller: controllerMany})
+                this.when(path + "/manage", {templateUrl: assetManage, controller: controllerMany})
             })
             // details
             .when(detailsPath, {templateUrl: assetDetails, controller: controllerOne})

diff --git a/app/assets/stylesheets/_base.css.scss b/app/assets/stylesheets/_base.css.scss
@@ -39,6 +39,13 @@ $standard-border-radius: 6px;
 
 $standard-glow-alpha: 0.2;
 
+/*
+ *
+ *  Specific styles
+ *
+ */
+$footer-height: 40px;
+
 /*
  *
  *  Functions

diff --git a/app/assets/stylesheets/_layout.css.scss b/app/assets/stylesheets/_layout.css.scss
@@ -18,9 +18,13 @@
  */
 
 * {
-    margin: 0;
-    padding: 0;
-    color: nth($master-dark, 1);
+  margin: 0;
+  padding: 0;
+  color: nth($master-dark, 1);
+}
+
+html, body {
+  height:100%;
 }
 
 a {
@@ -69,7 +73,7 @@ img {
 }
 
 html {
-    height: 100%;
+  height: 100%;
 }
 
 label {
@@ -91,7 +95,7 @@ li {
 }
 
 p {
-    margin: 0 0 18px;
+  margin: 0 0 18px;
 }
 
 pre {
@@ -137,13 +141,6 @@ button {
   margin: 2px;
 }
 
-/*
- *
- *  Specific styles
- *
- */
-$footer-height: 40px;
-
 /* Header
 -----------------------------------------------------------------------------*/
 header {
@@ -179,11 +176,14 @@ header {
 #page-wrapper {
   width: 100%;
   min-width: 768px;
-  min-height: 100%;
-  height: auto !important;
+  //height: auto !important;
   //height: 100%;
   position: relative;
   //top: -5px;
+
+  /* for sticky footer */
+  min-height: 100%;
+  /* end for sticky footer */
 }
 
 #content-wrapper{
@@ -193,6 +193,11 @@ header {
   margin-bottom: $footer-height;
 
   padding-top:  15px;
+
+  /* for sticky footer */
+  overflow:auto;
+  padding-bottom: $footer-height;
+  /* end for sticky footer */
 }
 
 #content {
@@ -202,19 +207,36 @@ header {
 /* Footer
 -----------------------------------------------------------------------------*/
 footer {
-    margin:  0;
-    min-width: 768px;
-    height: $footer-height;
-    background: nth($master-highlight-2, 2);
-
-    border-top:2px solid nth($master-highlight,1);
-    ul{
-      list-style-type:none;
-      li {
-        float:left;
-        margin: 0 15px 0 0;
-      }
+  margin:  0;
+  min-width: 768px;
+
+  background: nth($master-highlight-2, 2);
+  border-top:2px solid nth($master-highlight,1);
+
+  /* for sticky footer */
+  /* from: http://www.cssstickyfooter.com/using-sticky-footer-code.html */
+  position:relative;
+  margin-top:-($footer-height + 42);
+  height: $footer-height;
+  clear:both;
+  /* end for sticky footer */
+
+  ul{
+    list-style-type:none;
+    li {
+      float:left;
+      margin: 0 15px 0 0;
     }
+  }
+}
+
+/* stick footer Opera Fix */
+body:before {
+  content:"";
+  height:100%;
+  float:left;
+  width:0;
+  margin-top:-32767px;
 }
 
 /* General Classes

diff --git a/app/assets/stylesheets/_login_control.css.scss b/app/assets/stylesheets/_login_control.css.scss
@@ -52,14 +52,14 @@ body.waiting-for-angular div#initializing-panel {
   display: none;
 
   position: absolute;
-  top: 0;
+  top: 62px;
   left: 0;
+  margin-bottom: $footer-height;
 
   width: 100%;
   height: 100%;
   z-index: 1000;
   padding-bottom: 5px;
-
 }
 #loginbox {
   margin: 50px auto 0 auto;

diff --git a/app/assets/stylesheets/_projects.css.scss b/app/assets/stylesheets/_projects.css.scss
@@ -1,30 +1,47 @@
 @import "base.css.scss";
 
 #project-list {
+ list-style-type: none;
 
 
   & li{
-
-
-    & div{
+    float:left;
+    margin: 5px;
+    @extend .rounded-corners;
+    border-color: nth($primary-color, 2);
+    background-color: nth($master-background, 2);
+    display:block;
+    width:400px;
+    height:180px;
+
+    & div.project-text{
       vertical-align: top;
       display: inline-block;
       padding: $standard-padding;
+      width: 180px;
+      float:left;
+    }
 
+    & div.project-image {
+      width:150px;
+      height:150px;
+      float:left;
     }
 
     & img{
       padding: $standard-padding;
-
       display: inline-block;
     }
   }
 
 }
 
 .tile-image  {
-  max-height: 200px;
-  max-width: 200px;
+  max-height: 150px;
+  max-width: 150px;
+  margin-left: auto;
+  margin-right: auto;
+  display:block;
 }
 
 .thumb-image  {

diff --git a/app/assets/templates/error_404.html b/app/assets/templates/error_404.html
@@ -1 +1,4 @@
-not found
+<div id="content">
+    <h2>Not Found</h2>
+    <p>The page you requested could not be found.</p>
+</div>
diff --git a/app/assets/templates/projects_index.html b/app/assets/templates/projects_index.html
@@ -7,15 +7,17 @@ <h2>Projects</h2>
 
     <ul id="project-list">
         <li ng-repeat="project in projects">
-                <div>
-                    <h3><a ng-href="/projects/{{project.id}}" title="urn: {{project.urn}}">{{project.name}}</a></h3>
-                    <p ng-bind="project.description" ></p>
-                    <small>{{project.updated_at}}</small>
-                    <p ng-bind="project.sites.length" ></p>
-
-                </div>
-
-            <img class="tile-image" ng-src="{{project.photos[0].uri}}" >
+            <div class="project-text">
+                <h3><a ng-href="/projects/{{project.id}}" title="urn: {{project.urn}}">{{project.name}}</a></h3>
+                <p ng-bind="project.description" ></p>
+                <small>{{project.updated_at}}</small>
+                <small>{{project.created_at}}</small>
+                <small>{{project.creator_id}}</small>
+                <small ng-bind="project.sites.length" ></small>
+            </div>
+            <div class="project-image">
+                <img class="tile-image" ng-src="{{project.photos[0].uri}}" >
+            </div>
         </li>
 
     </ul>

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -10,29 +10,37 @@
   <script src="https://login.persona.org/include.js"></script>
   <%= csrf_meta_tags %>
   <%= yield(:head) %>
+
+  <!-- fot sticky footer -->
+  <!--[if !IE 7]>
+  <style type="text/css">
+      #wrap {display:table;height:100%}
+  </style>
+  <![endif]-->
 </head>
 <body baw-auth class="waiting-for-angular">
 
 <%= "" #yield
 %>
-<header>
+<div id="page-wrapper" >
 
-  <h1><a href="/">Bioacoustic Workbench</a></h1>
-  <ul>
-    <li><a href="/projects">Browse Projects</a></li>
-    <li><a href="/searches">Search</a></li>
-    <li><a href ng-click="$reloadView()">refresh</a></li>
-    <li ng-controller="LoginCtrl">
+  <header>
+
+    <h1><a href="/">Bioacoustic Workbench</a></h1>
+    <ul>
+      <li><a href="/projects">Browse Projects</a></li>
+      <li><a href="/searches">Search Recordings</a></li>
+      <li><a href ng-click="$reloadView()">refresh</a></li>
+      <li ng-controller="LoginCtrl">
       <span ng-show="loggedIn">
-        Welcome <a href="/user/{{userData.user_id}}" ng-bind="friendly_name" title="{{email}}"></a>&nbsp;&nbsp;<a href ng-click="logout()">Sign Out</a>
+        Welcome <a href="/user/{{userData.user_id}}" title="{{friendly_name}}: {{email}}">{{email}}</a>&nbsp;&nbsp;<a href ng-click="logout()">Sign Out</a>
       </span>
       <span ng-hide="loggedIn">
         <a href ng-click="login()">Sign In</a>
       </span>
-    </li>
-  </ul>
-</header>
-<div id="page-wrapper" >
+      </li>
+    </ul>
+  </header>
 
   <div id="login-holder">
     <div id="loginbox">