fixing mobile version for grid layout

VulcanJS · Jan 27, 2015 · 1aefbea · 1aefbea
1 parent 815b6c8
commit 1aefbea
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 60 deletions.
diff --git a/client/views/posts/modules/post_discuss.html b/client/views/posts/modules/post_discuss.html
@@ -1,7 +1,6 @@
 <template name="postDiscuss">
-  <a class="discuss-link go-to-comments action" href="/posts/{{_id}}">
+  <a class="discuss-link go-to-comments action" href="/posts/{{_id}}" title="{{_ 'discuss'}}">
     <i class="action-icon icon-comment"></i>
     <span class="action-count">{{commentCount}}</span>
-    <span class="action-label">{{_ 'discuss'}}</span>
   </a>
 </template>
diff --git a/client/views/posts/modules/post_upvote.html b/client/views/posts/modules/post_upvote.html
@@ -1,13 +1,11 @@
 <template name="postUpvote">
   {{#if upvoted}}
-    <span class="upvote-link voted action">
+    <span class="upvote-link voted action" title="{{_ "upvoted"}}">
       <i class="icon-check action-icon"></i>
-      <span class="action-label">{{_ "upvoted"}}</span>
     </span>
   {{else}}
-    <a class="upvote-link not-voted action" href="#">
+    <a class="upvote-link not-voted action" href="#" title="{{_ "upvote_"}}">
       <i class="icon-up action-icon"></i>
-      <span class="action-label">{{_ "upvote_"}}</span>
     </a>
   {{/if}}
 </template>
diff --git a/packages/telescope-embedly/lib/client/post_thumbnail.scss b/packages/telescope-embedly/lib/client/post_thumbnail.scss
@@ -5,7 +5,7 @@ $small-break: 30em;
   }
 }
 
-.post-thumbnail{
+.posts-list .post-thumbnail{
   flex-grow: 0;
   flex-shrink: 0;
   margin-right: 10px;

diff --git a/packages/telescope-module-share/lib/client/post_share.html b/packages/telescope-module-share/lib/client/post_share.html
@@ -1,7 +1,6 @@
 <template name="postShare">
-  <a href="#" class="share-link action">
+  <a href="#" class="share-link action" title="{{_ 'share'}}">
     <i class="action-icon icon-share"></i>
-    <span class="action-label">{{_ 'share'}}</span>
   </a>
   <div class="share-options hidden">
     <a class="mt-facebook mt-share-inline-square-sm" href="https://www.facebook.com/sharer/sharer.php?u={{sourceLink}}" target="_blank"><img src="//mojotech-static.s3.amazonaws.com/facebook@2x.png"></a>

diff --git a/...ubble/lib/client/scss/modules/_share.scss → ...e-module-share/lib/client/post_share.scss b/...ubble/lib/client/scss/modules/_share.scss → ...e-module-share/lib/client/post_share.scss
@@ -1,13 +1,42 @@
+$small-break: 30em;
+
+@mixin small(){
+  @media screen and (max-width: $small-break) {
+    @content;
+  }
+}
+
+$red: #DD3416;
+
+@mixin cf{
+  /* For modern browsers */
+  &:before,&:after {
+    content:"";
+    display:table;
+  }
+  &:after {
+  clear:both;
+  }
+  /* For IE 6/7 (trigger hasLayout) */
+  *zoom:1;
+}
+
+.post-share{
+  position: relative;
+}
+
 .share-options {
   position: absolute;
   @include small {
-    left: 0px;
-    top: 75px;
-  }
-  @include medium-large {
-    left: -180px;
-    top: 5px;
+    left: 50% !important;
+    top: 40px !important;
+    width: 185px;
+    margin-left: -92px;
   }
+  // @include medium-large {
+  //   left: -180px;
+  //   top: 5px;
+  // }
   padding: 10px;
   line-height: 1;
   a {
@@ -39,11 +68,11 @@
       left: 50%;
       margin-left: -11px;
     }
-    @include medium-large {
-      border-left-color: #ffffff;
-      top: 20px;
-      margin-top: -3px;
-    }
+    // @include medium-large {
+    //   border-left-color: #ffffff;
+    //   top: 20px;
+    //   margin-top: -3px;
+    // }
   }
   &:before {
     border-color: rgba(0, 0, 0, 0);
@@ -54,11 +83,11 @@
       left: 50%;
       margin-left: -12px;
     }
-    @include medium-large {
-      border-left-color: $red;
-      top: 20px;
-      margin-top: -4px;
-    }
+    // @include medium-large {
+    //   border-left-color: $red;
+    //   top: 20px;
+    //   margin-top: -4px;
+    // }
   }
   .buttons {
     @include cf;

diff --git a/packages/telescope-module-share/package.js b/packages/telescope-module-share/package.js
@@ -2,7 +2,7 @@ Package.describe({summary: "Telescope share module package"});
 
 Package.onUse(function (api) {
 
-  api.use(['telescope-lib', 'telescope-base'], ['client', 'server']);
+  api.use(['telescope-lib', 'telescope-base', 'fourseven:scss'], ['client', 'server']);
 
   api.use([
     'jquery',
@@ -12,7 +12,7 @@ Package.onUse(function (api) {
 
   api.add_files(['lib/share.js'], ['client', 'server']);
 
-  api.add_files(['lib/client/post_share.html', 'lib/client/post_share.js'], ['client']);
+  api.add_files(['lib/client/post_share.html', 'lib/client/post_share.js', 'lib/client/post_share.scss'], ['client']);
 
   // api.export();
 });
diff --git a/packages/telescope-theme-hubble/lib/client/scss/modules/_posts.scss b/packages/telescope-theme-hubble/lib/client/scss/modules/_posts.scss
@@ -40,17 +40,7 @@
 			background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVQYV2NkIALMnDlTkpGQOpCi9PT053gVwhSBDMOpEFkRToXoirAqxKYIQyEuRSgK8SmCKySkCKyQGEUghQC5OyXvW/4BHwAAAABJRU5ErkJggg==');
 		}
 	}
-	.post-share{
-		display: none;
-	}
-	&.show-actions{
-		.post-content{
-			display: none;
-		}
-		.post-share, .post-discuss, .post-upvote{
-			display: block;
-		}
-	}	
+
 }
 
 // ------------------------------ posts-list layout ------------------------------ //
@@ -111,6 +101,9 @@
 	.post-discuss{
 		order: 7;
 		padding-top: 6px;
+		@include small{
+			display: none;
+		}
 	}
 	.post-share, .post-discuss{
 		// width: 60px;
@@ -121,33 +114,52 @@
 	}
 	.post-actions{
 		order: 8;
+		@include small{
+			display: block;
+		}
 	}
 	.post-avatars{
-		order: 6
+		order: 6;
+	 	@include small{
+	 		display: none;
+	 	}
 	}
-	&.show-actions{
+	.show-actions{
+		.post-content{
+			display: none;
+		}
 		.post-share, .post-discuss, .post-upvote{
 			flex-grow: 1;
+			display: block;
+		}
+	}	
+	.action-label{
+		@include small{
+			display: block;
 		}
 	}
 }
 
 // ------------------------------ posts-grid layout ------------------------------ //
 
 .posts-grid{
-	display: flex;
-  flex-wrap: wrap;
+	@include medium-large{
+		display: flex;
+	  flex-wrap: wrap;
+  }
 	.post{
-		width: calc((100% - 20px)/3);
-		margin-right: 10px;
+		@include medium-large{
+			width: calc((100% - 20px)/3);
+			margin-right: 10px;
+			&:nth-of-type(3n){
+				margin-right: 0;
+			}
+		}
 		margin-bottom: 10px;
 		display: block;
 		padding: 0;
 		position: relative;
 		padding-bottom: 40px;
-		&:nth-of-type(3n){
-			margin-right: 0;
-		}
 		&:after{
 			content: " ";
 			display: block;
@@ -246,9 +258,6 @@
 		}
 		.action-label{
 			display:none;
-			@include small{
-				display: block;
-			}
 		}
 		&.not-voted:hover{
 			i{
@@ -291,9 +300,6 @@
 .post-avatars{
  	display: inline-block;
  	display: flex;
- 	@include small{
- 		display: none;
- 	}
  	.author-avatar{
  		display: block;
  	}
@@ -328,18 +334,13 @@
 
 .post-discuss{
 	.action-label{
-		@include medium-large{
-			display: none;
-		}
+		display: none;
 	}
 }
 
 .post-actions{
 	display: none;
 	text-align: right;
-	@include small{
-		display: block;
-	}
 	a{
 		display: block;
 		width: 36px;
@@ -360,6 +361,9 @@
 	}
 }
 
+.post-share{
+	display: none;
+}
 // -------------------------------- post content --------------------------------- //
 
 .post-heading{

diff --git a/packages/telescope-theme-hubble/package.js b/packages/telescope-theme-hubble/package.js
@@ -26,7 +26,6 @@ Package.onUse(function (api) {
       'lib/client/scss/modules/_icons.scss',
       'lib/client/scss/modules/_nav.scss',
       'lib/client/scss/modules/_posts.scss',
-      'lib/client/scss/modules/_share.scss',
       'lib/client/scss/modules/_user-profile.scss',
 
       // partials