From e1ef3e030728e4b658ef03a407f46ab988a7d572 Mon Sep 17 00:00:00 2001
From: Jorran de Wit <jorrandewit@outlook.com>
Date: Tue, 31 Jan 2017 15:06:45 +0100
Subject: [PATCH] Make messages template user friendly
Altered the message alert class and positioned it absolute to
the body to have floating messages.
---
.bootstraprc | 2 +
.../static/scipost/assets/css/_buttons.scss | 8 ++
scipost/static/scipost/assets/css/_form.scss | 7 ++
.../static/scipost/assets/css/_messages.scss | 17 ++++
.../static/scipost/assets/css/_navbar.scss | 44 +++++++++
scipost/static/scipost/assets/css/_type.scss | 18 ++++
scipost/static/scipost/assets/css/style.scss | 90 ++-----------------
scipost/templates/scipost/messages.html | 18 ++--
webpack.config.js | 4 +-
9 files changed, 116 insertions(+), 92 deletions(-)
create mode 100644 scipost/static/scipost/assets/css/_buttons.scss
create mode 100644 scipost/static/scipost/assets/css/_form.scss
create mode 100644 scipost/static/scipost/assets/css/_messages.scss
create mode 100644 scipost/static/scipost/assets/css/_navbar.scss
create mode 100644 scipost/static/scipost/assets/css/_type.scss
diff --git a/.bootstraprc b/.bootstraprc
index 0507aae30..f02ac6f2d 100644
--- a/.bootstraprc
+++ b/.bootstraprc
@@ -9,6 +9,7 @@
],
"extractStyles": true,
"styles": {
+ "alert": true,
"mixins": true,
"normalize": true,
"reboot": true,
@@ -26,6 +27,7 @@
"transitions": true,
},
"scripts": {
+ "alert": true,
"collapse": true,
"util": true,
}
diff --git a/scipost/static/scipost/assets/css/_buttons.scss b/scipost/static/scipost/assets/css/_buttons.scss
new file mode 100644
index 000000000..90781a20d
--- /dev/null
+++ b/scipost/static/scipost/assets/css/_buttons.scss
@@ -0,0 +1,8 @@
+/**
+ * Buttons
+ *
+ */
+.btn {
+ cursor: pointer;
+ font-family: inherit;
+}
diff --git a/scipost/static/scipost/assets/css/_form.scss b/scipost/static/scipost/assets/css/_form.scss
new file mode 100644
index 000000000..40042b021
--- /dev/null
+++ b/scipost/static/scipost/assets/css/_form.scss
@@ -0,0 +1,7 @@
+/**
+ * Form
+ *
+ */
+.form-control {
+ font-family: inherit;
+}
diff --git a/scipost/static/scipost/assets/css/_messages.scss b/scipost/static/scipost/assets/css/_messages.scss
new file mode 100644
index 000000000..581731faf
--- /dev/null
+++ b/scipost/static/scipost/assets/css/_messages.scss
@@ -0,0 +1,17 @@
+.alert-fixed-container {
+ padding-left: 10px;
+ padding-right: 10px;
+ position: fixed;
+ bottom: 0px;
+ left: 0px;
+ width: 100%;
+ z-index: 9999;
+}
+
+.alert .close {
+ box-shadow: none;
+
+ @include hover-focus() {
+ box-shadow: none;
+ }
+}
diff --git a/scipost/static/scipost/assets/css/_navbar.scss b/scipost/static/scipost/assets/css/_navbar.scss
new file mode 100644
index 000000000..7691f7a5b
--- /dev/null
+++ b/scipost/static/scipost/assets/css/_navbar.scss
@@ -0,0 +1,44 @@
+/**
+ * Navbar
+ *
+ */
+.navbar {
+ margin-bottom: 0.75rem;
+
+ .nav-link {
+ padding-right: 1rem;
+ padding-left: 1rem;
+ border: 1px solid transparent;
+ border-radius: 0.1rem;
+ -webkit-transition: all 0.2s ease-in-out;
+ -o-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
+
+ @include hover-focus {
+ background-color: $white;
+ }
+ }
+
+ .active > .nav-link {
+ border-color: $scipost-darkblue;
+ }
+
+ .highlighted > .nav-link {
+ background-color: rgba(255, 255, 255, 0.6);
+ }
+
+ .nav-item {
+ margin-right: 0.5rem;
+ }
+}
+.navbar-brand {
+ height: 38px;
+ margin: 0;
+}
+.navbar-toggler-icon {
+ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 43, 73, 1.0)");
+}
+.panel {
+ padding: 0.75rem;
+ background-color: #f4f4f4;
+}
diff --git a/scipost/static/scipost/assets/css/_type.scss b/scipost/static/scipost/assets/css/_type.scss
new file mode 100644
index 000000000..86cc6ed02
--- /dev/null
+++ b/scipost/static/scipost/assets/css/_type.scss
@@ -0,0 +1,18 @@
+/**
+ * Type
+ *
+ */
+a {
+ color: $scipost-lightblue;
+ text-decoration: none;
+}
+a:hover {
+ color: $scipost-darkblue;
+ text-decoration: underline;
+}
+h1, h2, h3, h4, h5, h6 {
+ margin: 0;
+ padding: 5px 0;
+ text-shadow: none;
+ font-weight: 500;
+}
diff --git a/scipost/static/scipost/assets/css/style.scss b/scipost/static/scipost/assets/css/style.scss
index 936fe0a47..a10433066 100644
--- a/scipost/static/scipost/assets/css/style.scss
+++ b/scipost/static/scipost/assets/css/style.scss
@@ -1,91 +1,17 @@
@import "node_modules/bootstrap/scss/_variables";
@import "node_modules/bootstrap/scss/_mixins";
@import "./../config/preconfig.scss";
+
/**
* Make variables defined in preconfig.scss accessable in this file,
* plus default variables and mixins of Bootstrap@4
- * - SciPost custom sass
- *
- */
-
-
-/**
- * Buttons
- *
- */
-.btn {
- cursor: pointer;
- font-family: inherit;
-}
-
-/**
- * Type
- *
- */
-a {
- color: $scipost-lightblue;
- text-decoration: none;
-}
-a:hover {
- color: $scipost-darkblue;
- text-decoration: underline;
-}
-h1, h2, h3, h4, h5, h6 {
- margin: 0;
- padding: 5px 0;
- text-shadow: none;
- font-weight: 500;
-}
-
-/**
- * Form
*
- */
-.form-control {
- font-family: inherit;
-}
-
-/**
- * Navbar
+ * Do not write styles in this file. Get or create a file in this folder
+ * and make sure its imported underneath!
*
*/
-.navbar {
- margin-bottom: 0.75rem;
-
- .nav-link {
- padding-right: 1rem;
- padding-left: 1rem;
- border: 1px solid transparent;
- border-radius: 0.1rem;
- -webkit-transition: all 0.2s ease-in-out;
- -o-transition: all 0.2s ease-in-out;
- transition: all 0.2s ease-in-out;
-
- @include hover-focus {
- background-color: $white;
- }
- }
-
- .active > .nav-link {
- border-color: $scipost-darkblue;
- }
-
- .highlighted > .nav-link {
- background-color: rgba(255, 255, 255, 0.6);
- }
-
- .nav-item {
- margin-right: 0.5rem;
- }
-}
-.navbar-brand {
- height: 38px;
- margin: 0;
-}
-.navbar-toggler-icon {
- background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 43, 73, 1.0)");
-}
-.panel {
- padding: 0.75rem;
- background-color: #f4f4f4;
-}
+@import "buttons";
+@import "form";
+@import "messages";
+@import "navbar";
+@import "type";
diff --git a/scipost/templates/scipost/messages.html b/scipost/templates/scipost/messages.html
index ac8c6dff8..53699fac2 100644
--- a/scipost/templates/scipost/messages.html
+++ b/scipost/templates/scipost/messages.html
@@ -1,8 +1,10 @@
-{% for message in messages %}
- <div class="alert {{ message.tags }} alert-dismissible" role="alert">
- <button type="button" class="close" data-dismiss="alert" aria-label="Close">
- <span aria-hidden="true">×</span>
- </button>
- {{ message }}
- </div>
-{% endfor %}
+<div class="alert-fixed-container">
+ {% for message in messages %}
+ <div class="alert alert-{{ message.tags }} alert-dismissible" role="alert">
+ <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+ {{ message }}
+ </div>
+ {% endfor %}
+</div>
diff --git a/webpack.config.js b/webpack.config.js
index b41c163e9..15769bf74 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -8,7 +8,7 @@ var path_bundles = __dirname + '/static_bundles/bundles';
module.exports = {
context: __dirname,
entry: {
- main: glob.sync("./scipost/static/scipost/assets/**/*.@(js|css|scss)"),
+ main: ["./scipost/static/scipost/assets/css/style.scss"],
bootstrap: 'bootstrap-loader'
},
output: {
@@ -48,7 +48,7 @@ module.exports = {
"window.jQuery": "jquery",
Tether: "tether",
"window.Tether": "tether",
- // Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
+ Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
// Button: "exports-loader?Button!bootstrap/js/dist/button",
// Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
--
GitLab