Merge pull request #49 from mbuchthal/refactor1

add additional functionality and buttons, restyled buttons, refactor …

public/partials/blogs/blog_form.html

@@ -1,13 +1,13 @@
 
 <form ng-submit="vm.save()" class="blog_form">
-  <legend>Add A Blog Entry</legend>
+  <legend>Blog Entry</legend>
   <fieldset>
     <label for="title">Title:</label>
     <input type="text" ng-model="vm.blog.title" name="title" />
   </fieldset>
   <fieldset>
     <label for="content">Content:</label>
-    <input type="text" ng-model="vm.blog.content" name="content" />
+    <textarea type="text" ng-model="vm.blog.content" name="content" rows="5" columns="100"></textarea>
   </fieldset>
   <fieldset>
     <label for="author">Author:</label>

src/app/blogs/blog_details.html

@@ -1,12 +1,15 @@
 
-<article class="blog-details">
-  <h1>{{vm.blog.title}}</h1>
-  <ul>
-    <li>By: {{vm.blog.author}}</li>
-    <li>Date: {{vm.blog.date}}</li>
-    <li>Comments: {{vm.blog.comments}}</li>
-  </ul>
-  <p>{{vm.blog.content}}</p>
-  <a href="#/blogs/{{vm.blog._id}}/edit">edit this post</a>
+<article class="blog_post">
+  <h2>{{vm.blog.title}}</h2>
+  <div class="blog_info">
+    <ul class="blog-data">
+      <li>By: {{vm.blog.author}}</li>
+      <li>Date: {{vm.blog.date}}</li>
+      <li>Comments: {{vm.blog.comments}}</li>
+    </ul>
+  </div>
+  <p class="full-post">{{vm.blog.content}}</p>
+  <a href="#/blogs/{{vm.blog._id}}/edit" class="edit-button">Edit Blog</a>
+  <a href="#/blogs" class="back-button">Back</a>
 </article>
 

src/app/blogs/blog_form.html

@@ -1,13 +1,13 @@
 
 <form ng-submit="vm.save()" class="blog_form">
-  <legend>Add A Blog Entry</legend>
+  <legend>Blog Entry</legend>
   <fieldset>
     <label for="title">Title:</label>
     <input type="text" ng-model="vm.blog.title" name="title" />
   </fieldset>
   <fieldset>
     <label for="content">Content:</label>
-    <input type="text" ng-model="vm.blog.content" name="content" />
+    <textarea type="text" ng-model="vm.blog.content" name="content" rows="5" columns="100"></textarea>
   </fieldset>
   <fieldset>
     <label for="author">Author:</label>

src/app/blogs/blogs_list.html

@@ -1,14 +1,19 @@
-<div>
-  <article class="blog-detail" ng-repeat="blog in vm.blogs">
-    <h1>{{blog.title}}</h1>
-    <h1 ng-if="!vm.blogs.length">No blog posts yet!</h1>
+<div class="blog-collection">
+  <article class="blog_post" ng-repeat="blog in vm.blogs">
+    <h2>{{blog.title}}</h2>
+    <h2 ng-if="!vm.blogs.length">No blog posts yet!</h2>
     <p>{{blog.content | limitTo: 350}}</p>
-    <ul ng-if="vm.blogs.length" class="blog-data">
-      <li>By: {{blog.author}}</li>
-      <li>Date: {{blog.date}}</li>
-      <li>Comments: {{blog.comments}}</li>
-    </ul>
-    <button ng-click="vm.delete(blog)">delete this blog</button>
-    <a href="#/blogs/new">Add a new blog</a>
+    <div class="blog_info_container">
+      <div class="blog_info">
+        <ul ng-if="vm.blogs.length" class="blog-data">
+          <li>By: {{blog.author}}</li>
+          <li>Date: {{blog.date}}</li>
+          <li>Comments: {{blog.comments}}</li>
+        </ul>
+        <a href="#/blogs/{{blog._id}}" class="read_more">Read More</a>
+        <button ng-click="vm.delete(blog)">delete this blog</button>
+      </div>
+    </div>
   </article>
+  <a href="#/blogs/new" class="add-blog">Add a new blog</a>
 </div>

src/sass/main.scss

@@ -1,11 +1,12 @@
 
 // modules
+@import "modules/reset";
 @import "modules/globals";
 @import "modules/colors";
 @import "modules/typography";
 @import "modules/mixins/flexbox";
 @import "modules/mixins/pseudo-insert";
-@import "modules/reset";
+@import "modules/mixins/button-mock";
 
 @import "modules/links_media";
 @import "modules/icon-styles";
@@ -19,6 +20,4 @@
 @import "partials/blog_post";
 @import "partials/footer";
 @import "partials/form";
-@import "partials/blog_details";
-@import "partials/blog_form";
 @import "partials/blogs_list";

src/sass/modules/_globals.scss

@@ -1,5 +1,4 @@
 
-body {
-  padding: 0 5em;
-
-}
+// body {
+//   padding: 0 5em;
+// }

src/sass/modules/mixins/_button-mock.scss

@@ -0,0 +1,16 @@
+@mixin button-mock ($button-bk: inherit, $button-clr: #fff) {
+  text-decoration: none;
+  text-transform: uppercase;
+  color: $button-clr;
+  padding: 1em 2em;
+  border: 1px solid #fff;
+  border-radius: .5em;
+  letter-spacing: .1em;
+  margin: auto 1em;
+  background-color: $button-bk;
+   &:hover {
+      background-color: $color-3;
+      color: #000;
+      border-color: $color-3;
+    }
+}

src/sass/partials/_blog_post.scss

@@ -1,9 +1,11 @@
 
 .blog_post {
-  padding: 3em 5em;
-  font-family: $font-sub;
-  min-width: 50em;
+  padding: 2em 20em;
+  font-family: $font-main;
   margin: auto;
+  @media screen and (max-width: 75em) {
+    padding: 2em 5em;
+  }
   h2 {
     padding-top: 1em;
     font-size: 1.8em;
@@ -16,9 +18,20 @@
     font-weight: 300;
     color: $color-2;
   }
+  .full-post {
+    padding-bottom: 2em;
+  }
+  button {
+    @include button-mock ($color-1);
+    float: right;
+  }
+  @media screen and (max-width: 50em) {
+    min-width: 20em;
+  }
 }
 
 .blog_info {
+
   padding-top: 2em;
   padding-bottom: 2em;
   ul {
@@ -28,6 +41,8 @@
     float: left;
     font-style: italic;
     list-style-type: none;
+    padding-top: 0.5em;
+    font-size: 0.8em;
     :nth-child(2):before {
       content: '\b7\a0';
     }
@@ -38,18 +53,16 @@
       display: inline;
     }
   }
-  a {
+  .read_more {
     text-decoration: none;
     text-transform: uppercase;
     color: #fff;
-    padding: 1em 2em;
+    padding: .9em 3em;
     border: 1px solid;
     border-radius: .5em;
     font-size: .8em;
     letter-spacing: .1em;
-
     background-color: #000;
-
     display: inline-block;
     float: right;
     &:hover {
@@ -59,3 +72,12 @@
     }
   }
 }
+
+.edit-button {
+  @include button-mock($color-1, #fff);
+  font-size: .7em;
+  margin-left: 0;
+}
+.back-button {
+  @extend .edit-button;
+}

src/sass/partials/_blogs_list.scss

@@ -1,46 +1,17 @@
-.blog-detail{
-	display: block;
-	line-height: 200%;
-	font-family: $font-main;
-	text-align: center;
-	h1{
-		font-weight: bold;
-		font-size: 2em;
-	}
-	button{
-		margin-top: 1em;
-		margin-bottom: 1em;
-	}
-	a{
-		display: block;
-		margin-bottom: 1em;
-		padding: 0.8em 1.8em;
-    	color: #fff;
-    	background-color: #97F1E7;
-    	font-size: 1em;
-    	text-align: center;
-    	border-radius: 0.4em;
-    	border: 1px solid #000;
-    	border-width: 1px 3px 3px 1px;
-    	width: 10%;
-    	margin-left: 44.5%;
-	}
-	li{
-		display: inline;
-		padding-right: 1.5em;
-		font-style: italic;
-	}
+
+.blog-collection {
+  padding-bottom: 2em;
+}
+
+.add-blog {
+  @include button-mock($color-1, #fff);
+  font-size: 0.7em;
 }
 
-@media screen and (max-width: 50em) {
-	.blog-detail{
-		a{
-			width: 40%;
-			margin-left: 23%;
-		}
-		button{
-			width: 60%;
-			margin-left: 5%
-		}
-	}
-}
+.read-more {
+  @extend .add-blog;
+}
+
+.blog_info_container {
+  @include flexbox;
+}