Browse Source

feat: tear down styles and layout

main
Inhji Y. 6 months ago
parent
commit
967eab8101
  1. 387
      assets/css/app-old.scss
  2. 387
      assets/css/app.scss
  3. 12949
      assets/package-lock.json
  4. 2
      assets/package.json
  5. 7
      assets/postcss.config.js
  6. 1
      assets/webpack.config.js
  7. 23
      lib/mirage_web/live/blog_live.html.leex
  8. 107
      lib/mirage_web/live/note_live/show.html.leex
  9. 10
      lib/mirage_web/templates/layout/_header.html.eex
  10. 4
      lib/mirage_web/templates/layout/_sidebar.html.eex
  11. 7
      lib/mirage_web/templates/layout/_user_menu.html.eex
  12. 10
      lib/mirage_web/templates/layout/app.html.eex
  13. 22
      lib/mirage_web/templates/layout/live.html.leex
  14. 40
      lib/mirage_web/templates/layout/root.html.leex

387
assets/css/app-old.scss

@ -0,0 +1,387 @@
/* === 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";
/* === Color Definitions === */
$primary-color: 'blue';
$colors: (
light: (
surface: material-color('blue-grey', '50'),
surface-var: material-color('blue-grey', '200'),
surface-dark: material-color('blue-grey', '800'),
on-surface: material-color('blue-grey', '900'),
background: material-color('blue-grey', '200'),
primary: material-color($primary-color, '700'),
primary-inverse: material-color($primary-color, 'a700'),
on-primary: material-color('blue-grey', '50'),
navigation: material-color('blue-grey', '900'),
navigation-var: material-color('blue-grey', '800'),
on-navigation: material-color('blue-grey', '50')
),
dark: (
surface: material-color('blue-grey', '800'),
surface-var: material-color('blue-grey', '800'),
surface-dark: material-color('blue-grey', '800'),
on-surface: material-color('blue-grey', '50'),
background: material-color('blue-grey', '900'),
primary: material-color($primary-color, '700'),
primary-inverse: material-color($primary-color, '300'),
on-primary: material-color('blue-grey', '50'),
navigation: material-color('blue-grey', '900'),
navigation-var: material-color('blue-grey', '800'),
on-navigation: material-color('blue-grey', '50')
)
);
@import "./colors";
/* === Variables === */
$font-content: 'Open Sans', Helvetica, sans-serif;
$font-heading: $font-content;
$width-wrapper: 60rem;
$width-sidebar: 15rem;
$width-sidebar-collapsed: 3rem;
$bg-info: material-color('green', '500');
$color-info: material-color('green', '100');
$bg-warning: #8a6d3b;
$color-warning: #fcf8e3;
$bg-danger: #a94442;
$color-danger: #f2dede;
$phone: 768px;
$shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.75);
/* === Fonts ===*/
@font-face {
font-family: 'Open Sans';
src: url('../static/fonts/OpenSans-Regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* === Imports === */
@import "./phoenix";
@import "./nprogress";
@import "./markdown";
@import "./navigation";
@import "./forms";
@import "./tablesort";
@import "./prism";
@import "./cards";
/* === Base === */
html {
height: 100%;
}
body {
@include color-assign(background-color, background);
@include color-assign(color, on-surface);
font-family: $font-content;
font-size: 1rem;
line-height: 1.5rem;
}
h2, h3 {
margin-bottom: 1rem;
}
h1 {
font-size: 2rem;
line-height: 2rem;
}
h2 {
font-size: 1.6rem;
}
h3 {
font-size: 1.3rem;
}
a {
@include color-assign(color, on-surface);
text-decoration: none;
}
/* === Layout === */
.container { max-width: $width-wrapper; }
.grid, .flex { display: flex; }
.col, .spacer { flex: 1; }
.flex-1 {flex: 1;}
.flex-2 {flex: 2;}
.flex-3 {flex: 3;}
.flex-4 {flex: 4;}
body.logged-in {
.container {
max-width: $width-wrapper + $width-sidebar;
}
#wrapper {
margin-left: $width-sidebar;
}
}
main[role=main] {
padding: 0 2rem 2rem 2rem;
@include color-assign(background-color, background);
}
footer {
padding: 2rem;
@include color-assign(background-color, surface);
}
.width-full {
margin-left: -2rem;
margin-right: -2rem;
padding: 2rem;
}
.padding {
padding: 2rem;
}
section + section,
div + section {
margin-top: 2rem;
}
/* === Styling === */
button[type=submit], a.button {
@include color-assign(background-color, surface);
@include color-assign(color, on-surface);
display: inline-block;
font-size: 1rem;
border: 1px solid #000;
@include color-assign(border-color, on-surface);
padding: 0.5rem 1rem;
margin: 0;
&:hover {
@include color-assign(color, on-primary);
@include color-assign(background-color, primary);
}
}
header.hero {
@include color-assign(background-color, primary);
@include color-assign(color, on-primary);
margin: 0 -2rem 0;
padding: 2rem;
h1 {
font-family: $font-heading;
font-weight: bold;
margin-bottom: 0.5rem;
}
p {
font-size: 1.3rem;
margin-bottom: 0.5rem;
&:last-child {
margin-bottom: 0;
}
}
}
.buttons {
margin-top: 2rem;
}
kbd {
padding: 1px 3px;
border: 1px solid #111;
@include color-assign(border-color, on-surface);
@include color-assign(background-color, surface);
border-radius: 3px;
}
.tags {
.tag {
display: inline-block;
font-size:75%;
@include color-assign(background, surface);
@include color-assign(color, on-surface);
padding: 0 0.3rem;
margin: 0.1rem;
border-radius: 5px;
border: 1px solid white;
@include color-assign(border-color, surface-var);
}
}
.notes {
margin-top: 4rem;
.note {
header {
@include color-assign(background-color, primary);
@include color-assign(color, on-primary);
}
}
}
#goto-anything {
position: fixed;
top: 5rem;
left: 15rem;
width: 30rem;
border: 1px solid white;
box-shadow: $shadow;
@include color-assign(background-color, surface);
@include color-assign(border-color, surface);
&.closed {
display: none;
}
form { margin: 0; }
input {
padding: 1rem;
border: none;
width: 100%;
@include color-assign(background-color, surface);
&:focus-visible {
outline: none;
border: none;
}
}
.results {
.result {
padding: 1rem;
&.active {
@include color-assign(background-color, surface-var);
}
}
}
}
/* === Content === */
article {
margin-bottom: 4rem;
&.single {
margin-bottom: 2rem;
}
header {
@include color-assign(background, surface);
.title {
font-family: $font-heading;
margin-bottom: 0;
}
}
footer {
border-top: 1px solid white;
@include color-assign(border-color, surface-var);
}
&:last-child {
margin-bottom: 0;
}
}
.backlinks, .sources {
&+form {
margin-top: 1rem;
}
h4 {
margin-bottom: 1rem;
padding: 0.5rem 1rem;
font-weight: bold;
border: 1px solid white;
@include color-assign(border-color, on-surface);
@include color-assign(color, on-primary);
@include color-assign(background-color, primary);
}
.link-wrapper {
display: flex;
padding: 1rem;
border: 1px solid white;
@include color-assign(border-color, on-surface);
@include color-assign(background-color, surface);
margin-bottom: 1rem;
a.link {
flex: 1;
span:first-child {
font-weight: bold;
}
}
}
.link-wrapper:last-child {
margin-bottom: 0;
}
}
/* === Media Queries === */
@media (max-width: $phone) {
.flex-grid {
display: block;
}
#goto-anything-wrapper {
#goto-anything {
left: 5%;
width: 90%;
}
#goto-anything-button {
display: block;
}
}
aside#sidebar {
width: $width-sidebar-collapsed;
.label {
display: none;
}
}
body.logged-in {
.container {
max-width: $width-wrapper + $width-sidebar-collapsed;
}
#wrapper {
margin-left: $width-sidebar-collapsed;
}
}
}
/* === Helpers === */
.bg-content { @include color-assign(background-color, surface); }
.bg-base { @include color-assign(background-color, background); }

387
assets/css/app.scss

@ -1,387 +1,2 @@
/* === 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";
/* === Color Definitions === */
$primary-color: 'blue';
$colors: (
light: (
surface: material-color('blue-grey', '50'),
surface-var: material-color('blue-grey', '200'),
surface-dark: material-color('blue-grey', '800'),
on-surface: material-color('blue-grey', '900'),
background: material-color('blue-grey', '200'),
primary: material-color($primary-color, '700'),
primary-inverse: material-color($primary-color, 'a700'),
on-primary: material-color('blue-grey', '50'),
navigation: material-color('blue-grey', '900'),
navigation-var: material-color('blue-grey', '800'),
on-navigation: material-color('blue-grey', '50')
),
dark: (
surface: material-color('blue-grey', '800'),
surface-var: material-color('blue-grey', '800'),
surface-dark: material-color('blue-grey', '800'),
on-surface: material-color('blue-grey', '50'),
background: material-color('blue-grey', '900'),
primary: material-color($primary-color, '700'),
primary-inverse: material-color($primary-color, '300'),
on-primary: material-color('blue-grey', '50'),
navigation: material-color('blue-grey', '900'),
navigation-var: material-color('blue-grey', '800'),
on-navigation: material-color('blue-grey', '50')
)
);
@import "./colors";
/* === Variables === */
$font-content: 'Open Sans', Helvetica, sans-serif;
$font-heading: $font-content;
$width-wrapper: 60rem;
$width-sidebar: 15rem;
$width-sidebar-collapsed: 3rem;
$bg-info: material-color('green', '500');
$color-info: material-color('green', '100');
$bg-warning: #8a6d3b;
$color-warning: #fcf8e3;
$bg-danger: #a94442;
$color-danger: #f2dede;
$phone: 768px;
$shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.75);
/* === Fonts ===*/
@font-face {
font-family: 'Open Sans';
src: url('../static/fonts/OpenSans-Regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* === Imports === */
@import "./phoenix";
@import "./nprogress";
@import "./markdown";
@import "./navigation";
@import "./forms";
@import "./tablesort";
@import "./prism";
@import "./cards";
/* === Base === */
html {
height: 100%;
}
body {
@include color-assign(background-color, background);
@include color-assign(color, on-surface);
font-family: $font-content;
font-size: 1rem;
line-height: 1.5rem;
}
h2, h3 {
margin-bottom: 1rem;
}
h1 {
font-size: 2rem;
line-height: 2rem;
}
h2 {
font-size: 1.6rem;
}
h3 {
font-size: 1.3rem;
}
a {
@include color-assign(color, on-surface);
text-decoration: none;
}
/* === Layout === */
.container { max-width: $width-wrapper; }
.grid, .flex { display: flex; }
.col, .spacer { flex: 1; }
.flex-1 {flex: 1;}
.flex-2 {flex: 2;}
.flex-3 {flex: 3;}
.flex-4 {flex: 4;}
body.logged-in {
.container {
max-width: $width-wrapper + $width-sidebar;
}
#wrapper {
margin-left: $width-sidebar;
}
}
main[role=main] {
padding: 0 2rem 2rem 2rem;
@include color-assign(background-color, background);
}
footer {
padding: 2rem;
@include color-assign(background-color, surface);
}
.width-full {
margin-left: -2rem;
margin-right: -2rem;
padding: 2rem;
}
.padding {
padding: 2rem;
}
section + section,
div + section {
margin-top: 2rem;
}
/* === Styling === */
button[type=submit], a.button {
@include color-assign(background-color, surface);
@include color-assign(color, on-surface);
display: inline-block;
font-size: 1rem;
border: 1px solid #000;
@include color-assign(border-color, on-surface);
padding: 0.5rem 1rem;
margin: 0;
&:hover {
@include color-assign(color, on-primary);
@include color-assign(background-color, primary);
}
}
header.hero {
@include color-assign(background-color, primary);
@include color-assign(color, on-primary);
margin: 0 -2rem 0;
padding: 2rem;
h1 {
font-family: $font-heading;
font-weight: bold;
margin-bottom: 0.5rem;
}
p {
font-size: 1.3rem;
margin-bottom: 0.5rem;
&:last-child {
margin-bottom: 0;
}
}
}
.buttons {
margin-top: 2rem;
}
kbd {
padding: 1px 3px;
border: 1px solid #111;
@include color-assign(border-color, on-surface);
@include color-assign(background-color, surface);
border-radius: 3px;
}
.tags {
.tag {
display: inline-block;
font-size:75%;
@include color-assign(background, surface);
@include color-assign(color, on-surface);
padding: 0 0.3rem;
margin: 0.1rem;
border-radius: 5px;
border: 1px solid white;
@include color-assign(border-color, surface-var);
}
}
.notes {
margin-top: 4rem;
.note {
header {
@include color-assign(background-color, primary);
@include color-assign(color, on-primary);
}
}
}
#goto-anything {
position: fixed;
top: 5rem;
left: 15rem;
width: 30rem;
border: 1px solid white;
box-shadow: $shadow;
@include color-assign(background-color, surface);
@include color-assign(border-color, surface);
&.closed {
display: none;
}
form { margin: 0; }
input {
padding: 1rem;
border: none;
width: 100%;
@include color-assign(background-color, surface);
&:focus-visible {
outline: none;
border: none;
}
}
.results {
.result {
padding: 1rem;
&.active {
@include color-assign(background-color, surface-var);
}
}
}
}
/* === Content === */
article {
margin-bottom: 4rem;
&.single {
margin-bottom: 2rem;
}
header {
@include color-assign(background, surface);
.title {
font-family: $font-heading;
margin-bottom: 0;
}
}
footer {
border-top: 1px solid white;
@include color-assign(border-color, surface-var);
}
&:last-child {
margin-bottom: 0;
}
}
.backlinks, .sources {
&+form {
margin-top: 1rem;
}
h4 {
margin-bottom: 1rem;
padding: 0.5rem 1rem;
font-weight: bold;
border: 1px solid white;
@include color-assign(border-color, on-surface);
@include color-assign(color, on-primary);
@include color-assign(background-color, primary);
}
.link-wrapper {
display: flex;
padding: 1rem;
border: 1px solid white;
@include color-assign(border-color, on-surface);
@include color-assign(background-color, surface);
margin-bottom: 1rem;
a.link {
flex: 1;
span:first-child {
font-weight: bold;
}
}
}
.link-wrapper:last-child {
margin-bottom: 0;
}
}
/* === Media Queries === */
@media (max-width: $phone) {
.flex-grid {
display: block;
}
#goto-anything-wrapper {
#goto-anything {
left: 5%;
width: 90%;
}
#goto-anything-button {
display: block;
}
}
aside#sidebar {
width: $width-sidebar-collapsed;
.label {
display: none;
}
}
body.logged-in {
.container {
max-width: $width-wrapper + $width-sidebar-collapsed;
}
#wrapper {
margin-left: $width-sidebar-collapsed;
}
}
}
/* === Helpers === */
.bg-content { @include color-assign(background-color, surface); }
.bg-base { @include color-assign(background-color, background); }
@import "~bootstrap-icons/font/bootstrap-icons.css";

12949
assets/package-lock.json

File diff suppressed because it is too large

2
assets/package.json

@ -28,6 +28,8 @@
"css-minimizer-webpack-plugin": "^1.x",
"file-loader": "^6.x",
"mini-css-extract-plugin": "^1.3.6",
"postcss-loader": "^5.2.0",
"postcss-preset-env": "^6.7.0",
"sass": "^1.32.7",
"sass-loader": "^11.0.1",
"sass-material-colors": "^0.0.5",

7
assets/postcss.config.js

@ -0,0 +1,7 @@
module.exports = {
plugins: [
require('postcss-preset-env')({
browsers: 'last 2 versions',
}),
],
};

1
assets/webpack.config.js

@ -32,6 +32,7 @@ module.exports = (env, options) => {
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
],
},

23
lib/mirage_web/live/blog_live.html.leex

@ -12,26 +12,17 @@
<% end %>
<%= if is_nil(@list) or Enum.count(@list.notes) == 0 do %>
<section class="width-full bg-content">
<section>
Looks like you did not create a blog list yet. Just name it <code>@blog</code> and its notes will show up here.
</section>
<% else %>
<section class="bg-content width-full">
<section>
<%= for note <- @list.notes do %>
<article class="note single" id="note-<%= note.id %>">
<%= live_patch to: Routes.note_show_path(MirageWeb.Endpoint, :show, note) do %>
<header class="width-full">
<h2 class="title">
<%= note.title %>
</h2>
<p class="tags">
<%= for topic <- note.topics do %>
<span class="tag"><%= topic.text %></span>
<% end %>
</p>
</header>
<% end %>
</article>
<%= live_patch to: Routes.note_show_path(MirageWeb.Endpoint, :show, note) do %>
<article id="note-<%= note.id %>">
<h2 class="title"><%= note.title %></h2>
</article>
<% end %>
<% end %>
</section>
<% end %>

107
lib/mirage_web/live/note_live/show.html.leex

@ -7,70 +7,69 @@
return_to: Routes.note_show_path(@socket, :show, @note) %>
<% end %>
<article class="single">
<header class="hero">
<h1><span class="id"><%= "##{@note.id}" %></span> <%= @note.title %></h1>
<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>
<article>
<header>
<h1><%= @note.title %></h1>
<time datetime="<%= @note.inserted_at %>">Created <%= Timex.from_now(@note.inserted_at) %></time>
<time datetime="<%= @note.updated_at %>">Last edited <%= Timex.from_now(@note.updated_at) %></time>
</header>
<div class="width-full bg-content" phx-update="ignore" id="note-<%= @note.id %>">
<div class="content html">
<%= raw @note.content_html %>
</div>
</div>
<section class="content html">
<%= raw @note.content_html %>
</section>
<%= if not Enum.empty?(@note.backlinks) do %>
<section class="backlinks">
<h4>Backlinks</h4>
<footer class="width-full bg-content">
<p class="tags">
<span class="tag">Views: <%= @note.views %></span>
<%= for topic <- @note.topics do %>
<span class="tag">
<%= link topic.text, to: Routes.topic_path(MirageWeb.Endpoint, :show, topic) %>
</span>
<ul>
<%= for backlink <- @note.backlinks do %>
<li>
<%= live_patch backlink.title, to: Routes.note_show_path(@socket, :show, backlink) %>
</li>
<% end %>
</p>
</footer>
</article>
</ul>
</section>
<% end %>
<%= if not Enum.empty?(@note.backlinks) do %>
<section class="backlinks">
<h4>Backlinks</h4>
<%= if not Enum.empty?(@note.links) do %>
<section class="sources">
<h4>Sources</h4>
<%= for backlink <- @note.backlinks do %>
<div class="link-wrapper">
<%= live_patch backlink.title, to: Routes.note_show_path(@socket, :show, backlink), class: "link" %>
</div>
<ul>
<%= for link <- @note.links do %>
<li>
<%= link to: Routes.link_show_path(@socket, :show, link) do %>
<%= link.title || link.url %>
<% end %>
</li>
<% end %>
</ul>
</section>
<% end %>
</section>
<% end %>
<%= if not Enum.empty?(@note.links) do %>
<section class="sources">
<h4>Sources</h4>
<%= if @current_user do %>
<section>
<h4>Add a new Link</h4>
<%= for link <- @note.links do %>
<div class="link-wrapper">
<%= link to: Routes.link_show_path(@socket, :show, link), class: "link" do %>
<span class="flex"><%= link.title || link.url %></span>
<span class="flex"><%= link.domain %></span>
<% end %>
</div>
<%= f = form_for @link_changeset, "#", [phx_submit: :save_link] %>
<%= hidden_input f, :note_id %>
<%= url_input f, :url, placeholder: "Add new link and press ENTER", autocomplete: "url" %>
</form>
</section>
<% end %>
<footer>
Tags:
<%= for topic <- @note.topics do %>
<time>
<%= link topic.text, to: Routes.topic_path(MirageWeb.Endpoint, :show, topic) %>
</time>
<% end %>
</section>
<% end %>
</footer>
</article>
<%= if @current_user do %>
<%= f = form_for @link_changeset, "#", [phx_submit: :save_link] %>
<fieldset>
<%= hidden_input f, :note_id %>
<%= url_input f, :url, placeholder: "Add new link and press ENTER", autocomplete: "url" %>
</fieldset>
</form>
<%= live_patch "Edit", to: Routes.note_show_path(@socket, :edit, @note), class: "button" %>
<%= link "Delete", to: "#", phx_click: "delete", phx_value_id: @note.id, data: [confirm: "Are you sure?"], class: "button" %>
<% end %>
<%= if @current_user do %>
<div class="buttons">
<%= live_patch "Edit", to: Routes.note_show_path(@socket, :edit, @note), class: "button", class: "button" %>
<%= live_redirect "Back", to: Routes.note_index_path(@socket, :index), class: "button" %>
<%= link "Delete", to: "#", phx_click: "delete", phx_value_id: @note.id, data: [confirm: "Are you sure?"], class: "button" %>
</div>
<% end %>

10
lib/mirage_web/templates/layout/_header.html.eex

@ -1,10 +0,0 @@
<header>
<nav role="navigation">
<ul>
<%= active_link(@conn, @_s.header_title.value, to: "/", wrap_tag: :li) %>
<%= active_link(@conn, "Blog", to: "/blog", wrap_tag: :li) %>
<li class="spacer"></li>
<%= render "_user_menu.html", assigns %>
</ul>
</nav>
</header>

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

@ -1,4 +1,4 @@
<aside id="sidebar">
<nav id="sidebar">
<ul>
<%= active_link(@conn, to: "/", wrap_tag: :li) do %>
<span class="icon">
@ -44,4 +44,4 @@
<span class="label">Settings</span>
<% end %>
</ul>
</aside>
</nav>

7
lib/mirage_web/templates/layout/_user_menu.html.eex

@ -1,8 +1,9 @@
<%= if @current_user do %>
<li><%= link "Log out", to: Routes.user_session_path(@conn, :delete), method: :delete %></li>
<%= link "Log out", to: Routes.user_session_path(@conn, :delete), method: :delete %>
<% else %>
<%= if not Mirage.Accounts.has_user? do %>
<li><%= link "Register", to: Routes.user_registration_path(@conn, :new) %></li>
<%= link "Register", to: Routes.user_registration_path(@conn, :new) %>
<% else %>
<%= link "Log in", to: Routes.user_session_path(@conn, :new) %>
<% end %>
<li><%= link "Log in", to: Routes.user_session_path(@conn, :new) %></li>
<% end %>

10
lib/mirage_web/templates/layout/app.html.eex

@ -1,6 +1,4 @@
<main role="main">
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
<p class="alert alert-warning" role="alert"><%= get_flash(@conn, :warn) %></p>
<%= @inner_content %>
</main>
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
<p class="alert alert-warning" role="alert"><%= get_flash(@conn, :warn) %></p>
<%= @inner_content %>

22
lib/mirage_web/templates/layout/live.html.leex

@ -1,15 +1,13 @@
<main role="main">
<p class="alert alert-info" role="alert"
phx-click="lv:clear-flash"
phx-value-key="info"><%= live_flash(@flash, :info) %></p>
<p class="alert alert-info" role="alert"
phx-click="lv:clear-flash"
phx-value-key="info"><%= live_flash(@flash, :info) %></p>
<p class="alert alert-danger" role="alert"
phx-click="lv:clear-flash"
phx-value-key="error"><%= live_flash(@flash, :error) %></p>
<p class="alert alert-danger" role="alert"
phx-click="lv:clear-flash"
phx-value-key="error"><%= live_flash(@flash, :error) %></p>
<p class="alert alert-warning" role="alert"
phx-click="lv:clear-flash"
phx-value-key="warn"><%= live_flash(@flash, :warn) %></p>
<p class="alert alert-warning" role="alert"
phx-click="lv:clear-flash"
phx-value-key="warn"><%= live_flash(@flash, :warn) %></p>
<%= @inner_content %>
</main>
<%= @inner_content %>

40
lib/mirage_web/templates/layout/root.html.leex

@ -6,23 +6,35 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<%= csrf_meta_tag() %>
<%= live_title_tag assigns[:page_title] || "Inhji.de", suffix: " · Mirage" %>
<link rel="icon" href='favicon.ico'>
<link phx-track-static rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
<!--
<link rel="icon" href='favicon.ico'>
<link phx-track-static rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
-->
<script defer src="https://dohliam.github.io/dropin-minimal-css/switcher.js" type="text/javascript"></script>
<script defer phx-track-static type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</head>
<body class="<%= body_class(assigns) %>">
<div class="container">
<%= if @current_user do %>
<%= render "_sidebar.html", assigns %>
<% end %>
<%= if @current_user do %>
<%= render "_sidebar.html", assigns %>
<% end %>
<div id="wrapper">
<%= render "_header.html", assigns %>
<%= @inner_content %>
<%= render "_footer.html", assigns %>
</div>
<%= live_render @conn, MirageWeb.GotoAnythingLive %>
</div>
<header>
<nav role="navigation">
<%= active_link(@conn, @_s.header_title.value, to: "/") %> / <%= active_link(@conn, "Blog", to: "/blog") %>
</nav>
</header>
<main role="main">
<%= @inner_content %>
</main>
<footer>
<p>
<%= raw @_s.footer_text.value_html %> - <%= render "_user_menu.html", assigns %>
</p>
</footer>
<% live_render @conn, MirageWeb.GotoAnythingLive %>
</body>
</html>

Loading…
Cancel
Save