iger
/
engelsystem
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
This commit is contained in:
Michael Weimann 2021-04-29 21:58:20 +02:00
parent 9acaa03a71
commit 5f7fcb9018
No known key found for this signature in database
GPG Key ID: 34F0524D4DA694A1
36 changed files with 1370 additions and 2018 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -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.

83
config/config.default.php
View File

@ -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

8
includes/pages/user_settings.php
View File

@ -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');

4
includes/sys_form.php
View File

@ -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>';
} }
/** /**

13
package.json
View File

@ -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",

15
resources/assets/themes/base.scss
View File

@ -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 {

1
resources/assets/themes/cyborg_styles.scss
View File

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

91
resources/assets/themes/cyborg_variables.scss
View File

@ -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
// //
//## //##

64
resources/assets/themes/theme1.scss
View File

@ -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; $primary: #437aca;
$success: #5cb85c; $success: #00c960;
$info: #5bc0de; $info: #3dbddf;
$warning: #f0ad4e; $warning: #f6b345;
$danger: #e93a44;
$text-muted: $gray-light;
//== changed Buttons
$btn-default-color: #fff;
$btn-default-bg: lighten($gray-dark, 10%);
$btn-primary-border: darken($btn-default-bg, 10%);
$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";

11
resources/assets/themes/theme10.scss
View File

@ -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; $brand-primary: #99ba00;
$primary: $brand-primary;
$text-muted: $primary;
@import "cyborg_variables.scss";
@import "cyborg_styles.scss"; @import "cyborg_styles.scss";
// Specials for cccamp19 design // Specials for cccamp19 design

21
resources/assets/themes/theme11.scss
View File

@ -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-primary: #72abfa;
$primary: $brand-primary;
$brand-success: #5cb85c; $brand-success: #5cb85c;
$success: $brand-success;
$brand-info: #5bc0de; $brand-info: #5bc0de;
$info: $brand-info;
$brand-danger: #d9534f;
$danger: $brand-danger;
$brand-warning: #f0ad4e; $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,

17
resources/assets/themes/theme12.scss
View File

@ -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;
$gray-lighter: #D0D0CE;
$black: #000; $black: #000;
$brand-primary: #fe5000; $brand-primary: #fe5000;
$primary: $brand-primary;
$brand-success: #00bb31; $brand-success: #00bb31;
$success: $brand-success;
$brand-info: #5bc0de; $brand-info: #5bc0de;
$info: $brand-info;
$brand-warning: #febb00; $brand-warning: #febb00;
$warning: $brand-warning;
$brand-danger: #bb3100; $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 ======================================================================

14
resources/assets/themes/theme13.scss
View File

@ -1,5 +1,4 @@
// rc3 // rc3
@import "cyborg_variables.scss";
//== Colors //== Colors
@ -11,10 +10,15 @@ $gray-lighter: lighten($gray-light, 15%);
$black: #000; $black: #000;
$brand-primary: #6800e7; $brand-primary: #6800e7;
$primary: $brand-primary;
$brand-success: #05b9ec; $brand-success: #05b9ec;
$success: $brand-success;
$brand-info: #670295; $brand-info: #670295;
$info: $brand-info;
$brand-warning: #fff900; $brand-warning: #fff900;
$warning: $brand-warning;
$brand-danger: #b239ff; $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');
@ -48,7 +52,7 @@ $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 ======================================================================

14
resources/assets/themes/theme14.scss
View File

@ -1,5 +1,4 @@
// rc3 teal // rc3 teal
@import "cyborg_variables.scss";
//== Colors //== Colors
@ -11,10 +10,15 @@ $gray-lighter: lighten($gray-light, 15%);
$black: #000; $black: #000;
$brand-primary: #05b9ec; $brand-primary: #05b9ec;
$primary: $brand-primary;
$brand-success: #02fae0; $brand-success: #02fae0;
$success: $brand-success;
$brand-info: #025d83; $brand-info: #025d83;
$info: $brand-info;
$brand-warning: #6800e7; $brand-warning: #6800e7;
$warning: $brand-warning;
$brand-danger: #b239ff; $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');
@ -49,7 +53,7 @@ $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 ======================================================================

20
resources/assets/themes/theme15.scss
View File

@ -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;
$success: $brand-success;
$brand-info: #00c466; $brand-info: #00c466;
$info: $brand-info;
$brand-warning: #d10069; $brand-warning: #d10069;
$warning: $brand-warning;
$brand-danger: #d10069; $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

6
resources/assets/themes/theme2.scss
View File

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

6
resources/assets/themes/theme3.scss
View File

@ -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%);

20
resources/assets/themes/theme4.scss
View File

@ -1,21 +1,24 @@
// 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-primary: rgb(0, 156, 139);
$primary: rgb(0, 156, 139);
$brand-success: rgb(141, 193, 35); $brand-success: rgb(141, 193, 35);
$success: rgb(141, 193, 35);
$brand-info: rgb(70, 71, 73); $brand-info: rgb(70, 71, 73);
$info: rgb(70, 71, 73);
$brand-warning: rgb(255, 244, 95); $brand-warning: rgb(255, 244, 95);
$warning: rgb(255, 244, 95);
$brand-danger: rgb(277, 38, 60); $brand-danger: rgb(277, 38, 60);
$danger: rgb(277, 38, 60);
//== changed Scaffolding //== changed Scaffolding
@ -24,7 +27,7 @@ $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 ======================================================================

6
resources/assets/themes/theme5.scss
View File

@ -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);
$primary: rgb(164, 28, 49);
$brand-success: rgb(153, 204, 0); $brand-success: rgb(153, 204, 0);
$success: rgb(153, 204, 0);
$brand-info: rgb(0, 204, 255); $brand-info: rgb(0, 204, 255);
$info: rgb(0, 204, 255);
$brand-warning: rgb(255, 255, 51); $brand-warning: rgb(255, 255, 51);
$warning: rgb(255, 255, 51);
$brand-danger: rgb(255, 102, 0); $brand-danger: rgb(255, 102, 0);
$danger: rgb(255, 102, 0);
$link-color: $brand-primary; $link-color: $brand-primary;

18
resources/assets/themes/theme6.scss
View File

@ -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-primary: rgb(164, 28, 49);
$primary: rgb(164, 28, 49);
$brand-success: rgb(153, 204, 0); $brand-success: rgb(153, 204, 0);
$success: rgb(153, 204, 0);
$brand-info: rgb(0, 204, 255); $brand-info: rgb(0, 204, 255);
$info: rgb(0, 204, 255);
$brand-warning: rgb(255, 255, 51); $brand-warning: rgb(255, 255, 51);
$warning: rgb(255, 255, 51);
$brand-danger: rgb(255, 102, 0); $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 =================================================================

35
resources/assets/themes/theme7.scss
View File

@ -1,19 +1,8 @@
// 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
@ -21,10 +10,15 @@ $gray-light: $gray;
$gray-lighter: lighten($gray, 15%); $gray-lighter: lighten($gray, 15%);
$brand-primary: #0084b0; // FRESH $brand-primary: #0084b0; // FRESH
$primary: #0084b0;
$brand-success: #00a356; // HOPE $brand-success: #00a356; // HOPE
$success: #00a356; // HOPE
$brand-info: $brand-primary; $brand-info: $brand-primary;
$info: $brand-primary;
$brand-warning: #f9b000; // GLINT $brand-warning: #f9b000; // GLINT
$warning: #f9b000; // GLINT
$brand-danger: #e40429; // BEAT $brand-danger: #e40429; // BEAT
$danger: #e40429; // BEAT
//== changed Scaffolding //== changed Scaffolding
@ -33,6 +27,7 @@ $body-bg: #000;
$text-color: $gray-lighter; $text-color: $gray-lighter;
$link-color: $brand-primary;
$link-hover-color: lighten($link-color, 10%); $link-hover-color: lighten($link-color, 10%);
@ -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;
@ -95,6 +94,7 @@ $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 {

12
resources/assets/themes/theme8.scss
View File

@ -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; $brand-primary: #0076ba;
$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

11
resources/assets/themes/theme9.scss
View File

@ -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; $brand-primary: #ffc600;
$primary: $brand-primary;
$text-muted: $primary;
@import "cyborg_variables.scss";
@import "cyborg_styles.scss"; @import "cyborg_styles.scss";
// Specials for cccamp19 design // Specials for cccamp19 design

3
resources/views/layouts/app.twig
View File

@ -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') -%}

2
resources/views/layouts/parts/navbar.twig
View File

@ -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>

2
resources/views/macros/base.twig
View File

@ -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) %}

12
resources/views/macros/form.twig
View File

@ -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 -%}

22
resources/views/pages/design.twig
View File

@ -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,9 +209,11 @@
{{ 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>
<div>
{{ f.button('Button', {'btn_type': 'default'}) }} {{ 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>
{{ f.submit() }} {{ f.submit() }}

11
src/Controllers/DesignController.php
View File

@ -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(

6
src/Controllers/Metrics/Controller.php
View File

@ -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');

12
src/Renderer/Twig/Extensions/Globals.php
View File

@ -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,
]; ];
} }
} }

2
tests/Feature/Controllers/Metrics/ControllerTest.php
View File

@ -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 */

2
tests/Unit/Controllers/DesignControllerTest.php
View File

@ -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);

6
tests/Unit/Controllers/Metrics/ControllerTest.php
View File

@ -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],

17
webpack.config.js
View File

@ -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
}
}
},
] ]
} }
], ],

2679
yarn.lock
View File

File diff suppressed because it is too large Load Diff