styles all of the existing pages. looking good, me!

MaxBlaushild · Jul 9, 2015 · 63c1a13 · 63c1a13
1 parent 945122c
commit 63c1a13
Show file tree

Hide file tree

Showing 20 changed files with 136 additions and 82 deletions.
diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -16,8 +16,6 @@ angular
     if(AuthFactory.isLoggedIn()){
       var data = $window.localStorage.getItem('gl-user-token');
       $http.defaults.headers.common.Authorization = 'Token token=' + data;
-    } else {
-      $location.path('/login');
     }
   });
 

diff --git a/app/scripts/directives/cloud-picture-directive.js b/app/scripts/directives/cloud-picture-directive.js
@@ -5,29 +5,33 @@ angular
     .directive('glCloudPicture', glCloudPicture);
 
 
-function glCloudPicture() {
+function glCloudPicture($location) {
   return function (scope, element) {
-    var startX = getRandomInt(-100,600), startY = getRandomInt(-100,600), x = 0, y = 0;
+    var startX = getRandomInt(100,1400);
+    var startY = getRandomInt(100,600);
+    var x = 0;
+    var y = 0;
 
     element.css({
-      'top' : startX,
-      // 'bottom' : getRandomInt(-100,600),
-      'left' : startY,
-      // 'right' : getRandomInt(-100,600)
+      top : startY,
+      left : startX
+    });
+
+    element.on('dblclick', function(event){
+      scope.$apply(function() {
+        $location.path('/pictures/' + element.data("id"));
+      });
     });
 
     element.on('mousedown', function(event) {
-        // Prevent default dragging of selected content
         event.preventDefault();
-        startX = event.pageX - x;
-        startY = event.pageY - y;
         $(document).on('mousemove', mousemove);
         $(document).on('mouseup', mouseup);
       });
 
       function mousemove(event) {
-        y = event.pageY - startY;
-        x = event.pageX - startX;
+        y = event.pageY;
+        x = event.pageX;
         element.css({
           top: y + 'px',
           left:  x + 'px'

diff --git a/app/scripts/factories/user-factory.js b/app/scripts/factories/user-factory.js
@@ -70,9 +70,8 @@
                     file: file,
                     fileFormDataName: 'auth[avatar]'
                 }).success(function(response) {
-                    debugger;
-                    $window.localStorage.setItem('gl-user-token', response.token);
-                    $http.defaults.headers.common.Authorization = 'Token token=' + response.token;
+                    $window.localStorage.setItem('gl-user-token', response.user.token);
+                    $http.defaults.headers.common.Authorization = 'Token token=' + response.user.token;
                     $location.path('/');
                 });
             };

diff --git a/app/styles/main.scss b/app/styles/main.scss
@@ -18,6 +18,9 @@ $icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/boots
 // views here
 @import "views/navbar.scss";
 @import "views/feed.scss";
+@import "views/discover.scss";
+@import "views/user-show.scss";
+@import "views/forms.scss";
 
 
 

diff --git a/app/styles/utilities/glitchly-style-guide.scss b/app/styles/utilities/glitchly-style-guide.scss
@@ -2,7 +2,8 @@
 
 $orange: #FF6600;
 $blue: #0652ff;
-$super-text: lobster;
+$super-text: vt323;
 $main-text: vt323;
+$blue-steel-clear: rgba(6, 82, 255, .5);
 
 
diff --git a/app/styles/utilities/mixins.scss b/app/styles/utilities/mixins.scss
@@ -48,3 +48,11 @@
   };
 }
 
+@mixin super-center(){
+  position: fixed;
+  top: 40%;
+  left: 50%;
+  text-align: center;
+  transform: translate(-50%, -50%);
+}
+
diff --git a/app/styles/views/discover.scss b/app/styles/views/discover.scss
@@ -0,0 +1,13 @@
+#discover-hero {
+  font-size: 72px;
+  @include super-center();
+}
+
+.cloud {
+
+  .picture {
+    position: absolute;
+    height: 200px;
+    width: 200px;
+  }
+}
diff --git a/app/styles/views/feed.scss b/app/styles/views/feed.scss
@@ -1,24 +1,13 @@
 .feed {
 
-  // @for $i from 1 through 100 {
-  //   #picture-#{$i} {
-  //     position: absolute;
-  //     top: random(500) + px;
-  //     left: random(1000) + px;
-  //     right: random(1000) + px;
-  //     bottom: random(1000) + px;
-  //     z-index: $i;
-
-  //     img {
-  //       height: 200px;
-  //       width: 200px;
-  //     }
-  //   }
-  // }
-
   .picture {
-    position: absolute;
-    height: 200px;
-    width: 200px;
+    margin-top: 40px;
+    padding-top: 10px;
+    background-color: rgba(6, 82, 255, .5);
+    width: 510px;
+
+    .media {
+      padding-left: 10px;
+    }
   }
 }
diff --git a/app/styles/views/forms.scss b/app/styles/views/forms.scss
@@ -0,0 +1,22 @@
+#form {
+
+  h1 {
+    font-size: 72px;
+  }
+
+  label {
+    color: $blue;
+    font-family: $main-text;
+    font-size: 36px;
+  }
+
+  input {
+    @include glitch-form;
+  }
+
+  @include placeholder-change($blue);
+
+  button {
+    @include glitch-button;
+  }
+}
diff --git a/app/styles/views/user-show.scss b/app/styles/views/user-show.scss
@@ -0,0 +1,19 @@
+html, body {
+  overflow-x: hidden;
+}
+
+.user-show {
+  position: relative;
+  padding: 25px;
+  background-color: $blue-steel-clear;
+  z-index: 9999;
+}
+
+.grid {
+  margin-top: 30px;
+  .picture {
+    display: inline-block;
+    width: 195px;
+    height: 195px;
+  }
+}
diff --git a/app/views/discover-view.html b/app/views/discover-view.html
@@ -1,2 +1,2 @@
-<h1>Every picture is made up of a thousand tiny pixels</h1>
+<h1 id="discover-hero">Every picture is made up of a thousand tiny pixels</h1>
 <gl-picture-grid></gl-picture-grid>
diff --git a/app/views/login-form.html b/app/views/login-form.html
@@ -1,7 +1,7 @@
 <div class="row">
     <div class="col-md-8 main-wrap col-md-offset-2">
-      <h1 class="hero-text">Login</h1>
-      <form class="form-wrap" name="loginForm"  novalidate>
+      <form id="form" name="loginForm"  novalidate>
+        <h1> Log In</h1>
         <div class='form-group'>
           <label id='username-label'for="username">Username</label>
           <input id='username' type="text" class="form-control" name="username" ng-model="AuthCtrl.credentials.username" required>

diff --git a/app/views/login-page.html b/app/views/login-page.html
@@ -1,4 +1 @@
-<h1> Please Log In W/ Your Deets</h1>
-<div class="row">
-  <gl-login-form></gl-login-form>
-</div>
+<gl-login-form></gl-login-form>
diff --git a/app/views/navbar.html b/app/views/navbar.html
@@ -17,7 +17,7 @@
             <li ng-if="NavbarCtrl.isLoggedIn()"><a class="nav-not-pic" href='#/discover'>Discover</a></li>
             <li ng-if="NavbarCtrl.isLoggedIn()"><a class="nav-not-pic" href='javascript:void(0)' ng-click="NavbarCtrl.logOut()">Logout</a></li>
             <li ng-if="!NavbarCtrl.isLoggedIn()"><a class="nav-not-pic" href='#/login'>Login</a></li>
-            <li ng-if="!NavbarCtrl.isLoggedIn()"><a class="nav-not-pic" href='#/sign-in'>Signin</a></li>
+            <li ng-if="!NavbarCtrl.isLoggedIn()"><a class="nav-not-pic" href='#/sign-up'>Sign Up</a></li>
           </ul>
           <form class="navbar-form navbar-right" role="search">
             <div class="form-group">

diff --git a/app/views/picture-form.html b/app/views/picture-form.html
@@ -1,21 +1,21 @@
 <div class="row">
-    <div class="col-md-8 main-wrap col-md-offset-2">
+    <div id ="form" class="col-md-8 main-wrap col-md-offset-2">
         <form class="form-wrap" role="form" name="upsertPictureForm" novalidate>
-            <h2 ng-if="!PictureCtrl.picture.id">Glitch a Pic</h2>
+            <h1 ng-if="!PictureCtrl.picture.id">Glitch a Pic</h1>
             <div class="alert alert-danger alert-dismissible" role="alert" ng-show="PictureCtrl.serverErrors">
                 <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                 {{ PictureCtrl.serverErrorMsg }}
             </div>
             <div class="form-group">
-                <label>Name</label>
+                <label>Caption</label>
                 <input type="text" class="form-control" ng-model="PictureCtrl.picture.caption">
             </div>
             <div class="form-group">
                 <label>Avatar</label>
-                <input type="file" class="form-control" ng-file-select ng-model="PictureCtrl.picture.image">
+                <input type="file"  ng-file-select ng-model="PictureCtrl.picture.image">
             </div>
             <br>
-            <button class="button-wrap" ng-click='PictureCtrl.createPicture(PictureCtrl.picture)'>Submit</button>
+            <button ng-click='PictureCtrl.createPicture(PictureCtrl.picture)'>Submit</button>
             <button type="reset" class="btn btn-default" ng-click="PictureCtrl.cancel()">Cancel</button>
         </form>
     </div>

diff --git a/app/views/picture-grid.html b/app/views/picture-grid.html
@@ -1,9 +1,6 @@
-<div ng-repeat="picture in PictureCtrl.pictures">
-  <div class ="grid-picture">
-    <img ng-src="{{picture.medium_url}}"/>
-    <div class="word-wrap">
-      <h1><a href="#/pictures/{{picture.id}}">{{ picture.caption }}</a></h1>
+<div class="row cloud">
+  <div ng-repeat="picture in PictureCtrl.pictures" >
+    <img class="picture" data-id="{{picture.id}}" ng-src="{{picture.large_url}}" gl-cloud-picture />
     </div>
   </div>
 </div>
-
diff --git a/app/views/picture-list.html b/app/views/picture-list.html
@@ -1,21 +1,19 @@
 <div class="row feed">
   <h1 ng-if="PictureCtrl.pictures.length === 0">You don't have any pictures yet!</h1>
-  <div ng-repeat="picture in PictureCtrl.pictures" >
-    <div id="picture-{{picture.id}}" >
-      <a href="#/pictures/{{picture.id}}">
-        <img class="picture" ng-src="{{picture.large_url}}" gl-cloud-picture />
-      </a>
-<!--       <div class="media">
-          <div class="media-left">
-            <a href="#/users/{{picture.user.id}}">
-              <img class="media-object" ng-src="{{picture.user.thumb_url}}"/>
-            </a>
-          </div>
-          <div class="media-body">
-            <a href="#/users/{{picture.user.id}}"><h4>{{ picture.user.username}}</h4></a>
-            <p>{{ picture.caption}}</p>
-          </div>
-      </div> -->
+  <div class="col-xs-6" ng-repeat="picture in PictureCtrl.pictures">
+    <div class="picture">
+      <div class="media">
+        <div class="media-left">
+          <a href="#/users/{{picture.user.id}}">
+            <img class="media-object" ng-src="{{picture.user.thumb_url}}"/>
+          </a>
+        </div>
+        <div class="media-body">
+          <a href="#/users/{{picture.user.id}}"><h4>{{ picture.user.username}}</h4></a>
+          <p>{{ picture.caption}}</p>
+        </div>
+      </div>
+      <img ng-src="{{picture.large_url}}"/>
     </div>
   </div>
 </div>

diff --git a/app/views/picture-show.html b/app/views/picture-show.html
@@ -1,4 +1,3 @@
-<h1>Howdy doodee</h1>
 <div class ="picture-show">
   <img ng-src="{{PictureCtrl.picture.large_url}}"/>
   <div class="word-wrap">

diff --git a/app/views/sign-up-form.html b/app/views/sign-up-form.html
@@ -1,7 +1,7 @@
 <div class="row">
     <div class="col-md-8 main-wrap col-md-offset-2">
-        <form role="form" class="form-wrap" name="upsertUserForm" ng-submit="UserCtrl.upsertUser(UserCtrl.user)" novalidate>
-        <h2>Sign Up</h2>
+        <form role="form" id="form" name="upsertUserForm" ng-submit="UserCtrl.upsertUser(UserCtrl.user)" novalidate>
+        <h1>Sign Up</h1>
         <div class="alert alert-danger alert-dismissible" role="alert" ng-show="UserCtrl.serverErrors">
             <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             {{ UserCtrl.serverErrorMsg }}
@@ -32,7 +32,7 @@ <h2>Sign Up</h2>
         </div>
         <div class="form-group">
             <label>Avatar</label>
-            <input type="file" class="form-control" ng-file-select ng-model="UserCtrl.user.avatar">
+            <input type="file" ng-file-select ng-model="UserCtrl.user.avatar">
         </div>
         <button type="submit" class="button-wrap" ng-disabled="upsertUserForm.$invalid">Submit</button>
         <button type="reset" class="btn btn-default" ng-click="UserCtrl.cancel()">Cancel</button>

diff --git a/app/views/user-show.html b/app/views/user-show.html
@@ -1,9 +1,16 @@
-<h1>Howdy doodee</h1>
-<div class ="user-show">
-  <img ng-src="{{UserCtrl.user.profile_url}}"/>
-  <div class="word-wrap">
-    <h1>{{ UserCtrl.user.username}}</h1>
-    <p>{{ UserCtrl.user.bio}}</p>
+<div class="row">
+  <div class ="user-show">
+    <div class="media">
+      <div class="media-left">
+        <img ng-src="{{UserCtrl.user.profile_url}}"/>
+      </div>
+      <div class="media-body">
+        <h1>{{ UserCtrl.user.username}}</h1>
+        <p>{{ UserCtrl.user.bio}}</p>
+      </div>
+    </div>
   </div>
 </div>
-
+<div class="row grid">
+  <img ng-repeat="picture in UserCtrl.user.pictures"class="picture" data-id="{{picture.id}}" ng-src="https://s3.amazonaws.com/testbucketfoshosies/large/{{picture.id}}/{{picture.image_file_name}}" />
+</div>