User: Settings page (WIP)

src/app.rb

@@ -78,6 +78,11 @@ get "/profile/:id/rep" do
 	serve :"user/rep", {user: User.find_by_id(params[:id].to_i)}
 end
 
+# Settings
+get "/settings" do
+	serve :"user/settings", {user: User.find_by_id(params[:id].to_i)}
+end
+
 # API stuff
 post "/register" do
 	email = params[:email]

src/public/icons/settings.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" width="50px" height="50px">
+<g id="surface37011060">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 22.207031 2 C 21.714844 2 21.296875 2.355469 21.21875 2.835938 L 20.246094 8.792969 C 19.078125 9.132812 17.960938 9.59375 16.910156 10.164062 L 11.996094 6.652344 C 11.597656 6.371094 11.054688 6.414062 10.707031 6.757812 L 6.816406 10.644531 C 6.476562 10.988281 6.429688 11.53125 6.707031 11.925781 L 10.164062 16.871094 C 9.582031 17.929688 9.113281 19.050781 8.765625 20.230469 L 2.835938 21.21875 C 2.355469 21.300781 2 21.714844 2.003906 22.207031 L 2.003906 27.707031 C 2 28.191406 2.347656 28.605469 2.824219 28.691406 L 8.757812 29.742188 C 9.105469 30.921875 9.574219 32.042969 10.152344 33.101562 L 6.652344 38 C 6.371094 38.394531 6.414062 38.9375 6.757812 39.285156 L 10.648438 43.175781 C 10.992188 43.519531 11.53125 43.566406 11.925781 43.289062 L 16.882812 39.820312 C 17.9375 40.394531 19.054688 40.859375 20.226562 41.203125 L 21.21875 47.164062 C 21.300781 47.644531 21.714844 48 22.203125 48 L 27.703125 48 C 28.191406 48 28.605469 47.652344 28.691406 47.175781 L 29.75 41.1875 C 30.921875 40.839844 32.035156 40.371094 33.082031 39.792969 L 38.070312 43.292969 C 38.46875 43.570312 39.007812 43.523438 39.351562 43.179688 L 43.238281 39.289062 C 43.585938 38.941406 43.628906 38.394531 43.34375 37.996094 L 39.785156 33.058594 C 40.355469 32.015625 40.8125 30.910156 41.152344 29.75 L 47.171875 28.695312 C 47.648438 28.609375 48 28.191406 47.996094 27.707031 L 47.996094 22.207031 C 47.996094 21.71875 47.644531 21.300781 47.160156 21.222656 L 41.152344 20.238281 C 40.808594 19.078125 40.351562 17.976562 39.78125 16.933594 L 43.289062 11.933594 C 43.566406 11.535156 43.519531 10.996094 43.175781 10.652344 L 39.285156 6.765625 C 38.941406 6.417969 38.394531 6.375 37.996094 6.660156 L 33.070312 10.203125 C 32.023438 9.625 30.910156 9.15625 29.738281 8.8125 L 28.691406 2.828125 C 28.609375 2.347656 28.191406 2 27.703125 2 Z M 23.058594 4 L 26.867188 4 L 27.863281 9.683594 C 27.929688 10.074219 28.21875 10.386719 28.605469 10.484375 C 30.066406 10.847656 31.441406 11.425781 32.695312 12.183594 C 33.035156 12.394531 33.46875 12.375 33.796875 12.144531 L 38.476562 8.777344 L 41.167969 11.472656 L 37.835938 16.222656 C 37.609375 16.542969 37.59375 16.972656 37.796875 17.308594 C 38.546875 18.5625 39.117188 19.925781 39.480469 21.378906 C 39.578125 21.769531 39.898438 22.058594 40.289062 22.125 L 45.996094 23.058594 L 45.996094 26.867188 L 40.277344 27.871094 C 39.890625 27.941406 39.578125 28.234375 39.480469 28.617188 C 39.121094 30.070312 38.550781 31.433594 37.800781 32.683594 C 37.59375 33.027344 37.613281 33.460938 37.84375 33.785156 L 41.222656 38.472656 L 38.53125 41.167969 L 33.792969 37.84375 C 33.464844 37.617188 33.035156 37.601562 32.699219 37.808594 C 31.449219 38.566406 30.074219 39.148438 28.617188 39.515625 C 28.234375 39.613281 27.945312 39.925781 27.878906 40.3125 L 26.867188 46 L 23.054688 46 L 22.113281 40.335938 C 22.046875 39.945312 21.753906 39.628906 21.367188 39.53125 C 19.902344 39.171875 18.523438 38.59375 17.261719 37.835938 C 16.921875 37.632812 16.496094 37.648438 16.171875 37.875 L 11.46875 41.167969 L 8.773438 38.46875 L 12.097656 33.824219 C 12.328125 33.5 12.347656 33.066406 12.136719 32.722656 C 11.371094 31.457031 10.792969 30.078125 10.425781 28.609375 C 10.332031 28.226562 10.019531 27.9375 9.632812 27.867188 L 4 26.867188 L 4 23.050781 L 9.628906 22.117188 C 10.023438 22.050781 10.339844 21.757812 10.433594 21.371094 C 10.804688 19.898438 11.382812 18.519531 12.144531 17.253906 C 12.351562 16.917969 12.339844 16.488281 12.109375 16.164062 L 8.824219 11.46875 L 11.523438 8.773438 L 16.183594 12.105469 C 16.507812 12.335938 16.941406 12.351562 17.28125 12.148438 C 18.535156 11.394531 19.917969 10.820312 21.382812 10.460938 C 21.773438 10.367188 22.070312 10.046875 22.132812 9.652344 Z M 25 17 C 20.59375 17 17 20.59375 17 25 C 17 29.40625 20.59375 33 25 33 C 29.40625 33 33 29.40625 33 25 C 33 20.59375 29.40625 17 25 17 Z M 25 19 C 28.324219 19 31 21.675781 31 25 C 31 28.324219 28.324219 31 25 31 C 21.675781 31 19 28.324219 19 25 C 19 21.675781 21.675781 19 25 19 Z M 25 19 "/>
+</g>
+</svg>

src/views/layout.slim

@@ -20,6 +20,9 @@ html lang="en"
                 a.button#login href="/login" target="_self"
                   | Log in
             - else
+              li
+                a.inlbutton href="/settings" target="_self" 
+                  img.icon src="/icons/settings.svg" alt="cog"
               li
                 a href="/profile" target="_self" 
                   img.avatar src="#{session_user.avatar}" alt="Your avatar"

src/views/stylesheets/style.sass

@@ -11,7 +11,7 @@ $fg_clr: #fff
 $fg_alt_clr: #eee
 $fg_error: #f77 
 
-$shadow_clr: #4b5263 
+$shadow_clr: $bg_alt_clr
 $green_clr: #5cb85c
 $red_clr: #de2a1d
 
@@ -94,6 +94,9 @@ body
           justify-content: flex-end
 
           li   
+            display: flex
+            flex-direction: column
+            justify-content: center
             margin: 0 8px
 
 // General
@@ -115,6 +118,7 @@ a.button
   transition: opacity .2s
 
 a.button:hover
+  cursor: pointer
   opacity: .6
 
 label.error_msg
@@ -129,6 +133,12 @@ img.avatar
   border-radius: 50%
   border: 2px solid $shadow_clr
 
+img.icon
+  width: 1.2rem
+  height: auto
+  opacity: .4
+  
+
 ul.button-container
   display: flex
   flex-direction: row
@@ -174,7 +184,7 @@ ul.button-container
       font-size: 2.2rem
 
     input
-      border-radius: 2rem
+      border-radius: $border_radius 
       background: $bg_alt_clr
       border: 3px solid $shadow_clr
       color: $fg_alt_clr
@@ -189,6 +199,7 @@ ul.button-container
     input[type=submit]:hover
       opacity: .8
       color: $special_clr
+      cursor: pointer
 
     input:not(:last-child)
       margin-bottom: 1rem

src/views/user/settings.slim

@@ -0,0 +1 @@
+h1 Settings