4 Commits

  1. 13
      CHANGELOG.md
  2. 45
      assets/css/_cards.scss
  3. 1
      assets/css/_markdown.scss
  4. 50
      assets/css/app.scss
  5. 2
      lib/mirage/notes.ex
  6. 63
      lib/mirage_web/live/inbox_live.html.leex
  7. 2
      lib/mirage_web/live/inbox_live/index.ex
  8. 23
      lib/mirage_web/live/inbox_live/index.html.leex
  9. 23
      lib/mirage_web/live/inbox_live/item_component.ex
  10. 4
      lib/mirage_web/live/note_live/index.html.leex
  11. 2
      lib/mirage_web/router.ex
  12. 35
      lib/mirage_web/templates/layout/_sidebar.html.eex
  13. 2
      mix.exs

13
CHANGELOG.md

@ -5,6 +5,19 @@ See [Conventional Commits](Https://conventionalcommits.org) for commit guideline
<!-- changelog -->
## [v0.70.0](https://git.inhji.de/inhji/mirage/compare/v0.69.1...v0.70.0) (2021-03-13)
### Features:
* redesign inbox, clean up styles, move card styles to own file, move inbox to own directory
* use bootstrap icon font in sidebar
* use bootstrap icon font
## [v0.69.1](https://git.inhji.de/inhji/mirage/compare/v0.69.0...v0.69.1) (2021-03-12)

45
assets/css/_cards.scss

@ -0,0 +1,45 @@
.cards {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
overflow-x: auto;
.card {
flex: 1;
border-width: 1px;
border-style: solid;
@include color-assign(border-color, surface-var);
border-radius: 2px;
padding: 0.5rem;
text-decoration: none;
min-width: 15rem;
word-break: break-word;
transition: 0.2s all ease-in;
&:last-child {
margin-right: 0;
}
&:hover {
@include color-assign(color, on-navigation);
@include color-assign(background-color, primary);
@include color-assign(border-color, surface-dark);
}
}
&.list {
gap: 0;
.card {
border-radius: 0;
border-bottom: none;
&:last-child {
border-bottom: 1px solid white;
@include color-assign(border-color, surface-var);
}
}
}
}

1
assets/css/_markdown.scss

@ -7,6 +7,7 @@
a {
@include color-assign(color, primary-inverse);
text-decoration: underline;
}
h1 { font-size: 1.4rem; }

50
assets/css/app.scss

@ -1,6 +1,7 @@
/* === External Dependencies === */
@import "~minireset.css/minireset.css";
@import "~bootstrap-icons/font/bootstrap-icons.css";
@import "~sass-material-colors/sass/sass-material-colors";
@import "~@yaireo/tagify/src/tagify";
@ -76,6 +77,7 @@ $shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.75);
@import "./forms";
@import "./tablesort";
@import "./prism";
@import "./cards";
/* === Base === */
@ -110,6 +112,7 @@ h3 {
a {
@include color-assign(color, on-surface);
text-decoration: none;
}
/* === Layout === */
@ -164,7 +167,6 @@ button[type=submit], a.button {
@include color-assign(color, on-surface);
display: inline-block;
font-size: 1rem;
text-decoration: none;
border: 1px solid #000;
@include color-assign(border-color, on-surface);
padding: 0.5rem 1rem;
@ -227,43 +229,10 @@ kbd {
border-radius: 5px;
border: 1px solid white;
@include color-assign(border-color, on-surface);
a { text-decoration: none; }
}
}
.cards {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
overflow-x: auto;
.card {
border-width: 1px;
border-style: solid;
@include color-assign(border-color, surface-var);
border-radius: 2px;
padding: 0.5rem;
text-decoration: none;
min-width: 15rem;
word-break: break-word;
transition: 0.2s all ease-in;
&:last-child {
margin-right: 0;
}
&:hover {
@include color-assign(color, on-navigation);
@include color-assign(background-color, primary);
@include color-assign(border-color, surface-dark);
}
}
}
.notes {
margin-top: 4rem;
@ -305,10 +274,6 @@ kbd {
}
.results {
a {
text-decoration: none;
}
.result {
padding: 1rem;
@ -328,10 +293,6 @@ article {
margin-bottom: 2rem;
}
&>a {
text-decoration: none;
}
header {
@include color-assign(background, surface);
.title {
@ -365,10 +326,6 @@ article {
@include color-assign(background-color, primary);
}
a {
text-decoration: none;
}
.link-wrapper {
display: flex;
padding: 1rem;
@ -390,7 +347,6 @@ article {
.link-wrapper:last-child {
margin-bottom: 0;
}
}
/* === Media Queries === */

2
lib/mirage/notes.ex

@ -143,7 +143,7 @@ defmodule Mirage.Notes do
end
def today_title() do
Timex.now() |> Timex.format!("{YYYY}-{0M}-{D}")
Timex.now() |> Timex.format!("{YYYY}-{0M}-{0D}")
end
@doc """

63
lib/mirage_web/live/inbox_live.html.leex

@ -1,63 +0,0 @@
<header class="hero">
<h1>Inbox</h1>
</header>
<section class="bg-content width-full">
<h3>📆 Todays Note</h3>
<div class="cards">
<%= for note <- @notes.today do %>
<%= live_patch to: Routes.note_show_path(MirageWeb.Endpoint, :show, note), class: "col card" do %>
<strong><%= note.title %></strong>
<p><%= note.content |> String.slice(0..50) %></p>
<% end %>
<% end %>
</div>
</section>
<%= if not Enum.empty?(@notes.unlinked) do %>
<section class="bg-content width-full">
<h3>🔗 Unlinked</h3>
<div class="grid cards">
<%= for note <- @notes.unlinked do %>
<%= live_patch to: Routes.note_show_path(MirageWeb.Endpoint, :show, note), class: "col card" do %>
<strong><%= note.title %></strong>
<p><%= note.content |> String.slice(0..50) %></p>
<% end %>
<% end %>
</div>
</section>
<% end %>
<%= if not Enum.empty?(@notes.untagged) do %>
<section class="bg-content width-full">
<h3>🔖 Untagged</h3>
<div class="grid cards">
<%= for note <- @notes.untagged do %>
<%= live_patch to: Routes.note_show_path(MirageWeb.Endpoint, :show, note), class: "col card" do %>
<strong><%= note.title %></strong>
<p><%= note.content |> String.slice(0..50) %></p>
<% end %>
<% end %>
</div>
</section>
<% end %>
<section class="bg-content width-full">
<h3>🃏 At-Notes</h3>
<div class="grid cards">
<%= for note <- @notes.at do %>
<%= live_patch to: Routes.note_show_path(MirageWeb.Endpoint, :show, note), class: "col card" do %>
<strong><%= note.title %></strong>
<p><%= note.content |> String.slice(0..50) %></p>
<% end %>
<% end %>
</div>
</section>
<div class="buttons">
<%= link "Edit User", to: Routes.user_settings_path(MirageWeb.Endpoint, :edit), class: "button" %>
</div>

2
lib/mirage_web/live/inbox_live.ex → lib/mirage_web/live/inbox_live/index.ex

@ -1,4 +1,4 @@
defmodule MirageWeb.InboxLive do
defmodule MirageWeb.InboxLive.Index do
use MirageWeb, :live_view
@impl true

23
lib/mirage_web/live/inbox_live/index.html.leex

@ -0,0 +1,23 @@
<header class="hero">
<h1>Inbox</h1>
</header>
<section class="bg-content width-full">
<div class="cards list">
<%= for note <- @notes.today do %>
<%= live_component @socket, MirageWeb.InboxLive.ItemComponent, note: note, type: :today %>
<% end %>
<%= for note <- @notes.at do %>
<%= live_component @socket, MirageWeb.InboxLive.ItemComponent, note: note, type: :at %>
<% end %>
<%= for note <- @notes.unlinked do %>
<%= live_component @socket, MirageWeb.InboxLive.ItemComponent, note: note, type: :unlinked %>
<% end %>
<%= for note <- @notes.untagged do %>
<%= live_component @socket, MirageWeb.InboxLive.ItemComponent, note: note, type: :untagged %>
<% end %>
</div>
</section>

23
lib/mirage_web/live/inbox_live/item_component.ex

@ -0,0 +1,23 @@
defmodule MirageWeb.InboxLive.ItemComponent do
use Phoenix.LiveComponent
use MirageWeb, :live_view
def render(assigns) do
~L"""
<%= live_patch to: Routes.note_show_path(MirageWeb.Endpoint, :show, @note), class: "card" do %>
<span>
<i class="bi <%= type_icon(@type) %>"></i>
</span>
<span>
<strong><%= @note.title %></strong>
</span>
<% end %>
"""
end
defp type_icon(:at), do: "bi-dice-4"
defp type_icon(:today), do: "bi-calendar-date"
defp type_icon(:untagged), do: "bi-tag"
defp type_icon(:unlinked), do: "bi-link-45deg"
defp type_icon(_), do: ""
end

4
lib/mirage_web/live/note_live/index.html.leex

@ -17,7 +17,7 @@
<section class="bg-content width-full">
<h3>✒️ Last Edited</h3>
<div class="grid cards">
<div class="cards list">
<%= for note <- @notes.last_edited do %>
<%= link to: Routes.note_show_path(@socket, :show, note), class: "col card" do %>
<strong><%= note.title %></strong>
@ -30,7 +30,7 @@
<section class="bg-content width-full">
<h3>🕶️ Most Viewed</h3>
<div class="grid cards">
<div class="cards list">
<%= for note <- @notes.most_viewed do %>
<%= link to: Routes.note_show_path(@socket, :show, note), class: "col card" do %>
<strong><%= note.title %></strong>

2
lib/mirage_web/router.ex

@ -85,7 +85,7 @@ defmodule MirageWeb.Router do
scope "/", MirageWeb do
pipe_through [:browser, :require_authenticated_user]
live "/inbox", InboxLive
live "/inbox", InboxLive.Index, :index
resources "/settings", SettingController, only: [:index, :show, :edit, :update]

35
lib/mirage_web/templates/layout/_sidebar.html.eex

@ -2,63 +2,44 @@
<ul>
<%= active_link(@conn, to: "/", wrap_tag: :li) do %>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="icon" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
<path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
</svg>
<i class="bi bi-house"></i>
<span class="label">Home</span>
</span>
<% end %>
<%= active_link(@conn, to: Routes.live_path(@conn, MirageWeb.InboxLive), wrap_tag: :li) do %>
<%= active_link(@conn, to: Routes.inbox_index_path(@conn, :index), wrap_tag: :li) do %>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="icon" viewBox="0 0 16 16">
<path d="M4.98 4a.5.5 0 0 0-.39.188L1.54 8H6a.5.5 0 0 1 .5.5 1.5 1.5 0 1 0 3 0A.5.5 0 0 1 10 8h4.46l-3.05-3.812A.5.5 0 0 0 11.02 4H4.98zm9.954 5H10.45a2.5 2.5 0 0 1-4.9 0H1.066l.32 2.562a.5.5 0 0 0 .497.438h12.234a.5.5 0 0 0 .496-.438L14.933 9zM3.809 3.563A1.5 1.5 0 0 1 4.981 3h6.038a1.5 1.5 0 0 1 1.172.563l3.7 4.625a.5.5 0 0 1 .105.374l-.39 3.124A1.5 1.5 0 0 1 14.117 13H1.883a1.5 1.5 0 0 1-1.489-1.314l-.39-3.124a.5.5 0 0 1 .106-.374l3.7-4.625z"/>
</svg>
<i class="bi bi-inbox"></i>
</span>
<span class="label">Inbox</span>
<% end %>
<li class="spacer"></li>
<%= active_link(@conn, to: "/notes", wrap_tag: :li) do %>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="icon" viewBox="0 0 16 16">
<path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
<path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
</svg>
<i class="bi bi-journal-text"></i>
</span>
<span class="label">Notes</span>
<% end %>
<%= active_link(@conn, to: "/links", wrap_tag: :li) do %>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="icon" viewBox="0 0 16 16">
<path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/>
</svg>
<i class="bi bi-bookmarks"></i>
</span>
<span class="label">Links</span>
<% end %>
<%= active_link(@conn, to: "/topics", wrap_tag: :li) do %>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="icon" viewBox="0 0 16 16">
<path d="M6 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-1 0a.5.5 0 1 0-1 0 .5.5 0 0 0 1 0z"/>
<path d="M2 1h4.586a1 1 0 0 1 .707.293l7 7a1 1 0 0 1 0 1.414l-4.586 4.586a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 1 6.586V2a1 1 0 0 1 1-1zm0 5.586l7 7L13.586 9l-7-7H2v4.586z"/>
</svg>
<i class="bi bi-tags"></i>
</span>
<span class="label">Topics</span>
<% end %>
<%= active_link(@conn, to: "/lists", wrap_tag: :li) do %>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="icon" viewBox="0 0 16 16">
<path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
<path d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-1-5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zM4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
</svg>
<i class="bi bi-card-list"></i>
</span>
<span class="label">Lists</span>
<% end %>
<%= active_link(@conn, to: "/settings", wrap_tag: :li) do %>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="icon" viewBox="0 0 16 16">
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
</svg>
<i class="bi bi-gear"></i>
</span>
<span class="label">Settings</span>
<% end %>

2
mix.exs

@ -1,7 +1,7 @@
defmodule Mirage.MixProject do
use Mix.Project
@version "0.69.1"
@version "0.70.0"
def project do
[

Loading…
Cancel
Save