Add user login && register && website index.

.credo.exs

@@ -64,7 +64,7 @@
         # You can customize the priority of any check
         # Priority values are: `low, normal, high, higher`
         #
-        {Credo.Check.Design.AliasUsage, priority: :low},
+        {Credo.Check.Design.AliasUsage, false},
         # For some checks, you can also set other parameters
         #
         # If you don't want the `setup` and `test` macro calls in ExUnit tests
@@ -76,13 +76,13 @@
         # If you don't want TODO comments to cause `mix credo` to fail, just
         # set this value to 0 (zero).
         #
-        {Credo.Check.Design.TagTODO, exit_status: 2},
-        {Credo.Check.Design.TagFIXME},
+        {Credo.Check.Design.TagTODO, false},
+        {Credo.Check.Design.TagFIXME, false},
 
         #
         ## Readability Checks
         #
-        {Credo.Check.Readability.AliasOrder},
+        {Credo.Check.Readability.AliasOrder, false},
         {Credo.Check.Readability.FunctionNames},
         {Credo.Check.Readability.LargeNumbers},
         {Credo.Check.Readability.MaxLineLength, priority: :low, max_length: 100},

README.md

@@ -2,9 +2,9 @@
 
 To start your Phoenix server:
 
-  * Install dependencies with `mix deps.get`
-  * Create and migrate your database with `mix ecto.create && mix ecto.migrate`
-  * Install Node.js dependencies with `cd assets && yarn install`
-  * Start Phoenix endpoint with `mix phx.server`
+* Install dependencies with `mix deps.get`
+* Create and migrate your database with `mix ecto.create && mix ecto.migrate`
+* Install Node.js dependencies with `cd assets && yarn install`
+* Start Phoenix endpoint with `mix phx.server`
 
 Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.

assets/css/admin.scss

@@ -0,0 +1,3 @@
+$fa-font-path: "~font-awesome/fonts";
+@import "~font-awesome/scss/font-awesome.scss";
+@import "~bootstrap/scss/bootstrap";

assets/css/app.scss

@@ -1,3 +1,8 @@
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome.scss";
 @import "~bootstrap/scss/bootstrap";
+@import "./app/variables/mipha";
+@import "./app/components/header";
+@import "./app/components/footer";
+@import "./app/components/base";
+@import "./app/components/page";

assets/css/app/components/_footer.scss

@@ -0,0 +1,17 @@
+footer {
+  margin-top: 10px;
+  margin-bottom: 20px;
+  color: #909090;
+  a {
+    color: #666;
+  }
+  .links {
+    color: #ddd;
+  }
+  .socials {
+    a {
+      font-size: 20px;
+      margin-right: 8px;
+    }
+  }
+}

assets/css/app/components/_header.scss

@@ -0,0 +1,160 @@
+.bd-navbar {
+  height: 50px;
+  padding: 0;
+  background: #FFF;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  border: 0px;
+  color: $primary;
+  z-index: 1030;
+  line-height: 100%;
+  .ml-auto {
+    height: 50px;
+  }
+  .navbar-nav {
+    padding: 0px;
+    .nav-link {
+      padding: 15px 15px;
+      color: $primary;
+    }
+  }
+  .navbar-topic-title {
+    display: none;
+  }
+  &.navbar-fixed-active {
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .07);
+  }
+  .navbar-brand {
+    line-height: 100%;
+    color: #666 !important;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-weight: bold;
+    margin-left: 1em;
+    border-bottom: 0px;
+    b {
+      color: $blue;
+    }
+  }
+  @include media-breakpoint-down(md) {
+    padding-right: .5rem;
+    padding-left: .5rem;
+    .navbar-nav-scroll {
+      max-width: 100%;
+      overflow: hidden;
+      .navbar-nav {
+        overflow-x: auto;
+        white-space: nowrap;
+        -webkit-overflow-scrolling: touch;
+      }
+    }
+  }
+  @include media-breakpoint-up(md) {
+    @supports (position: sticky) {
+      position: sticky;
+      top: 0;
+    }
+  }
+  #main-nav-menu {
+    &.navbar-nav .nav-item a.nav-link {
+      color: $primary;
+      font-size: 15px;
+      border-top: 3px solid #fff;
+      border-bottom: 3px solid #FFF;
+      transition: all .2s ease-in-out;
+    }
+    &.navbar-nav .nav-item a.nav-link:active {
+      background-color: $gray;
+      border-bottom-color: #999;
+    }
+    &.navbar-nav .nav-item {
+      a:hover,
+      a.active,
+      a.active:focus,
+      a.active:hover {
+        color: $red;
+        background: transparent;
+        border-bottom-color: $red;
+      }
+    }
+  }
+  .form-search {
+    font-size: 14px;
+    position: relative;
+    padding: 15px 0;
+    .fa {
+      color: #333;
+      &:hover {
+        color: #666;
+      }
+    }
+    .fa-search {
+      cursor: pointer;
+      position: absolute;
+      top: 18px;
+      left: 8px;
+      transition: all .3s;
+    }
+    .form-control {
+      font-size: 14px;
+      border: none;
+      cursor: text;
+      width: 150px;
+      height: 100%;
+      line-height: 100%;
+      padding: 6px 1px 4px 20px;
+      margin-left: 4px;
+      background: transparent;
+      transition: all .3s;
+      box-sizing: border-box;
+      color: #333;
+      &::-webkit-input-placeholder {
+        color: #aaa;
+      }
+    }
+  }
+  .navbar-nav-svg {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    vertical-align: text-top;
+  }
+  .dropdown.show {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .dropdown-menu {
+    border-radius: 0;
+    border: 0px;
+    border-left: 1px solid rgba(0, 0, 0, 0.04);
+    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.10);
+    .dropdown-item {
+      padding: 0.4rem 1.5rem;
+    }
+  }
+  .dropdown-avatar {
+    line-height: 100%;
+    display: inline-block;
+    .nav-link {
+      padding: 10px 5px;
+    }
+    img.avatar-32 {
+      width: 20px;
+      height: 20px;
+    }
+  }
+  .dropdown-item.active {
+    font-weight: 500;
+    color: $gray-900;
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+  .user-bar {
+    background: #FFF;
+    min-width: 150px;
+  }
+  @include media-breakpoint-down(md) {
+    .user-bar {
+      .nav-link {
+        padding-left: 5px;
+        padding-right: 5px;
+      }
+    }
+  }
+}