diff --git a/app/assets/stylesheets/_config.css b/app/assets/stylesheets/_config.css new file mode 100644 index 0000000..bfdb063 --- /dev/null +++ b/app/assets/stylesheets/_config.css @@ -0,0 +1,119 @@ +* { + font-family: "Figtree", sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; + text-decoration: none; + list-style: none; + color: var(--color-text); +} + +body { + background-color: #f2f2f2; + height: 100vh; +} + +main { + display: flex; + justify-content: center; + align-items: flex-start; + width: 100%; + flex-wrap: wrap; + height: auto; +} + +:root { + /* colors */ + --color-main: #3778c2; + --color-second: #f21905; + --color-text: #353a40; + --color-third: #5fb523; +} + +.proxima-nova-bold { + font-weight: 700; + font-style: normal; +} + +.proxima-nova-light { + font-weight: 300; + font-style: normal; +} + +.container { + width: 100%; + max-width: 720px; +} + +.flex { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} + +.btn-group { + width: 100%; +} + +.btn-main, +.btn-white { + padding: 0.75rem; + margin-top: 1rem; + background-color: var(--color-main); + width: 90%; + border-radius: 0.18rem; + text-align: center; + text-transform: uppercase; + color: white; + letter-spacing: 1px; + font-weight: 400; + cursor: pointer; + font-size: 18px; + border: none; + transition: all 100ms ease-out; +} + +.btn-white { + background-color: white; + color: var(--color-text); +} + +.btn-main:hover { + background-color: #87aeda; + text-shadow: 0 0 10px black; + opacity: 80%; +} + +.btn-white:hover { + background-color: var(--color-third); + color: white; + text-shadow: 0 0 10px black; + opacity: 80%; +} + +.title { + width: 100%; + text-align: center; + font-size: 20px; + font-weight: 300; + background-color: white; + padding: 0.75rem 0; +} + +.inner-container { + width: 100%; + margin-top: 1rem; +} + +.card { + justify-content: space-between; + align-items: center; + padding: 10px 12px; +} + +.inner-card { + display: flex; + flex-direction: column; + gap: 10px; +} diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index a200c7f..288b9ab 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -13,316 +13,3 @@ *= require_tree . *= require_self */ - -:root { - --blue: #3778c2; - --gray: #434b54; - --green: #5fb523; -} - -* { - font-family: "Figtree", sans-serif; - margin: 0; - padding: 0; - list-style: none; - text-decoration: none; -} - -/* body { - height: 100vh; -} */ - -/* Splash screen */ - -.splash { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100vh; -} - -.splash-logo { - width: 22rem; - margin-top: auto; - margin-bottom: auto; -} - -.splash-btn { - margin-top: auto; - margin-bottom: 2rem; - display: flex; - flex-direction: column; - gap: 1.3rem; - width: 100%; - justify-content: center; - align-items: center; -} - -.login-btn { - background-color: var(--blue); - text-decoration: none; - color: white; - border-radius: 5px; - padding: 10px; - width: 75%; - text-align: center; - font-size: 1.3rem; -} - -.signup-btn { - color: var(--gray); - font-size: 1.3rem; -} - -/* Sign-up page */ - -form { - width: 100%; - height: 50%; -} - -.sign-up-header, -nav { - height: 3.5rem; - background-color: var(--blue); - color: white; - display: flex; - justify-content: space-between; - padding: 0.2rem 0.8rem; - align-items: center; -} - -.go-back { - color: white; - font-size: 1rem; -} - -.submit input { - background-color: transparent; - border: none; - color: white; - font-size: 1rem; -} - -.shared-links { - display: flex; - justify-content: center; - align-items: center; - flex-wrap: wrap; -} - -.form-inputs { - margin-top: 1rem; - width: 90%; - display: flex; - flex-direction: column; - gap: 1rem; - padding: 1rem; -} - -.div-input { - margin: 0.15rem 0; - width: 100%; - display: flex; - justify-content: center; - flex-direction: column; -} - -.div-input input { - height: 2rem; -} - -.check-box { - display: flex; - flex-direction: row; - align-items: center; - gap: 1rem; - justify-content: flex-start; -} - -/* Groups index page */ - -.groups-index { - display: flex; - margin-top: 1rem; - flex-direction: column; - align-items: center; - justify-content: center; -} - -.groups-index h1 { - font-weight: 700; - font-size: 2rem; - color: var(--gray); -} - -.groups-index a { - margin-top: 0.5rem; - font-weight: 700; - font-size: 1rem; - color: white; - padding: 5px; - border-radius: 3px; - background-color: var(--green); - text-align: center; -} - -#groups { - width: 100%; - display: flex; - flex-direction: column; - gap: 1rem; - align-items: center; - margin-top: 2rem; -} - -/* single Group */ - -.single-group { - height: 3rem; - padding: 5px; - width: 90%; - display: grid; - align-items: center; - grid-template-columns: 20% 50% 30%; - background-color: rgb(225, 225, 225); -} - -.single-group p { - font-size: 1.8rem; - margin: 0; -} - -.group-price { - margin-left: auto; - font-size: 1.3rem; - color: var(--green); - font-weight: 700; -} - -#group_icon { - height: 2.7rem; - font-size: 2rem; - width: 30%; - border-radius: 5px; -} - -.submit-btn input { - border: none; - margin-top: 0.5rem; - font-weight: 700; - font-size: 1rem; - color: white; - padding: 5px; - border-radius: 3px; - background-color: var(--green); -} - -/* group show */ - -.group-options-btns { - display: flex; - margin-top: 1rem; - width: 90%; - justify-content: space-between; - gap: 5px; -} - -.button_to { - width: auto; -} - -.button_to button { - background-color: red; - border: none; - margin-top: 0.5rem; - font-weight: 700; - font-size: 1rem; - color: white; - padding: 5px; - border-radius: 3px; -} - -#expenses { - width: 100%; - margin-top: 2rem; - display: flex; - flex-direction: column; - align-items: center; - gap: 1rem; -} - -.expenses { - width: 100%; - margin-top: 2rem; - display: flex; - flex-direction: column; - align-items: center; - gap: 1rem; -} - -.expense { - height: 4rem; - padding: 5px; - width: 90%; - display: flex; - flex-direction: column; - align-items: center; - background-color: rgb(225, 225, 225); -} - -.expense-main, -.expense-info { - display: flex; - width: 80%; - align-items: center; -} - -.expense-title { - font-size: 1.6rem; - color: var(--gray); -} - -.expense-info { - justify-content: space-between; -} - -.expense-info a { - margin: 0; -} - -.expense-info form.button_to button { - margin: 0; -} - -/* user show */ - -.user-name { - font-size: 2rem; - color: var(--gray); -} - -.user-email { - font-size: 1.6rem; - color: var(--gray); -} - -/* NAVBAR */ - -.navbar { - display: flex; - justify-content: space-around; - width: 100%; -} - -.navbar li a { - color: white; -} - -.single-group p a { - background-color: transparent; - font-size: 1.8rem; - color: var(--gray); -} diff --git a/app/assets/stylesheets/expenses.css b/app/assets/stylesheets/expenses.css new file mode 100644 index 0000000..c126a64 --- /dev/null +++ b/app/assets/stylesheets/expenses.css @@ -0,0 +1,40 @@ +.exp { + width: 96%; + background-color: white; + border-radius: 5px; + flex-wrap: wrap; + margin-top: 0.25rem; + height: 63px; +} + +.exp-name { + width: 50%; + font-size: 21px; + font-weight: 500; +} + +.exp-amount { + width: 25%; + font-size: 22px; + font-weight: 300; +} + +.exp-div { + width: 25%; + height: 90%; + text-align: right; + display: flex; + align-items: center; + justify-content: flex-end; + flex-wrap: wrap; +} + +.exp-div a { + width: 100%; + font-size: large; +} + +.exp-icon { + width: 20%; + margin-right: 2px; +} diff --git a/app/assets/stylesheets/forms.css b/app/assets/stylesheets/forms.css new file mode 100644 index 0000000..9af472d --- /dev/null +++ b/app/assets/stylesheets/forms.css @@ -0,0 +1,88 @@ +form { + margin-top: 0.5rem; + width: 96%; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +form div, +form.edit_user div, +form.new_user div { + margin: 0.15rem 0; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} + +form input[type=number], +form input[type=text], +form input[type=email], +form input[type=password], +form textarea { + width: 99%; + background-color: white; + border: 1px solid #cbcbcb; + height: 45px; + padding-left: 9px; + text-align: left; + font-size: 18px; + font-weight: 200; +} + +form input[type=text], +form input[type=email]::placeholder, +form input[type=password]::placeholder { + text-align: left; + padding-left: 9px; + font-weight: 400; +} + +#user_remember_me { + margin: 0.25rem; +} + +.shared-links { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} + +.shared-links a { + width: 100%; + text-align: center; + margin-top: 0.5rem; + transition: color 200ms ease-in-out; +} + +.shared-links a:hover { + color: var(--color-main); +} + +.cancel-acc { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + width: 100%; +} + +.cancel-acc p { + width: 90%; + text-align: center; + margin-top: 0.5rem; +} + +#category_icon { + font-size: 30px; +} + +form div label { + font-size: 16px; + font-weight: 400; + width: 100%; + text-align: center; +} diff --git a/app/assets/stylesheets/groups.css b/app/assets/stylesheets/groups.css new file mode 100644 index 0000000..55d662d --- /dev/null +++ b/app/assets/stylesheets/groups.css @@ -0,0 +1,22 @@ +#categories a { + width: 96%; + background-color: white; + border-radius: 5px; + flex-wrap: wrap; + margin-top: 0.25rem; + height: 63px; +} + +.cat-icon { + font-size: 36px; +} + +.cat-name { + width: 50%; + font-size: 20px; + font-weight: 300; +} + +.cat-total { + width: 30%; +} diff --git a/app/assets/stylesheets/main.css b/app/assets/stylesheets/main.css new file mode 100644 index 0000000..e6801e1 --- /dev/null +++ b/app/assets/stylesheets/main.css @@ -0,0 +1,77 @@ +.container { + width: 100%; + max-width: 720px; +} + +.flex { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} + +.btn-group { + width: 100%; +} + +.btn-main, +.btn-white { + padding: 0.75rem; + margin-top: 1rem; + background-color: var(--color-main); + width: 90%; + border-radius: 0.18rem; + text-align: center; + text-transform: uppercase; + color: white; + letter-spacing: 1px; + font-weight: 400; + cursor: pointer; + font-size: 18px; + border: none; + transition: all 100ms ease-out; +} + +.btn-white { + background-color: white; + color: var(--color-text); +} + +.btn-main:hover { + background-color: #87aeda; + text-shadow: 0 0 10px black; + opacity: 80%; +} + +.btn-white:hover { + background-color: var(--color-third); + color: white; + text-shadow: 0 0 10px black; + opacity: 80%; +} + +.title { + width: 100%; + text-align: center; + font-size: 20px; + font-weight: 300; + background-color: white; + padding: 0.75rem 0; +} + +.inner-container { + width: 100%; + margin-top: 1rem; +} + +.card { + justify-content: space-between; + align-items: center; + padding: 10px 12px; +} + +.inner-card { + display: flex; + flex-direction: column; + gap: 10px; +} diff --git a/app/assets/stylesheets/navbar.css b/app/assets/stylesheets/navbar.css new file mode 100644 index 0000000..d0b7c43 --- /dev/null +++ b/app/assets/stylesheets/navbar.css @@ -0,0 +1,58 @@ +#navbar { + top: 0; + left: 0; + width: 100%; + height: 69px; + background-color: var(--color-main); + display: flex; + justify-content: center; + align-items: center; +} + +#nav-container { + margin-top: 1rem; + display: flex; + justify-content: center; + align-items: center; + width: 99%; + max-width: 720px; +} + +#navbar-body { + width: 90%; + font-size: 18px; + font-weight: 300; + display: flex; + justify-content: flex-end; + align-items: center; +} + +.navbar-list { + width: 99%; + display: flex; + justify-content: center; + align-items: center; +} + +.nav-item, +.nav-item a { + font-size: 13px; + font-weight: 200; + color: white; + width: 25%; + text-align: center; +} + +.nav-back { + text-align: left; +} + +.nav-title { + width: 50%; + font-size: 18px; + font-weight: 400; +} + +.nav-logout { + text-align: right; +} diff --git a/app/assets/stylesheets/noticealert.css b/app/assets/stylesheets/noticealert.css new file mode 100644 index 0000000..68cd811 --- /dev/null +++ b/app/assets/stylesheets/noticealert.css @@ -0,0 +1,17 @@ +.notice, +.alert { + width: 100%; + min-height: min-content; + background-color: var(--color-third); + color: white; + text-align: center; + font-size: 1rem; + font-weight: 300; + line-height: 2.3rem; + opacity: 90%; + letter-spacing: 1px; +} + +.alert { + background-color: var(--color-second); +} diff --git a/app/assets/stylesheets/splash.css b/app/assets/stylesheets/splash.css new file mode 100644 index 0000000..add9dcc --- /dev/null +++ b/app/assets/stylesheets/splash.css @@ -0,0 +1,14 @@ +.splash-container { + width: 100%; + margin: 25% 0; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; +} + +.splash-logo { + width: 45%; + height: auto; + margin: 0.81rem; +} diff --git a/app/controllers/expenses_controller.rb b/app/controllers/expenses_controller.rb index f37c025..3916054 100644 --- a/app/controllers/expenses_controller.rb +++ b/app/controllers/expenses_controller.rb @@ -5,7 +5,7 @@ class ExpensesController < ApplicationController # GET /expenses or /expenses.json def index - @expenses = @user.expenses.all.order(created_at: :desc) + @expenses = @group.expenses end # GET /expenses/new @@ -72,6 +72,6 @@ def set_expense # Only allow a list of trusted parameters through. def expense_params - params.require(:expense).permit(:name, :amount, :group_ids) + params.require(:expense).permit(:name, :amount, group_ids: []) end end diff --git a/app/models/ability.rb b/app/models/ability.rb new file mode 100644 index 0000000..5b72fe1 --- /dev/null +++ b/app/models/ability.rb @@ -0,0 +1,10 @@ +class Ability + include CanCan::Ability + + def initialize(current_user) + return unless current_user.present? # additional permissions for logged in users (they can read their own posts) + + can :manage, Group, user: current_user + can :manage, Expense, user: current_user + end +end diff --git a/app/views/devise/registrations/edit.html.erb b/app/views/devise/registrations/edit.html.erb index 38d95b8..b7c4f64 100644 --- a/app/views/devise/registrations/edit.html.erb +++ b/app/views/devise/registrations/edit.html.erb @@ -1,11 +1,14 @@ -
Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %>
- +Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), class: "btn-white", data: { confirm: "Are you sure?" }, method: :delete %>
+- <%= expense.name %> -
-- <%= number_to_currency(expense.amount) %> -
-- <%= expense.created_at.strftime("%e %b %y") %> -
-- Group: - <%= @group.icon %> -
- <%= link_to "Edit", edit_group_expense_path(@group, expense) %> - <%= button_to "Delete", group_expense_path(@group, expense), method: :delete %> ++ <%= expense.name %> +
++ $ + <%= expense.amount %> +
+<%= notice %>
-- <%= link_to "Show this expense", group_expense_path(@group, expense) %> -
- <% end %> -<%= notice %>
++ <%= link_to "Show this expense", group_expense_path(@group, expense) %> +
+ <% end %> +- <%= group.icon %> -
-- <%=link_to group.name, group_path(group) %> -
-- <%= number_to_currency(group.expenses.sum(:amount)) %> -
-+ <%= group.name %> +
+Total: + $ <%= group.expenses.sum(:amount) %> +
+<%= notice %>
-<%= notice %>
- <%= render @group %> -