5 Commits

  1. 9
      CHANGELOG.md
  2. 21
      assets/css/_colors.scss
  3. 46
      assets/css/_forms.scss
  4. 99
      assets/css/_markdown.scss
  5. 65
      assets/css/_navigation.scss
  6. 268
      assets/css/app.scss
  7. 13
      assets/package-lock.json
  8. 1
      assets/package.json
  9. 2
      mix.exs
  10. 42
      test/mirage_web/live/note_link_live_test.exs

9
CHANGELOG.md

@ -5,6 +5,15 @@ See [Conventional Commits](Https://conventionalcommits.org) for commit guideline
<!-- changelog -->
## [v0.31.0](https://git.inhji.de/inhji/mirage/compare/v0.30.0...v0.31.0) (2021-02-14)
### Features:
* add material-colors-sass
## [v0.30.0](https://git.inhji.de/inhji/mirage/compare/v0.29.0...v0.30.0) (2021-02-14)

21
assets/css/_colors.scss

@ -1,26 +1,5 @@
// @include https://github.com/hadalin/dark-mode-sass
$colors: (
light: (
background: #eee,
background-content: #fff,
primary-400: #acacac,
primary-500: #505050,
primary-600: #3c3c3c,
accent-500: #007bff,
accent-600: #0056b3,
),
dark: (
background: #222,
background-content: #111,
primary-400: #757575,
primary-500: #ccc,
primary-600: #e6e6e6,
accent-500: #1e8ad6,
accent-600: #3ba0e6,
)
);
$color-placeholder: 'here';

46
assets/css/_forms.scss

@ -0,0 +1,46 @@
#modal {
padding: 2rem;
@include color-assign(background-color, background-content);
position: absolute;
width: 60%;
}
form {
margin-bottom: 2rem;
fieldset {
border: 0;
margin-bottom: 1rem;
&:last-child {
margin-bottom: 0;
}
input[type=text],
input[type=url],
input[type=email],
input[type=password] {
@include color-assign(background-color, background-content);
@include color-assign(color, primary-500);
border: 1px solid $border-base;
margin-bottom: 1rem;
padding: 0.5rem;
width: 100%;
border-radius: 0;
&:last-child {
margin-bottom: 0;
}
}
input.title {
font-size: 1.25rem;
}
input[readonly] {
color: $border-base;
}
}
}

99
assets/css/_markdown.scss

@ -0,0 +1,99 @@
.content.html {
margin-bottom: 2rem;
&:last-child {
margin-bottom: 0;
}
h1 {
font-size: 1.3rem;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 2rem;
&:first-child {
margin-top: 0;
}
}
p {
margin-bottom: 0.5rem;
&:last-child {
margin-bottom: 0;
}
}
dl {
dt { font-weight: bold; }
dd { margin-bottom: 1rem; }
}
hr {
color: transparent;
height: 0;
width: 100%;
border-top: 1px solid $border-base;
@include color-assign(border-color, primary-400);
margin: 2rem 0;
}
ul, ol {
margin-left: 2rem;
}
ul {
list-style-type: disc;
margin-bottom: 1rem;
}
table {
width: 100%;
overflow-x: auto;
td, th {
border: 1px solid $border-base;
border-width: 0 0 1px;
@include color-assign(border-color, primary-400);
padding: .5em .75em;
vertical-align: top;
}
thead th {
border-width: 0 0 2px;
}
tbody tr {
&:nth-child(odd) {
background: rgba(0,0,0,0.1);
}
}
}
blockquote, pre {
padding: 1rem;
background: rgba(0,0,0,0.1);
margin-bottom: 1rem;
}
blockquote {
position: relative;
font-size: 1.1rem;
font-style: italic;
&:after {
position: absolute;
content: "";
color: #222;
font-size: 5rem;
line-height: 0;
bottom: -10px;
right: 20px;
}
}
pre {
overflow: auto;
}
}

65
assets/css/_navigation.scss

@ -0,0 +1,65 @@
nav[role=navigation] {
@include color-assign(background-color, background-content);
line-height: 1.5em;
&:before {
content: '';
position: absolute;
width: 100%;
left: 0;
height: 3px;
background: $rainbow;
}
ul {
display: flex;
margin: 0 1rem;
padding: 0;
white-space: nowrap;
overflow-x: auto;
}
li {
display: inline-block;
}
li.brand {
font-weight: bold;
}
li {
a {
display: block;
padding: 1rem;
text-decoration: none;
transition: all 0.3s;
&:hover {
@include color-assign(background-color, accent-500);
}
}
}
}
aside.menu {
ul {
li {
@include color-assign(background-color, background-content);
padding-left: 2rem;
margin: 0 -2rem 0 -4rem;
a {
display: inline-block;
width: 100%;
padding: 1rem 2rem;
transition: all 0.3s;
text-decoration: none;
&:hover {
@include color-assign(background-color, background);
}
}
}
}
}

268
assets/css/app.scss

@ -1,21 +1,45 @@
/* This file is for your main application css. */
/* === External Dependencies === */
@import "~minireset.css/minireset.css";
@import "~sass-material-colors/sass/sass-material-colors";
/* === Color Definitions === */
$colors: (
light: (
background: material-color('grey', '100'),
background-content: material-color('grey', '200'),
primary-400: #acacac,
primary-500: #505050,
primary-600: #3c3c3c,
accent-500: material-color('teal', '700'),
accent-600: #0056b3,
),
dark: (
background: material-color('blue-grey', '900'),
background-content: material-color('blue-grey', '800'),
primary-400: #757575,
primary-500: #ccc,
primary-600: #e6e6e6,
accent-500: material-color('teal', '700'),
accent-600: #3ba0e6,
)
);
@import "./colors";
/* === Variables === */
$rainbow: linear-gradient(90deg,
rgba(131,58,180,1) 0%,
rgba(253,29,65,1) 50%,
rgba(252,176,69,1) 100%);
material-color('pink', '500') 0%,
material-color('light-blue', '500') 50%,
material-color('purple', '500') 100%);
$font-content: 'Open Sans', Helvetica, sans-serif;
$font-heading: $font-content;
$bg-base: #111;
$bg-content: #282c34;
$bg-info: #31708f;
$color-info: #d9edf7;
$bg-info: material-color('indigo', '500');
$color-info: material-color('indigo', '100');
$bg-warning: #8a6d3b;
$color-warning: #fcf8e3;
$bg-danger: #a94442;
@ -36,7 +60,9 @@ $border-base: #666;
@import "./phoenix";
@import "./nprogress";
@import "./colors";
@import "./markdown";
@import "./navigation";
@import "./forms";
/* === Base === */
@ -103,74 +129,6 @@ div + section {
margin-top: 2rem;
}
/* === Navigation === */
nav[role=navigation] {
@include color-assign(background-color, background-content);
line-height: 1.5em;
&:before {
content: '';
position: absolute;
width: 100%;
left: 0;
height: 3px;
background: $rainbow;
}
ul {
display: flex;
margin: 0 1rem;
padding: 0;
white-space: nowrap;
overflow-x: auto;
}
li {
display: inline-block;
}
li.brand {
font-weight: bold;
}
li {
a {
display: block;
padding: 1rem;
text-decoration: none;
transition: all 0.3s;
&:hover {
@include color-assign(background-color, accent-500);
}
}
}
}
aside.menu {
ul {
li {
@include color-assign(background-color, background-content);
padding-left: 2rem;
margin: 0 -2rem 0 -4rem;
a {
display: inline-block;
width: 100%;
padding: 1rem 2rem;
transition: all 0.3s;
text-decoration: none;
&:hover {
@include color-assign(background-color, background);
}
}
}
}
}
/* === Styling === */
button[type=submit], a.button {
@ -186,9 +144,9 @@ button[type=submit], a.button {
&:hover {
@include color-assign(color, primary-500);
background: $rainbow;
border: 1px solid white;
@include color-assign(border-color, primary-400);
border: 1px solid white;
background: $rainbow;
}
}
@ -305,56 +263,6 @@ kbd {
}
}
/* === Forms === */
#modal {
padding: 2rem;
@include color-assign(background-color, background-content);
position: absolute;
width: 60%;
}
form {
margin-bottom: 2rem;
fieldset {
border: 0;
margin-bottom: 1rem;
&:last-child {
margin-bottom: 0;
}
input[type=text],
input[type=url],
input[type=email],
input[type=password] {
@include color-assign(background-color, background-content);
@include color-assign(color, primary-500);
border: 1px solid $border-base;
margin-bottom: 1rem;
padding: 0.5rem;
width: 100%;
border-radius: 0;
&:last-child {
margin-bottom: 0;
}
}
input.title {
font-size: 1.25rem;
}
input[readonly] {
color: $border-base;
}
}
}
/* === Content === */
article {
@ -388,106 +296,6 @@ article {
}
}
.content.html {
margin-bottom: 2rem;
&:last-child {
margin-bottom: 0;
}
h1 {
font-size: 1.3rem;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 2rem;
&:first-child {
margin-top: 0;
}
}
p {
margin-bottom: 0.5rem;
&:last-child {
margin-bottom: 0;
}
}
dl {
dt { font-weight: bold; }
dd { margin-bottom: 1rem; }
}
hr {
color: transparent;
height: 0;
width: 100%;
border-top: 1px solid $border-base;
@include color-assign(border-color, primary-400);
margin: 2rem 0;
}
ul, ol {
margin-left: 2rem;
}
ul {
list-style-type: disc;
margin-bottom: 1rem;
}
table {
width: 100%;
overflow-x: auto;
td, th {
border: 1px solid $border-base;
border-width: 0 0 1px;
@include color-assign(border-color, primary-400);
padding: .5em .75em;
vertical-align: top;
}
thead th {
border-width: 0 0 2px;
}
tbody tr {
&:nth-child(odd) {
background: rgba(0,0,0,0.1);
}
}
}
blockquote, pre {
padding: 1rem;
background: rgba(0,0,0,0.1);
margin-bottom: 1rem;
}
blockquote {
position: relative;
font-size: 1.1rem;
font-style: italic;
&:after {
position: absolute;
content: "";
color: #222;
font-size: 5rem;
line-height: 0;
bottom: -10px;
right: 20px;
}
}
pre {
overflow: auto;
}
}
/* === Media Queries === */
@media (max-width: 400px) {

13
assets/package-lock.json

@ -27,6 +27,7 @@
"mini-css-extract-plugin": "^1.3.6",
"sass": "^1.32.7",
"sass-loader": "^11.0.1",
"sass-material-colors": "^0.0.5",
"webpack": "^5.21.2",
"webpack-cli": "^4.x"
}
@ -6740,6 +6741,12 @@
}
}
},
"node_modules/sass-material-colors": {
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/sass-material-colors/-/sass-material-colors-0.0.5.tgz",
"integrity": "sha1-uURTkjbJTi1OzjXS7j+iLxCy7UM=",
"dev": true
},
"node_modules/sax": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@ -12822,6 +12829,12 @@
"neo-async": "^2.6.2"
}
},
"sass-material-colors": {
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/sass-material-colors/-/sass-material-colors-0.0.5.tgz",
"integrity": "sha1-uURTkjbJTi1OzjXS7j+iLxCy7UM=",
"dev": true
},
"sax": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",

1
assets/package.json

@ -27,6 +27,7 @@
"mini-css-extract-plugin": "^1.3.6",
"sass": "^1.32.7",
"sass-loader": "^11.0.1",
"sass-material-colors": "^0.0.5",
"webpack": "^5.21.2",
"webpack-cli": "^4.x"
}

2
mix.exs

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

42
test/mirage_web/live/note_link_live_test.exs

@ -5,7 +5,6 @@ defmodule MirageWeb.NoteLinkLiveTest do
import Mirage.NoteLinkFixtures
import Mirage.NoteFixtures
@create_attrs %{title: "some title", url: "some url"}
@update_attrs %{title: "some updated title", url: "some updated url"}
@invalid_attrs %{title: nil, url: nil}
@ -19,56 +18,27 @@ defmodule MirageWeb.NoteLinkLiveTest do
assert html =~ note_link.title
end
test "saves new note_link", %{conn: conn, note: note} do
{:ok, index_live, _html} = live(conn, Routes.note_link_index_path(conn, :index))
assert index_live |> element("a", "New Note link") |> render_click() =~
"New Note link"
assert_patch(index_live, Routes.note_link_index_path(conn, :new))
assert index_live
|> form("#note_link-form", note_link: @invalid_attrs)
|> render_change() =~ "can&apos;t be blank"
{:ok, _, html} =
index_live
|> form("#note_link-form", note_link: @create_attrs |> with_note(note))
|> render_submit()
|> follow_redirect(conn, Routes.note_link_index_path(conn, :index))
assert html =~ "Note link created successfully"
assert html =~ "some title"
end
test "updates note_link in listing", %{conn: conn, note_link: note_link} do
{:ok, index_live, _html} = live(conn, Routes.note_link_index_path(conn, :index))
{:ok, show_live, _html} = live(conn, Routes.note_link_show_path(conn, :show, note_link))
assert index_live |> element("#note_link-#{note_link.id} a", "Edit") |> render_click() =~
assert show_live |> element("a", "Edit") |> render_click() =~
"Edit Note link"
assert_patch(index_live, Routes.note_link_index_path(conn, :edit, note_link))
assert_patch(show_live, Routes.note_link_show_path(conn, :edit, note_link))
assert index_live
assert show_live
|> form("#note_link-form", note_link: @invalid_attrs)
|> render_change() =~ "can&apos;t be blank"
{:ok, _, html} =
index_live
show_live
|> form("#note_link-form", note_link: @update_attrs)
|> render_submit()
|> follow_redirect(conn, Routes.note_link_index_path(conn, :index))
|> follow_redirect(conn, Routes.note_link_show_path(conn, :show, note_link))
assert html =~ "Note link updated successfully"
assert html =~ "some updated title"
end
test "deletes note_link in listing", %{conn: conn, note_link: note_link} do
{:ok, index_live, _html} = live(conn, Routes.note_link_index_path(conn, :index))
assert index_live |> element("#note_link-#{note_link.id} a", "Delete") |> render_click()
refute has_element?(index_live, "#note_link-#{note_link.id}")
end
end
describe "Show" do

Loading…
Cancel
Save