Add cooosmetics

brunch-config.js

@@ -22,6 +22,11 @@ exports.config = {
     stylesheets: {
       joinTo: "css/app.css",
       order: {
+        before: [
+          "web/static/css/normalize.css",
+          "web/static/css/milligram.min.css",
+          "web/static/css/effects.css"
+        ],
         after: ["web/static/css/app.css"] // concat app.css last
       }
     },

web/controllers/auth_controller.ex

@@ -45,7 +45,7 @@ defmodule Phamello.AuthController do
   defp registration_success(conn, %User{} = user) do
     conn
     |> Guardian.Plug.sign_in(user)
-    |> put_flash(:info, "User succesfully registered")
+    |> put_flash(:info, "Welcome #{user.username}!")
     |> redirect(to: "/app")
   end
 

web/controllers/picture_controller.ex

@@ -11,7 +11,12 @@ defmodule Phamello.PictureController do
       handler: Phamello.AuthController
 
   def index(conn, _params, user, _claims) do
-    pictures = Repo.all(assoc(user, :pictures))
+    query = from p in Picture,
+      join: u in assoc(p, :user),
+      where: u.id == ^(user.id),
+      order_by: [desc: p.updated_at]
+
+    pictures = Repo.all(query)
     render(conn, "index.html", pictures: pictures)
   end
 

web/static/css/app.css

@@ -1 +1,146 @@
-/* This file is for your main application css. */
+.container {
+    max-width: 60.0rem;
+}
+
+.navigation {
+    display: block;
+    height: 5.2rem;
+    padding: 0 2rem;
+    background-color: #9b4dca;
+}
+
+#logotype {
+    width: 63px;
+    height: 63px;
+    margin: .1em 0 0 -1em;
+    background-color: white;
+    background-image: url(/images/logotype.png);
+}
+
+.navigation-list {
+    float: right;
+    list-style: none;
+    margin: 0;
+}
+
+.navigation-list li {
+    float: left;
+    margin: 0 0 0 2rem;
+}
+
+.navigation-list li a {
+    line-height: 5.2rem;
+    color: white;
+}
+
+.navigation-list li form {
+    margin: 0;
+}
+
+.alert {
+    padding: 0 1rem;
+    margin: 0;
+    line-height: 5.2rem;
+    background-color: #f4f5f6;
+    color: #9b4dca;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+.alert.form-alert {
+    margin-top: -8.2rem;
+    margin-bottom: 3rem;
+}
+
+.main {
+    margin-top: 8.2rem;
+}
+
+.alert ~ .main {
+    margin-top: 3rem;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.button.large, input[type='submit'] {
+  font-size: 1.4rem;
+  height: 4.5rem;
+  line-height: 4.5rem;
+  padding: 0 2rem;
+}
+
+input[type='submit'] {
+    width: 100%;
+}
+
+fieldset {
+    position: relative;
+}
+
+fieldset.file {
+    margin-bottom: 20px;
+}
+
+label {
+    display: inline-block;
+}
+
+label.error {
+    margin-right: 1rem;
+    color: #9b4dca;
+}
+
+.help-block {
+    color: #9b4dca;
+}
+
+input[type='file'] {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+}
+
+input[type='file'] + label {
+    display: block;
+    background-color: #9b4dca;
+    border: 0.1rem solid #9b4dca;
+    border-radius: 0.4rem;
+    color: white;
+    cursor: pointer;
+    font-size: 1.1rem;
+    font-weight: 700;
+    height: 3.8rem;
+    letter-spacing: 0.1rem;
+    line-height: 3.8rem;
+    margin: 0 0 5px 0;
+    padding: 0 3rem;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    white-space: nowrap;
+}
+
+.image-box {
+    display: none;
+    border-radius: 10px;
+    padding: 10px 0;
+    margin-bottom: 1rem;
+    max-height: 440px;
+    text-align: center;
+    background-color: #f4f5f6;
+}
+
+.image-box img {
+    max-height: 400px;
+    max-width: 96%;
+}
+
+.image-list .image-box {
+    display: block;
+
+}

web/static/css/effects.css

@@ -0,0 +1,126 @@
+/* Buzz Out */
+@-webkit-keyframes hvr-buzz-out {
+  10% {
+    -webkit-transform: translateX(3px) rotate(2deg);
+    transform: translateX(3px) rotate(2deg);
+  }
+
+  20% {
+    -webkit-transform: translateX(-3px) rotate(-2deg);
+    transform: translateX(-3px) rotate(-2deg);
+  }
+
+  30% {
+    -webkit-transform: translateX(3px) rotate(2deg);
+    transform: translateX(3px) rotate(2deg);
+  }
+
+  40% {
+    -webkit-transform: translateX(-3px) rotate(-2deg);
+    transform: translateX(-3px) rotate(-2deg);
+  }
+
+  50% {
+    -webkit-transform: translateX(2px) rotate(1deg);
+    transform: translateX(2px) rotate(1deg);
+  }
+
+  60% {
+    -webkit-transform: translateX(-2px) rotate(-1deg);
+    transform: translateX(-2px) rotate(-1deg);
+  }
+
+  70% {
+    -webkit-transform: translateX(2px) rotate(1deg);
+    transform: translateX(2px) rotate(1deg);
+  }
+
+  80% {
+    -webkit-transform: translateX(-2px) rotate(-1deg);
+    transform: translateX(-2px) rotate(-1deg);
+  }
+
+  90% {
+    -webkit-transform: translateX(1px) rotate(0);
+    transform: translateX(1px) rotate(0);
+  }
+
+  100% {
+    -webkit-transform: translateX(-1px) rotate(0);
+    transform: translateX(-1px) rotate(0);
+  }
+}
+
+@keyframes hvr-buzz-out {
+  10% {
+    -webkit-transform: translateX(3px) rotate(2deg);
+    transform: translateX(3px) rotate(2deg);
+  }
+
+  20% {
+    -webkit-transform: translateX(-3px) rotate(-2deg);
+    transform: translateX(-3px) rotate(-2deg);
+  }
+
+  30% {
+    -webkit-transform: translateX(3px) rotate(2deg);
+    transform: translateX(3px) rotate(2deg);
+  }
+
+  40% {
+    -webkit-transform: translateX(-3px) rotate(-2deg);
+    transform: translateX(-3px) rotate(-2deg);
+  }
+
+  50% {
+    -webkit-transform: translateX(2px) rotate(1deg);
+    transform: translateX(2px) rotate(1deg);
+  }
+
+  60% {
+    -webkit-transform: translateX(-2px) rotate(-1deg);
+    transform: translateX(-2px) rotate(-1deg);
+  }
+
+  70% {
+    -webkit-transform: translateX(2px) rotate(1deg);
+    transform: translateX(2px) rotate(1deg);
+  }
+
+  80% {
+    -webkit-transform: translateX(-2px) rotate(-1deg);
+    transform: translateX(-2px) rotate(-1deg);
+  }
+
+  90% {
+    -webkit-transform: translateX(1px) rotate(0);
+    transform: translateX(1px) rotate(0);
+  }
+
+  100% {
+    -webkit-transform: translateX(-1px) rotate(0);
+    transform: translateX(-1px) rotate(0);
+  }
+}
+
+.hvr-buzz-out {
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.hvr-buzz-out.active {
+  -webkit-animation-name: hvr-buzz-out;
+  animation-name: hvr-buzz-out;
+  -webkit-animation-duration: 0.75s;
+  animation-duration: 0.75s;
+  -webkit-animation-timing-function: linear;
+  animation-timing-function: linear;
+  -webkit-animation-iteration-count: 1;
+  animation-iteration-count: 1;
+}