diff --git a/gulpfile.js b/gulpfile.js
index 7092e6ff8..1494c2a5b 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -15,5 +15,5 @@ elixir(function(mix) {
mix.sass('styles.scss');
mix.scripts('image-manager.js', 'public/js/image-manager.js');
mix.scripts('book-dashboard.js', 'public/js/book-dashboard.js');
- mix.scripts('jquery-extensions.js', 'public/js/jquery-extensions.js');
+ mix.scripts(['jquery-extensions.js', 'global.js'], 'public/js/common.js');
});
diff --git a/resources/assets/js/global.js b/resources/assets/js/global.js
new file mode 100644
index 000000000..884727e45
--- /dev/null
+++ b/resources/assets/js/global.js
@@ -0,0 +1,10 @@
+$(function () {
+
+ $('.notification').click(function () {
+ $(this).fadeOut(100);
+ });
+
+ // Dropdown toggles
+ $('[data-dropdown]').dropDown();
+
+});
\ No newline at end of file
diff --git a/resources/assets/js/jquery-extensions.js b/resources/assets/js/jquery-extensions.js
index f4302b12b..bda36f5e6 100644
--- a/resources/assets/js/jquery-extensions.js
+++ b/resources/assets/js/jquery-extensions.js
@@ -1,4 +1,5 @@
+// Smooth scrolling
jQuery.fn.smoothScrollTo = function() {
if(this.length === 0) return;
$('body').animate({
@@ -6,12 +7,15 @@ jQuery.fn.smoothScrollTo = function() {
}, 800); // Adjust to change animations speed (ms)
return this;
};
+
+// Making contains text expression not worry about casing
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
+// Show a success message after the element it's called upon.
jQuery.fn.showSuccess = function (message) {
var elem = $(this);
var success = $('<div class="text-pos" style="display:none;"><i class="zmdi zmdi-check-circle"></i>' + message + '</div>');
@@ -25,6 +29,7 @@ jQuery.fn.showSuccess = function (message) {
});
};
+// Show a failure messages from laravel. Searches for the name of the inputs.
jQuery.fn.showFailure = function (messageMap) {
var elem = $(this);
$.each(messageMap, function (key, messages) {
@@ -42,6 +47,20 @@ jQuery.fn.showFailure = function (messageMap) {
};
+// Submit the form that the called upon element sits in.
jQuery.fn.submitForm = function() {
$(this).closest('form').submit();
+};
+
+// Dropdown menu display
+jQuery.fn.dropDown = function() {
+ var container = $(this),
+ menu = container.find('ul');
+ container.find('[data-dropdown-toggle]').on('click', function() {
+ menu.show().addClass('anim menuIn');
+ container.mouseleave(function() {
+ menu.hide();
+ menu.removeClass('anim menuIn');
+ });
+ });
};
\ No newline at end of file
diff --git a/resources/assets/sass/_forms.scss b/resources/assets/sass/_forms.scss
index 9536b93f3..59ce23da9 100644
--- a/resources/assets/sass/_forms.scss
+++ b/resources/assets/sass/_forms.scss
@@ -90,6 +90,12 @@ input[type="text"], input[type="number"], input[type="email"], input[type="searc
}
}
+.page-title input {
+ display: block;
+ width: 100%;
+ font-size: 1.4em;
+}
+
.description-input textarea {
@extend .inline-input-style;
font-size: $fs-m;
diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index 72158f632..76ee7c591 100644
--- a/resources/assets/sass/_grid.scss
+++ b/resources/assets/sass/_grid.scss
@@ -1,4 +1,27 @@
+/** Flexbox styling rules **/
+body.flexbox {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ height: 100%;
+ min-height: 100%;
+ max-height: 100%;
+ overflow: hidden;
+ #content {
+ flex: 1;
+ display: flex;
+ }
+}
+
+.flex-fill {
+ display: flex;
+ align-items: stretch;
+ .flex, &.flex {
+ flex: 1;
+ }
+}
+
/** Rules for all columns */
div[class^="col-"] img {
max-width: 100%;
@@ -13,6 +36,20 @@ div[class^="col-"] img {
&.fluid {
max-width: 100%;
}
+ &.small {
+ max-width: 840px;
+ }
+}
+
+.center-box {
+ margin: 15vh auto 0 auto;
+ padding: $-m $-xxl $-xl*2 $-xxl;
+ max-width: 346px;
+ &.login {
+ background-color: #EEE;
+ box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
+ border: 1px solid #DDD;
+ }
}
.row {
@@ -29,6 +66,7 @@ div[class^="col-"] img {
.block {
display: block;
+ position: relative;
}
.inline {
diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss
new file mode 100644
index 000000000..14a9626ed
--- /dev/null
+++ b/resources/assets/sass/_header.scss
@@ -0,0 +1,185 @@
+/**
+ * Includes the main navigation header and the faded toolbar.
+ */
+
+header {
+ display: block;
+ z-index: 2;
+ top: 0;
+ background-color: $primary-dark;
+ color: #fff;
+ .padded {
+ padding: $-m;
+ }
+ border-bottom: 1px solid #DDD;
+ //margin-bottom: $-l;
+ .links {
+ display: inline-block;
+ vertical-align: top;
+ margin-right: $-xl;
+ }
+ .links a {
+ display: inline-block;
+ padding: $-l;
+ color: #FFF;
+ &:last-child {
+ padding-right: 0;
+ }
+ }
+ .avatar, .user-name {
+ display: inline-block;
+ }
+ .avatar {
+ margin-top: (45px/2);
+ width: 30px;
+ height: 30px;
+ }
+ .user-name {
+ vertical-align: top;
+ padding-top: 25.5px;
+ padding-left: $-m;
+ display: inline-block;
+ cursor: pointer;
+ i {
+ padding-left: $-xs;
+ }
+ }
+}
+
+form.search-box {
+ margin-top: $-l *0.9;
+ display: inline-block;
+ position: relative;
+ text-align: left;
+ input {
+ background-color: transparent;
+ border-radius: 0;
+ border: none;
+ border-bottom: 2px solid #EEE;
+ color: #EEE;
+ padding-right: $-l;
+ outline: 0;
+ }
+ button {
+ vertical-align: top;
+ margin-left: -$-l;
+ color: #FFF;
+ top: 0;
+ right: 0;
+ display: inline-block;
+ position: absolute;
+ &:hover {
+ color: #FFF;
+ }
+ }
+}
+
+.logo {
+ display: inline-block;
+ font-size: 1.8em;
+ color: #fff;
+ font-weight: 400;
+ padding: $-l $-l $-l 0;
+ vertical-align: top;
+ line-height: 1;
+ &:hover {
+ color: #FFF;
+ text-decoration: none;
+ }
+}
+
+.dropdown-container {
+ display: inline-block;
+ vertical-align: top;
+ position: relative;
+}
+
+.dropdown-container ul {
+ display: none;
+ position: absolute;
+ z-index: 999;
+ top: 0;
+ left: 0;
+ margin: $-m 0;
+ background-color: #FFFFFF;
+ list-style: none;
+ box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
+ border-radius: 1px;
+ border: 1px solid #EEE;
+ min-width: 180px;
+ padding: $-xs 0;
+ color: #555;
+ a {
+ display: block;
+ padding: $-xs $-m;
+ color: #555;
+ &:hover {
+ text-decoration: none;
+ background-color: #EEE;
+ }
+ i {
+ margin-right: $-m;
+ padding-right: 0;
+ display: inline;
+ width: 22px;
+ }
+ }
+ li.border-bottom {
+ border-bottom: 1px solid #DDD;
+ }
+}
+
+.breadcrumbs span.sep {
+ color: #aaa;
+ padding: 0 $-xs;
+}
+
+.faded {
+ a, button, span {
+ color: #666;
+ }
+ .text-button {
+ opacity: 0.5;
+ transition: all ease-in-out 120ms;
+ &:hover {
+ opacity: 1;
+ text-decoration: none;
+ }
+ }
+}
+
+.faded-small {
+ color: #000;
+ font-size: 0.9em;
+ background-color: rgba(21, 101, 192, 0.15);
+}
+
+.breadcrumbs .text-button, .action-buttons .text-button {
+ display: inline-block;
+ padding: $-s;
+ &:last-child {
+ padding-right: 0;
+ }
+}
+.action-buttons {
+ text-align: right;
+ &.text-left {
+ text-align: left;
+ .text-button {
+ padding-right: $-m;
+ padding-left: 0;
+ }
+ }
+}
+
+.setting-nav {
+ text-align: center;
+ a {
+ padding: $-m;
+ display: inline-block;
+ color: #666;
+ &.selected {
+ border-bottom: 2px solid $primary;
+ }
+ }
+}
\ No newline at end of file
diff --git a/resources/assets/sass/image-manager.scss b/resources/assets/sass/_image-manager.scss
similarity index 96%
rename from resources/assets/sass/image-manager.scss
rename to resources/assets/sass/_image-manager.scss
index 4e9ce7053..954e10ac0 100644
--- a/resources/assets/sass/image-manager.scss
+++ b/resources/assets/sass/_image-manager.scss
@@ -1,10 +1,24 @@
+.overlay {
+ background-color: rgba(0, 0, 0, 0.2);
+ position: fixed;
+ display: none;
+ z-index: 95536;
+ width: 100%;
+ height: 100%;
+ min-width: 100%;
+ min-height: 100%;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+
.image-manager-body {
background-color: #FFF;
max-height: 90%;
width: 90%;
height: 90%;
margin: 2% 5%;
- //border: 2px solid $primary;
border-radius: 4px;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
overflow: hidden;
@@ -245,7 +259,7 @@
width: 80px;
margin-left: -40px;
background: rgba(255, 255, 255, 0.9);
- -webkit-transform: scale(1);
+ transform: scale(1);
border-radius: 8px;
overflow: hidden; }
.dz-preview .dz-progress .dz-upload {
diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss
new file mode 100644
index 000000000..05dadce86
--- /dev/null
+++ b/resources/assets/sass/_lists.scss
@@ -0,0 +1,198 @@
+.page-list {
+ h3 {
+ margin: $-l 0 $-m 0;
+ }
+ a.chapter {
+ color: $color-chapter;
+ }
+ .inset-list {
+ display: block;
+ overflow: hidden;
+ // padding-left: $-m;
+ margin-bottom: $-l;
+ }
+ h4 {
+ display: block;
+ margin: $-s 0 0 0;
+ border-left: 5px solid $color-page;
+ padding: $-xs 0 $-xs $-m;
+ }
+ hr {
+ margin-top: 0;
+ }
+ .book-child {
+ padding-left: $-l;
+ &.page {
+ border-left: 5px solid $color-page;
+ }
+ &.chapter {
+ border-left: 5px solid $color-chapter;
+ }
+ }
+}
+.chapter-toggle {
+ cursor: pointer;
+ margin: 0 0 $-l 0;
+ transition: all ease-in-out 180ms;
+ i {
+ transition: all ease-in-out 180ms;
+ transform: rotate(0deg);
+ transform-origin: 25% 50%;
+ }
+ &.open {
+ margin-bottom: 0;
+ }
+ &.open i {
+ transform: rotate(90deg);
+ }
+}
+
+.page-nav-list {
+ $nav-indent: $-s;
+ margin-left: 2px;
+ list-style: none;
+ li {
+ //border-left: 1px solid rgba(0, 0, 0, 0.1);
+ padding-left: $-xs;
+ border-left: 2px solid #888;
+ margin-bottom: 4px;
+ }
+ li a {
+ color: #555;
+ }
+ .nav-H2 {
+ margin-left: $nav-indent;
+ font-size: 0.95em;
+ }
+ .nav-H3 {
+ margin-left: $nav-indent*2;
+ font-size: 0.90em
+ }
+ .nav-H4 {
+ margin-left: $nav-indent*3;
+ font-size: 0.85em
+ }
+ .nav-H5 {
+ margin-left: $nav-indent*4;
+ font-size: 0.80em
+ }
+ .nav-H6 {
+ margin-left: $nav-indent*5;
+ font-size: 0.75em
+ }
+}
+
+// Sidebar list
+.book-tree {
+ margin-top: $-xl;
+}
+.book-tree h4 {
+ padding: $-m $-s 0 $-s;
+ i {
+ padding-right: $-s;
+ }
+}
+.book-tree .sidebar-page-list {
+ list-style: none;
+ margin: 0;
+ margin-top: $-xs;
+ border-left: 5px solid $color-book;
+ li a {
+ display: block;
+ border-bottom: none;
+ padding-left: $-s;
+ padding: $-xs 0 $-xs $-s;
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.2);
+ text-decoration: none;
+ }
+ }
+ li, a {
+ display: block;
+ }
+ a.bold {
+ color: #EEE !important;
+ }
+ ul {
+ list-style: none;
+ margin: 0;
+ }
+ .book {
+ color: $color-book !important;
+ &.selected {
+ background-color: rgba($color-book, 0.29);
+ }
+ }
+ .chapter {
+ color: $color-chapter !important;
+ &.selected {
+ background-color: rgba($color-chapter, 0.12);
+ }
+ }
+ .list-item-chapter {
+ border-left: 5px solid $color-chapter;
+ margin: 10px 10px;
+ display: block;
+ }
+ .list-item-page {
+ border-bottom: none;
+ }
+ .page {
+ color: $color-page !important;
+ border-left: 5px solid $color-page;
+ margin: 10px 10px;
+ border-bottom: none;
+ &.selected {
+ background-color: rgba($color-page, 0.1);
+ }
+ }
+}
+
+// Sortable Lists
+.sortable-page-list, .sortable-page-list ul {
+ list-style: none;
+}
+.sortable-page-list {
+ margin-left: 0;
+ box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
+ ul {
+ margin-bottom: 0;
+ margin-top: 0;
+ box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
+ }
+ li {
+ border: 1px solid #DDD;
+ padding: $-xs $-s;
+ margin-top: -1px;
+ min-height: 38px;
+ &.text-chapter {
+ border-left: 2px solid $color-chapter;
+ }
+ &.text-page {
+ border-left: 2px solid $color-page;
+ }
+ }
+ li:first-child {
+ margin-top: $-xs;
+ }
+}
+.sortable-page-list li.placeholder {
+ position: relative;
+}
+.sortable-page-list li.placeholder:before {
+ position: absolute;
+}
+
+
+.activity-list-item {
+ padding: $-s 0;
+ color: #888;
+ border-bottom: 1px solid #EEE;
+ font-size: 0.9em;
+ .left {
+ float: left;
+ }
+ .left + .right {
+ margin-left: 30px + $-s;
+ }
+}
\ No newline at end of file
diff --git a/resources/assets/sass/_pages.scss b/resources/assets/sass/_pages.scss
new file mode 100644
index 000000000..c7d41a5d9
--- /dev/null
+++ b/resources/assets/sass/_pages.scss
@@ -0,0 +1,60 @@
+.page-editor {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ .faded-small {
+ height: auto;
+ }
+ .edit-area {
+ flex: 1;
+ flex-direction: column;
+ }
+}
+
+.page-style.editor {
+ padding: 0 !important;
+}
+
+.page-content {
+ max-width: 840px;
+ img {
+ max-width: 100%;
+ height:auto;
+ }
+}
+
+// Link hooks & popovers
+a.link-hook {
+ position: absolute;
+ display: inline-block;
+ top: $-xs;
+ left: -$-l;
+ padding-bottom: 30px;
+ font-size: 20px;
+ line-height: 20px;
+ color: #BBB;
+ opacity: 0;
+ transform: translate3d(10px, 0, 0);
+ transition: all ease-in-out 240ms;
+ background-color: transparent;
+ &:hover {
+ color: $primary;
+ }
+}
+h1, h2, h3, h4, h5, h6 {
+ &:hover a.link-hook {
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+// Side Navigation
+.side-nav {
+ position: fixed;
+ padding-left: $-m;
+ opacity: 0.8;
+ margin-top: $-xxl;
+ margin-left: 0;
+ max-width: 240px;
+ display: none;
+}
\ No newline at end of file
diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss
index d3b75cd11..b2a88cb51 100644
--- a/resources/assets/sass/_variables.scss
+++ b/resources/assets/sass/_variables.scss
@@ -12,6 +12,9 @@ $m: 800px;
$s: 600px;
$xs: 400px;
$xxs: 360px;
+$screen-md: 992px;
+$screen-lg: 1200px;
+$screen-sm: 768px;
// Spacing (Margins+Padding)
$-xxxl: 64px;
diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss
index 1c9f92d4f..350dea5ce 100644
--- a/resources/assets/sass/styles.scss
+++ b/resources/assets/sass/styles.scss
@@ -11,437 +11,9 @@
@import "animations";
@import "tinymce";
@import "image-manager";
-
-header {
- display: block;
- z-index: 2;
- top: 0;
- background-color: $primary-dark;
- color: #fff;
- .padded {
- padding: $-m;
- }
- border-bottom: 1px solid #DDD;
- //margin-bottom: $-l;
- .links {
- display: inline-block;
- vertical-align: top;
- margin-right: $-xl;
- }
- .links a {
- display: inline-block;
- padding: $-l;
- color: #FFF;
- &:last-child {
- padding-right: 0;
- }
- }
- .avatar, .user-name {
- display: inline-block;
- }
- .avatar {
- margin-top: (45px/2);
- width: 30px;
- height: 30px;
- }
- .user-name {
- vertical-align: top;
- padding-top: 25.5px;
- padding-left: $-m;
- display: inline-block;
- cursor: pointer;
- i {
- padding-left: $-xs;
- }
- }
-}
-
-form.search-box {
- margin-top: $-l *0.9;
- display: inline-block;
- position: relative;
- input {
- background-color: transparent;
- border-radius: 0;
- border: none;
- border-bottom: 2px solid #EEE;
- color: #EEE;
- padding-right: $-l;
- outline: 0;
- }
- a {
- vertical-align: top;
- margin-left: -$-l;
- color: #FFF;
- top: 0;
- display: inline-block;
- position: absolute;
- }
-}
-
-#content {
- display: block;
- position: relative;
-}
-
-body.flexbox {
- display: flex;
- flex-direction: column;
- align-items: stretch;
- height: 100%;
- min-height: 100%;
- max-height: 100%;
- overflow: hidden;
- #content {
- flex: 1;
- display: flex;
- }
-}
-
-.flex-fill {
- display: flex;
- align-items: stretch;
- .flex, &.flex {
- flex: 1;
- }
-}
-
-.page-editor {
- display: flex;
- flex-direction: column;
- align-items: stretch;
- .faded-small {
- height: auto;
- }
- .edit-area {
- flex: 1;
- flex-direction: column;
- }
-}
-
-.logo {
- display: inline-block;
- font-size: 1.8em;
- color: #fff;
- font-weight: 400;
- padding: $-l $-l $-l 0;
- vertical-align: top;
- line-height: 1;
- &:hover {
- color: #FFF;
- text-decoration: none;
- }
-}
-
-.page-title input {
- display: block;
- width: 100%;
- font-size: 1.4em;
-}
-
-.page-style {
- padding: $-s $-xxl $-xxl $-xxl;
- margin-bottom: $-xxl;
- max-width: 100%;
-}
-
-.page-style.editor {
- padding: 0 !important;
-}
-
-.page-content {
- @extend .page-style;
- min-height: 70vh;
- max-width: 840px;
- margin-left: auto;
- margin-right: auto;
- &.right {
- float: right;
- }
- &.left {
- float: left;
- }
- img {
- max-width: 100%;
- height:auto;
- }
-}
-
-.page-list {
- h3 {
- margin: $-l 0 $-m 0;
- }
- a.chapter {
- color: $color-chapter;
- }
- .inset-list {
- display: block;
- overflow: hidden;
- // padding-left: $-m;
- margin-bottom: $-l;
- }
- h4 {
- display: block;
- margin: $-s 0 0 0;
- border-left: 5px solid $color-page;
- padding: $-xs 0 $-xs $-m;
- }
- hr {
- margin-top: 0;
- }
- .book-child {
- padding-left: $-l;
- &.page {
- border-left: 5px solid $color-page;
- }
- &.chapter {
- border-left: 5px solid $color-chapter;
- }
- }
-}
-.chapter-toggle {
- cursor: pointer;
- margin: 0 0 $-l 0;
- transition: all ease-in-out 180ms;
- i {
- transition: all ease-in-out 180ms;
- transform: rotate(0deg);
- transform-origin: 25% 50%;
- }
- &.open {
- margin-bottom: 0;
- }
- &.open i {
- transform: rotate(90deg);
- }
-}
-
-.side-nav {
- position: fixed;
- padding-left: $-m;
- opacity: 0.8;
- margin-top: $-xxl;
- margin-left: 0;
- max-width: 240px;
- display: none;
-}
-
-.page-nav-list {
- $nav-indent: $-s;
- margin-left: 2px;
- list-style: none;
- li {
- //border-left: 1px solid rgba(0, 0, 0, 0.1);
- padding-left: $-xs;
- border-left: 2px solid #888;
- margin-bottom: 4px;
- }
- li a {
- color: #555;
- }
- .nav-H2 {
- margin-left: $nav-indent;
- font-size: 0.95em;
- }
- .nav-H3 {
- margin-left: $nav-indent*2;
- font-size: 0.90em
- }
- .nav-H4 {
- margin-left: $nav-indent*3;
- font-size: 0.85em
- }
- .nav-H5 {
- margin-left: $nav-indent*4;
- font-size: 0.80em
- }
- .nav-H6 {
- margin-left: $nav-indent*5;
- font-size: 0.75em
- }
-}
-
-
-
-.overlay {
- background-color: rgba(0, 0, 0, 0.2);
- position: fixed;
- display: none;
- z-index: 95536;
- width: 100%;
- height: 100%;
- min-width: 100%;
- min-height: 100%;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
-}
-
-// Link hooks & popovers
-a.link-hook {
- position: absolute;
- display: inline-block;
- top: $-xs;
- left: -$-l;
- padding-bottom: 30px;
- font-size: 20px;
- line-height: 20px;
- color: #BBB;
- opacity: 0;
- transform: translate3d(10px, 0, 0);
- transition: all ease-in-out 240ms;
- background-color: transparent;
- &:hover {
- color: $primary;
- }
-}
-h1, h2, h3, h4, h5, h6 {
- &:hover a.link-hook {
- opacity: 1;
- transform: translate3d(0, 0, 0);
- }
-}
-
-.breadcrumbs span.sep {
- color: #aaa;
- padding: 0 $-xs;
-}
-
-.faded {
- a, button, span {
- color: #666;
- }
- .text-button {
- opacity: 0.5;
- transition: all ease-in-out 120ms;
- &:hover {
- opacity: 1;
- text-decoration: none;
- }
- }
-}
-
-.faded-small {
- color: #000;
- font-size: 0.9em;
- background-color: rgba(21, 101, 192, 0.15);
-}
-
-.breadcrumbs .text-button, .action-buttons .text-button {
- display: inline-block;
- padding: $-s;
- &:last-child {
- padding-right: 0;
- }
-}
-.action-buttons {
- text-align: right;
- &.text-left {
- text-align: left;
- .text-button {
- padding-right: $-m;
- padding-left: 0;
- }
- }
-}
-
-.book-tree {
- margin-top: $-xl;
-}
-.book-tree h4 {
- padding: $-m $-s 0 $-s;
- i {
- padding-right: $-s;
- }
-}
-
-
-// Sidebar list
-.book-tree .sidebar-page-list {
- list-style: none;
- margin: 0;
- margin-top: $-xs;
- border-left: 5px solid $color-book;
- li a {
- display: block;
- border-bottom: none;
- padding-left: $-s;
- padding: $-xs 0 $-xs $-s;
- &:hover {
- background-color: rgba(255, 255, 255, 0.2);
- text-decoration: none;
- }
- }
- li, a {
- display: block;
- }
- a.bold {
- color: #EEE !important;
- }
- ul {
- list-style: none;
- margin: 0;
- }
- .book {
- color: $color-book !important;
- &.selected {
- background-color: rgba($color-book, 0.29);
- }
- }
- .chapter {
- color: $color-chapter !important;
- &.selected {
- background-color: rgba($color-chapter, 0.12);
- }
- }
- .list-item-chapter {
- border-left: 5px solid $color-chapter;
- margin: 10px 10px;
- display: block;
- }
- .list-item-page {
- border-bottom: none;
- }
- .page {
- color: $color-page !important;
- border-left: 5px solid $color-page;
- margin: 10px 10px;
- border-bottom: none;
- &.selected {
- background-color: rgba($color-page, 0.1);
- }
- }
-}
-
-// Sortable Lists
-.sortable-page-list, .sortable-page-list ul {
- list-style: none;
-}
-.sortable-page-list {
- margin-left: 0;
- box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
- ul {
- margin-bottom: 0;
- margin-top: 0;
- box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
- }
- li {
- border: 1px solid #DDD;
- padding: $-xs $-s;
- margin-top: -1px;
- min-height: 38px;
- &.text-chapter {
- border-left: 2px solid $color-chapter;
- }
- &.text-page {
- border-left: 2px solid $color-page;
- }
- }
- li:first-child {
- margin-top: $-xs;
- }
-}
+@import "header";
+@import "lists";
+@import "pages";
// Jquery Sortable Styles
.dragged {
@@ -449,46 +21,16 @@ h1, h2, h3, h4, h5, h6 {
opacity: 0.5;
z-index: 2000;
}
-
body.dragging, body.dragging * {
cursor: move !important;
}
-.sortable-page-list li.placeholder {
- position: relative;
-}
-.sortable-page-list li.placeholder:before {
- position: absolute;
-}
-
-.center-box {
- margin: 15vh auto 0 auto;
- padding: $-m $-xxl $-xl*2 $-xxl;
- max-width: 346px;
- &.login {
- background-color: #EEE;
- box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
- border: 1px solid #DDD;
- }
-}
-
-.activity-list-item {
- padding: $-s 0;
- color: #888;
- border-bottom: 1px solid #EEE;
- font-size: 0.9em;
- .left {
- float: left;
- }
- .left + .right {
- margin-left: 30px + $-s;
- }
-}
-
+// User Avatar Images
.avatar {
border-radius: 100%;
}
+// System wide notifications
.notification {
position: fixed;
top: 0;
@@ -498,7 +40,7 @@ body.dragging, body.dragging * {
background-color: #EEE;
border-radius: 3px;
box-shadow: $bs-med;
- z-index: 99999999;
+ z-index: 999999;
display: table;
cursor: pointer;
max-width: 480px;
@@ -522,59 +64,7 @@ body.dragging, body.dragging * {
}
}
-.setting-nav {
- text-align: center;
- a {
- padding: $-m;
- display: inline-block;
- //color: #666;
- &.selected {
- //color: $primary;
- border-bottom: 2px solid $primary;
- }
- }
-}
-
-.dropdown-container {
- display: inline-block;
- vertical-align: top;
- position: relative;
-}
-ul.dropdown {
- display: none;
- position: absolute;
- z-index: 999;
- top: 0;
- left: 0;
- margin: $-m 0;
- background-color: #FFFFFF;
- list-style: none;
- box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
- border-radius: 1px;
- border: 1px solid #EEE;
- min-width: 180px;
- padding: $-xs 0;
- color: #555;
- a {
- display: block;
- padding: $-xs $-m;
- color: #555;
- &:hover {
- text-decoration: none;
- background-color: #EEE;
- }
- i {
- margin-right: $-m;
- padding-right: 0;
- display: inline;
- width: 22px;
- }
- }
- li.border-bottom {
- border-bottom: 1px solid #DDD;
- }
-}
-
+// Search results
.search-results > h3 a {
font-size: 0.66em;
color: $primary;
diff --git a/resources/views/base.blade.php b/resources/views/base.blade.php
index 3c692317f..76447b5f5 100644
--- a/resources/views/base.blade.php
+++ b/resources/views/base.blade.php
@@ -14,10 +14,9 @@
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
- <script src="/js/jquery-extensions.js"></script>
- <script src="/bower/bootstrap/dist/js/bootstrap.js"></script>
<script src="/bower/jquery-sortable/source/js/jquery-sortable.js"></script>
<script src="/bower/dropzone/dist/min/dropzone.min.js"></script>
+ <script src="/js/common.js"></script>
<script src="/bower/vue/dist/vue.min.js"></script>
<script src="/bower/vue-resource/dist/vue-resource.min.js"></script>
@@ -40,16 +39,16 @@
<header id="header">
<div class="container">
<div class="row">
- <div class="col-md-3">
+ <div class="col-md-4">
<a href="/" class="logo">{{ Setting::get('app-name', 'BookStack') }}</a>
</div>
- <div class="col-md-3 text-right">
+ <div class="col-md-4 text-center">
<form action="/search/all" method="GET" class="search-box">
<input type="text" name="term" tabindex="2" value="{{ isset($searchTerm) ? $searchTerm : '' }}">
- <a onclick="$(this).closest('form').submit();"><i class="zmdi zmdi-search"></i></a>
+ <button class="text-button"><i class="zmdi zmdi-search"></i></button>
</form>
</div>
- <div class="col-md-6">
+ <div class="col-md-4">
<div class="float right">
<div class="links text-center">
<a href="/books"><i class="zmdi zmdi-book"></i>Books</a>
@@ -63,7 +62,7 @@
<span class="user-name" data-dropdown-toggle>
{{ $currentUser->name }} <i class="zmdi zmdi-caret-down"></i>
</span>
- <ul class="dropdown">
+ <ul>
<li>
<a href="/users/{{$currentUser->id}}" class="text-primary"><i class="zmdi zmdi-edit zmdi-hc-lg"></i>Edit Profile</a>
</li>
@@ -80,32 +79,10 @@
</div>
</header>
- <section id="content">
+ <section id="content" class="block">
@yield('content')
</section>
@yield('bottom')
- <script>
- $(function() {
-
- $('.notification').click(function() {
- $(this).fadeOut(100);
- });
-
- // Dropdown toggles
- $('[data-dropdown-toggle]').click(function() {
- var toggleButton = $(this);
- var container = toggleButton.closest('[data-dropdown]');
- var dropdown = container.find('.dropdown');
- dropdown.show().addClass('anim menuIn');
-
- container.mouseleave(function() {
- dropdown.hide();
- dropdown.removeClass('anim menuIn');
- });
- });
-
- });
- </script>
</body>
</html>
diff --git a/resources/views/books/create.blade.php b/resources/views/books/create.blade.php
index fbf5eff1b..6b58e8b52 100644
--- a/resources/views/books/create.blade.php
+++ b/resources/views/books/create.blade.php
@@ -2,7 +2,7 @@
@section('content')
-<div class="page-content">
+<div class="container small">
<h1>Create New Book</h1>
<form action="/books" method="POST">
@include('books/form')
diff --git a/resources/views/books/delete.blade.php b/resources/views/books/delete.blade.php
index 6ec8cdb3b..ebd870234 100644
--- a/resources/views/books/delete.blade.php
+++ b/resources/views/books/delete.blade.php
@@ -2,7 +2,7 @@
@section('content')
- <div class="page-content">
+ <div class="container small">
<h1>Delete Book</h1>
<p>This will delete the book with the name '{{$book->name}}', All pages and chapters will be removed.</p>
<p class="text-neg">Are you sure you want to delete this book?</p>
diff --git a/resources/views/books/edit.blade.php b/resources/views/books/edit.blade.php
index f378dd67d..0e62d1fcd 100644
--- a/resources/views/books/edit.blade.php
+++ b/resources/views/books/edit.blade.php
@@ -2,7 +2,7 @@
@section('content')
- <div class="page-content">
+ <div class="container small">
<h1>Edit Book</h1>
<form action="/books/{{$book->slug}}" method="POST">
<input type="hidden" name="_method" value="PUT">
diff --git a/resources/views/books/index.blade.php b/resources/views/books/index.blade.php
index a6def8845..c536a2059 100644
--- a/resources/views/books/index.blade.php
+++ b/resources/views/books/index.blade.php
@@ -24,10 +24,7 @@
<h1>Books</h1>
@if(count($books) > 0)
@foreach($books as $book)
- <div class="book">
- <h3><a href="{{$book->getUrl()}}">{{$book->name}}</a></h3>
- <p class="text-muted">{{$book->description}}</p>
- </div>
+ @include('books/list-item', ['book' => $book])
<hr>
@endforeach
@else
diff --git a/resources/views/books/list-item.blade.php b/resources/views/books/list-item.blade.php
new file mode 100644
index 000000000..64f014331
--- /dev/null
+++ b/resources/views/books/list-item.blade.php
@@ -0,0 +1,4 @@
+<div class="book">
+ <h3 class="text-book"><a class="text-book" href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i>{{$book->name}}</a></h3>
+ <p class="text-muted">{{$book->description}}</p>
+</div>
\ No newline at end of file
diff --git a/resources/views/chapters/create.blade.php b/resources/views/chapters/create.blade.php
index 4e506fef9..0b83c2691 100644
--- a/resources/views/chapters/create.blade.php
+++ b/resources/views/chapters/create.blade.php
@@ -2,7 +2,7 @@
@section('content')
- <div class="page-content">
+ <div class="container small">
<h1>Create New Chapter</h1>
<form action="{{$book->getUrl()}}/chapter/create" method="POST">
@include('chapters/form')
diff --git a/resources/views/chapters/delete.blade.php b/resources/views/chapters/delete.blade.php
index 512535776..3fc3ae1dc 100644
--- a/resources/views/chapters/delete.blade.php
+++ b/resources/views/chapters/delete.blade.php
@@ -2,7 +2,7 @@
@section('content')
- <div class="page-content">
+ <div class="container small">
<h1>Delete Chapter</h1>
<p>This will delete the chapter with the name '{{$chapter->name}}', All pages will be removed
and added directly to the book.</p>
diff --git a/resources/views/chapters/edit.blade.php b/resources/views/chapters/edit.blade.php
index e739aafb5..1c2c6d98f 100644
--- a/resources/views/chapters/edit.blade.php
+++ b/resources/views/chapters/edit.blade.php
@@ -2,7 +2,7 @@
@section('content')
- <div class="page-content">
+ <div class="container small">
<h1>Edit Chapter</h1>
<form action="{{$chapter->getUrl()}}" method="POST">
<input type="hidden" name="_method" value="PUT">
diff --git a/resources/views/chapters/show.blade.php b/resources/views/chapters/show.blade.php
index fb734f163..82083de9d 100644
--- a/resources/views/chapters/show.blade.php
+++ b/resources/views/chapters/show.blade.php
@@ -30,50 +30,48 @@
<div class="container">
<div class="row">
- <div class="col-md-3">
- @include('pages/sidebar-tree-list', ['book' => $book])
- </div>
- <div class="col-md-9">
- <div class="page-content">
- <h1>{{ $chapter->name }}</h1>
- <p class="text-muted">{{ $chapter->description }}</p>
+ <div class="col-md-8">
+ <h1>{{ $chapter->name }}</h1>
+ <p class="text-muted">{{ $chapter->description }}</p>
- @if(count($chapter->pages) > 0)
- <div class="page-list">
+ @if(count($chapter->pages) > 0)
+ <div class="page-list">
+ <hr>
+ @foreach($chapter->pages as $page)
+ <div >
+ <h3>
+ <a href="{{ $page->getUrl() }}">
+ <i class="zmdi zmdi-file-text"></i>{{ $page->name }}
+ </a>
+ </h3>
+ <p class="text-muted">
+ {{$page->getExcerpt(180)}}
+ </p>
+ </div>
<hr>
- @foreach($chapter->pages as $page)
- <div >
- <h3>
- <a href="{{ $page->getUrl() }}">
- <i class="zmdi zmdi-file-text"></i>{{ $page->name }}
- </a>
- </h3>
- <p class="text-muted">
- {{$page->getExcerpt(180)}}
- </p>
- </div>
- <hr>
- @endforeach
- </div>
- @else
- <hr>
- <p class="text-muted">No pages are currently in this chapter.</p>
- <p>
- <a href="{{$chapter->getUrl() . '/create-page'}}" class="text-page"><i class="zmdi zmdi-file-text"></i>Create a new page</a>
- <em class="text-muted">-or-</em>
- <a href="{{$book->getUrl() . '/sort'}}" class="text-book"><i class="zmdi zmdi-book"></i>Sort the current book</a>
- </p>
- <hr>
- @endif
-
- <p class="text-muted small">
- Created {{$chapter->created_at->diffForHumans()}} @if($chapter->createdBy) by {{$chapter->createdBy->name}} @endif
- <br>
- Last Updated {{$chapter->updated_at->diffForHumans()}} @if($chapter->createdBy) by {{$chapter->updatedBy->name}} @endif
+ @endforeach
+ </div>
+ @else
+ <hr>
+ <p class="text-muted">No pages are currently in this chapter.</p>
+ <p>
+ <a href="{{$chapter->getUrl() . '/create-page'}}" class="text-page"><i class="zmdi zmdi-file-text"></i>Create a new page</a>
+ <em class="text-muted">-or-</em>
+ <a href="{{$book->getUrl() . '/sort'}}" class="text-book"><i class="zmdi zmdi-book"></i>Sort the current book</a>
</p>
- </div>
+ <hr>
+ @endif
+
+ <p class="text-muted small">
+ Created {{$chapter->created_at->diffForHumans()}} @if($chapter->createdBy) by {{$chapter->createdBy->name}} @endif
+ <br>
+ Last Updated {{$chapter->updated_at->diffForHumans()}} @if($chapter->createdBy) by {{$chapter->updatedBy->name}} @endif
+ </p>
</div>
</div>
+ <div class="col-md-3 col-md-offset-1">
+ @include('pages/sidebar-tree-list', ['book' => $book])
+ </div>
</div>
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index de6414044..b91820fe3 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -9,10 +9,7 @@
<h2>Books</h2>
@if(count($books) > 0)
@foreach($books as $book)
- <div class="book">
- <h3><a href="{{$book->getUrl()}}">{{$book->name}}</a></h3>
- <p class="text-muted">{{$book->description}}</p>
- </div>
+ @include('books/list-item', ['book' => $book])
<hr>
@endforeach
@else
diff --git a/resources/views/pages/delete.blade.php b/resources/views/pages/delete.blade.php
index 45d87f151..4b44424c7 100644
--- a/resources/views/pages/delete.blade.php
+++ b/resources/views/pages/delete.blade.php
@@ -2,7 +2,7 @@
@section('content')
- <div class="page-content">
+ <div class="container small">
<h1>Delete Page</h1>
<p class="text-neg">Are you sure you want to delete this page?</p>
diff --git a/resources/views/pages/revisions.blade.php b/resources/views/pages/revisions.blade.php
index ab589ebaa..ae9e3562f 100644
--- a/resources/views/pages/revisions.blade.php
+++ b/resources/views/pages/revisions.blade.php
@@ -17,7 +17,7 @@
</div>
- <div class="page-content">
+ <div class="container small">
<h1>Page Revisions <span class="subheader">For "{{ $page->name }}"</span></h1>
@if(count($page->revisions) > 0)
diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php
index d7a9f6915..7656085e9 100644
--- a/resources/views/pages/show.blade.php
+++ b/resources/views/pages/show.blade.php
@@ -35,14 +35,6 @@
<div class="container">
<div class="row">
- <div class="col-md-3">
- @include('pages/sidebar-tree-list', ['book' => $book])
- <div class="side-nav faded">
- <h4>Page Navigation</h4>
- <ul class="page-nav-list">
- </ul>
- </div>
- </div>
<div class="col-md-9">
<div class="page-content anim fadeIn">
@include('pages/page-display')
@@ -54,6 +46,14 @@
</p>
</div>
</div>
+ <div class="col-md-3">
+ @include('pages/sidebar-tree-list', ['book' => $book])
+ <div class="side-nav faded">
+ <h4>Page Navigation</h4>
+ <ul class="page-nav-list">
+ </ul>
+ </div>
+ </div>
</div>
</div>
diff --git a/resources/views/pages/sort.blade.php b/resources/views/pages/sort.blade.php
index 0a3e1cccc..22d239ae4 100644
--- a/resources/views/pages/sort.blade.php
+++ b/resources/views/pages/sort.blade.php
@@ -2,7 +2,7 @@
@section('content')
- <div class="page-content">
+ <div class="container small">
<h1>Sorting Pages & Chapters<span class="subheader">For {{ $book->name }}</span></h1>
<ul class="sortable-page-list" id="sort-list">
diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php
index 36340a0b8..8c5401747 100644
--- a/resources/views/settings/index.blade.php
+++ b/resources/views/settings/index.blade.php
@@ -4,25 +4,26 @@
@include('settings/navbar', ['selected' => 'settings'])
- <div class="page-content">
- <h1>Settings</h1>
+<div class="container small">
- <form action="/settings" method="POST">
- {!! csrf_field() !!}
- <div class="form-group">
- <label for="setting-app-name">Application Name</label>
- <input type="text" value="{{ Setting::get('app-name') }}" name="setting-app-name" id="setting-app-name">
- </div>
- <div class="form-group">
- <label for="setting-app-public">Allow public viewing?</label>
- <label><input type="radio" name="setting-app-public" @if(Setting::get('app-public') == 'true') checked @endif value="true"> Yes</label>
- <label><input type="radio" name="setting-app-public" @if(Setting::get('app-public') == 'false') checked @endif value="false"> No</label>
- </div>
- <div class="form-group">
- <button type="submit" class="button pos">Update Settings</button>
- </div>
- </form>
+ <h1>Settings</h1>
- </div>
+ <form action="/settings" method="POST">
+ {!! csrf_field() !!}
+ <div class="form-group">
+ <label for="setting-app-name">Application Name</label>
+ <input type="text" value="{{ Setting::get('app-name') }}" name="setting-app-name" id="setting-app-name">
+ </div>
+ <div class="form-group">
+ <label for="setting-app-public">Allow public viewing?</label>
+ <label><input type="radio" name="setting-app-public" @if(Setting::get('app-public') == 'true') checked @endif value="true"> Yes</label>
+ <label><input type="radio" name="setting-app-public" @if(Setting::get('app-public') == 'false') checked @endif value="false"> No</label>
+ </div>
+ <div class="form-group">
+ <button type="submit" class="button pos">Update Settings</button>
+ </div>
+ </form>
+
+</div>
@stop
\ No newline at end of file
diff --git a/resources/views/users/create.blade.php b/resources/views/users/create.blade.php
index ced7736ca..bec83d1ea 100644
--- a/resources/views/users/create.blade.php
+++ b/resources/views/users/create.blade.php
@@ -3,7 +3,7 @@
@section('content')
- <div class="page-content">
+ <div class="container small">
<h1>Create User</h1>
<form action="/users/create" method="post">
diff --git a/resources/views/users/delete.blade.php b/resources/views/users/delete.blade.php
index 2c07daef6..6717b1471 100644
--- a/resources/views/users/delete.blade.php
+++ b/resources/views/users/delete.blade.php
@@ -2,7 +2,7 @@
@section('content')
- <div class="page-content">
+ <div class="container small">
<h1>Delete User</h1>
<p>This will fully delete this user with the name '<span class="text-neg">{{$user->name}}</span>' from the system.</p>
<p class="text-neg">Are you sure you want to delete this user?</p>
diff --git a/resources/views/users/edit.blade.php b/resources/views/users/edit.blade.php
index 2e3d8618f..36dee5086 100644
--- a/resources/views/users/edit.blade.php
+++ b/resources/views/users/edit.blade.php
@@ -18,7 +18,7 @@
- <div class="page-content">
+ <div class="container small">
<div class="row">
<div class="col-md-6">
diff --git a/resources/views/users/index.blade.php b/resources/views/users/index.blade.php
index 57f9b8873..49e124e56 100644
--- a/resources/views/users/index.blade.php
+++ b/resources/views/users/index.blade.php
@@ -5,7 +5,8 @@
@include('settings/navbar', ['selected' => 'users'])
- <div class="page-content">
+
+ <div class="container small">
<h1>Users</h1>
@if($currentUser->can('user-create'))
<p>
@@ -25,9 +26,9 @@
<td>
@if($currentUser->can('user-update') || $currentUser->id == $user->id)
<a href="/users/{{$user->id}}">
- @endif
+ @endif
{{$user->name}}
- @if($currentUser->can('user-update') || $currentUser->id == $user->id)
+ @if($currentUser->can('user-update') || $currentUser->id == $user->id)
</a>
@endif
</td>