add docs for Import feature

5 files changed, 60 insertions, 13 deletions

diff --git a/docs/en/index.rst b/docs/en/index.rst
index 6ccfd44c..8cb1b479 100644
--- a/docs/en/index.rst
+++ b/docs/en/index.rst
@@ -24,6 +24,7 @@ The main documentation for the site is organized into a couple sections:
    user/login
    user/configuration
    user/first_article
+   user/import
 
 user/organize
 user/filters
diff --git a/docs/en/user/import.rst b/docs/en/user/import.rst
new file mode 100644
index 00000000..d326b06e
--- /dev/null
+++ b/docs/en/user/import.rst
@@ -0,0 +1,39 @@
+Migrate to wallabag
+===================
+
+From wallabag 1.x
+-----------------
+
+Export your data from your wallabag 1.x
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+On your config page, click on ``JSON export`` in the ``Export your wallabag data`` section.
+
+.. image:: ../../img/user/export_wllbg_1.png
+   :alt: Export from wallabag 1.x
+   :align: center
+
+You will have a ``wallabag-export-1-1970-01-01.json`` file.
+
+Import your data into wallabag 2.x
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Click on  ``Import`` link in the menu, select your export file on your computer and import it.
+
+.. image:: ../../img/user/import_wllbg.png
+   :alt: Import from wallabag 1.x
+   :align: center
+
+All your wallabag 1.x articles will be imported.
+
+From Pocket
+-----------
+
+From Instapaper
+---------------
+
+From Readability
+----------------
+
+From HTML or JSON file
+----------------------
diff --git a/docs/img/user/export_wllbg_1.png b/docs/img/user/export_wllbg_1.png
new file mode 100644
index 00000000..f9d24517
--- /dev/null
+++ b/docs/img/user/export_wllbg_1.png
diff --git a/docs/img/user/import_wllbg.png b/docs/img/user/import_wllbg.png
new file mode 100644
index 00000000..6eec07e4
--- /dev/null
+++ b/docs/img/user/import_wllbg.png
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Import/index.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Import/index.html.twig
index 2c8c158d..47004144 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Import/index.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Import/index.html.twig
@@ -3,21 +3,28 @@
 {% block title %}{% trans %}import{% endtrans %}{% endblock %}
 
 {% block content %}
-
-    <div id="set1" class="col s12">
-        <form action="{{ path('import') }}" method="post" {{ form_enctype(form.import) }}>
-            {{ form_errors(form.import) }}
+<div class="row">
+    <div class="col s12">
+        <div class="card-panel settings">
             <div class="row">
-                <div class="input-field col s12">
-                    {{ form_errors(form.import.file) }}
-                    {{ form_widget(form.import.file) }}
-                    <label class="required">{% trans %}File{% endtrans %}</label>
+                <div class="col s12">
+                    <form action="{{ path('import') }}" method="post" {{ form_enctype(form.import) }}>
+                        {{ form_errors(form.import) }}
+                        <div class="row">
+                            <div class="input-field col s12">
+                                <p>{% trans %}Please select your wallabag export and click on the below button to upload and import it.{% endtrans %}</p>
+                                {{ form_errors(form.import.file) }}
+                                {{ form_widget(form.import.file) }}
+                            </div>
+                        </div>
+                        <div class="hidden">{{ form_rest(form.import) }}</div>
+                        <button class="btn waves-effect waves-light" type="submit" name="action">
+                            {% trans %}Upload file{% endtrans %}
+                        </button>
+                    </form>
                 </div>
             </div>
-            <div class="hidden">{{ form_rest(form.import) }}</div>
-            <button class="btn waves-effect waves-light" type="submit" name="action">
-                {% trans %}Upload file{% endtrans %}
-            </button>
-        </form>
+        </div>
     </div>
+</div>
 {% endblock %}