From 0ab4fbb03d49f7c2fcff1c6ef677cf17d13212de Mon Sep 17 00:00:00 2001
From: Anand Chitipothu <anandology@gmail.com>
Date: Wed, 28 Apr 2021 15:17:13 +0530
Subject: [PATCH] [mockups] added sketches page

---
 mockups/base.html        |  7 +++++++
 mockups/sketches.html    | 33 +++++++++++++++++++++++++++++++++
 mockups/sketches.yml     | 38 ++++++++++++++++++++++++++++++++++++++
 mockups/static/style.css | 21 +++++++++++++++++++++
 4 files changed, 99 insertions(+)
 create mode 100644 mockups/sketches.html
 create mode 100644 mockups/sketches.yml

diff --git a/mockups/base.html b/mockups/base.html
index adcd82b9..b7da0aae 100644
--- a/mockups/base.html
+++ b/mockups/base.html
@@ -19,6 +19,13 @@
         <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul class="mr-auto navbar-nav">
+            <li class="nav-item">
+            <a class="nav-link" href="/sketches.html">
+                Sketches
+              </a>
+            </li>
+          </ul>
           <ul class="ml-auto navbar-nav">
             <!-- post login tools -->
             <li class="nav-item">
diff --git a/mockups/sketches.html b/mockups/sketches.html
new file mode 100644
index 00000000..fee44171
--- /dev/null
+++ b/mockups/sketches.html
@@ -0,0 +1,33 @@
+{% extends "base.html" %}
+
+{% block content %}
+  <div class="container">
+    <div class="course-header">
+      <h1>Sketches</h1>
+    </div>
+
+    <div class="row sketches-gallery">
+      {% for s in sketches %}
+        <div class="col-md-3">
+          <div class="sketch-card">
+            <div class="sketch-image">
+              <a href="#">
+                <svg width="300" height="300" viewBox="0 0 300 300" fill="none" stroke="black" xmlns="http://www.w3.org/2000/svg">
+                  <circle cx="150" cy="150" r="150.0"></circle>
+                </svg>
+              </a>
+            </div>
+            <div class="sketch-footer">
+              <div class="sketch-title">
+                <a href="#">{{s.title}}</a>
+              </div>
+              <div class="sketch-author">
+                by {{s.author}}
+              </div>
+            </div>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+{% endblock %}
diff --git a/mockups/sketches.yml b/mockups/sketches.yml
new file mode 100644
index 00000000..ad274f13
--- /dev/null
+++ b/mockups/sketches.yml
@@ -0,0 +1,38 @@
+sketches:
+  - id: 20
+    title: Big Circle
+    author: Anand Chitipothu
+  - id: 19
+    title: Small Circle
+    author: Anand Chitipothu
+  - id: 18
+    title: Circles in Queue
+    author: Chaitanya
+  - id: 17
+    title: Random Bottom Circles
+    author: Anand Chitipothu
+  - id: 16
+    title: Pipes
+    author: Vishal
+  - id: 15
+    title: New Sketch
+    author: Malleshwari
+
+  - id: 20
+    title: Big Circle
+    author: Anand Chitipothu
+  - id: 19
+    title: Small Circle
+    author: Anand Chitipothu
+  - id: 18
+    title: Circles in Queue
+    author: Chaitanya
+  - id: 17
+    title: Random Bottom Circles
+    author: Anand Chitipothu
+  - id: 16
+    title: Pipes
+    author: Vishal
+  - id: 15
+    title: New Sketch
+    author: Malleshwari
diff --git a/mockups/static/style.css b/mockups/static/style.css
index 26321a4f..f2178eae 100644
--- a/mockups/static/style.css
+++ b/mockups/static/style.css
@@ -198,3 +198,24 @@ img.profile-photo {
   max-width: 100%
 }
 
+.sketches-gallery svg {
+  width: 200px;
+  height: 200px;
+}
+
+.sketch-card {
+  background: white;
+  border-radius: 10px;
+  border: 1px solid #ddd;
+
+  margin: 10px;
+}
+
+.sketch-card .sketch-image {
+  padding: 10px;
+}
+
+.sketch-footer {
+  padding: 10px;
+  background: #eee;
+}