6 Commits

  1. 34
      CHANGELOG.md
  2. 15
      assets/css/_phoenix.scss
  3. 77
      assets/css/app.scss
  4. 2
      assets/js/editor.js
  5. 10
      assets/package-lock.json
  6. 1
      assets/package.json
  7. 2
      lib/mirage_web/live/page_live.html.leex
  8. 4
      lib/mirage_web/templates/note/edit.html.eex
  9. 24
      lib/mirage_web/templates/note/index.html.eex
  10. 14
      lib/mirage_web/templates/note/show.html.eex
  11. 8
      lib/mirage_web/templates/setting/index.html.eex
  12. 12
      lib/mirage_web/templates/setting/show.html.eex
  13. 4
      mix.exs

34
CHANGELOG.md

@ -5,6 +5,40 @@ See [Conventional Commits](Https://conventionalcommits.org) for commit guideline
<!-- changelog -->
## [v0.4.0](https://git.inhji.de/inhji/mirage/compare/v0.3.0...v0.4.0) (2021-02-05)
### Features:
* more flexible layout, add buttons class, helper classes for layout
* use scss variables
* add dark editor theme
### Bug Fixes:
* minor tweaks
## [v0.3.0](https://git.inhji.de/inhji/mirage/compare/v0.2.0...v0.3.0) (2021-02-05)
### Features:
* more flexible layout, add buttons class, helper classes for layout
* use scss variables
* add dark editor theme
### Bug Fixes:
* minor tweaks
## [v0.3.0](https://git.inhji.de/inhji/mirage/compare/v0.2.0...v0.3.0) (2021-02-05)

15
assets/css/_phoenix.scss

@ -2,19 +2,20 @@
.alert {
padding: 15px;
margin-bottom: 20px;
margin-top: 20px;
border: 1px solid transparent;
}
.alert-info {
color: #d9edf7;
background-color: #31708f;
color: $color-info;
background-color: $bg-info;
}
.alert-warning {
color: #fcf8e3;
background-color: #8a6d3b;
color: $color-warning;
background-color: $bg-warning;
}
.alert-danger {
color: #f2dede;
background-color: #a94442;
color: $color-danger;
background-color: $bg-danger;
}
.alert p {
margin-bottom: 0;
@ -23,7 +24,7 @@
display: none;
}
.invalid-feedback {
color: #a94442;
color: $color-danger;
display: block;
margin: -1rem 0 2rem;
}

77
assets/css/app.scss

@ -3,9 +3,6 @@
@import "~minireset.css/minireset.css";
@import "./phoenix";
@import "./nprogress";
/* === Variables === */
$rainbow: linear-gradient(90deg,
@ -16,6 +13,23 @@ $rainbow: linear-gradient(90deg,
$font-heading: 'Playfair Display', Georgia, serif;
$font-content: 'Fira Sans', Helvetica, sans-serif;
$bg-base: #111;
$bg-content: #333;
$bg-info: #31708f;
$color-info: #d9edf7;
$bg-warning: #8a6d3b;
$color-warning: #fcf8e3;
$bg-danger: #a94442;
$color-danger: #f2dede;
$color-text: #ddd;
/* === Imports === */
@import "./phoenix";
@import "./nprogress";
/* === Base === */
html {
@ -23,8 +37,8 @@ html {
}
body {
background: #111;
color: #ddd;
background: $bg-base;
color: $color-text;
font-family: $font-content;
font-size: 1rem;
line-height: 1.5rem;
@ -48,7 +62,7 @@ h3 {
}
a {
color: #ddd;
color: $color-text;
}
/* === Layout === */
@ -59,17 +73,23 @@ a {
main[role=main] {
padding: 0 2rem 2rem 2rem;
background: #333;
background: $bg-base;
}
footer {
padding: 2rem;
}
.width-full {
margin-left: -2rem;
margin-right: -2rem;
padding: 2rem;
}
/* === Navigation === */
nav[role=navigation] {
background: #333;
background: $bg-content;
line-height: 1.5em;
&:before {
@ -108,7 +128,7 @@ nav[role=navigation] {
/* === Styling ===*/
input[readonly] {
background: #ddd;
background: $color-text;
color: #777;
}
@ -117,7 +137,7 @@ input[type=text] {
display: inline-block;
padding: 0.5rem;
margin-bottom: 2rem;
background: #333;
background: $bg-content;
border: 1px solid white;
color: white;
font-size: 1.3rem;
@ -129,7 +149,7 @@ button[type=submit], a.button {
font-size: 1rem;
text-decoration: none;
border: 1px solid white;
background: #333;
background: $bg-content;
padding: 0.5rem 1rem;
margin: 0;
@ -141,12 +161,16 @@ button[type=submit], a.button {
}
.hero {
margin: 0 -2rem 2rem;
background: #111;
margin: 0 -2rem 0;
background: $bg-base;
padding: 2rem;
h1 {
margin: 0 0 1rem 0;
&:last-child {
margin: 0;
}
}
p {
@ -159,19 +183,35 @@ button[type=submit], a.button {
margin-bottom: 2rem;
}
.buttons {
margin-top: 2rem;
}
/* === Content === */
article {
margin-bottom: 2rem;
margin-bottom: 4rem;
&:last-child {
margin-bottom: 0;
}
}
.content.html {
margin-bottom: 2rem;
&:last-child {
margin-bottom: 0;
}
h1 {
font-size: 1.3rem;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 2rem;
}
ul, ol {
margin-left: 2rem;
}
@ -206,12 +246,15 @@ article {
}
}
/* === Media Queries === */
@media (max-width: 400px) {
.flex-grid {
display: block;
}
}
}
/* === Helpers === */
.bg-content { background: $bg-content; }
.bg-base { background: $bg-base; }

2
assets/js/editor.js

@ -4,6 +4,7 @@ import {history, historyKeymap} from "@codemirror/history"
import {defaultKeymap} from "@codemirror/commands"
import {defaultHighlightStyle} from "@codemirror/highlight"
import {markdown} from "@codemirror/lang-markdown"
import {oneDark} from "@codemirror/theme-one-dark"
const contentElement = "input.editor-content"
let view
@ -21,6 +22,7 @@ export default function initEditor(element) {
const state = EditorState.create({
doc: content,
extensions: [
oneDark,
history(),
markdown(),
defaultHighlightStyle,

10
assets/package-lock.json

@ -1253,6 +1253,16 @@
"resolved": "https://registry.npmjs.org/@codemirror/text/-/text-0.17.2.tgz",
"integrity": "sha512-KL+cM+uJPW5skyuTRoW43lOaSQq3YDNEPx5z0V/9Wsz9R9dK4kVP5NIRMUFgl9MUCQ9UxIotvgPDpz65j9wjuA=="
},
"@codemirror/theme-one-dark": {
"version": "0.17.4",
"resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-0.17.4.tgz",
"integrity": "sha512-zxhQpHn0JhSda1UI/cWQy0keL+5v625OOZJhmhpQuSttXDhb8l3zyrt2WBPQ+XL+n0GiXLMSRTjRa4YZYC8vzQ==",
"requires": {
"@codemirror/highlight": "^0.17.0",
"@codemirror/state": "^0.17.0",
"@codemirror/view": "^0.17.0"
}
},
"@codemirror/tooltip": {
"version": "0.17.2",
"resolved": "https://registry.npmjs.org/@codemirror/tooltip/-/tooltip-0.17.2.tgz",

1
assets/package.json

@ -9,6 +9,7 @@
"dependencies": {
"@codemirror/basic-setup": "^0.17.1",
"@codemirror/lang-markdown": "^0.17.1",
"@codemirror/theme-one-dark": "^0.17.4",
"minireset.css": "0.0.6",
"nprogress": "^0.2.0",
"phoenix": "file:../deps/phoenix",

2
lib/mirage_web/live/page_live.html.leex

@ -3,7 +3,7 @@
<p><%= raw @_settings.user_tagline %></p>
</section>
<section class="grid">
<section class="grid width-full bg-content">
<div class="col">
<h2>Profiles</h2>
<ul>

4
lib/mirage_web/templates/note/edit.html.eex

@ -2,4 +2,6 @@
<h1>Edit Note</h1>
</div>
<%= render "form.html", Map.put(assigns, :action, Routes.note_path(@conn, :update, @note)) %>
<div class="width-full bg-content">
<%= render "form.html", Map.put(assigns, :action, Routes.note_path(@conn, :update, @note)) %>
</div>

24
lib/mirage_web/templates/note/index.html.eex

@ -2,18 +2,22 @@
<h1>Listing Notes</h1>
</div>
<%= for note <- @notes do %>
<article>
<h2><%= note.title %></h2>
<section class="notes">
<%= for note <- @notes do %>
<article class="width-full bg-content">
<h2><%= note.title %></h2>
<div class="content html">
<%= Earmark.as_html!(note.content) |> raw %>
</div>
<div class="content html">
<%= Earmark.as_html!(note.content) |> raw %>
</div>
<%= render "_note_meta.html", conn: @conn, note: note %>
</article>
<% end %>
<%= render "_note_meta.html", conn: @conn, note: note %>
</article>
<% end %>
</section>
<%= if @current_user do %>
<span><%= link "New Note", to: Routes.note_path(@conn, :new), class: "button" %></span>
<div class="buttons">
<span><%= link "New Note", to: Routes.note_path(@conn, :new), class: "button" %></span>
</div>
<% end %>

14
lib/mirage_web/templates/note/show.html.eex

@ -3,14 +3,18 @@
<p><time datetime="<%= @note.inserted_at %>"><%= Timex.from_now(@note.inserted_at) %></time> / <time datetime="<%= @note.updated_at %>"><%= Timex.from_now(@note.updated_at) %></time></p>
</div>
<article>
<div class="content html">
<%= Earmark.as_html!(@note.content) |> raw %>
</div>
</article>
<div class="width-full bg-content">
<article>
<div class="content html">
<%= Earmark.as_html!(@note.content) |> raw %>
</div>
</article>
</div>
<%= if @current_user do %>
<div class="buttons">
<span><%= link "Edit", to: Routes.note_path(@conn, :edit, @note), class: "button" %></span>
<span><%= link "Back", to: Routes.note_path(@conn, :index), class: "button" %></span>
<span><%= link "Delete", to: Routes.note_path(@conn, :delete, @note), method: :delete, data: [confirm: "Are you sure?"], class: "button" %></span>
</div>
<% end %>

8
lib/mirage_web/templates/setting/index.html.eex

@ -2,6 +2,8 @@
<h1>Listing Settings</h1>
</div>
<%= for setting <- @settings do %>
<%= link setting.name, to: Routes.setting_path(@conn, :show, setting), class: "button" %>
<% end %>
<div class="width-full bg-content">
<%= for setting <- @settings do %>
<%= link setting.name, to: Routes.setting_path(@conn, :show, setting), class: "button" %>
<% end %>
</div>

12
lib/mirage_web/templates/setting/show.html.eex

@ -2,9 +2,11 @@
<h1>Setting '<%= @setting.name %>'</h1>
</div>
<div class="content html">
<%= raw @setting.value_html %>
</div>
<div class="width-full bg-content">
<div class="content html">
<%= raw @setting.value_html %>
</div>
<%= link "Edit", to: Routes.setting_path(@conn, :edit, @setting), class: "button" %>
<%= link "Back", to: Routes.setting_path(@conn, :index), class: "button" %>
<%= link "Edit", to: Routes.setting_path(@conn, :edit, @setting), class: "button" %>
<%= link "Back", to: Routes.setting_path(@conn, :index), class: "button" %>
</div>

4
mix.exs

@ -1,10 +1,12 @@
defmodule Mirage.MixProject do
use Mix.Project
@version "0.4.0"
def project do
[
app: :mirage,
version: "0.2.0",
version: @version,
elixir: "~> 1.7",
elixirc_paths: elixirc_paths(Mix.env()),
compilers: [:phoenix, :gettext] ++ Mix.compilers(),

Loading…
Cancel
Save