Merge branch 'master' of github.com:ncss/projects-2018-4

ncss · Jan 14, 2018 · 509a77e · 509a77e
2 parents e71a0e7 + 2c924ce
commit 509a77e
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 25 deletions.
diff --git a/pages/feed.html b/pages/feed.html
@@ -6,16 +6,18 @@
 {% for i, meme in enumerate(photo_list) %}
 
    <article id="article" class="post">
-		<div class = "meta-primary-container">
-			<a class="username" style="text-align: left;" href="/profile/{{ meme.user.name }}">
+		<div class="meta-primary-container">
+			<a class="username" href="/profile/{{ meme.user.name }}">
 				<img class="dp" src="{{ meme.user.image }}" />
 				<strong>{{ meme.user.name }}</strong>
 			</a>
-			<p class="location" style="cursor: pointer; text-align: right;" onclick="map.open( '{{ meme.latitude }}', '{{ meme.longitude }}' )"><img id = 'map2' src='static/icons/map2.png'> View Location</p>
-			<p class="upvote">{{ check_upvotes(meme.ID) }}</p>
-			<div class="meme-image-container">
-				<a href="/post/{{i}}"><img class="meme-image" src="{{ meme.image }}" alt= "image" /></a>
-			</div>
+			<p class="location" style="cursor: pointer;" onclick="map.open( '{{ meme.latitude }}', '{{ meme.longitude }}' )">
+				<img id = 'map2' src='static/icons/map2.png'> 
+				<span class="location-link">View Location</span>
+			</p>
+		</div>
+		<div class="meme-image-container">
+			<a href="/post/{{i}}"><img class="meme-image" src="{{ meme.image }}" alt= "image" /></a>
 		</div>
 		<div class="meta-secondary-container">
 			<p class="caption">{{ meme.caption }}</p>

diff --git a/static/main.css b/static/main.css
@@ -185,29 +185,25 @@ article.post {
 	box-shadow: 0px 5px 0px 0px black;
 }
 
-.dp {
-  grid-column: 1; /*Second number is non-inclusive (like splicing a list).*/
-	max-height: 50px;
-  float: left;
-  width: auto;
-}
-
 .username {
-  grid-column: 2;
+  grid-column: 1;
   text-decoration: none;
   color: black;
-  padding-top: 20px;
-  text-align: left;
-  float: left;
   color: inherit;
-  width: auto;
+  display: grid;
+  grid-template-columns: auto auto;
+  align-items: center;
+}
+
+.username strong {
+	text-align: left;
 }
 
 .location {
 	grid-column: 3;
-  text-align: right;
-  float: left;
-  width: auto;
+	display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
 }
 
 .meme-image {
@@ -222,10 +218,25 @@ article.post {
 .meta-secondary-container {
 	grid-template-columns: 1fr 1fr 1fr;
 	grid-row: 3;
+	display: grid;
+	margin-bottom: 20px;
+}
+
+.meta-secondary-container p {
+	color: grey;
+	font-size: 0.75em;
+
+}
+
+.meta-primary-container {
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-row: 2;
+	display: grid;	
 }
 
 .caption {
-	grid-column: 1;
+	grid-column: 1 / 3;
+	text-align: left;
 }
 
 #map2{
@@ -248,8 +259,8 @@ article.post {
 
 
 img.dp {
-	max-width: 100%;
-	/*max-height: 100%;*/
+    max-width: 60px;
+    max-height: 60px;
 }
 
 .meme-container {
@@ -319,4 +330,8 @@ button:focus .material-icons {
 	transition-property: color;
 	transition-duration: 2s;
 	transition-delay: 0s;
+}
+
+.location-link {
+	padding-left: 10px;
 }