archangel 0.0.2

data/app/themes/default/assets/stylesheets/default/common/bootstrap/_widgets.scss

@@ -0,0 +1,251 @@
+.social-box {
+  @include border-radius($card-border-radius);
+  background: $white;
+  border: $card-border-width solid $card-border-color;
+  margin-bottom: 2 * $card-spacer-y;
+  min-height: 160px;
+  text-align: center;
+
+  i {
+    @include border-radius($card-border-radius $card-border-radius 0 0);
+    background: $gray-200;
+    display: block;
+    font-size: 40px;
+    line-height: 90px;
+    margin: -1px -1px 0;
+  }
+
+  .chart-wrapper {
+    height: 90px;
+    margin: -90px 0 0;
+
+    canvas {
+      height: 90px !important;
+      width: 100% !important;
+    }
+  }
+
+  ul {
+    list-style: none;
+    padding: 10px 0;
+
+    li {
+      display: block;
+      float: left;
+      width: 50%;
+
+      &:first-child {
+        border-right: 1px solid $border-color;
+      }
+
+      strong {
+        display: block;
+        font-size: 20px;
+      }
+
+      span {
+        color: $border-color;
+        font-size: 10px;
+        font-weight: 500;
+        text-transform: uppercase;
+      }
+    }
+  }
+
+  &.facebook {
+    i {
+      background: $facebook;
+      color: $white;
+    }
+  }
+
+  &.twitter {
+    i {
+      background: $twitter;
+      color: $white;
+    }
+  }
+
+  &.linkedin {
+    i {
+      background: $linkedin;
+      color: $white;
+    }
+  }
+
+  &.google-plus {
+    i {
+      background: $google-plus;
+      color: $white;
+    }
+  }
+}
+
+.horizontal-bars {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    height: 40px;
+    line-height: 40px;
+    position: relative;
+    vertical-align: middle;
+
+    .title {
+      color: $text-muted;
+      font-size: 12px;
+      font-weight: 600;
+      vertical-align: middle;
+      width: 100px;
+    }
+
+    .bars {
+      padding-left: 100px;
+      position: absolute;
+      top: 15px;
+      width: 100%;
+
+      .progress:first-child {
+        margin-bottom: 2px;
+      }
+    }
+
+    &.legend {
+      text-align: center;
+
+      .badge {
+        display: inline-block;
+        height: 8px;
+        padding: 0;
+        width: 8px;
+      }
+    }
+
+    &.divider {
+      height: 40px;
+
+      i {
+        margin: 0 !important;
+      }
+    }
+  }
+
+  &.type-2 {
+
+    li {
+      overflow: hidden;
+
+      i {
+        display: inline-block;
+        font-size: 18px;
+        line-height: 40px;
+        margin-left: 5px;
+        margin-right: $spacer;
+      }
+
+      .title {
+        color: $body-color;
+        display: inline-block;
+        font-size: $font-size-base;
+        font-weight: normal;
+        line-height: 40px;
+        margin-top: -9px;
+        width: auto;
+      }
+
+      .value {
+        float: right;
+        font-weight: 600;
+      }
+
+      .bars {
+        bottom: 0;
+        padding: 0;
+        position: absolute;
+        top: auto;
+      }
+    }
+  }
+}
+
+.icons-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    height: 40px;
+    position: relative;
+    vertical-align: middle;
+
+    i {
+      display: block;
+      float: left;
+      height: 35px !important;
+      line-height: 35px !important;
+      margin: 2px;
+      text-align: center;
+      width: 35px !important;
+    }
+
+    .desc {
+      border-bottom: 1px solid $border-color;
+      height: 40px;
+      margin-left: 50px;
+
+      .title {
+        margin: 0;
+        padding: 2px 0 0;
+      }
+
+      small {
+        color: $text-muted;
+        display: block;
+        margin-top: -4px;
+      }
+    }
+
+    .value {
+      position: absolute;
+      right: 45px;
+      text-align: right;
+      top: 2px;
+
+      strong {
+        display: block;
+        margin-top: -3px;
+      }
+    }
+
+    .actions {
+      height: 40px;
+      line-height: 40px;
+      position: absolute;
+      right: 10px;
+      text-align: center;
+      top: -4px;
+      width: 40px;
+
+      i {
+        float: none;
+        height: auto;
+        line-height: normal;
+        margin: 0;
+        padding: 0;
+        width: auto;
+      }
+    }
+
+    &.divider {
+      height: 40px;
+
+      i {
+        font-size: 18px;
+        height: auto;
+        margin: 2px 0 0;
+        width: auto;
+      }
+    }
+  }
+}

data/app/themes/default/assets/stylesheets/default/common/bootstrap/mixins/_all.scss

@@ -0,0 +1,117 @@
+@mixin button-social-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+  @include border-radius($border-radius);
+  border: 0;
+  font-size: $font-size;
+  line-height: $line-height;
+  padding: $padding-y $padding-x;
+
+  &::before {
+    @include border-radius($border-radius);
+    font-size: $font-size;
+    height: ($padding-y * 2) + ($font-size * $line-height);
+    line-height: $line-height;
+    padding: $padding-y 0;
+    width: ($padding-y * 2) + ($font-size * $line-height);
+  }
+
+  span {
+    margin-left: ($padding-y * 2) + ($font-size * $line-height);
+  }
+
+  &.icon {
+    height: ($padding-y * 2) + ($font-size * $line-height);
+    width: ($padding-y * 2) + ($font-size * $line-height);
+  }
+}
+
+@mixin avatar($width, $status-width) {
+  display: inline-block;
+  position: relative;
+  width: $width;
+
+  .img-avatar {
+    height: $width;
+    width: $width;
+  }
+
+  .avatar-status {
+    border: 1px solid $white;
+    border-radius: 50em;
+    bottom: 0;
+    display: block;
+    height: $status-width;
+    position: absolute;
+    right: 0;
+    width: $status-width;
+  }
+}
+
+@mixin borders($borders) {
+  @each $border in $borders {
+    $direction: nth($border, 1);
+    @if $direction == 'all' {
+      $size: map-get(map-get($borders, $direction), size);
+      $style: map-get(map-get($borders, $direction), style);
+      $color: map-get(map-get($borders, $direction), color);
+      border: $size $style $color;
+    } @else if $direction == 'top' {
+      $size: map-get(map-get($borders, $direction), size);
+      $style: map-get(map-get($borders, $direction), style);
+      $color: map-get(map-get($borders, $direction), color);
+      border-top: $size $style $color;
+    } @else if $direction == 'right' {
+      $size: map-get(map-get($borders, $direction), size);
+      $style: map-get(map-get($borders, $direction), style);
+      $color: map-get(map-get($borders, $direction), color);
+      border-right: $size $style $color;
+    } @else if $direction == 'bottom' {
+      $size: map-get(map-get($borders, $direction), size);
+      $style: map-get(map-get($borders, $direction), style);
+      $color: map-get(map-get($borders, $direction), color);
+      border-bottom: $size $style $color;
+    } @else if $direction == 'left' {
+      $size: map-get(map-get($borders, $direction), size);
+      $style: map-get(map-get($borders, $direction), style);
+      $color: map-get(map-get($borders, $direction), color);
+      border-left: $size $style $color;
+    }
+  }
+}
+
+@mixin sidebar-width($borders, $width) {
+  $sidebar-width: $width;
+
+  @each $border in $borders {
+    $direction: nth($border, 1);
+    @if $direction == 'all' {
+      $size: map-get(map-get($borders, $direction), size);
+      $sidebar-width: ($sidebar-width - (2 * $size));
+    } @else if $direction == 'right' {
+      $size: map-get(map-get($borders, $direction), size);
+      $sidebar-width: $sidebar-width - $size;
+    } @else if $direction == 'left' {
+      $size: map-get(map-get($borders, $direction), size);
+      $sidebar-width: $sidebar-width - $size;
+    }
+    width: $sidebar-width;
+  }
+}
+
+@mixin bg-variant($parent, $color) {
+  #{$parent} {
+    @include border-radius($card-border-radius-inner $card-border-radius-inner $card-border-radius-inner $card-border-radius-inner);
+    background-color: $color !important;
+    color: $white !important;
+  }
+
+  a#{$parent} {
+    @include hover-focus {
+      background-color: darken($color, 10%);
+    }
+  }
+}
+
+@mixin card-accent-variant($color) {
+  border-top-color: $color;
+  border-top-width: 2px;
+}

data/app/themes/default/assets/stylesheets/default/common/bootstrap/utilities/_background.scss

@@ -0,0 +1,20 @@
+.bg-primary,
+.bg-success,
+.bg-info,
+.bg-warning,
+.bg-danger,
+.bg-inverse {
+  color: $white;
+}
+
+@each $color, $value in $grays {
+  .bg-gray-#{$color} {
+    background-color: $value;
+  }
+}
+
+@each $color, $value in $colors {
+  .bg-#{$color} {
+    background-color: $value;
+  }
+}

data/app/themes/default/assets/stylesheets/default/common/bootstrap/utilities/_borders.scss

@@ -0,0 +1,17 @@
+@each $prop, $abbrev in (border: b) {
+  @each $size in (0, 1, 2) {
+    @if $size == 0 {
+      .#{$abbrev}-a-#{$size} { #{$prop}: 0 !important; } // a = All sides
+      .#{$abbrev}-t-#{$size} { #{$prop}-top: 0 !important; }
+      .#{$abbrev}-r-#{$size} { #{$prop}-right: 0 !important; }
+      .#{$abbrev}-b-#{$size} { #{$prop}-bottom: 0 !important; }
+      .#{$abbrev}-l-#{$size} { #{$prop}-left: 0 !important; }
+    } @else {
+      .#{$abbrev}-a-#{$size} { #{$prop}: $size * $border-width solid $border-color !important; } // a = All sides
+      .#{$abbrev}-t-#{$size} { #{$prop}-top: $size * $border-width solid $border-color !important; }
+      .#{$abbrev}-r-#{$size} { #{$prop}-right: $size * $border-width solid $border-color !important; }
+      .#{$abbrev}-b-#{$size} { #{$prop}-bottom: $size * $border-width solid $border-color !important; }
+      .#{$abbrev}-l-#{$size} { #{$prop}-left: $size * $border-width solid $border-color !important; }
+    }
+  }
+}

data/app/themes/default/assets/stylesheets/default/common/bootstrap/utilities/_display.scss

@@ -0,0 +1,14 @@
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-down($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .d#{$infix}-down-none { display: none !important; }
+    // .d#{$infix}-inline { display: inline !important; }
+    // .d#{$infix}-inline-block { display: inline-block !important; }
+    // .d#{$infix}-block { display: block !important; }
+    // .d#{$infix}-table { display: table !important; }
+    // .d#{$infix}-table-cell { display: table-cell !important; }
+    // .d#{$infix}-flex { display: flex !important; }
+    // .d#{$infix}-inline-flex { display: inline-flex !important; }
+  }
+}

data/app/themes/default/assets/stylesheets/default/frontend/core.scss

@@ -0,0 +1,15 @@
+// Bootstrap theme variables
+//
+@import '../common/variables';
+//
+// Bootstrap
+//
+@import 'bootstrap';
+//
+// Bootstrap theme
+//
+@import '../common/bootstrap';
+//
+// 3rd party
+//
+@import 'font-awesome';

data/app/themes/default/assets/stylesheets/default/frontend.css

@@ -0,0 +1,13 @@
+/**
+ *  Default Archangel frontend theme
+ *= require_self
+ *
+ *  Third-party assets
+ * none
+ *
+ *  Third-party Archangel assets (from the vendor directory)
+ *= require archangel/frontend
+ *
+ *  Theme assets
+ *= require_tree ./frontend
+ */

data/app/themes/default/views/layouts/auth.html.erb

@@ -0,0 +1,35 @@
+<!doctype html>
+<html dir="<%= text_direction %>" lang="<%= locale %>">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <title><%= content_for?(:title) ? yield(:title) : Archangel.t(:archangel) %></title>
+
+    <link rel="shortcut icon" href="<%= current_site.favicon.url %>">
+
+    <%= csrf_meta_tags %>
+
+    <%= stylesheet_link_tag "#{current_theme}/auth", media: "all" %>
+    <%= yield(:stylesheet) if content_for?(:stylesheet) %>
+  </head>
+  <body class="app flex-row align-items-center">
+
+    <div class="container">
+      <div class="row justify-content-center">
+        <div class="col-md-6">
+          <div class="card">
+            <div class="card-body">
+              <%= render "archangel/shared/flash_messages" %>
+
+              <%= yield %>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <%= javascript_include_tag "#{current_theme}/auth" %>
+    <%= yield(:javascript) if content_for?(:javascript) %>
+  </body>
+</html>

data/app/themes/default/views/layouts/backend/_footer.html.erb

@@ -0,0 +1,7 @@
+<footer class="app-footer">
+  <span class="ml-auto">
+    <span class="powered-by"><%= Archangel.t(:powered_by) %></span>
+    <a href="https://github.com/archangel/archangel" target="_blank"><%= Archangel.t(:archangel) %></a>
+    <span class="version">v<%= Archangel.version %></span>
+  </span>
+</footer>

data/app/themes/default/views/layouts/backend/_header.html.erb

@@ -0,0 +1,31 @@
+<header class="app-header navbar">
+  <button class="navbar-toggler mobile-sidebar-toggler d-lg-none mr-auto" type="button">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+  <a class="navbar-brand" href="<%= backend_root_path %>">
+    <span class="d-lg-none"><%= image_tag(current_site.logo.tiny.url, alt: current_site.name) %></span>
+    <span class="d-md-down-none align-middle"><%= current_site.name %></span>
+  </a>
+
+  <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+  <div class="btn-group ml-auto" role="toolbar" aria-label="Toolbar">
+    <a class="nav-link" href="<%= root_path %>">
+      <span class="d-md-down-none"><%= Archangel.t(:website) %></span>
+      <%= fa_icon("home") %>
+    </a>
+
+    <a class="nav-link" href="<%= backend_profile_path %>">
+      <span class="d-md-down-none"><%= Archangel.t(:profile) %></span>
+      <%= fa_icon("user") %>
+    </a>
+
+    <a class="nav-link" data-method="delete" href="<%= destroy_user_session_path %>" rel="nofollow">
+      <span class="d-md-down-none"><%= Archangel.t(:logout) %></span>
+      <%= fa_icon("power-off") %>
+    </a>
+  </div>
+</header>

data/app/themes/default/views/layouts/backend/_sidebar.html.erb

@@ -0,0 +1,53 @@
+<div class="sidebar">
+  <nav class="sidebar-nav">
+    <ul class="nav">
+      <li class="nav-item">
+        <a class="nav-link" href="<%= backend_root_path %>"><%= fa_icon("home") %> <%= Archangel.t(:dashboard) %></a>
+      </li>
+
+      <li class="nav-item">
+        <a class="nav-link" href="<%= backend_pages_path %>"><%= fa_icon("file") %> <%= Archangel.t(:pages) %></a>
+      </li>
+
+      <li class="nav-item">
+        <a class="nav-link" href="<%= backend_collections_path %>"><%= fa_icon("folder-open") %> <%= Archangel.t(:collections) %></a>
+      </li>
+
+      <li class="nav-item">
+        <a class="nav-link" href="<%= backend_widgets_path %>"><%= fa_icon("star") %> <%= Archangel.t(:widgets) %></a>
+      </li>
+
+      <li class="nav-item">
+        <a class="nav-link" href="<%= backend_assets_path %>"><%= fa_icon("paperclip") %> <%= Archangel.t(:assets) %></a>
+      </li>
+
+      <li class="nav-item">
+        <a class="nav-link" href="<%= backend_templates_path %>"><%= fa_icon("flag") %> <%= Archangel.t(:templates) %></a>
+      </li>
+
+      <li class="nav-item">
+        <a class="nav-link" href="<%= backend_users_path %>"><%= fa_icon("user") %> <%= Archangel.t(:users) %></a>
+      </li>
+
+      <li class="nav-item">
+        <a class="nav-link" href="<%= backend_site_path %>"><%= fa_icon("cog") %> <%= Archangel.t(:site) %></a>
+      </li>
+
+      <% if current_site.collections.present? %>
+        <li class="nav-title">
+          <%= Archangel.t(:collections) %>
+        </li>
+
+        <% for item in current_site.collections %>
+          <% if item.persisted? %>
+            <li class="nav-item">
+              <a class="nav-link" href="<%= backend_collection_entries_path(item) %>"><%= fa_icon("circle") %> <%= item.name %></a>
+            </li>
+          <% end %>
+        <% end %>
+      <% end %>
+    </ul>
+  </nav>
+
+  <button class="sidebar-minimizer brand-minimizer" type="button"></button>
+</div>

data/app/themes/default/views/layouts/backend.html.erb

@@ -0,0 +1,37 @@
+<!doctype html>
+<html dir="<%= text_direction %>" lang="<%= locale %>">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <title><%= content_for?(:title) ? yield(:title) : Archangel.t(:archangel) %></title>
+
+    <link rel="shortcut icon" href="<%= current_site.favicon.url %>">
+
+    <%= csrf_meta_tags %>
+
+    <%= stylesheet_link_tag "#{current_theme}/backend", media: "all" %>
+    <%= yield(:stylesheet) if content_for?(:stylesheet) %>
+
+    <%= render "archangel/shared/auth_token" %>
+  </head>
+
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden">
+    <%= render "layouts/backend/header" %>
+
+    <div class="app-body">
+      <%= render "layouts/backend/sidebar" %>
+
+      <main class="main">
+        <%= render "archangel/shared/flash_messages" %>
+
+        <%= yield %>
+      </main>
+    </div>
+
+    <%= render "layouts/backend/footer" %>
+
+    <%= javascript_include_tag "#{current_theme}/backend" %>
+    <%= yield(:javascript) if content_for?(:javascript) %>
+  </body>
+</html>

data/app/themes/default/views/layouts/frontend.liquid

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head dir="{% text_direction %}" lang="{% locale %}">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+
+    {% meta_tags %}
+
+    {% csrf_meta_tags %}
+
+    <!--[if lt IE 9]>
+      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script>
+    <![endif]-->
+
+    {% theme_stylesheet %}
+  </head>
+  <body>
+    {{ content_for_layout }}
+
+    {% theme_javascript %}
+  </body>
+</html>