make all themes basically working with bs5

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

migrate buttons and badges

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

upgrade bootstrap, fix devtool

remove postcss-preset-env

remove npm-run-all

add theme info to design

add theme configs for 2-15

make all themes compile

fix node env in script

refactor theme config

make all themes basically working

fix sass 3rd party warnings

replace slash div by math.div
main
Michael Weimann 4 years ago
parent 9acaa03a71
commit 5f7fcb9018
No known key found for this signature in database
GPG Key ID: 34F0524D4DA694A1

@ -41,7 +41,7 @@ The Engelsystem may be installed manually or by using the provided [docker setup
* Recommended: Directory Listing should be disabled. * Recommended: Directory Listing should be disabled.
* There must be a MySQL database set up with a user who has full rights to that database. * There must be a MySQL database set up with a user who has full rights to that database.
* If necessary, create a ```config/config.php``` to override values from ```config/config.default.php```. * If necessary, create a ```config/config.php``` to override values from ```config/config.default.php```.
* To remove values from the `footer_items`, `available_themes`, `locales`, `tshirt_sizes` or `headers` lists the config file has to be renamed. * To remove values from the `footer_items`, `themes`, `locales`, `tshirt_sizes` or `headers` lists the config file has to be renamed.
* To import the database, the ```bin/migrate``` script has to be run. If you can't execute scripts, you can use the `initial-install.sql` file from the release zip. * To import the database, the ```bin/migrate``` script has to be run. If you can't execute scripts, you can use the `initial-install.sql` file from the release zip.
* In the browser, login with credentials ```admin``` : ```asdfasdf``` and change the password. * In the browser, login with credentials ```admin``` : ```asdfasdf``` and change the password.

@ -106,24 +106,71 @@ return [
// Default theme, 1=style1.css // Default theme, 1=style1.css
'theme' => env('THEME', 1), 'theme' => env('THEME', 1),
// Available themes 'themes' => [
'available_themes' => [ 15 => [
'15' => 'Engelsystem DiVOC R2R', 'name' => 'Engelsystem DiVOC R2R',
'14' => 'Engelsystem rC3 teal (2020)', 'navbar_classes' => 'navbar-dark bg-black border-dark',
'13' => 'Engelsystem rC3 violet (2020)', ],
'12' => 'Engelsystem 36c3 (2019)', 14 => [
'10' => 'Engelsystem cccamp19 green (2019)', 'name' => 'Engelsystem rC3 teal (2020)',
'9' => 'Engelsystem cccamp19 yellow (2019)', 'navbar_classes' => 'navbar-dark bg-black border-dark',
'8' => 'Engelsystem cccamp19 blue (2019)', ],
'7' => 'Engelsystem 35c3 dark (2018)', 13 => [
'6' => 'Engelsystem 34c3 dark (2017)', 'name' => 'Engelsystem rC3 violet (2020)',
'5' => 'Engelsystem 34c3 light (2017)', 'navbar_classes' => 'navbar-dark bg-black border-dark',
'4' => 'Engelsystem 33c3 (2016)', ],
'3' => 'Engelsystem 32c3 (2015)', 12 => [
'2' => 'Engelsystem cccamp15', 'name' => 'Engelsystem 36c3 (2019)',
'11' => 'Engelsystem high contrast', 'navbar_classes' => 'navbar-dark bg-black border-dark',
'0' => 'Engelsystem light', ],
'1' => 'Engelsystem dark', 10 => [
'name' => 'Engelsystem cccamp19 green (2019)',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
9 => [
'name' => 'Engelsystem cccamp19 yellow (2019)',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
8 => [
'name' => 'Engelsystem cccamp19 blue (2019)',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
7 => [
'name' => 'Engelsystem 35c3 dark (2018)',
'navbar_classes' => 'navbar-primary bg-black border-primary',
],
6 => [
'name' => 'Engelsystem 34c3 dark (2017)',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
5 => [
'name' => 'Engelsystem 34c3 light (2017)',
'navbar_classes' => 'navbar-light bg-light',
],
4 => [
'name' => 'Engelsystem 33c3 (2016)',
'navbar_classes' => 'navbar-dark bg-darker border-dark',
],
3 => [
'name' => 'Engelsystem 32c3 (2015)',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
2 => [
'name' => 'Engelsystem cccamp15',
'navbar_classes' => 'navbar-light bg-light',
],
11 => [
'name' => 'Engelsystem high contrast',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
0 => [
'name' => 'Engelsystem light',
'navbar_classes' => 'navbar-light bg-light',
],
1 => [
'name' => 'Engelsystem dark',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
], ],
// Redirect to this site after logging in or when pressing the top-left button // Redirect to this site after logging in or when pressing the top-left button

@ -169,7 +169,13 @@ function user_settings()
{ {
$request = request(); $request = request();
$config = config(); $config = config();
$themes = config('available_themes'); $themesConfig = config('themes');
$themes = [];
foreach ($themesConfig as $themeIndex => $themeConfig) {
$themes[$themeIndex] = $themeConfig['name'];
}
$enable_tshirt_size = config('enable_tshirt_size'); $enable_tshirt_size = config('enable_tshirt_size');
$tshirt_sizes = config('tshirt_sizes'); $tshirt_sizes = config('tshirt_sizes');

@ -426,10 +426,10 @@ function form_select($name, $label, $values, $selected, $selectText = '')
function form_element($label, $input, $for = '') function form_element($label, $input, $for = '')
{ {
if (empty($label)) { if (empty($label)) {
return '<div class="form-group">' . $input . '</div>'; return '<div class="mb-3">' . $input . '</div>';
} }
return '<div class="form-group">' . '<label for="' . $for . '">' . $label . '</label>' . $input . '</div>'; return '<div class="mb-3">' . '<label class="form-label" for="' . $for . '">' . $label . '</label>' . $input . '</div>';
} }
/** /**

@ -6,14 +6,14 @@
"author": "https://github.com/engelsystem/engelsystem/contributors", "author": "https://github.com/engelsystem/engelsystem/contributors",
"license": "GPL-2.0-or-later", "license": "GPL-2.0-or-later",
"scripts": { "scripts": {
"build": "NODE_ENV=production run-s build:clean build:webpack", "build": "(export NODE_ENV=production && yarn build:clean && yarn build:webpack)",
"build:clean": "rimraf public/assets", "build:clean": "rimraf public/assets",
"build:webpack": "webpack", "build:webpack": "webpack",
"build:watch": "webpack --watch" "build:watch": "webpack --watch"
}, },
"dependencies": { "dependencies": {
"@popperjs/core": "^2.9.2", "@popperjs/core": "^2.9.2",
"bootstrap": "5.0.0-beta3", "bootstrap": "^5.0.0",
"chart.js": "^2.9.3", "chart.js": "^2.9.3",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"eonasdan-bootstrap-datetimepicker": "^4.17.47", "eonasdan-bootstrap-datetimepicker": "^4.17.47",
@ -32,15 +32,12 @@
"css-loader": "^5.2.2", "css-loader": "^5.2.2",
"css-minimizer-webpack-plugin": "^2.0.0", "css-minimizer-webpack-plugin": "^2.0.0",
"file-loader": "^6.1.0", "file-loader": "^6.1.0",
"mini-css-extract-plugin": "^1.4.1", "mini-css-extract-plugin": "^1.6.0",
"mkdirp": "^1.0.4",
"npm-run-all": "^4.1.3",
"postcss": "^8.2.8", "postcss": "^8.2.8",
"postcss-loader": "^5.2.0", "postcss-loader": "^5.2.0",
"postcss-preset-env": "^6.7.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"sass": "^1.32.8", "sass": "^1.35.1",
"sass-loader": "^10.1.1", "sass-loader": "^12.0.0",
"style-loader": "^2.0.0", "style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.1.1", "terser-webpack-plugin": "^5.1.1",
"webpack": "^5.33.2", "webpack": "^5.33.2",

@ -4,7 +4,18 @@ $cursor-disabled: false;
$link-decoration: none !default; $link-decoration: none !default;
$link-hover-decoration: underline !default; $link-hover-decoration: underline !default;
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
$custom-colors: (
black: #000
);
$theme-colors: map-merge($theme-colors, $custom-colors);
@import "~bootstrap/scss/bootstrap"; @import "~bootstrap/scss/bootstrap";
@import "~bootstrap-icons/font/bootstrap-icons.css"; @import "~bootstrap-icons/font/bootstrap-icons.css";
@import "~eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css"; @import "~eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css";
@import "~select2/dist/css/select2.css"; @import "~select2/dist/css/select2.css";
@ -13,7 +24,7 @@ $link-hover-decoration: underline !default;
$navbar-height: 3.125rem; $navbar-height: 3.125rem;
body { body {
padding-top: 50px; padding-top: 70px;
} }
.footer a { .footer a {
@ -47,7 +58,7 @@ a .icon-icon_angel {
} }
.navbar-brand .icon-icon_angel { .navbar-brand .icon-icon_angel {
background-color: $navbar-dark-brand-color; background-color: $body-color;
} }
table a > .icon-icon_angel { table a > .icon-icon_angel {

@ -170,3 +170,4 @@ code {
background-color: $input-bg-disabled; background-color: $input-bg-disabled;
color: $input-color; color: $input-color;
} }

@ -24,36 +24,37 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE. THE SOFTWARE.
*/ */
@use "sass:math";
// Cyborg 3.2.0 // Cyborg 3.2.0
// Variables // Variables
// -------------------------------------------------- // --------------------------------------------------
//== Colors //== Colors
//
//## Gray and brand colors for use across Bootstrap. //## Gray and brand colors for use across Bootstrap.
// needs change
$gray-darker: #222; // #222 $gray-darker: #222; // #222
$gray-dark: #333; // #333 $gray-dark: #333; // #333
$gray: #555; // #555 $gray: #555; // #555
$gray-light: #999; // #999 $gray-light: #999; // #999
$gray-lighter: #eee; // #eee $gray-lighter: #eee; // #eee
$primary: #99ba00; $primary: #437aca !default;
$success: #99ba00; $success: #99ba00 !default;
$info: #0076ba; $info: #0076ba !default;
$warning: #ffc600; $warning: #ffc600 !default;
$danger: #d9534f; $danger: #d9534f !default;
//== Scaffolding //== Scaffolding
// //
//## Settings for some of the most global styles. //## Settings for some of the most global styles.
$body-bg: #060606; $body-bg: #060606 !default;
$body-color: $gray-light; $body-color: $gray-light;
//** Global text color on `<body>`. //** Global text color on `<body>`.
$text-color: $gray-light; $text-color: $gray-light;
$text-muted: $gray-light; $text-muted: $gray-light !default;
//** Global textual link color. //** Global textual link color.
$link-color: $primary; $link-color: $primary;
@ -65,8 +66,8 @@ $link-hover-color: $link-color;
// //
//## Font, line-height, and color for body text, headings, and more. //## Font, line-height, and color for body text, headings, and more.
$font-family-serif: Georgia, "Times New Roman", Times, serif; $font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif; $font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif !default;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`. //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-family-base: $font-family-sans-serif; $font-family-base: $font-family-sans-serif;
@ -88,7 +89,7 @@ $line-height-base: 1.428571429; // 20/14
$line-height-computed: floor(($font-size-base * $line-height-base)); // ~20px $line-height-computed: floor(($font-size-base * $line-height-base)); // ~20px
//** By default, this inherits from the `<body>`. //** By default, this inherits from the `<body>`.
$headings-font-family: $font-family-base; $headings-font-family: $font-family-base !default;
$headings-font-weight: 500; $headings-font-weight: 500;
$headings-line-height: 1.1; $headings-line-height: 1.1;
$headings-color: #fff; $headings-color: #fff;
@ -160,53 +161,19 @@ $table-bg-active: $table-bg-hover;
//** Border color for table and cell borders. //** Border color for table and cell borders.
$table-border-color: $gray-dark; $table-border-color: $gray-dark;
//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.
$btn-font-weight: normal;
$btn-default-color: #000;
$btn-default-bg: $gray-light;
$btn-default-border: darken($btn-default-bg, 10%);
$btn-primary-color: $btn-default-color;
$btn-primary-bg: $primary;
$btn-primary-border: darken($btn-primary-bg, 10%);
$btn-success-color: $btn-default-color;
$btn-success-bg: $success;
$btn-success-border: darken($btn-success-bg, 10%);
$btn-info-color: $btn-default-color;
$btn-info-bg: $info;
$btn-info-border: darken($btn-info-bg, 10%);
$btn-warning-color: $btn-default-color;
$btn-warning-bg: $warning;
$btn-warning-border: darken($btn-warning-bg, 10%);
$btn-danger-color: $btn-default-color;
$btn-danger-bg: $danger;
$btn-danger-border: darken($btn-danger-bg, 10%);
$btn-link-disabled-color: $gray-light;
//== Forms //== Forms
// //
//## //##
//** `<input>` background color //** `<input>` background color
$input-bg: #000; $input-bg: $gray-darker;
//** `<input disabled>` background color //** `<input disabled>` background color
$input-bg-disabled: $gray-darker; $input-bg-disabled: $gray-darker;
//** Text color for `<input>`s //** Text color for `<input>`s
$input-color: $text-color; $input-color: $text-color;
//** `<input>` border color //** `<input>` border color
$input-border: $gray-dark; $input-border-color: $gray-dark;
//** `<input>` border radius //** `<input>` border radius
$input-border-radius: $border-radius-base; $input-border-radius: $border-radius-base;
//** Border color for inputs on focus //** Border color for inputs on focus
@ -228,8 +195,9 @@ $legend-border-color: $gray-dark;
//** Background color for textual input addons //** Background color for textual input addons
$input-group-addon-bg: $gray-light; $input-group-addon-bg: $gray-light;
//** Border color for textual input addons //** Border color for textual input addons
$input-group-addon-border-color: $input-border; $input-group-addon-border-color: $input-border-color;
$form-label-font-weight: bold;
//== Dropdowns //== Dropdowns
// //
@ -364,8 +332,8 @@ $container-lg: $container-large-desktop;
$navbar-height: 3.125rem; $navbar-height: 3.125rem;
$navbar-margin-bottom: $line-height-computed; $navbar-margin-bottom: $line-height-computed;
$navbar-border-radius: $border-radius-base; $navbar-border-radius: $border-radius-base;
$navbar-padding-horizontal: floor(($grid-gutter-width / 2)); $navbar-padding-horizontal: floor(math.div($grid-gutter-width, 2));
$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2); $navbar-padding-vertical: math.div($navbar-height - $line-height-computed, 2);
$navbar-collapse-max-height: 340px; $navbar-collapse-max-height: 340px;
$navbar-default-color: $text-color; $navbar-default-color: $text-color;
@ -569,7 +537,6 @@ $popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%
// //
//## //##
$label-default-bg: $btn-default-bg;
$label-primary-bg: $primary; $label-primary-bg: $primary;
$label-success-bg: $success; $label-success-bg: $success;
$label-info-bg: $info; $label-info-bg: $info;
@ -761,26 +728,6 @@ $thumbnail-caption-padding: 9px;
$well-bg: darken($gray-darker, 5%); $well-bg: darken($gray-darker, 5%);
$well-border: darken($well-bg, 7%); $well-border: darken($well-bg, 7%);
//== Badges
//
//##
$badge-color: #000;
//** Linked badge text color on hover
$badge-link-hover-color: #000;
$badge-bg: $primary;
//** Badge text color in active nav link
$badge-active-color: $primary;
//** Badge background color in active nav link
$badge-active-bg: #fff;
$badge-font-weight: bold;
$badge-line-height: 1;
$badge-border-radius: 10px;
//== Breadcrumbs //== Breadcrumbs
// //
//## //##

@ -1,31 +1,20 @@
// dark
@import "cyborg_variables";
// Variables // Variables
// -------------------------------------------------- // --------------------------------------------------
//== changed Colors //== changed Colors
$gray-dark: #282828; // #333 $gray-darker: #222;
$gray-light: #888; // #999 $gray-dark: #282828;
$gray-lighter: #ADAFAE; // #eee $gray-light: #888;
$gray-lighter: #ADAFAE;
$primary: #428bca;
$success: #5cb85c;
$info: #5bc0de;
$warning: #f0ad4e;
//== changed Buttons
$btn-default-color: #fff; $primary: #437aca;
$btn-default-bg: lighten($gray-dark, 10%); $success: #00c960;
$info: #3dbddf;
$warning: #f6b345;
$danger: #e93a44;
$btn-primary-border: darken($btn-default-bg, 10%); $text-muted: $gray-light;
$btn-success-border: $btn-primary-border;
$btn-info-border: $btn-primary-border;
$btn-warning-border: $btn-primary-border;
$btn-danger-border: $btn-primary-border;
$btn-link-disabled-color: $gray-light; $btn-link-disabled-color: $gray-light;
@ -61,30 +50,21 @@ $state-danger-text: #fff;
$state-danger-bg: $danger; $state-danger-bg: $danger;
$state-danger-border: darken($state-danger-bg, 3%); $state-danger-border: darken($state-danger-bg, 3%);
//== changed Badges
$badge-color: #fff;
$badge-link-hover-color: #fff;
//== changed Type
$headings-small-color: $gray-light; $headings-small-color: $gray-light;
// Bootswatch
// -----------------------------------------------------
@import "cyborg_styles";
// added Forms ======================================================================
.input-group-addon {
background-color: $btn-default-bg;
}
// different code tag
code { code {
background-color: $state-info-bg; background-color: $state-info-bg;
color: $state-info-text; color: $state-info-text;
} }
$alert-bg-scale: 0%;
$alert-border-scale: 0%;
$alert-color-scale: 0%;
.alert {
color: #fff !important;
}
// dark
@import "cyborg_variables";
@import "cyborg_styles";

@ -1,17 +1,20 @@
// cccamp19 green (2019) // cccamp19 green (2019)
@import "cyborg_variables.scss";
// Variables // Variables
// -------------------------------------------------- // --------------------------------------------------
//== changed Colors //== changed Colors
$gray-dark: #282828; // #333 $gray-dark: #282828;
$gray-light: #888; // #999 $gray-light: #888;
$gray-lighter: #ADAFAE; // #eee $gray-lighter: #ADAFAE;
$brand-primary: #99ba00;
$primary: $brand-primary;
$brand-primary: #99ba00; $text-muted: $primary;
@import "cyborg_variables.scss";
@import "cyborg_styles.scss"; @import "cyborg_styles.scss";
// Specials for cccamp19 design // Specials for cccamp19 design

@ -1,18 +1,24 @@
// high contrast // high contrast
@import "cyborg_variables.scss";
// Variables // Variables
// -------------------------------------------------- // --------------------------------------------------
//== Colors //== Colors
$gray-dark: #282828; // #333 $gray-dark: #282828;
$gray-light: #888; // #999 $gray-darker: #222;
$gray-lighter: #ADAFAE; // #eee $gray-light: #888;
$gray-lighter: #ADAFAE;
$brand-primary: #72abfa;
$brand-success: #5cb85c; $brand-primary: #72abfa;
$brand-info: #5bc0de; $primary: $brand-primary;
$brand-warning: #f0ad4e; $brand-success: #5cb85c;
$success: $brand-success;
$brand-info: #5bc0de;
$info: $brand-info;
$brand-danger: #d9534f;
$danger: $brand-danger;
$brand-warning: #f0ad4e;
$warning: $brand-warning;
//== Scaffolding //== Scaffolding
@ -21,7 +27,7 @@ $text-color: #fff;
//== Buttons //== Buttons
$btn-default-color: #fff; $btn-color: #fff;
$btn-default-bg: lighten($gray-dark, 10%); $btn-default-bg: lighten($gray-dark, 10%);
$btn-primary-color: #000; $btn-primary-color: #000;
@ -60,9 +66,6 @@ $label-default-bg: lighten($btn-default-bg, 20%);
$label-color: #000; $label-color: #000;
$label-link-hover-color: #000; $label-link-hover-color: #000;
//== Badges
$badge-link-hover-color: #fff;
//== Type //== Type
@ -72,7 +75,9 @@ $headings-small-color: $gray-lighter;
// Bootswatch // Bootswatch
// ----------------------------------------------------- // -----------------------------------------------------
@import "cyborg_variables.scss";
@import "cyborg_styles.scss"; @import "cyborg_styles.scss";
// Typography ================================================================= // Typography =================================================================
.text-danger, .text-danger,

@ -1,18 +1,23 @@
// 36c3 // 36c3
@import "cyborg_variables.scss";
//== Colors //== Colors
$gray-dark: #282828; // #333 $gray-dark: #282828;
$gray-light: #888; // #999 $gray-darker: #222;
$gray-lighter: #D0D0CE; // #eee $gray-light: #888;
$black: #000; $gray-lighter: #D0D0CE;
$black: #000;
$brand-primary: #fe5000;
$brand-success: #00bb31; $brand-primary: #fe5000;
$brand-info: #5bc0de; $primary: $brand-primary;
$brand-warning: #febb00; $brand-success: #00bb31;
$brand-danger: #bb3100; $success: $brand-success;
$brand-info: #5bc0de;
$info: $brand-info;
$brand-warning: #febb00;
$warning: $brand-warning;
$brand-danger: #bb3100;
$danger: $brand-danger;
//== Scaffolding //== Scaffolding
@ -21,7 +26,7 @@ $text-color: $gray-lighter;
//== Buttons //== Buttons
$btn-default-color: $gray-lighter; $btn-color: $gray-lighter;
$btn-default-bg: lighten($gray-dark, 10%); $btn-default-bg: lighten($gray-dark, 10%);
$btn-primary-color: $black; $btn-primary-color: $black;
@ -63,7 +68,6 @@ $panel-primary-text: #000;
//== Badges //== Badges
$badge-color: $black; $badge-color: $black;
$badge-link-hover-color: $black;
//== Type //== Type
@ -71,6 +75,7 @@ $headings-small-color: $gray-light;
// Bootswatch // Bootswatch
// ----------------------------------------------------- // -----------------------------------------------------
@import "cyborg_variables.scss";
@import "cyborg_styles.scss"; @import "cyborg_styles.scss";
// Forms ====================================================================== // Forms ======================================================================

@ -1,5 +1,4 @@
// rc3 // rc3
@import "cyborg_variables.scss";
//== Colors //== Colors
@ -10,11 +9,16 @@ $gray-light: lighten($gray, 15%);
$gray-lighter: lighten($gray-light, 15%); $gray-lighter: lighten($gray-light, 15%);
$black: #000; $black: #000;
$brand-primary: #6800e7; $brand-primary: #6800e7;
$brand-success: #05b9ec; $primary: $brand-primary;
$brand-info: #670295; $brand-success: #05b9ec;
$brand-warning: #fff900; $success: $brand-success;
$brand-danger: #b239ff; $brand-info: #670295;
$info: $brand-info;
$brand-warning: #fff900;
$warning: $brand-warning;
$brand-danger: #b239ff;
$danger: $brand-danger;
//== Scaffolding //== Scaffolding
@ -24,7 +28,7 @@ $link-color: #fff;
//== Typography //== Typography
$font-face { @font-face {
font-family: 'Montserrat'; font-family: 'Montserrat';
src: url('theme13/Montserrat-Regular.woff2') format('woff2'), src: url('theme13/Montserrat-Regular.woff2') format('woff2'),
url('theme13/Montserrat-Regular.woff') format('woff'); url('theme13/Montserrat-Regular.woff') format('woff');
@ -33,7 +37,7 @@ $font-face {
font-display: swap; font-display: swap;
} }
$font-face { @font-face {
font-family: 'Orbitron'; font-family: 'Orbitron';
src: url('theme13/Orbitron-Regular.woff2') format('woff2'), src: url('theme13/Orbitron-Regular.woff2') format('woff2'),
url('theme13/Orbitron-Regular.woff') format('woff'); url('theme13/Orbitron-Regular.woff') format('woff');
@ -43,12 +47,12 @@ $font-face {
} }
$font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif; $font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif;
$font-family-serif: 'Orbitron', Georgia, "Times New Roman", Times, serif; $font-family-serif: 'Orbitron', Georgia, "Times New Roman", Times, serif;
$headings-font-family: $font-family-serif; $headings-font-family: $font-family-serif;
//== Buttons //== Buttons
$btn-default-color: #fff; $btn-color: #fff;
$btn-default-bg: lighten($gray-dark, 10%); $btn-default-bg: lighten($gray-dark, 10%);
$btn-primary-color: #fff; $btn-primary-color: #fff;
@ -110,7 +114,6 @@ $panel-danger-text: #fff;
//== Badges //== Badges
$badge-color: $black; $badge-color: $black;
$badge-link-hover-color: $black;
//== Type //== Type
@ -118,6 +121,7 @@ $headings-small-color: $gray-light;
// Bootswatch // Bootswatch
// ----------------------------------------------------- // -----------------------------------------------------
@import "cyborg_variables.scss";
@import "cyborg_styles.scss"; @import "cyborg_styles.scss";
// Forms ====================================================================== // Forms ======================================================================

@ -1,5 +1,4 @@
// rc3 teal // rc3 teal
@import "cyborg_variables.scss";
//== Colors //== Colors
@ -10,11 +9,16 @@ $gray-light: lighten($gray, 15%);
$gray-lighter: lighten($gray-light, 15%); $gray-lighter: lighten($gray-light, 15%);
$black: #000; $black: #000;
$brand-primary: #05b9ec; $brand-primary: #05b9ec;
$brand-success: #02fae0; $primary: $brand-primary;
$brand-info: #025d83; $brand-success: #02fae0;
$brand-warning: #6800e7; $success: $brand-success;
$brand-danger: #b239ff; $brand-info: #025d83;
$info: $brand-info;
$brand-warning: #6800e7;
$warning: $brand-warning;
$brand-danger: #b239ff;
$danger: $brand-danger;
//== Scaffolding //== Scaffolding
@ -25,7 +29,7 @@ $link-color: #fff;
//== Typography //== Typography
$font-face { @font-face {
font-family: 'Montserrat'; font-family: 'Montserrat';
src: url('theme13/Montserrat-Regular.woff2') format('woff2'), src: url('theme13/Montserrat-Regular.woff2') format('woff2'),
url('theme13/Montserrat-Regular.woff') format('woff'); url('theme13/Montserrat-Regular.woff') format('woff');
@ -34,7 +38,7 @@ $font-face {
font-display: swap; font-display: swap;
} }
$font-face { @font-face {
font-family: 'Orbitron'; font-family: 'Orbitron';
src: url('theme13/Orbitron-Regular.woff2') format('woff2'), src: url('theme13/Orbitron-Regular.woff2') format('woff2'),
url('theme13/Orbitron-Regular.woff') format('woff'); url('theme13/Orbitron-Regular.woff') format('woff');
@ -44,12 +48,12 @@ $font-face {
} }
$font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif; $font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif;
$font-family-serif: 'Orbitron', Georgia, "Times New Roman", Times, serif; $font-family-serif: 'Orbitron', Georgia, "Times New Roman", Times, serif;
$headings-font-family: $font-family-serif; $headings-font-family: $font-family-serif;
//== Buttons //== Buttons
$btn-default-color: #fff; $btn-color: #fff;
$btn-default-bg: lighten($gray-dark, 10%); $btn-default-bg: lighten($gray-dark, 10%);
$btn-primary-color: #fff; $btn-primary-color: #fff;
@ -111,7 +115,6 @@ $panel-danger-text: #fff;
//== Badges //== Badges
$badge-color: $black; $badge-color: $black;
$badge-link-hover-color: $black;
//== Type //== Type
@ -119,6 +122,7 @@ $headings-small-color: $gray-light;
// Bootswatch // Bootswatch
// ----------------------------------------------------- // -----------------------------------------------------
@import "cyborg_variables.scss";
@import "cyborg_styles.scss"; @import "cyborg_styles.scss";
// Forms ====================================================================== // Forms ======================================================================

@ -24,6 +24,8 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE. THE SOFTWARE.
*/ */
@use "sass:math";
// Cyborg 3.2.0 // Cyborg 3.2.0
// Variables // Variables
// -------------------------------------------------- // --------------------------------------------------
@ -39,10 +41,15 @@ $gray-light: #888; // #999
$gray-lighter: #adafae; // #eee $gray-lighter: #adafae; // #eee
$brand-primary: #fe7900; $brand-primary: #fe7900;
$primary: $brand-primary;
$brand-success: #00c466; $brand-success: #00c466;
$brand-info: #00c466; $success: $brand-success;
$brand-info: #00c466;
$info: $brand-info;
$brand-warning: #d10069; $brand-warning: #d10069;
$brand-danger: #d10069; $warning: $brand-warning;
$brand-danger: #d10069;
$danger: $brand-danger;
$plum: #1f0229; $plum: #1f0229;
$dark-green: #00292d; $dark-green: #00292d;
@ -170,12 +177,12 @@ $table-border-color: $gray-dark;
$btn-font-weight: normal; $btn-font-weight: normal;
$btn-default-color: $dark-green; $btn-color: $dark-green;
$btn-default-bg: $brand-primary; $btn-default-bg: $brand-primary;
$btn-default-border: $brand-primary; $btn-default-border: $brand-primary;
$btn-primary-color: $btn-default-color; $btn-primary-color: $btn-color;
$btn-primary-bg: $btn-default-bg; $btn-primary-bg: $btn-default-bg;
$btn-primary-border: $btn-default-border; $btn-primary-border: $btn-default-border;
@ -209,7 +216,7 @@ $input-bg-disabled: $gray-darker;
//** Text color for `<input>`s //** Text color for `<input>`s
$input-color: $text-color; $input-color: $text-color;
//** `<input>` border color //** `<input>` border color
$input-border: $gray-dark; $input-border-color: $gray-dark;
//** `<input>` border radius //** `<input>` border radius
$input-border-radius: $border-radius-base; $input-border-radius: $border-radius-base;
//** Border color for inputs on focus //** Border color for inputs on focus
@ -236,7 +243,7 @@ $legend-border-color: $gray-dark;
//** Background color for textual input addons //** Background color for textual input addons
$input-group-addon-bg: $gray-lighter; $input-group-addon-bg: $gray-lighter;
//** Border color for textual input addons //** Border color for textual input addons
$input-group-addon-border-color: $input-border; $input-group-addon-border-color: $input-border-color;
//== Dropdowns //== Dropdowns
// //
@ -366,8 +373,8 @@ $container-lg: $container-large-desktop;
$navbar-height: 3.125rem; $navbar-height: 3.125rem;
$navbar-margin-bottom: $line-height-computed; $navbar-margin-bottom: $line-height-computed;
$navbar-border-radius: $border-radius-base; $navbar-border-radius: $border-radius-base;
$navbar-padding-horizontal: floor(($grid-gutter-width / 2)); $navbar-padding-horizontal: floor(math.div($grid-gutter-width, 2));
$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2); $navbar-padding-vertical: math.div($navbar-height - $line-height-computed, 2);
$navbar-collapse-max-height: 340px; $navbar-collapse-max-height: 340px;
$navbar-default-color: $text-color; $navbar-default-color: $text-color;
@ -762,7 +769,6 @@ $well-border: darken($well-bg, 7%);
$badge-color: $dark-green; $badge-color: $dark-green;
//** Linked badge text color on hover //** Linked badge text color on hover
$badge-link-hover-color: $dark-green;
$badge-bg: $brand-primary; $badge-bg: $brand-primary;
//** Badge text color in active nav link //** Badge text color in active nav link

@ -1,11 +1,15 @@
// cccamp15 // cccamp15
@import "~bootstrap/scss/variables";
$brand-primary: #758499; $brand-primary: #758499;
$brand-success: #7b9c41; $primary: #758499;
$brand-info: #9c7357; $brand-success: #7b9c41;
$brand-warning: #e3a14d; $success: #7b9c41;
$brand-danger: #7f528b; $brand-info: #9c7357;
$info: #9c7357;
$brand-warning: #e3a14d;
$warning: #e3a14d;
$brand-danger: #7f528b;
$danger: #7f528b;
$link-color: #58585a; $link-color: #58585a;

@ -1,11 +1,15 @@
// 32c3 (2015) // 32c3 (2015)
@import "~bootstrap/scss/variables";
$brand-primary: #f19224; $brand-primary: #f19224;
$primary: #f19224;
$brand-success: #39AB50; $brand-success: #39AB50;
$success: #39AB50;
$brand-info: #6618F9; $brand-info: #6618F9;
$info: #6618F9;
$brand-warning: #DAD216; $brand-warning: #DAD216;
$warning: #DAD216;
$brand-danger: #DA1639; $brand-danger: #DA1639;
$danger: #DA1639;
$state-success-text: $brand-success; $state-success-text: $brand-success;
$state-success-bg: lighten($brand-success,40%); $state-success-bg: lighten($brand-success,40%);

@ -1,30 +1,33 @@
// 33c3 (2016) // 33c3 (2016)
@import "cyborg_variables.scss";
// Variables // Variables
// --------------------------------------------------
//== changed Colors //== changed Colors
$gray-dark: #282828; // #333 $gray-dark: #282828;
$gray-light: #888; // #999 $gray-darker: #222;
$gray-lighter: #ADAFAE; // #eee $gray-light: #888;
$gray-lighter: #ADAFAE;
$brand-primary: rgb(0, 156, 139);
$brand-success: rgb(141, 193, 35); $brand-primary: rgb(0, 156, 139);
$brand-info: rgb(70, 71, 73); $primary: rgb(0, 156, 139);
$brand-warning: rgb(255, 244, 95); $brand-success: rgb(141, 193, 35);
$brand-danger: rgb(277, 38, 60); $success: rgb(141, 193, 35);
$brand-info: rgb(70, 71, 73);
$info: rgb(70, 71, 73);
$brand-warning: rgb(255, 244, 95);
$warning: rgb(255, 244, 95);
$brand-danger: rgb(277, 38, 60);
$danger: rgb(277, 38, 60);
//== changed Scaffolding //== changed Scaffolding
$body-bg: #1d1d1b; $body-bg: #1d1d1b;
//== changed Buttons //== changed Buttons
$btn-default-color: #fff; $btn-color: #fff;
$btn-default-bg: lighten($gray-dark, 10%); $btn-default-bg: lighten($gray-dark, 10%);
$btn-primary-border: darken($btn-default-bg, 10%); $btn-primary-border: darken($btn-default-bg, 10%);
@ -77,8 +80,6 @@ $state-danger-border: darken($state-danger-bg, 3%);
$badge-color: #fff; $badge-color: #fff;
$badge-link-hover-color: #fff;
//== changed Type //== changed Type
@ -87,6 +88,7 @@ $headings-small-color: $gray-light;
// Bootswatch // Bootswatch
// ----------------------------------------------------- // -----------------------------------------------------
@import "cyborg_variables.scss";
@import "cyborg_styles.scss"; @import "cyborg_styles.scss";
// added Forms ====================================================================== // added Forms ======================================================================

@ -1,11 +1,15 @@
// 34c3 light (2017) // 34c3 light (2017)
@import "~bootstrap/scss/variables";
$brand-primary: rgb(164, 28, 49); $brand-primary: rgb(164, 28, 49);
$brand-success: rgb(153, 204, 0); $primary: rgb(164, 28, 49);
$brand-info: rgb(0, 204, 255); $brand-success: rgb(153, 204, 0);
$brand-warning: rgb(255, 255, 51); $success: rgb(153, 204, 0);
$brand-danger: rgb(255, 102, 0); $brand-info: rgb(0, 204, 255);
$info: rgb(0, 204, 255);
$brand-warning: rgb(255, 255, 51);
$warning: rgb(255, 255, 51);
$brand-danger: rgb(255, 102, 0);
$danger: rgb(255, 102, 0);
$link-color: $brand-primary; $link-color: $brand-primary;

@ -1,19 +1,24 @@
// 34c3 dark (2017) // 34c3 dark (2017)
@import "cyborg_variables.scss";
// Variables // Variables
// -------------------------------------------------- // --------------------------------------------------
//== changed Colors //== changed Colors
$gray-dark: #282828; // #333 $gray-dark: #282828;
$gray-light: #888; // #999 $gray-light: #888;
$gray-lighter: #ADAFAE; // #eee $gray-darker: #222;
$gray-lighter: #ADAFAE;
$brand-primary: rgb(164, 28, 49);
$brand-success: rgb(153, 204, 0); $brand-primary: rgb(164, 28, 49);
$brand-info: rgb(0, 204, 255); $primary: rgb(164, 28, 49);
$brand-warning: rgb(255, 255, 51); $brand-success: rgb(153, 204, 0);
$brand-danger: rgb(255, 102, 0); $success: rgb(153, 204, 0);
$brand-info: rgb(0, 204, 255);
$info: rgb(0, 204, 255);
$brand-warning: rgb(255, 255, 51);
$warning: rgb(255, 255, 51);
$brand-danger: rgb(255, 102, 0);
$danger: rgb(255, 102, 0);
.label.label-warning, .progress-bar.progress-bar-warning { .label.label-warning, .progress-bar.progress-bar-warning {
color: #000; color: #000;
@ -22,7 +27,7 @@ $brand-danger: rgb(255, 102, 0);
//== changed Buttons //== changed Buttons
$btn-default-color: #fff; $btn-color: #fff;
$btn-default-bg: lighten($gray-dark, 10%); $btn-default-bg: lighten($gray-dark, 10%);
$btn-primary-border: darken($btn-default-bg, 10%); $btn-primary-border: darken($btn-default-bg, 10%);
@ -89,8 +94,6 @@ $panel-default-heading-bg: darken($gray-darker, 5%);
$badge-color: #fff; $badge-color: #fff;
$badge-link-hover-color: #fff;
//== changed Type //== changed Type
@ -100,6 +103,7 @@ $headings-small-color: $gray-light;
// Bootswatch // Bootswatch
// ----------------------------------------------------- // -----------------------------------------------------
@import "cyborg_variables.scss";
@import "cyborg_styles.scss"; @import "cyborg_styles.scss";
// Typography ================================================================= // Typography =================================================================

@ -1,30 +1,24 @@
// 35c3 dark (2018) // 35c3 dark (2018)
@import "cyborg_variables.scss";
// Variables // Variables
// -------------------------------------------------- // --------------------------------------------------
//== changed Colors
// gray BEBOOT: #4d4d4c
// blue FRESH: #0084b0
// green HOPE: #00a356
// dark blue BASE: #18386b
// orange GLINT: #f9b000
// rot BEAT: #e40429
// violet TENACY: #44357e
$gray-darker: #000; $gray-darker: #000;
$gray-dark: #000; $gray-dark: #000;
$gray: #4d4d4c; // BEBOOT $gray: #4d4d4c; // BEBOOT
$gray-light: $gray; $gray-light: $gray;
$gray-lighter: lighten($gray, 15%); $gray-lighter: lighten($gray, 15%);
$brand-primary: #0084b0; // FRESH $brand-primary: #0084b0; // FRESH
$brand-success: #00a356; // HOPE $primary: #0084b0;
$brand-info: $brand-primary; $brand-success: #00a356; // HOPE
$brand-warning: #f9b000; // GLINT $success: #00a356; // HOPE
$brand-danger: #e40429; // BEAT $brand-info: $brand-primary;
$info: $brand-primary;
$brand-warning: #f9b000; // GLINT
$warning: #f9b000; // GLINT
$brand-danger: #e40429; // BEAT
$danger: #e40429; // BEAT
//== changed Scaffolding //== changed Scaffolding
@ -33,7 +27,8 @@ $body-bg: #000;
$text-color: $gray-lighter; $text-color: $gray-lighter;
$link-hover-color: lighten($link-color, 10%); $link-color: $brand-primary;
$link-hover-color: lighten($link-color, 10%);
//== changed Typography //== changed Typography
@ -44,15 +39,19 @@ $headings-color: $brand-primary;
//== changed Tables //== changed Tables
$table-bg: $gray-darker; $table-bg: $gray-darker;
$table-bg-accent: #111; $table-bg-accent: #111;
$table-border-color: $gray; $table-border-color: $gray;
// component
$component-active-color: #fff;
$component-active-bg: $primary;
//== changed Buttons //== changed Buttons
$btn-default-color: $link-color; $btn-color: $link-color;
$btn-default-bg: $gray-darker; $btn-default-bg: $gray-darker;
$btn-default-border: $brand-primary; $btn-default-border: $brand-primary;
@ -78,7 +77,7 @@ $input-bg: $gray-darker;
$input-color: $link-color; $input-color: $link-color;
$input-border: $brand-primary; $input-border-color: $brand-primary;
$input-group-addon-bg: $gray-lighter; $input-group-addon-bg: $gray-lighter;
@ -91,10 +90,11 @@ $dropdown-fallback-border: $brand-primary;
$dropdown-divider-bg: $dropdown-border; $dropdown-divider-bg: $dropdown-border;
$dropdown-link-color: $link-color; $dropdown-link-color: $link-color;
$dropdown-link-hover-color: $link-hover-color; $dropdown-link-hover-color: $link-hover-color;
$dropdown-bg: $gray-darker;
$dropdown-link-hover-bg: $dropdown-bg; $dropdown-link-hover-bg: $dropdown-bg;
@ -109,13 +109,13 @@ $navbar-default-link-active-color: $brand-primary;
$navbar-default-brand-color: $brand-primary; $navbar-default-brand-color: $brand-primary;
$navbar-default-brand-hover-color: lighten($brand-primary, 10%); $navbar-default-brand-hover-color: lighten($brand-primary, 10%);
//== changed Pagination //== changed Pagination
$pagination-color: $brand-primary; $pagination-color: $brand-primary;
$pagination-border: $brand-primary; $pagination-border: $brand-primary;
$pagination-hover-color: $gray-darker; $pagination-hover-color: $gray-darker;
$pagination-hover-bg: $component-active-bg;
$pagination-hover-border: $pagination-border; $pagination-hover-border: $pagination-border;
$pagination-active-color: $pagination-hover-color; $pagination-active-color: $pagination-hover-color;
@ -160,13 +160,12 @@ $panel-primary-text: $gray-darker;
$badge-color: #fff; $badge-color: #fff;
$badge-link-hover-color: #fff;
//== changed Type //== changed Type
$headings-small-color: $gray-light; $headings-small-color: $gray-light;
@import "cyborg_variables.scss";
@import "cyborg_styles.scss"; @import "cyborg_styles.scss";
.messages .text-danger { .messages .text-danger {

@ -1,17 +1,19 @@
// cccamp19 blue (2019) // cccamp19 blue (2019)
@import "cyborg_variables.scss";
// Variables // Variables
// --------------------------------------------------
//== changed Colors //== changed Colors
$gray-dark: #282828; // #333 $gray-dark: #282828;
$gray-light: #888; // #999 $gray-light: #888;
$gray-lighter: #ADAFAE; // #eee $gray-lighter: #ADAFAE;
$brand-primary: #0076ba;
$primary: #0076ba;
$brand-primary: #0076ba; $text-muted: $primary;
@import "cyborg_variables.scss";
@import "cyborg_styles.scss"; @import "cyborg_styles.scss";
// Specials for cccamp19 design // Specials for cccamp19 design

@ -1,17 +1,20 @@
// cccamp19 yellow (2019) // cccamp19 yellow (2019)
@import "cyborg_variables.scss";
// Variables // Variables
// -------------------------------------------------- // --------------------------------------------------
//== changed Colors //== changed Colors
$gray-dark: #282828; // #333 $gray-dark: #282828;
$gray-light: #888; // #999 $gray-light: #888;
$gray-lighter: #ADAFAE; // #eee $gray-lighter: #ADAFAE;
$brand-primary: #ffc600;
$primary: $brand-primary;
$brand-primary: #ffc600; $text-muted: $primary;
@import "cyborg_variables.scss";
@import "cyborg_styles.scss"; @import "cyborg_styles.scss";
// Specials for cccamp19 design // Specials for cccamp19 design

@ -1,4 +1,3 @@
{% set theme = theme|default(user.settings.theme|default(config('theme'))) %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ session_get('locale')|split('_')[0]|escape('html_attr') }}"> <html lang="{{ session_get('locale')|split('_')[0]|escape('html_attr') }}">
<head> <head>
@ -9,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}"> <meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/theme' ~ theme ~ '.css') }}"/> <link rel="stylesheet" type="text/css" href="{{ asset('assets/theme' ~ themeId ~ '.css') }}"/>
<script type="text/javascript" src="{{ asset('assets/vendor.js') }}"></script> <script type="text/javascript" src="{{ asset('assets/vendor.js') }}"></script>
{% if page() in ['news', 'meetings'] and is_user() and has_permission_to('atom') -%} {% if page() in ['news', 'meetings'] and is_user() and has_permission_to('atom') -%}

@ -7,7 +7,7 @@
</li> </li>
{% endmacro %} {% endmacro %}
<nav class="navbar fixed-top navbar-expand-lg navbar-dark border-bottom border-dark"> <nav class="navbar fixed-top navbar-expand-lg border-bottom {{ theme['navbar_classes'] }}">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand" href="{{ url('/') }}"> <a class="navbar-brand" href="{{ url('/') }}">
<span class="icon-icon_angel"></span> <span class="icon-icon_angel"></span>

@ -1,5 +1,5 @@
{% macro angel() %} {% macro angel() %}
<span class="icon-icon_angel"></span> <span class="icon-icon_angel bg-light"></span>
{% endmacro %} {% endmacro %}
{% macro glyphicon(glyph) %} {% macro glyphicon(glyph) %}

@ -1,7 +1,7 @@
{% macro input(name, label, type, opt) %} {% macro input(name, label, type, opt) %}
<div class="form-group"> <div class="mb-3">
{% if label -%} {% if label -%}
<label for="{{ name }}"{% if opt.hide_label|default(false) %} class="sr-only"{% endif %}>{{ label }}</label> <label for="{{ name }}" class="form-label {% if opt.hide_label|default(false) %}sr-only{% endif %}">{{ label }}</label>
{%- endif %} {%- endif %}
<input <input
type="{{ type|default('text') }}" class="form-control" type="{{ type|default('text') }}" class="form-control"
@ -22,9 +22,9 @@
{%- endmacro %} {%- endmacro %}
{% macro textarea(name, label, opt) %} {% macro textarea(name, label, opt) %}
<div class="form-group"> <div class="mb-3">
{% if label -%} {% if label -%}
<label for="{{ name }}">{{ label }}</label> <label class="form-label" for="{{ name }}">{{ label }}</label>
{%- endif %} {%- endif %}
<textarea class="form-control" id="{{ name }}" name="{{ name }}" <textarea class="form-control" id="{{ name }}" name="{{ name }}"
{%- if opt.required|default(false) %} {%- if opt.required|default(false) %}
@ -38,9 +38,9 @@
{%- endmacro %} {%- endmacro %}
{% macro select(name, data, label, selected) %} {% macro select(name, data, label, selected) %}
<div class="form-group"> <div class="mb-3">
{% if label -%} {% if label -%}
<label for="{{ name }}">{{ label }}</label> <label class="form-label" for="{{ name }}">{{ label }}</label>
{% endif %} {% endif %}
<select id="{{ name }}" name="{{ name }}" class="form-control"> <select id="{{ name }}" name="{{ name }}" class="form-control">
{% for value,decription in data -%} {% for value,decription in data -%}

@ -5,7 +5,17 @@
{% block title %}{{ __('Design') }}{% endblock %} {% block title %}{{ __('Design') }}{% endblock %}
{% set colors=['success', 'info', 'warning', 'danger'] %} {% set colors=['success', 'info', 'warning', 'danger'] %}
{% set types=['default', 'primary', 'success', 'info', 'warning', 'danger'] %} {% set types=[
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark'
]
%}
{% set types_color=[ {% set types_color=[
['primary', 'light'], ['primary', 'light'],
['secondary', 'light'], ['secondary', 'light'],
@ -23,7 +33,7 @@
{% block content %} {% block content %}
<div class="col-12"> <div class="col-12">
<div class="container"> <div class="container">
<h1>{{ block('title') }} <small class="text-muted">{{ themes[theme] }}</small></h1> <h1>{{ block('title') }} <small class="text-muted">{{ themes[themeId]['name'] }}</small></h1>
<h2>Elements <small class="text-muted">small</small></h2> <h2>Elements <small class="text-muted">small</small></h2>
<div class="row"> <div class="row">
@ -54,10 +64,10 @@
<div class="col-md-4"> <div class="col-md-4">
<h3>Themes</h3> <h3>Themes</h3>
<ul> <ul>
{% for id,theme in themes|sort %} {% for id,theme in themes %}
<li> <li>
<a href="{{ url('design', {'theme': id}) }}"> <a href="{{ url('design', {'theme': id}) }}">
{{ theme }} {{ theme['name'] }}
</a> </a>
</li> </li>
{% endfor %} {% endfor %}
@ -199,8 +209,10 @@
{{ f.select('form-input-select', {'lorem': 'Ipsum', 'dolor': 'Sit'}, 'Select', 'dolor') }} {{ f.select('form-input-select', {'lorem': 'Ipsum', 'dolor': 'Sit'}, 'Select', 'dolor') }}
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
Button<br> <label class="form-label">Button</label>
{{ f.button('Button', {'btn_type': 'default'}) }} <div>
{{ f.button('Button', {'btn_type': 'default'}) }}
</div>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
Submit button<br> Submit button<br>

@ -52,7 +52,7 @@ class DesignController extends BaseController
'arrived' => false, 'arrived' => false,
])); ]));
$themes = $this->config->get('available_themes'); $themes = $this->config->get('themes');
$data = [ $data = [
'demo_user' => $demoUser, 'demo_user' => $demoUser,
@ -60,9 +60,12 @@ class DesignController extends BaseController
'themes' => $themes, 'themes' => $themes,
]; ];
$theme = $request->get('theme'); $themeId = $request->get('theme');
if (isset($themes[$theme])) { $this->config->set('theme', (int) $themeId);
$data['theme'] = $theme;
if (isset($themes[$themeId])) {
$data['theme'] = $themes[$themeId];
$data['themeId'] = $themeId;
} }
return $this->response->withView( return $this->response->withView(

@ -70,12 +70,12 @@ class Controller extends BaseController
$userTshirtSizes = $this->formatStats($this->stats->tshirtSizes(), 'tshirt_sizes', 'shirt_size', 'size'); $userTshirtSizes = $this->formatStats($this->stats->tshirtSizes(), 'tshirt_sizes', 'shirt_size', 'size');
$userLocales = $this->formatStats($this->stats->languages(), 'locales', 'language', 'locale'); $userLocales = $this->formatStats($this->stats->languages(), 'locales', 'language', 'locale');
$userThemes = $this->formatStats($this->stats->themes(), 'available_themes', 'theme'); $userThemes = $this->formatStats($this->stats->themes(), 'themes', 'theme');
$userOauth = $this->formatStats($this->stats->oauth(), 'oauth', 'provider'); $userOauth = $this->formatStats($this->stats->oauth(), 'oauth', 'provider');
$themes = $this->config->get('available_themes'); $themes = $this->config->get('themes');
foreach ($userThemes as $key => $theme) { foreach ($userThemes as $key => $theme) {
$userThemes[$key]['labels']['name'] = $themes[$theme['labels']['theme']]; $userThemes[$key]['labels']['name'] = $themes[$theme['labels']['theme']]['name'];
} }
$oauthProviders = $this->config->get('oauth'); $oauthProviders = $this->config->get('oauth');

@ -34,9 +34,19 @@ class Globals extends TwigExtension implements GlobalsInterface
{ {
$user = $this->auth->user(); $user = $this->auth->user();
if ($user === null) {
$themeId = config('theme');
} else {
$themeId = $user->settings->theme;
}
$theme = config('themes')[$themeId];
return [ return [
'user' => $user ? $user : [], 'user' => $user ?? [],
'request' => $this->request, 'request' => $this->request,
'themeId' => $themeId,
'theme' => $theme,
]; ];
} }
} }

@ -15,7 +15,7 @@ class ControllerTest extends ApplicationFeatureTest
config([ config([
'api_key' => null, 'api_key' => null,
'metrics' => ['work' => [60 * 60], 'voucher' => [1]], 'metrics' => ['work' => [60 * 60], 'voucher' => [1]],
'available_themes' => ['1' => 'Test'], 'themes' => [1 => ['name' => 'Test']],
]); ]);
/** @var Controller $controller */ /** @var Controller $controller */

@ -49,7 +49,7 @@ class DesignControllerTest extends TestCase
}); });
$request = new Request(); $request = new Request();
$request->attributes->set('theme', '42'); $request->attributes->set('theme', '42');
$config = new Config(['available_themes' => ['42' => 'Meaning of Live']]); $config = new Config(['themes' => [42 => [ 'name' => 'Meaning of Live']]]);
$controller = new DesignController($response, $config); $controller = new DesignController($response, $config);
$controller->index($request); $controller->index($request);

@ -151,9 +151,9 @@ class ControllerTest extends TestCase
'de_DE' => 'German', 'de_DE' => 'German',
'en_US' => 'US English', 'en_US' => 'US English',
]); ]);
$config->set('available_themes', [ $config->set('themes', [
'0' => 'Nothing', 0 => ['name' => 'Nothing'],
'1' => 'Testing', 1 => ['name' => 'Testing'],
]); ]);
$config->set('metrics', [ $config->set('metrics', [
'work' => [60 * 60], 'work' => [60 * 60],

@ -8,7 +8,7 @@ const nodeEnv = (process.env.NODE_ENV || 'development').trim();
// eslint-disable-next-line // eslint-disable-next-line
const __DEV__ = nodeEnv !== 'production'; const __DEV__ = nodeEnv !== 'production';
const devtool = __DEV__ ? 'source-map' : ''; const devtool = __DEV__ ? 'source-map' : undefined
const plugins = [ const plugins = [
new webpack.DefinePlugin({ new webpack.DefinePlugin({
@ -24,7 +24,7 @@ const plugins = [
const themeEntries = {}; const themeEntries = {};
for (let i = 0; i < 2; i++) { for (let i = 0; i <= 15; i++) {
themeEntries[`theme${i}`] = `./resources/assets/themes/theme${i}.scss`; themeEntries[`theme${i}`] = `./resources/assets/themes/theme${i}.scss`;
} }
@ -61,14 +61,21 @@ module.exports = {
{ loader: MiniCssExtractPlugin.loader }, { loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'css-loader', options: { importLoaders: 1 } },
{ {
loader: "postcss-loader", loader: 'postcss-loader',
options: { options: {
postcssOptions: { postcssOptions: {
plugins: [ [ "postcss-preset-env", ], ], plugins: [ [ 'autoprefixer', ], ],
}, },
}, },
}, },
{ loader: 'sass-loader' }, {
loader: 'sass-loader',
options: {
sassOptions: {
quietDeps: true
}
}
},
] ]
} }
], ],

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save