From 59c54e05917fbe61490bd4fbab13e38501067658 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Wed, 31 Mar 2021 13:59:33 -0700
Subject: [PATCH] Creates get strated layout

---
 bookwyrm/templates/get_started/books.html  | 151 +++++++++------------
 bookwyrm/templates/get_started/layout.html |  33 +++++
 2 files changed, 95 insertions(+), 89 deletions(-)
 create mode 100644 bookwyrm/templates/get_started/layout.html

diff --git a/bookwyrm/templates/get_started/books.html b/bookwyrm/templates/get_started/books.html
index 7ead0710..cbb208f8 100644
--- a/bookwyrm/templates/get_started/books.html
+++ b/bookwyrm/templates/get_started/books.html
@@ -1,98 +1,71 @@
-{% extends 'layout.html' %}
+{% extends 'get_started/layout.html' %}
 {% load i18n %}
-{% load bookwyrm_tags %}
-{% load humanize %}
 
-{% block title %}{% trans "Welcome" %}{% endblock %}
+{% block panel %}
+<div class="block">
+    <h2 class="title is-4">{% trans "What are you reading?" %}</h2>
+    <form class="field has-addons" method="get" action="{% url 'get-started' %}">
+        <div class="control">
+            <input type="text" name="query" value="{{ request.GET.query }}" class="input" placeholder="{% trans 'Search for a book' %}" aria-lable="{% trans 'Search for a book' %}">
+            {% if request.GET.query and not book_results %}
+            <p class="help">{% blocktrans %}Sorry, books were found. You can add books when you start using {{ site_name }}{% endblocktrans %}</p>
+            {% endif %}
+        </div>
+        <div class="control">
+            <button class="button" type="submit">
+                <span class="icon icon-search" title="{% trans 'Search' %}">
+                    <span class="is-sr-only">{% trans "Search" %}</span>
+                </span>
+            </button>
+        </div>
+    </form>
+</div>
 
-{% block content %}
-{% with site_name=site.name %}
-<div class="modal is-active" role="dialog" aria-modal="true">
-    <div class="modal-background"></div>
-    <div class="modal-card is-fullwidth">
-        <header class="modal-card-head">
-            <h1 class="modal-card-title">
-                {% trans "Getting Started" %}
-            </h1>
-            <button class="delete" aria-label="close"></button>
-        </header>
-        <section class="modal-card-body">
-            <div class="block">
-                <h2 class="title is-4">{% trans "What are you reading?" %}</h2>
-                <form class="field has-addons" method="get" action="{% url 'get-started' %}">
-                    <div class="control">
-                        <input type="text" name="query" value="{{ request.GET.query }}" class="input" placeholder="{% trans 'Search for a book' %}" aria-lable="{% trans 'Search for a book' %}">
-                        {% if request.GET.query and not book_results %}
-                        <p class="help">{% blocktrans %}Sorry, books were found. You can add books when you start using {{ site_name }}{% endblocktrans %}</p>
-                        {% endif %}
-                    </div>
-                    <div class="control">
-                        <button class="button" type="submit">
-                            <span class="icon icon-search" title="{% trans 'Search' %}">
-                                <span class="is-sr-only">{% trans "Search" %}</span>
-                            </span>
-                        </button>
-                    </div>
-                </form>
-            </div>
-
-            <form class="block">
-                <h3 class="title is-5">{% trans "Suggested Books" %}</h3>
-                <div class="columns scroll-x">
-                    {% if book_results %}
-                    <div class="column is-narrow content">
-                        <p class="help mb-0">Search results</p>
-                        <div class="columns">
-                            {% for book in book_results %}
-                            <div class="column is-narrow is-clipped">
-                                {% include 'snippets/book_cover.html' with book=book %}
-                                <div class="select is-small">
-                                    <select>
-                                        <option>-</option>
-                                        {% for shelf in request.user.shelf_set.all %}
-                                        <option>{{ shelf.name }}</option>
-                                        {% endfor %}
-                                    </select>
-                                </div>
-                            </div>
+<form class="block">
+    <h3 class="title is-5">{% trans "Suggested Books" %}</h3>
+    <div class="columns scroll-x">
+        {% if book_results %}
+        <div class="column is-narrow content">
+            <p class="help mb-0">Search results</p>
+            <div class="columns">
+                {% for book in book_results %}
+                <div class="column is-narrow is-clipped">
+                    {% include 'snippets/book_cover.html' with book=book %}
+                    <div class="select is-small">
+                        <select>
+                            <option>-</option>
+                            {% for shelf in request.user.shelf_set.all %}
+                            <option>{{ shelf.name }}</option>
                             {% endfor %}
-                        </div>
-                    </div>
-                    {% endif %}
-                    <div class="column is-narrow content">
-                        <p class="help mb-0">
-                            {% blocktrans %}Popular on {{ site_name }}{% endblocktrans %}
-                        </p>
-                        <div class="columns">
-                            {% for book in popular_books %}
-                            <div class="column is-narrow is-clipped">
-                                {% include 'snippets/book_cover.html' with book=book %}
-                                <div class="select is-small">
-                                    <select>
-                                        <option>-</option>
-                                        {% for shelf in request.user.shelf_set.all %}
-                                        <option>{{ shelf.name }}</option>
-                                        {% endfor %}
-                                    </select>
-                                </div>
-                            </div>
-                            {% endfor %}
-                        </div>
+                        </select>
                     </div>
                 </div>
-                <button type="submit" class="button is-primary">{% trans "Save" %}</button>
-            </form>
-        </section>
-
-        <footer class="modal-card-foot is-flex is-justify-content-flex-end">
-            <button class="button">
-                <span>{% trans "Skip this step" %}</span>
-                <span class="icon icon-arrow-right" aria-hidden="true"></span>
-            </button>
-        </footer>
+                {% endfor %}
+            </div>
+        </div>
+        {% endif %}
+        <div class="column is-narrow content">
+            <p class="help mb-0">
+                {% blocktrans %}Popular on {{ site_name }}{% endblocktrans %}
+            </p>
+            <div class="columns">
+                {% for book in popular_books %}
+                <div class="column is-narrow is-clipped">
+                    {% include 'snippets/book_cover.html' with book=book %}
+                    <div class="select is-small">
+                        <select>
+                            <option>-</option>
+                            {% for shelf in request.user.shelf_set.all %}
+                            <option>{{ shelf.name }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
     </div>
-    <a href="/" class="modal-close is-large" aria-label="close"></a>
-</div>
-{% endwith %}
+    <button type="submit" class="button is-primary">{% trans "Save" %}</button>
+</form>
 {% endblock %}
 
diff --git a/bookwyrm/templates/get_started/layout.html b/bookwyrm/templates/get_started/layout.html
new file mode 100644
index 00000000..eeb01bbe
--- /dev/null
+++ b/bookwyrm/templates/get_started/layout.html
@@ -0,0 +1,33 @@
+{% extends 'layout.html' %}
+{% load i18n %}
+
+{% block title %}{% trans "Welcome" %}{% endblock %}
+
+{% block content %}
+{% with site_name=site.name %}
+<div class="modal is-active" role="dialog" aria-modal="true">
+    <div class="modal-background"></div>
+    <div class="modal-card is-fullwidth">
+        <header class="modal-card-head">
+            <h1 class="modal-card-title">
+                {% trans "Getting Started" %}
+            </h1>
+            <button class="delete" aria-label="close"></button>
+        </header>
+        <section class="modal-card-body">
+            {% block panel %}{% endblock %}
+        </section>
+
+        <footer class="modal-card-foot is-flex is-justify-content-flex-end">
+            <a href="{{ next }}" class="button">
+                <span>{% trans "Skip this step" %}</span>
+                <span class="icon icon-arrow-right" aria-hidden="true"></span>
+            </a>
+        </footer>
+    </div>
+    <a href="/" class="modal-close is-large" aria-label="close"></a>
+</div>
+{% endwith %}
+{% endblock %}
+
+