diff --git a/.bootstraprc b/.bootstraprc index 0507aae30727298d2d6f86ed22a6d8e2df4ec385..f02ac6f2dbbc5fcc9fdb13a3ae9119cf053e20a3 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 0000000000000000000000000000000000000000..90781a20da4ef3d3fb0a51dc4953bef2e104771a --- /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 0000000000000000000000000000000000000000..40042b021b6e4dee4774cd93a9319305b6cea251 --- /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 0000000000000000000000000000000000000000..581731faf9432e8b67daa00b02ae7be7169f7fe9 --- /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 0000000000000000000000000000000000000000..7691f7a5b7d410edbc522377611f23ac0f9777c9 --- /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 0000000000000000000000000000000000000000..86cc6ed02019476a59aae42e379c9251082c7779 --- /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 936fe0a4706e8cd24ad509a6ce70a47cc77d4e8e..a1043306673bb2e3ffb8d58b96bb4ec031792e20 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 ac8c6dff8c12a6bea16bcdaca31738d52cd55336..53699fac2a6b73508d8df505760b9924b1a25b87 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 b41c163e9113774a6f928bbeaf4293722637c5ee..15769bf748b907d6880437d62854e8397b848947 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",