Browse Source

feat: add bootstrap icons, responsive sidebar

main
Inhji Y. 8 months ago
parent
commit
aae310710d
  1. 6
      assets/css/_navigation.scss
  2. 24
      assets/css/app.scss
  3. 14
      assets/package-lock.json
  4. 1
      assets/package.json
  5. 58
      lib/mirage_web/templates/layout/_sidebar.html.eex

6
assets/css/_navigation.scss

@ -89,6 +89,12 @@ aside#sidebar {
@include color-assign(background-color, primary);
@include color-assign(color, on-primary);
}
svg.icon {
width: 1rem;
height: 1rem;
vertical-align: -.125em;
}
}
}
}

24
assets/css/app.scss

@ -32,6 +32,7 @@ $colors: (
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')
)
);
@ -44,6 +45,7 @@ $font-content: 'Open Sans', Helvetica, sans-serif;
$font-heading: $font-content;
$width-sidebar: 15rem;
$width-sidebar-collapsed: 3rem;
$bg-info: material-color('green', '500');
$color-info: material-color('green', '100');
@ -52,7 +54,7 @@ $color-warning: #fcf8e3;
$bg-danger: #a94442;
$color-danger: #f2dede;
$phone: 768px;
$shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.75);
@ -409,7 +411,7 @@ article {
/* === Media Queries === */
@media (max-width: 768px) {
@media (max-width: $phone) {
.flex-grid {
display: block;
}
@ -424,6 +426,24 @@ article {
display: block;
}
}
aside#sidebar {
width: $width-sidebar-collapsed;
.label {
display: none;
}
}
body.logged-in {
.container {
max-width: 60rem + $width-sidebar-collapsed;
}
#wrapper {
margin-left: $width-sidebar-collapsed;
}
}
}
/* === Helpers === */

14
assets/package-lock.json

@ -9,6 +9,7 @@
"@codemirror/lang-markdown": "^0.18",
"@codemirror/theme-one-dark": "^0.18",
"@yaireo/tagify": "^3.22.3",
"bootstrap-icons": "^1.4.0",
"minireset.css": "^0.0.7",
"nprogress": "^0.2.0",
"phoenix": "file:../deps/phoenix",
@ -2074,6 +2075,14 @@
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
"dev": true
},
"node_modules/bootstrap-icons": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.4.0.tgz",
"integrity": "sha512-EynaOv/G/X/sQgPUqkdLJoxPrWk73wwsVjVR3cDNYO0jMS58poq7DOC2CraBWlBt1AberEmt0blfw4ony2/ZIg==",
"engines": {
"node": ">=10"
}
},
"node_modules/brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -9720,6 +9729,11 @@
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
"dev": true
},
"bootstrap-icons": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.4.0.tgz",
"integrity": "sha512-EynaOv/G/X/sQgPUqkdLJoxPrWk73wwsVjVR3cDNYO0jMS58poq7DOC2CraBWlBt1AberEmt0blfw4ony2/ZIg=="
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

1
assets/package.json

@ -9,6 +9,7 @@
"@codemirror/lang-markdown": "^0.18",
"@codemirror/theme-one-dark": "^0.18",
"@yaireo/tagify": "^3.22.3",
"bootstrap-icons": "^1.4.0",
"minireset.css": "^0.0.7",
"nprogress": "^0.2.0",
"phoenix": "file:../deps/phoenix",

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

@ -3,14 +3,60 @@
<li>
<a>&nbsp;</a>
</li>
<%= active_link(@conn, "Inbox", to: Routes.user_path(@conn, :index), wrap_tag: :li) %>
<%= active_link(@conn, to: Routes.user_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>
</span>
<span class="label">Inbox</span>
<% end %>
<li class="spacer"></li>
<%= active_link(@conn, "Notes", to: "/notes", wrap_tag: :li) %>
<%= active_link(@conn, "Links", to: "/links", wrap_tag: :li) %>
<%= active_link(@conn, "Topics", to: "/topics", wrap_tag: :li) %>
<%= active_link(@conn, "Lists", to: "/lists", wrap_tag: :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>
</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>
</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>
</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>
</span>
<span class="label">Lists</span>
<% end %>
<li>
<a href="/user/settings">Settings</a>
<a href="/user/settings">
<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>
</span>
<span class="label">Settings</span>
</a>
</li>
</ul>
</aside>
Loading…
Cancel
Save