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

Fixed more themes and styles/types

This commit is contained in:
Igor Scheller 2021-08-05 01:00:12 +02:00
parent a36e142f28
commit 6cfeedc57a
38 changed files with 178 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config/config.default.php
View File

@ -160,7 +160,7 @@ return [
4 => [
'name' => 'Engelsystem 33c3 (2016)',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-darker border-dark',
'navbar_classes' => 'navbar-dark bg-body border-dark',
],
3 => [
'name' => 'Engelsystem 32c3 (2015)',

16
includes/sys_form.php
View File

@ -29,14 +29,12 @@ function form_spinner($name, $label, $value)
return form_element($label, '
<div class="input-group">
<input id="spinner-' . $name . '" class="form-control" name="' . $name . '" value="' . $value . '" />
<div class="input-group-btn">
<button id="spinner-' . $name . '-down" class="btn btn-primary" type="button">
' . icon('dash-lg') . '
</button>
<button id="spinner-' . $name . '-up" class="btn btn-primary" type="button">
' . icon('plus-lg') . '
</button>
</div>
<button id="spinner-' . $name . '-down" class="btn btn-secondary" type="button">
' . icon('dash-lg') . '
</button>
<button id="spinner-' . $name . '-up" class="btn btn-secondary" type="button">
' . icon('plus-lg') . '
</button>
</div>
<script type="text/javascript">
$(\'#spinner-' . $name . '-down\').click(function() {
@ -72,7 +70,7 @@ function form_date($name, $label, $value, $start_date = '', $end_date = '')
return form_element($label, '
<div class="input-group date" id="' . $dom_id . '" data-min-date="' . $start_date . '" data-max-date="' . $end_date . '">
<input type="date" placeholder="YYYY-MM-DD" name="' . $name . '" class="form-control" value="' . htmlspecialchars($value) . '" autocomplete="off">'
. '<span class="input-group-addon">' . icon('grid-3x3-gap-fill') . '</span>
. '<span class="input-group-text">' . icon('grid-3x3-gap-fill') . '</span>
</div>
', $dom_id);
}

8
includes/sys_template.php
View File

@ -1,5 +1,7 @@
<?php
use Illuminate\Support\Str;
/**
* Render a stat for dashborad (big number with label).
* If no style given, style is danger if number > 0, and success if number == 0.
@ -391,7 +393,11 @@ function render_table($columns, $rows, $data = true)
*/
function button($href, $label, $class = '')
{
return '<a href="' . $href . '" class="btn btn-secondary ' . $class . '">' . $label . '</a>';
if (!Str::contains(Str::remove(['btn-sm', 'btn-xl'], $class), 'btn-')) {
$class = 'btn-secondary' . ($class ? ' ' . $class : '');
}
return '<a href="' . $href . '" class="btn ' . $class . '">' . $label . '</a>';
}
/**

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

@ -60,6 +60,14 @@ body {
mask-size: cover;
}
.text-light .icon-icon_angel {
background-color: map.get($theme-colors, "light");
}
.dark .icon-icon_angel {
background-color: map.get($theme-colors, "dark");
}
a .icon-icon_angel {
background-color: $link-color;
}
@ -278,11 +286,11 @@ span.ref-id[id] {
.card-header {
&.bg-dark {
color: map.get($theme-colors, "light");;
color: map.get($theme-colors, "light");
}
&.bg-light {
color: map.get($theme-colors, "dark");;
color: map.get($theme-colors, "dark");
}
}

33
resources/assets/themes/card-glow.scss Normal file
View File

@ -0,0 +1,33 @@
// Used for shift overview cards headers
@each $state, $value in $theme-colors {
$card-background: darken($value, 35%);
$card-border: $value;
$card-color: $value;
@if (contrast-ratio($card-background, $card-color) < $min-contrast-ratio*.7) {
$card-color: mix($value, color-contrast($card-background), 40%);
}
.card.bg-#{"" + $state} .card-header {
background-color: $card-background;
border-color: $card-border;
.badge.bg-light {
background-color: $card-color !important;
}
.badge.text-#{"" + $state} {
color: $card-background !important;
}
a.text-white {
color: $card-color !important;
}
.btn-#{"" + $state} {
background-color: $card-background;
border-color: $card-border !important;
color: $card-color;
}
}
}

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

@ -50,10 +50,10 @@ $danger: #d9534f !default;
//## Settings for some of the most global styles.
$body-bg: #060606 !default;
$body-color: $gray-light;
$body-color: $gray-light !default;
//** Global text color on `<body>`.
$text-color: $gray-light;
$text-color: $gray-light !default;
$text-muted: $gray-light !default;
//** Global textual link color.

3
resources/assets/themes/dark.scss Normal file
View File

@ -0,0 +1,3 @@
// All dark themes
$input-group-addon-color: #222;
$input-disabled-bg: #111;

7
resources/assets/themes/light.scss Normal file
View File

@ -0,0 +1,7 @@
// All light themes
$secondary: #bec4ce;
.btn.btn-secondary {
background-color: rgba(255, 255, 255, 0.3);
}

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

@ -1,4 +1,5 @@
// light theme
@import "light";
$primary: #337ab7;
$light: #f5f5f5;

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

@ -1,6 +1,8 @@
// Variables
// --------------------------------------------------
@import "dark";
//== changed Colors
$gray-darker: #222;

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

@ -2,6 +2,7 @@
// Variables
// --------------------------------------------------
@import "dark";
//== changed Colors
@ -18,6 +19,7 @@ $text-muted: $primary;
@import "cyborg_styles.scss";
// Specials for cccamp19 design
@import "card-glow";
.navbar-brand {
.icon-icon_angel {

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

@ -1,6 +1,7 @@
// high contrast
// Variables
// --------------------------------------------------
@import "dark";
//== Colors
@ -23,7 +24,7 @@ $warning: $brand-warning;
//== Scaffolding
$body-bg: #000;
$text-color: #fff;
$body-color: #fff;
//== Buttons
@ -45,6 +46,8 @@ $btn-warning-border: darken($btn-default-bg, 10%);
$btn-danger-color: #000;
$btn-danger-border: darken($btn-default-bg, 10%);
//= Navigation
$nav-tabs-link-active-color: $gray-lighter;
//== Forms
@ -98,5 +101,17 @@ $headings-small-color: $gray-lighter;
// code tag
code {
background-color: $btn-default-bg;
color: $input-color;
color: #fff;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.badge {
color: #000 !important;
&.bg-dark {
color: #fff !important;
}
}

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

@ -1,6 +1,7 @@
// 36c3
//== Colors
@import "dark";
$gray-dark: #282828;
$gray-darker: #222;

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

@ -1,6 +1,7 @@
// rc3
// rc3 violet
//== Colors
@import "dark";
$gray-darker: #100e23;
$gray-dark: lighten($gray-darker, 15%);
@ -12,6 +13,7 @@ $black: #000;
$brand-primary: #6800e7;
$primary: $brand-primary;
$brand-success: #05b9ec;
$secondary: #3a327e;
$success: $brand-success;
$brand-info: #670295;
$info: $brand-info;

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

@ -1,6 +1,7 @@
// rc3 teal
//== Colors
@import "dark";
$gray-darker: #0e1c23;
$gray-dark: lighten($gray-darker, 15%);
@ -11,6 +12,7 @@ $black: #000;
$brand-primary: #05b9ec;
$primary: $brand-primary;
$secondary: #32657e;
$brand-success: #02fae0;
$success: $brand-success;
$brand-info: #025d83;
@ -20,7 +22,6 @@ $warning: $brand-warning;
$brand-danger: #b239ff;
$danger: $brand-danger;
//== Scaffolding
$body-bg: #000;

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

@ -55,7 +55,7 @@ $plum: #1f0229;
$dark-green: #00292d;
$blue: darken(#009951, 10%);
.label.label-warning,
.badge.bg-warning,
.progress-bar.progress-bar-warning {
color:white;
}

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

@ -1,4 +1,5 @@
// cccamp15
@import "light";
$brand-primary: #758499;
$primary: #758499;

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

@ -1,4 +1,5 @@
// 32c3 (2015)
@import "light";
$brand-primary: #f19224;
$primary: #f19224;
@ -57,4 +58,12 @@ $navbar-default-brand-hover-bg: #000;
color: #000;
}
.card.bg-info .card-header a {
color: lighten($brand-info, 50%);
&:hover {
color: lighten($brand-info, 50%);
}
}
@import "base.scss";

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

@ -1,4 +1,5 @@
// 33c3 (2016)
@import "dark";
// Variables
@ -20,6 +21,8 @@ $warning: rgb(255, 244, 95);
$brand-danger: rgb(277, 38, 60);
$danger: rgb(277, 38, 60);
$text-muted: lighten($gray-light, 25%);
//== changed Scaffolding
$body-bg: #1d1d1b;
@ -86,6 +89,9 @@ $badge-color: #fff;
$headings-small-color: $gray-light;
// Navigation tabs
$nav-tabs-link-active-color: $gray-light;
// Bootswatch
// -----------------------------------------------------
@import "cyborg_variables.scss";
@ -97,6 +103,15 @@ $headings-small-color: $gray-light;
background-color: $btn-default-bg;
}
.badge.bg-warning {
color: #000;
}
.card.bg-secondary .card-header,
.card.bg-secondary .card-footer {
color: $gray-lighter;
}
// different code tag
code {
background-color: $state-info-bg;

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

@ -1,4 +1,5 @@
// 34c3 light (2017)
@import "light";
$brand-primary: rgb(164, 28, 49);
$primary: rgb(164, 28, 49);
@ -29,7 +30,7 @@ $state-danger-text: darken($brand-danger,40%);
$state-danger-bg: lighten($brand-danger,40%);
$state-danger-border: $brand-danger;
.label.label-warning {
.badge.bg-warning {
color: #000;
}

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

@ -1,6 +1,7 @@
// 34c3 dark (2017)
// Variables
// --------------------------------------------------
@import "dark";
//== changed Colors
@ -20,7 +21,9 @@ $warning: rgb(255, 255, 51);
$brand-danger: rgb(255, 102, 0);
$danger: rgb(255, 102, 0);
.label.label-warning, .progress-bar.progress-bar-warning {
$secondary: #424242;
.badge.bg-warning, .progress-bar.progress-bar-warning {
color: #000;
}

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

@ -2,6 +2,7 @@
// Variables
// --------------------------------------------------
@import "dark";
$gray-darker: #000;
$gray-dark: #000;
@ -255,7 +256,7 @@ table,
background-image: linear-gradient(to right, rgb(0, 132, 176) , rgb(0, 163, 86));
}
.label-warning {
.bg-warning {
color: #000;
}

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

@ -1,6 +1,7 @@
// cccamp19 blue (2019)
// Variables
@import "dark";
//== changed Colors
@ -17,6 +18,7 @@ $text-muted: $primary;
@import "cyborg_styles.scss";
// Specials for cccamp19 design
@import "card-glow";
.navbar-brand {
.icon-icon_angel {

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

@ -2,6 +2,7 @@
// Variables
// --------------------------------------------------
@import "dark";
//== changed Colors
@ -18,6 +19,7 @@ $text-muted: $primary;
@import "cyborg_styles.scss";
// Specials for cccamp19 design
@import "card-glow";
.navbar-brand {
.icon-icon_angel {

2
resources/views/errors/404.twig
View File

@ -4,7 +4,7 @@
{% block content_container %}
<div class="row">
<div class="col-sm-6 col-sm-offset-3 error-big">
<div class="col-md-6 offset-md-3 col-lg-4 offset-lg-4 error-big">
<h2>
4<span class="pulse">:</span>{{ status|slice(1, 2) }}
<small class="text-muted">{{ __("No sleep found") }}</small>

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

@ -14,7 +14,7 @@
{% if page() in ['news', 'meetings'] and is_user() and has_permission_to('atom') -%}
{% set parameters = {'key': user.api_key} -%}
{% if page() == 'meetings' -%}
{% set parameters = parameters|merge({'meetings': 1}) -%}
{% set parameters = {'meetings': 1}|merge(parameters) -%}
{% endif %}
<link href="{{ url('atom', parameters) }}" type="application/atom+xml" rel="alternate" title="Atom Feed">
{% endif %}

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

@ -31,3 +31,7 @@
{% macro type_bg_class() -%}
{% if theme.type == 'light' %}bg-white{% else %}bg-dark{% endif %}
{%- endmacro %}
{% macro type_text_class() -%}
{% if theme.type == 'light' %}text-dark{% else %}text-light{% endif %}
{%- endmacro %}

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

@ -79,5 +79,5 @@
{%- endmacro %}
{% macro submit(label, opt) %}
{{ _self.button(label|default(__('form.submit')), opt|default({})|merge({'type': 'submit', 'btn_type': 'primary'})) }}
{{ _self.button(label|default(__('form.submit')), {'type': 'submit', 'btn_type': 'primary'}|merge(opt|default({}))) }}
{%- endmacro %}

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

@ -26,7 +26,7 @@
['light', 'dark'],
['dark', 'light'],
] %}
{% set types_buttons=types|merge(['link']) %}
{% set types_buttons=['link']|merge(types) %}
{% set shortsum='Lorem ipsum dolor…' %}
{% set lipsum='Lorem ipsum dolor sit amet, consectetur adipisici elit…' %}
{% set linksum='Lorem ipsum! Dolor <a href="#">link</a> amet, consectetur adipisici elit!' %}

4
resources/views/pages/faq/edit.twig
View File

@ -51,11 +51,11 @@
<div class="col-md-12">
<h2>{{ __('form.preview') }}</h2>
<div class="card {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %}">
<div class="card {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %}">
<div class="card-header">
{{ faq.question }}
</div>
<div class="card-body {{ m.type_bg_class() }}">
<div class="card-body bg-body">
{{ faq.text|markdown }}
</div>
</div>

6
resources/views/pages/faq/overview.twig
View File

@ -30,7 +30,7 @@
{% for item in items %}
<div class="col-md-12 faq">
<span id="faq-{{ item.id }}" class="ref-id"></span>
<div class="card {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %} mb-4">
<div class="card {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %} mb-4">
<h4 class="card-header">
{{ item.question }}
<small class="text-muted">
@ -38,11 +38,11 @@
</small>
</h4>
<div class="card-body {{ m.type_bg_class() }}">
<div class="card-body bg-body">
{{ item.text|markdown }}
</div>
<div class="card-footer d-flex align-items-center">
<div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %} d-flex align-items-center">
<div class="me-3">
{{ m.icon('clock') }} {{ item.updated_at.format(__('Y-m-d H:i')) }}
</div>

28
resources/views/pages/login.twig
View File

@ -29,8 +29,8 @@
</div>
<div class="row mb-5">
<div class="col-sm-6 offset-sm-6 col-md-4 offset-md-4">
<div class="card bg-dark">
<div class="col-md-6 offset-md-3 col-lg-4 offset-lg-4">
<div class="card {{ m.type_bg_class() }}">
<div class="card-body">
{% include 'layouts/parts/messages.twig' %}
@ -38,7 +38,7 @@
{{ csrf() }}
<div class="mb-3">
<div class="input-group input-group-lg">
<span class="input-group-text text-light">
<span class="input-group-text {{ m.type_text_class() }}">
{{ m.angel }}
</span>
<input
@ -54,7 +54,7 @@
<div class="mb-3">
<div class="input-group input-group-lg">
<span class="input-group-text text-light">
<span class="input-group-text {{ m.type_text_class() }}">
<i class="bi bi-key"></i>
</span>
<input
@ -71,15 +71,17 @@
</div>
{% if config('oauth') is not empty %}
<div class="mb-3 btn-group btn-group-justified">
{% for name,config in config('oauth') %}
<a href="{{ url('oauth/' ~ name) }}" class="btn btn-primary btn-lg{% if config.hidden|default(false) %} d-none{% endif %}">
{{ __(
'oauth.login-using-provider',
[__(config.name|default(name|capitalize))]
) }}
</a>
{% endfor %}
<div class="row">
<div class="mb-3 btn-group">
{% for name,config in config('oauth') %}
<a href="{{ url('oauth/' ~ name) }}" class="btn btn-primary btn-lg{% if config.hidden|default(false) %} d-none{% endif %}">
{{ __(
'oauth.login-using-provider',
[__(config.name|default(name|capitalize))]
) }}
</a>
{% endfor %}
</div>
</div>
{% endif %}

2
resources/views/pages/news/edit.twig
View File

@ -70,7 +70,7 @@
{% if news.is_meeting %}{{ __('news.is_meeting') }}{% endif %}
{{ news.title }}
</div>
<div class="card-body {{ m.type_bg_class() }}">
<div class="card-body bg-body">
{{ news.text|raw|markdown(false) }}
</div>
</div>

2
resources/views/pages/news/news.twig
View File

@ -17,7 +17,7 @@
<div class="card-body {{ m.type_bg_class() }}">
{{ comment.text|nl2br }}
</div>
<div class="card-footer text-muted d-flex align-items-center">
<div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %} text-muted d-flex align-items-center">
<div class="me-3">
{{ m.icon('clock') }}
{{ comment.created_at.format(__('Y-m-d H:i')) }}

6
resources/views/pages/news/overview.twig
View File

@ -48,7 +48,7 @@
{% endblock %}
{% macro news(news, show_comments_link, is_overview) %}
<div class="card {% if news.is_meeting %}bg-info{% else %}{% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %}{% endif %} mb-4">
<div class="card {% if news.is_meeting %}bg-info{% else %}{% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %}{% endif %} mb-4">
{% if is_overview|default(false) %}
<div class="card-header {% if news.is_meeting and theme.type == 'dark' %}text-white{% endif %}">
<a href="{{ url('news/' ~ news.id) }}" class="text-inherit">
@ -59,11 +59,11 @@
</div>
{% endif %}
<div class="card-body {{ m.type_bg_class() }}">
<div class="card-body bg-body">
{{ news.text|raw|markdown(false) }}
</div>
<div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %} text-muted">
<div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %} text-muted">
{% if news.updated_at != news.created_at and not is_overview %}
<div class="d-flex align-items-center">
<div class="me-3">

4
resources/views/pages/questions/edit.twig
View File

@ -56,7 +56,7 @@
<h2>{{ __('form.preview') }}</h2>
<div class="card {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %} mb-4">
<div class="card-body {{ m.type_bg_class() }}">
<div class="card-body bg-body">
{{ question.text|nl2br }}
</div>
</div>
@ -65,7 +65,7 @@
{% if question.answer %}
<div class="col-md-11 offset-md-1">
<div class="card bg-info">
<div class="card-body {{ m.type_bg_class() }}">
<div class="card-body bg-body">
{{ question.answer|markdown }}
</div>
</div>

8
resources/views/pages/questions/overview.twig
View File

@ -28,11 +28,11 @@
<div class="row mb-4">
<div class="col-md-12">
<div class="card {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %}">
<div class="card-body {{ m.type_bg_class() }}">
<div class="card-body bg-body">
{{ question.text|nl2br }}
</div>
<div class="card-footer d-flex align-items-center">
<div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %} d-flex align-items-center">
<div class="me-3">
{{ m.icon('clock') }} {{ question.created_at.format(__('Y-m-d H:i')) }}
</div>
@ -65,10 +65,10 @@
{% if question.answer %}
<div class="col-md-11 offset-md-1 mt-3">
<div class="card bg-info">
<div class="card-body {{ m.type_bg_class() }}">
<div class="card-body bg-body">
{{ question.answer|markdown }}
</div>
<div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %} d-flex align-items-center">
<div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %} d-flex align-items-center">
<div class="me-3">
{{ m.icon('clock') }} {{ question.updated_at.format(__('Y-m-d H:i')) }}
</div>

6
resources/views/pages/user-shifts.html
View File

@ -39,18 +39,18 @@
</div>
</div>
<div class="form-group d-print-none" style="margin-top: .5em">
<div class="btn-group">
<div class="btn-group mb-1">
<a href="javascript:setDay(-1)" class="btn btn-secondary ">%set_yesterday%</a>
<a href="javascript:setDay()" class="btn btn-secondary ">%set_today%</a>
<a href="javascript:setDay(1)" class="btn btn-secondary ">%set_tomorrow%</a>
</div>
<div class="btn-group">
<div class="btn-group mb-1">
<a href="javascript:setHours(-8)" class="btn btn-secondary ">%set_last_8h%</a>
<a href="javascript:setHours(-4)" class="btn btn-secondary ">%set_last_4h%</a>
<a href="javascript:setHours(4)" class="btn btn-secondary ">%set_next_4h%</a>
<a href="javascript:setHours(8)" class="btn btn-secondary ">%set_next_8h%</a>
</div>
<div class="btn-group">
<div class="btn-group mb-1">
%buttons%
</div>
</div>