Browse Source

improve layout, design

main
Inhji Y. 9 months ago
parent
commit
cdfe286ffa
  1. 77
      assets/css/app.scss
  2. 14
      lib/mirage_web/live/page_live.html.leex
  3. 3
      lib/mirage_web/templates/layout/_footer.html.eex
  4. 3
      lib/mirage_web/templates/layout/_header.html.eex
  5. 8
      lib/mirage_web/templates/layout/app.html.eex
  6. 16
      lib/mirage_web/templates/layout/live.html.leex
  7. 7
      lib/mirage_web/templates/layout/root.html.leex
  8. 4
      lib/mirage_web/templates/note/index.html.eex
  9. 4
      lib/mirage_web/templates/note/new.html.eex
  10. 2
      lib/mirage_web/templates/setting/edit.html.eex
  11. 8
      lib/mirage_web/templates/setting/form.html.eex
  12. 36
      lib/mirage_web/templates/setting/index.html.eex
  13. 4
      lib/mirage_web/templates/user_registration/new.html.eex
  14. 4
      lib/mirage_web/templates/user_session/new.html.eex
  15. 4
      lib/mirage_web/templates/user_settings/edit.html.eex

77
assets/css/app.scss

@ -8,8 +8,12 @@
/* === Base === */
html {
height: 100%;
}
body {
background: #333;
background: #111;
color: #ddd;
font-family: monospace;
font-size: 1rem;
@ -17,13 +21,24 @@ body {
/* === Layout === */
.container { padding: 1rem; }
.container { max-width: 60rem; }
.grid { display: flex; }
.col { flex: 1; }
.col, .spacer { flex: 1; }
main[role=main] {
padding: 0 2rem 2rem 2rem;
background: #333;
}
footer {
padding: 2rem;
}
/* === Navigation === */
nav[role=navigation] {
background: #333;
&:before {
content: '';
position: absolute;
@ -37,6 +52,7 @@ nav[role=navigation] {
}
ul {
display: flex;
margin: 0;
padding: 0;
}
@ -59,6 +75,22 @@ nav[role=navigation] {
/* === Styling ===*/
h1, h2, h3 {
margin-bottom: 1rem;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.6rem;
}
h3 {
font-size: 1.3rem;
}
a {
color: #ddd;
}
@ -68,6 +100,45 @@ input[readonly] {
color: #777;
}
button[type=submit] {
color: white;
font-family: monospace;
border: 1px solid white;
background: #333;
padding: 0.5rem 1rem;
margin: 0.5rem 0;
}
.hero{
margin-left: -2rem;
margin-right: -2rem;
margin-bottom: 2rem;
background: #111;
padding: 2rem;
h1 {
margin: 0;
}
p {
font-size: 1.3rem;
}
}
trix-toolbar {
.trix-button {
background: white;
}
.trix-button-group {
border-radius: 0;
}
}
trix-editor {
border-radius: 0;
}
/* === Media Queries === */
@media (max-width: 400px) {

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

@ -1,10 +1,10 @@
<section class="phx-hero">
<section class="hero">
<h1><%= gettext "Hello my name is %{name}!", name: "Inhji" %></h1>
<h3><%= @tagline %></h3>
<p><%= raw @tagline %></p>
</section>
<section class="row">
<article class="column">
<section class="grid">
<div class="col">
<h2>Profiles</h2>
<ul>
<li>
@ -17,8 +17,8 @@
<a href="https://listenbrainz.org/user/inhji" target="_blank">Listenbrainz</a>
</li>
</ul>
</article>
<article class="column">
</div>
<div class="col">
<h2>Hosted</h2>
<ul>
<li>
@ -29,5 +29,5 @@
</li>
</li>
</ul>
</article>
</div>
</section>

3
lib/mirage_web/templates/layout/_footer.html.eex

@ -0,0 +1,3 @@
<footer>
2020 was a fucking crazy time
</footer>

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

@ -8,8 +8,9 @@
<a href="/notes">२ Notes</a>
</li>
<li>
<a href="/wiki">३ Wiki</a>
<a href="#" style="text-decoration: line-through;">३ Wiki</a>
</li>
<li class="spacer"></li>
<%= render "_user_menu.html", assigns %>
</ul>
</nav>

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

@ -1,7 +1,5 @@
<main role="main">
<div class="container">
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
<%= @inner_content %>
</div>
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
<%= @inner_content %>
</main>

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

@ -1,13 +1,11 @@
<main role="main">
<div class="container">
<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>
<%= @inner_content %>
</div>
<%= @inner_content %>
</main>

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

@ -10,7 +10,10 @@
<script defer phx-track-static type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</head>
<body>
<%= render "_header.html", assigns %>
<%= @inner_content %>
<div class="container">
<%= render "_header.html", assigns %>
<%= @inner_content %>
<%= render "_footer.html", assigns %>
</div>
</body>
</html>

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

@ -1,4 +1,6 @@
<h1>Listing Notes</h1>
<div class="hero">
<h1>Listing Notes</h1>
</div>
<%= for note <- @notes do %>
<article>

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

@ -1,4 +1,6 @@
<h1>New Note</h1>
<div class="hero">
<h1>New Note</h1>
</div>
<%= render "form.html", Map.put(assigns, :action, Routes.note_path(@conn, :create)) %>

2
lib/mirage_web/templates/setting/edit.html.eex

@ -1,4 +1,4 @@
<h1>Edit Setting</h1>
<h1>Edit Setting <%= @setting.name %></h1>
<%= render "form.html", Map.put(assigns, :action, Routes.setting_path(@conn, :update, @setting)) %>

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

@ -5,12 +5,10 @@
</div>
<% end %>
<%= label f, :name %>
<%= text_input f, :name, readonly: true %>
<%= error_tag f, :name %>
<%= hidden_input f, :name, readonly: true %>
<%= label f, :value %>
<%= text_input f, :value %>
<%= hidden_input f, :value %>
<trix-editor input="setting_value"></trix-editor>
<%= error_tag f, :value %>
<div>

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

@ -1,25 +1,19 @@
<h1>Listing Settings</h1>
<div class="hero">
<h1>Listing Settings</h1>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tbody>
<%= for setting <- @settings do %>
<tr>
<td><%= setting.name %></td>
<td><%= setting.value %></td>
<td>
<span><%= link "Show", to: Routes.setting_path(@conn, :show, setting) %></span>
<div class="grid">
<div class="col">
<%= setting.name %>
</div>
<div class="col">
<%= setting.value %>
</div>
<div class="col">
<span><%= link "Show", to: Routes.setting_path(@conn, :show, setting) %></span>
<span><%= link "Edit", to: Routes.setting_path(@conn, :edit, setting) %></span>
</td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
<% end %>

4
lib/mirage_web/templates/user_registration/new.html.eex

@ -1,4 +1,6 @@
<h1>Register</h1>
<div class="hero">
<h1>Register</h1>
</div>
<%= form_for @changeset, Routes.user_registration_path(@conn, :create), fn f -> %>
<%= if @changeset.action do %>

4
lib/mirage_web/templates/user_session/new.html.eex

@ -1,4 +1,6 @@
<h1>Log in</h1>
<div class="hero">
<h1>Log in</h1>
</div>
<%= form_for @conn, Routes.user_session_path(@conn, :create), [as: :user], fn f -> %>
<%= if @error_message do %>

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

@ -1,4 +1,6 @@
<h1>Settings</h1>
<div class="hero">
<h1>Settings</h1>
</div>
<h3>Change email</h3>

Loading…
Cancel
Save