Merge pull request #50 from pateljannat/sketch-card

fix: sketch card

mon_school/public/css/style.css

@@ -3,12 +3,7 @@
 }
 
 .sketch-teaser {
-	background: white;
-	border-radius: 9px;
-	border: 1px solid #C4C4C4;
-	width: 220px;
-	margin-bottom: 30px;
-	margin-top: 30px;
+	flex-direction: column;
 }
 
 .sketch-teaser svg {
@@ -17,12 +12,37 @@
 }
 
 .sketch-image {
-	padding: 10px;
+	padding: 0.5rem;
+	text-align: center;
 }
 
 .sketch-footer {
-	border-top: 1px solid#C4C4C4;
-	padding: 10px;
-	background: #F6F6F6;
-	border-radius: 0px 0px 10px 10px;
+	margin: 1rem 1.5rem 1rem;
+}
+
+.sketch-page-header {
+	padding-top: 2rem;
+	padding-bottom: 2rem;
+}
+
+.sketch-list {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
+	-moz-column-gap: 2rem;
+	column-gap: 2rem;
+	row-gap: 2rem;
+}
+
+.sketch-link {
+	color: inherit;
+	font-size: 0.75rem;
+	line-height: 135%;
+}
+
+.sketch-link:hover {
+	text-decoration: none;
+}
+
+.sketch-title {
+	margin-bottom: 16px;
 }

mon_school/templates/profile/sketches.html

@@ -1,24 +1,6 @@
-<div class='container'>
-  <div class="row">
-    {% for sketch in sketches %}
-      <div class="col-md-3">
-        <div class="sketch-teaser">
-          <div class="sketch-image">
-            <a href="/sketches/{{sketch.sketch_id}}">
-              <img src="{{sketch.get_image_url()}}">
-            </a>
-          </div>
-          <div class="sketch-footer">
-            <div class="sketch-title">
-              <a href="sketches/{{sketch.sketch_id}}">{{sketch.title}}</a>
-            </div>
-            <div class="sketch-author">
-              {% set owner = sketch.get_owner() %}
-              by <a href="/{{owner.username}}">{{owner.full_name}}</a>
-            </div>
-          </div>
-        </div>
-      </div>
-    {% endfor %}
-  </div>
+{% from "www/macros/sketch_card.html" import sketch_card %}
+<div class="sketch-list">
+  {% for sketch in sketches %}
+  {{ sketch_card(sketch, False, widgets) }}
+  {% endfor %}
 </div>

mon_school/www/macros/sketch_card.html

@@ -0,0 +1,36 @@
+{% macro sketch_card(sketch, show_likes, widgets) %}
+<div class="common-card-style sketch-teaser">
+  <div class="sketch-image">
+    <a href="/sketches/{{sketch.sketch_id}}">
+      <img src="{{sketch.get_image_url()}}" />
+    </a>
+  </div>
+  <div class="sketch-footer">
+    <div class="sketch-title">
+      {{sketch.title}}
+    </div>
+    <div class="card-divider"></div>
+    {% set owner = sketch.get_owner() %}
+    <div>
+      <span class="">
+        {{ widgets.Avatar(member=owner, avatar_class="avatar-small") }}
+        <a class="button-links" href="/{{owner.username}}">
+          <span class="course-instructor">
+            {{ owner.full_name }}
+          </span>
+        </a>
+      </span>
+      <!-- below html would require changes based on if the user has liked the sketch or not -->
+      {% if show_likes %}
+      <span class="course-student-count">
+        <span>
+          <img class="icon-background" src="/assets/community/icons/like.svg" />
+          {{ likes }}
+        </span>
+      </span>
+      {% endif %}
+    </div>
+  </div>
+  <a class="stretched-link" href="sketches/{{sketch.sketch_id}}"></a>
+</div>
+{% endmacro %}

mon_school/www/sketches/index.html

@@ -1,43 +1,27 @@
 {% extends "templates/base.html" %}
 {% from "www/macros/livecode.html" import LiveCodeEditor, LiveCodeEditorJS %}
+{% from "www/macros/sketch_card.html" import sketch_card %}
 
 {% block title %}Sketches{% endblock %}
 {% block head_include %}
-	<meta name="description" content="Sketches" />
-	<meta name="keywords" content="sketches" />
-  <link rel="stylesheet" href="/assets/css/lms.css">
+<meta name="description" content="Sketches" />
+<meta name="keywords" content="sketches" />
+<link rel="stylesheet" href="/assets/css/lms.css">
 {% endblock %}
 
 {% block content %}
-<section class="top-section" style="padding: 1rem 0rem;">
-	<div class='container pb-5'>
-		<h1>Recent Sketches</h1>
-
-    <a href="/sketches/new" class="btn btn-primary">Create a New Sketch</a>
-	</div>
-	<div class='container'>
-    <div class="row">
+<div class="common-page-style">
+  <div class='container'>
+    <div class="sketch-page-header">
+      <span class="course-home-headings">Sketches</span>
+      <a href="/sketches/new" class="btn btn-primary pull-right">Submit a Sketch</a>
+    </div>
+    <div class="card-divider-dark"></div>
+    <div class="sketch-list">
       {% for sketch in sketches %}
-        <div class="col-md-3">
-          <div class="sketch-teaser">
-            <div class="sketch-image">
-              <a href="/sketches/{{sketch.sketch_id}}">
-                <img src="{{sketch.get_image_url()}}" />
-              </a>
-            </div>
-            <div class="sketch-footer">
-              <div class="sketch-title">
-                <a href="/sketches/{{sketch.sketch_id}}">{{sketch.title}}</a>
-              </div>
-              <div class="sketch-author">
-                {% set owner = sketch.get_owner() %}
-                by <a href="/{{owner.username}}">{{owner.full_name}}</a>
-              </div>
-            </div>
-          </div>
-        </div>
+      {{ sketch_card(sketch, False, widgets) }}
       {% endfor %}
     </div>
-	</div>
-</section>
+  </div>
+</div>
 {% endblock %}