migrate panels to cards

This commit is contained in:
Michael Weimann 2021-07-24 12:38:23 +02:00
parent 19fc114cf7
commit 4428266488
No known key found for this signature in database
GPG Key ID: 34F0524D4DA694A1
20 changed files with 179 additions and 125 deletions

View File

@ -109,66 +109,82 @@ return [
'themes' => [
15 => [
'name' => 'Engelsystem DiVOC R2R',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
14 => [
'name' => 'Engelsystem rC3 teal (2020)',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
13 => [
'name' => 'Engelsystem rC3 violet (2020)',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
12 => [
'name' => 'Engelsystem 36c3 (2019)',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
10 => [
'name' => 'Engelsystem cccamp19 green (2019)',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
9 => [
'name' => 'Engelsystem cccamp19 yellow (2019)',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
8 => [
'name' => 'Engelsystem cccamp19 blue (2019)',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
7 => [
'name' => 'Engelsystem 35c3 dark (2018)',
'type' => 'dark',
'navbar_classes' => 'navbar-primary bg-black border-primary',
],
6 => [
'name' => 'Engelsystem 34c3 dark (2017)',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
5 => [
'name' => 'Engelsystem 34c3 light (2017)',
'type' => 'light',
'navbar_classes' => 'navbar-light bg-light',
],
4 => [
'name' => 'Engelsystem 33c3 (2016)',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-darker border-dark',
],
3 => [
'name' => 'Engelsystem 32c3 (2015)',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
2 => [
'name' => 'Engelsystem cccamp15',
'type' => 'light',
'navbar_classes' => 'navbar-light bg-light',
],
11 => [
'name' => 'Engelsystem high contrast',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
0 => [
'name' => 'Engelsystem light',
'type' => 'light',
'navbar_classes' => 'navbar-light bg-light',
],
1 => [
'name' => 'Engelsystem dark',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
],

View File

@ -16,7 +16,7 @@ function user_angeltypes_unconfirmed_hint()
$unconfirmed_links = [];
foreach ($unconfirmed_user_angeltypes as $user_angeltype) {
$unconfirmed_links[] = '<a href="'
$unconfirmed_links[] = '<a class="text-info" href="'
. page_link_to('angeltypes', ['action' => 'view', 'angeltype_id' => $user_angeltype['angeltype_id']])
. '">' . $user_angeltype['name']
. ' (+' . $user_angeltype['count'] . ')'

View File

@ -24,7 +24,7 @@ function user_driver_license_required_hint()
if ($angeltype['requires_driver_license']) {
return sprintf(
__('You joined an angeltype which requires a driving license. Please edit your driving license information here: %s.'),
'<a href="' . user_driver_license_edit_link() . '">' . __('driving license information') . '</a>'
'<a href="' . user_driver_license_edit_link() . '" class="text-info">' . __('driving license information') . '</a>'
);
}
}

View File

@ -239,7 +239,7 @@ function admin_new_questions()
return null;
}
return '<a href="' . page_link_to('/admin/questions') . '">'
return '<a class="text-info" href="' . page_link_to('/admin/questions') . '">'
. __('There are unanswered questions!')
. '</a>';
}

View File

@ -252,21 +252,20 @@ EOT;
function toolbar_popover($icon, $label, $content, $class = '')
{
$dom_id = md5(microtime() . $icon . $label);
return '<li class="dropdown messages ' . $class . '">'
. '<a id="' . $dom_id . '" href="#" tabindex="0">'
return '<li class="nav-item nav-item--userhints d-flex align-items-center ' . $class . '">'
. '<a id="' . $dom_id . '" href="#" tabindex="0" class="nav-link">'
. ($icon ? icon($icon) : '')
. $label
. ' <span class="caret"></span></a>'
. '<small class="bi bi-caret-down-fill"></small>'
. '</a>'
. '<script type="text/javascript">
$(function(){
$(\'#' . $dom_id . '\').popover({
trigger: \'click\',
html: true,
content: \'' . addslashes(join('', $content)) . '\',
placement: \'bottom\',
container: \'#navbar-offcanvas\'
})
});
new bootstrap.Popover(document.getElementById(\'' . $dom_id . '\'), {
container: \'body\',
html: true,
content: \'' . addslashes(join('', $content)) . '\',
placement: \'bottom\',
customClass: \'popover--userhints\'
})
</script></li>';
}

View File

@ -21,7 +21,7 @@ class UserHintsRenderer
$icon = $this->important ? 'exclamation-triangle' : 'info-circle';
return toolbar_popover(
$icon . ' text-' . $hint_class, '', $this->hints, 'bg-' . $hint_class
$icon . ' text-white', '', $this->hints, 'bg-' . $hint_class
);
}

View File

@ -934,7 +934,7 @@ function render_user_departure_date_hint()
{
if (config('enable_planned_arrival') && !auth()->user()->personalData->planned_departure_date) {
$text = __('Please enter your planned date of departure on your settings page to give us a feeling for teardown capacities.');
return render_profile_link($text, null, 'alert-link');
return render_profile_link($text, null, 'text-danger');
}
return null;
@ -980,7 +980,7 @@ function render_user_tshirt_hint()
{
if (config('enable_tshirt_size') && !auth()->user()->personalData->shirt_size) {
$text = __('You need to specify a tshirt size in your settings!');
return render_profile_link($text, null, 'alert-link');
return render_profile_link($text, null, 'text-danger');
}
return null;
@ -994,7 +994,7 @@ function render_user_dect_hint()
$user = auth()->user();
if ($user->state->arrived && config('enable_dect') && !$user->contact->dect) {
$text = __('You need to specify a DECT phone number in your settings! If you don\'t have a DECT phone, just enter \'-\'.');
return render_profile_link($text, null, 'alert-link');
return render_profile_link($text, null, 'text-danger');
}
return null;

View File

@ -1,7 +1,7 @@
require('core-js/stable');
window.$ = window.jQuery = require('jquery');
require('jquery-ui');
require('bootstrap');
window.bootstrap = require('bootstrap');
window.moment = require('moment');
require('moment/locale/de');
require('eonasdan-bootstrap-datetimepicker');

View File

@ -32,6 +32,14 @@ body {
color: $text-muted;
}
.text-inherit {
color: inherit;
&:hover {
color: inherit;
}
}
.text-big {
display: block;
font-size: 30px;
@ -62,6 +70,14 @@ a .icon-icon_angel {
background-color: $body-color;
}
.nav-item--userhints {
margin: -$navbar-padding-y 0;
}
.popover--userhints .alert:last-of-type {
margin-bottom: 0;
}
table a > .icon-icon_angel {
background-color: $body-color;
}
@ -291,6 +307,10 @@ span.ref-id[id] {
}
}
.card-body > *:last-child {
margin-bottom: 0;
}
@keyframes pulse {
0% {
transform: rotate(0deg);

View File

@ -72,7 +72,7 @@ $font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-se
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-family-base: $font-family-sans-serif;
$font-size-base: .875rem;
$font-size-base: 1rem;
$font-size-large: ceil(($font-size-base * 1.25)); // ~18px
$font-size-small: ceil(($font-size-base * 0.85)); // ~12px
@ -84,7 +84,8 @@ $font-size-h5: 20px;
$font-size-h6: 16px;
//** Unit-less `line-height` for use in components like buttons.
$line-height-base: 1.428571429; // 20/14
$line-height-base: 1.5;
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
$line-height-computed: floor(($font-size-base * $line-height-base)); // ~20px

View File

@ -1,2 +1,6 @@
// light
// light theme
$primary: #337ab7;
$light: #f5f5f5;
@import "base.scss";

View File

@ -8,11 +8,12 @@ $gray-dark: #282828;
$gray-light: #888;
$gray-lighter: #ADAFAE;
$primary: #437aca;
$success: #00c960;
$info: #3dbddf;
$warning: #f6b345;
$danger: #e93a44;
$primary: #437aca;
$secondary: #424242;
$success: #00c960;
$info: #3dbddf;
$warning: #f6b345;
$danger: #e93a44;
$text-muted: $gray-light;
@ -63,6 +64,11 @@ $alert-color-scale: 0%;
.alert {
color: #fff !important;
.text-danger,
.text-info {
color: #fff !important;
}
}
// dark

View File

@ -2,8 +2,8 @@
<span class="icon-icon_angel bg-light"></span>
{% endmacro %}
{% macro icon(icon) %}
<span class="bi bi-{{ icon }}"></span>
{% macro icon(icon, color) %}
<span class="bi bi-{{ icon }} {% if color %} text-{{ color }} {% endif %}"></span>
{% endmacro %}
{% macro alert(message, type) %}
@ -27,3 +27,7 @@
{% macro info(text) %}
<span class="help-block">{{ _self.icon('info-lg') }}{{ text }}</span>
{%- endmacro %}
{% macro type_bg_class() -%}
{% if theme.type == 'light' %}bg-white{% else %}bg-dark{% endif %}
{%- endmacro %}

View File

@ -29,7 +29,7 @@
<form action="" enctype="multipart/form-data" method="post">
{{ csrf() }}
<div class="row">
<div class="row mb-4">
<div class="col-md-12">
{{ f.input('question', __('faq.question'), null, {'required': true, 'value': faq ? faq.question : ''}) }}
</div>
@ -38,7 +38,7 @@
{{ f.submit() }}
{{ f.submit(m.icon('eye-slash'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
{{ f.submit(m.icon('eye'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
{% if faq and faq.id %}
{{ f.submit(m.icon('trash'), {'name': 'delete', 'btn_type': 'danger', 'title': __('form.delete')}) }}
@ -51,12 +51,11 @@
<div class="col-md-12">
<h2>{{ __('form.preview') }}</h2>
<div class="panel panel-default">
<div class="panel-heading">
<div class="card {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %}">
<div class="card-header">
{{ faq.question }}
</div>
<div class="panel-body">
<div class="card-body {{ m.type_bg_class() }}">
{{ faq.text|markdown }}
</div>
</div>

View File

@ -30,26 +30,26 @@
{% for item in items %}
<div class="col-md-12 faq">
<span id="faq-{{ item.id }}" class="ref-id"></span>
<div class="panel panel-default">
<div class="panel-heading">
<h3>
{{ item.question }}
<small class="text-muted">
<a class="ref-link" href="#faq-{{ item.id }}">{{ m.icon('link') }}</a>
</small>
</h3>
<div class="card {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %} mb-4">
<div class="card-header">
{{ item.question }}
<small class="text-muted">
<a class="ref-link" href="#faq-{{ item.id }}">{{ m.icon('link') }}</a>
</small>
</div>
<div class="panel-body">
<div class="card-body {{ m.type_bg_class() }}">
{{ item.text|markdown }}
</div>
<div class="panel-footer">
{{ m.icon('clock') }} {{ item.updated_at.format(__('Y-m-d H:i')) }}
<div class="card-footer d-flex align-items-center">
<div class="me-3">
{{ m.icon('clock') }} {{ item.updated_at.format(__('Y-m-d H:i')) }}
</div>
{% if has_permission_to('faq.edit') %}
<span class="pull-right">
{{ m.button(m.icon('pencil-square'), url('admin/faq/' ~ item.id), null, 'sm') }}
<span class="ms-auto">
{{ m.button(m.icon('pencil-square'), url('admin/faq/' ~ item.id), 'secondary', 'sm') }}
</span>
{% endif %}
</div>

View File

@ -46,13 +46,13 @@
</div>
</div>
<div class="row">
<div class="row mb-4">
<div class="col-md-12">
{{ f.textarea('text', __('news.edit.message'), {'required': true, 'rows': 10, 'value': news ? news.text : ''}) }}
{{ f.submit() }}
{{ f.submit(m.icon('eye-slash'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
{{ f.submit(m.icon('eye'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
{% if news and news.id %}
{{ f.submit(m.icon('trash'), {'name': 'delete', 'btn_type': 'danger', 'title': __('form.delete')}) }}
@ -65,15 +65,12 @@
<div class="col-md-12">
<h2>{{ __('form.preview') }}</h2>
<div class="panel {% if not news.is_meeting %}panel-default{% else %}panel-info{% endif %}">
<div class="panel-heading">
<h3 class="panel-title">
{% if news.is_meeting %}{{ __('news.is_meeting') }}{% endif %}
{{ news.title }}
</h3>
<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-header {% if news.is_meeting and theme.type == 'dark' %}text-white{% endif %}">
{% if news.is_meeting %}{{ __('news.is_meeting') }}{% endif %}
{{ news.title }}
</div>
<div class="panel-body">
<div class="card-body {{ m.type_bg_class() }}">
{{ news.text|raw|markdown(false) }}
</div>
</div>

View File

@ -9,18 +9,19 @@
{% endblock %}
{% block comments %}
<div class="col-md-12">
<div class="col-md-12 mt-4">
<h2>{{ __('news.comments') }}</h2>
{% for comment in news.comments %}
<div class="panel panel-default">
<div class="panel-body">
<div class="card {% if theme.type == 'light' %}bg-light{% else %}bg-secondary{% endif %} mb-4">
<div class="card-body {{ m.type_bg_class() }}">
{{ comment.text|nl2br }}
</div>
<div class="panel-footer text-muted">
{{ m.icon('clock') }}
{{ comment.created_at.format(__('Y-m-d H:i')) }}
<div class="card-footer text-muted d-flex align-items-center">
<div class="me-3">
{{ m.icon('clock') }}
{{ comment.created_at.format(__('Y-m-d H:i')) }}
</div>
{{ m.user(comment.user) }}
</div>
</div>
@ -30,14 +31,12 @@
{% block write_comment %}
{% if has_permission_to('news_comments') %}
<div class="col-md-12">
<div class="col-md-12 mt-4">
<h3>{{ __('news.comments.new') }}</h3>
<form action="" enctype="multipart/form-data" method="post">
{{ csrf() }}
{{ f.textarea('comment', __('news.comments.message'), {'required': true}) }}
{{ f.submit() }}
</form>
</div>

View File

@ -48,48 +48,53 @@
{% endblock %}
{% macro news(news, show_comments_link, is_overview) %}
<div class="panel {% if not news.is_meeting %}panel-default{% else %}panel-info{% endif %}">
<div class="card {% if news.is_meeting %}bg-info{% else %}{% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %}{% endif %} mb-4">
{% if is_overview|default(false) %}
<div class="panel-heading">
<h3 class="panel-title">
<a href="{{ url('news/' ~ news.id) }}">
{% if news.is_pinned %}{{ m.icon('pin-angle') }}{% endif %}
{% if news.is_meeting %}{{ __('news.is_meeting') }}{% endif %}
{{ news.title }}
</a>
</h3>
<div class="card-header {% if news.is_meeting and theme.type == 'dark' %}text-white{% endif %}">
<a href="{{ url('news/' ~ news.id) }}" class="text-inherit">
{% if news.is_pinned %}{{ m.icon('pin-angle') }}{% endif %}
{% if news.is_meeting %}{{ __('news.is_meeting') }}{% endif %}
{{ news.title }}
</a>
</div>
{% endif %}
<div class="panel-body">
<div class="card-body {{ m.type_bg_class() }}">
{{ news.text|raw|markdown(false) }}
</div>
<div class="panel-footer text-muted">
{{ m.icon('clock') }} {{ news.updated_at.format(__('Y-m-d H:i')) }}
<div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %} text-muted">
{% if news.updated_at != news.created_at and not is_overview %}
&emsp;{{ __('news.updated') }}
<br>
{{ m.icon('clock') }} {{ news.created_at.format(__('Y-m-d H:i')) }}
{% endif %}
&emsp;{{ m.user(news.user) }}
{% if show_comments_link|default(false) %}
&ensp;
<a href="{{ url('news/' ~ news.id) }}">
{{ m.icon('chat-left-text') }} {{ __('news.comments') }} &raquo;
</a>
<span class="badge">{{ news.comments.count() }}</span>
{% endif %}
{% if has_permission_to('admin_news') %}
<div class="pull-right">
{{ m.button(m.icon('pencil-square'), url('admin/news/' ~ news.id), null, 'sm') }}
<div class="d-flex align-items-center">
<div class="me-3">
{{ m.icon('clock') }} {{ news.created_at.format(__('Y-m-d H:i')) }}
</div>
{{ __('news.updated') }}
</div>
{% endif %}
<div class="d-flex align-items-center">
<div class="me-3">
{{ m.icon('clock') }} {{ news.updated_at.format(__('Y-m-d H:i')) }}
</div>
<div class="me-3">
{{ m.user(news.user) }}
</div>
{% if show_comments_link|default(false) %}
<a href="{{ url('news/' ~ news.id) }}" class="me-1">
{{ m.icon('chat-left-text') }} {{ __('news.comments') }}
</a>
<span class="badge bg-primary">{{ news.comments.count() }}</span>
{{ m.icon('chevron-double-right', 'primary') }}
{% endif %}
{% if has_permission_to('admin_news') %}
<div class="ms-auto">
{{ m.button(m.icon('pencil-square'), url('admin/news/' ~ news.id), 'secondary', 'sm') }}
</div>
{% endif %}
</div>
</div>
</div>
{% endmacro %}

View File

@ -41,7 +41,7 @@
{{ f.submit() }}
{% if is_admin|default(false) %}
{{ f.submit(m.icon('eye-slash'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
{{ f.submit(m.icon('eye'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
{% if question and question.id %}
{{ f.submit(m.icon('trash'), {'name': 'delete', 'btn_type': 'danger', 'title': __('form.delete')}) }}
@ -51,21 +51,21 @@
</div>
{% if question %}
<div class="row">
<div class="row mt-3">
<div class="col-md-12">
<h2>{{ __('form.preview') }}</h2>
<div class="panel panel-default">
<div class="panel-body">
<div class="card {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %} mb-4">
<div class="card-body {{ m.type_bg_class() }}">
{{ question.text|nl2br }}
</div>
</div>
</div>
{% if question.answer %}
<div class="col-md-11 col-md-offset-1">
<div class="panel panel-info">
<div class="panel-body">
<div class="col-md-11 offset-md-1">
<div class="card bg-info">
<div class="card-body {{ m.type_bg_class() }}">
{{ question.answer|markdown }}
</div>
</div>

View File

@ -25,26 +25,29 @@
<div class="col-md-12">
{% block questions %}
{% for question in questions %}
<div class="row">
<div class="row mb-4">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="card {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %}">
<div class="card-body {{ m.type_bg_class() }}">
{{ question.text|nl2br }}
</div>
<div class="panel-footer">
{{ m.icon('clock') }} {{ question.created_at.format(__('Y-m-d H:i')) }}
<div class="card-footer d-flex align-items-center">
<div class="me-3">
{{ m.icon('clock') }} {{ question.created_at.format(__('Y-m-d H:i')) }}
</div>
{% if has_permission_to('question.edit') %}
&nbsp;{{ m.user(question.user) }}
{{ m.user(question.user) }}
<div class="d-flex ms-auto">
{% endif %}
{% if question.user.id == user.id or has_permission_to('question.edit') %}
<form
class="pe-1"
action=""
enctype="multipart/form-data"
method="post"
class="pull-right"
>
{{ csrf() }}
{{ f.hidden('id', question.id) }}
@ -53,27 +56,28 @@
{% endif %}
{% if has_permission_to('question.edit') %}
<span class="pull-right">
{{ m.button(m.icon('pencil-square'), url('admin/questions/' ~ question.id), null, 'sm') }}
</span>
{{ m.button(m.icon('pencil-square'), url('admin/questions/' ~ question.id), null, 'sm') }}
</div>
{% endif %}
</div>
</div>
</div>
{% if question.answer %}
<div class="col-md-11 col-md-offset-1">
<div class="panel panel-info">
<div class="panel-body">
<div class="col-md-11 offset-md-1 mt-3">
<div class="card bg-info">
<div class="card-body {{ m.type_bg_class() }}">
{{ question.answer|markdown }}
</div>
<div class="panel-footer">
{{ m.icon('clock') }} {{ question.updated_at.format(__('Y-m-d H:i')) }}
&nbsp;{{ m.user(question.answerer) }}
<div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %} d-flex align-items-center">
<div class="me-3">
{{ m.icon('clock') }} {{ question.updated_at.format(__('Y-m-d H:i')) }}
</div>
{{ m.user(question.answerer) }}
</div>
</div>
</div>
{% endif %}
</div>
</div> <!-- row -->
{% endfor %}
{% endblock %}
</div>