From a4d094d60a8444817fe597d6877481040dc4b282 Mon Sep 17 00:00:00 2001
From: zPlus <zplus@peers.community>
Date: Mon, 23 Jul 2018 09:56:22 +0200
Subject: [PATCH] Improve CSS.

---
 freepost/static/stylus/freepost.styl  | 32 ++-------
 freepost/static/stylus/reset.styl     |  3 +
 freepost/templates/search.html        |  2 +-
 freepost/templates/submit.html        |  2 +-
 freepost/templates/user_settings.html | 98 ++++++++++++---------------
 5 files changed, 56 insertions(+), 81 deletions(-)

diff --git a/freepost/static/stylus/freepost.styl b/freepost/static/stylus/freepost.styl
index 196bf47d..e00a71be 100755
--- a/freepost/static/stylus/freepost.styl
+++ b/freepost/static/stylus/freepost.styl
@@ -169,8 +169,7 @@ body
             
             /* New submission page */
             > form.submit
-                margin      auto
-                max-width   30em
+                width 100%
             
             /* Page for a post */
             > .post
@@ -213,9 +212,6 @@ body
                 
                 /* The "new comment" form for this post page */
                 .new_comment
-                    > textarea
-                        height 5rem
-                    
                     > input[type=submit]
                         margin 1em 0
                 
@@ -262,26 +258,12 @@ body
                 margin-bottom 3rem
             
             /* User home page */
-            table.user
-                /* If one length specified: both horizontal and vertical spacing
-                * If two length specified: first sets the horizontal spacing, and
-                *                          the second sets the vertical spacing
-                */
-                border-spacing  2em 1em
-                border-collapse separate
-                margin          auto
-                width           80%
-                
-                tr
-                    > td:first-child
-                        font-weight     bold
-                        text-align      right
-                        vertical-align  top
-                        width           30%
-                    
-                    > td:last-child
-                        text-align  left
-                
+            > form > .user
+                display grid
+                grid-column-gap 3rem
+                grid-row-gap 1rem
+                grid-template-columns max-content auto
+            
             /* User activity */
             > .user_activity
             
diff --git a/freepost/static/stylus/reset.styl b/freepost/static/stylus/reset.styl
index 83a48d49..cafd0608 100755
--- a/freepost/static/stylus/reset.styl
+++ b/freepost/static/stylus/reset.styl
@@ -124,6 +124,9 @@ label
     -o-transition       border-color ease-in-out .15s,box-shadow ease-in-out .15s
     transition          border-color ease-in-out .15s,box-shadow ease-in-out .15s
 
+textarea.form-control
+    height 8rem
+
 /* When users vote, this <iframe/> is used as target, such that
  * the page is not reloaded
  */
diff --git a/freepost/templates/search.html b/freepost/templates/search.html
index 4c972fd2..a849397b 100755
--- a/freepost/templates/search.html
+++ b/freepost/templates/search.html
@@ -9,7 +9,7 @@
 <div class="search">
     <form action="/search">
         <p>
-            <input type="text" name="q" value="{{ query if query else '' }}" placeholder="Search..." required="required" />
+            <input type="text" name="q" value="{{ query if query else '' }}" placeholder="Search..." required="required" autofocus />
             <input type="submit" value="Search" />
         </p>
         <p>
diff --git a/freepost/templates/submit.html b/freepost/templates/submit.html
index 0fd7c835..6b813270 100755
--- a/freepost/templates/submit.html
+++ b/freepost/templates/submit.html
@@ -18,7 +18,7 @@
     <form action="" method="post" class="submit shortcut-submit">
         <h3>Title</h3>
         <div>
-            <input type="text" name="title" class="form-control" required='required' />
+            <input type="text" name="title" class="form-control" required='required' autofocus />
         </div>
 
         <h3>Link</h3>
diff --git a/freepost/templates/user_settings.html b/freepost/templates/user_settings.html
index 73a6b7e0..e4a56d15 100755
--- a/freepost/templates/user_settings.html
+++ b/freepost/templates/user_settings.html
@@ -7,64 +7,54 @@
 {% block content %}
 
     <form action="" method="post">
-        <table class="user">
-            <tr>
-                <td>
-                    User
-                </td>
-                <td>
-                    {{ user.username }}
-                    
-                    <div><a href="/user_activity/posts">Your posts</a></div>
-                    <div><a href="/user_activity/comments">Your comments</a></div>
-                    <div><a href="/user_activity/replies">Replies to your comments</a></div>
-                </td>
-            </tr>
+        <div class="user">
+            <div>
+                User
+            </div>
+            <div>
+                {{ user.username }}
+                
+                <div><a href="/user_activity/posts">Your posts</a></div>
+                <div><a href="/user_activity/comments">Your comments</a></div>
+                <div><a href="/user_activity/replies">Replies to your comments</a></div>
+            </div>
             
-            <tr>
-                <td>
-                    Since
-                </td>
-                <td>
-                    {{ user.registered|datetime }} ({{ user.registered|ago }})
-                </td>
-            </tr>
+            <div>
+                Since
+            </div>
+            <div>
+                {{ user.registered|datetime }} ({{ user.registered|ago }})
+            </div>
                 
-            <tr>
-                <td>
-                    About
-                </td>
-                <td>
-                    <textarea name="about" class="form-control">{{ user.about }}</textarea>
-                </td>
-            </tr>
+            <div>
+                About
+            </div>
+            <div>
+                <textarea name="about" class="form-control" autofocus>{{ user.about }}</textarea>
+            </div>
             
-            <tr>
-                <td>
-                    Email
-                </td>
-                <td>
-                    <input type="text" name="email" class="form-control" value="{{ user.email if user.email else '' }}" />
-                    <em>Required if you wish to change your password</em>
-                    {#
-                    <p>
-                        <label>
-                            <input type="checkbox" name="email_notifications" {{ user.email_notifications ? 'checked="checked"' }} />
-                            Send notifications via email
-                        </label>
-                    </p>
-                    #}
-                </td>
-            </tr>
+            <div>
+                Email
+            </div>
+            <div>
+                <input type="text" name="email" class="form-control" value="{{ user.email if user.email else '' }}" />
+                <em>Required if you wish to change your password</em>
+                {#
+                <p>
+                    <label>
+                        <input type="checkbox" name="email_notifications" {{ user.email_notifications ? 'checked="checked"' }} />
+                        Send notifications via email
+                    </label>
+                </p>
+                #}
+            </div>
             
-            <tr>
-                <td>
-                </td>
-                <td>
-                    <input type="submit" name="update" value="Update" class="button button_info" />
-                </td>
-            </tr>
-        </table>
+            <div>
+            </div>
+            <div>
+                <input type="submit" name="update" value="Update" class="button button_info" />
+            </div>
+        </div>
     </form>
 
 {% endblock %}