Merge pull request #3 from gnieark/someCSS

basic css
This commit is contained in:
Gnieark 2019-12-27 15:36:05 +01:00 committed by GitHub
commit 375cbbc281
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 530 additions and 46 deletions

View File

@ -1,2 +1,3 @@
twig: twig:
default_path: '%kernel.project_dir%/templates' default_path: '%kernel.project_dir%/templates'
form_themes: ['form/simpleForm.html.twig']

48
public/css/style.css Normal file
View File

@ -0,0 +1,48 @@
body{
top: 0px;
word-wrap:break-word;
text-rendering:optimizelegibility;
margin:0 auto;font-family : "lucida grande", "gill sans", arial, sans-serif;
margin-left: 1em;
margin-right: 1em;
margin-top: 1em;
display: grid;
grid-template-areas: "header header"
"contentFull contentFull"
"nav content"
"footer footer";
grid-template-columns: 20em auto;
}
body header {
grid-area: header;
text-align: center;
}
body nav {
grid-area: nav;
}
section#main {
grid-area: content;
}
section.overnav{
grid-area: contentFull;
justify-self: center;
}
body footer {
grid-area: footer;
}
form{
display: grid;
grid-template-columns: 15em 30em;
}
form label {
grid-column: 1 / 2;
}
form input, form button {
grid-column: 2 / 3;
}

View File

@ -43,10 +43,10 @@ class SecurityController extends AbstractController
private function getRegisterForm() private function getRegisterForm()
{ {
return $this->createFormBuilder() return $this->createFormBuilder()
->add('email', EmailType::class) ->add('email', EmailType::class,[])
->add('password', PasswordType::class, []) ->add('password', PasswordType::class, [])
->add('display_name', TextType::class,[]) ->add('display_name', TextType::class,[])
->add('save', SubmitType::class) ->add('save', SubmitType::class,[])
->getForm(); ->getForm();
} }

View File

@ -2,12 +2,21 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
{% block stylesheets %}{% endblock %} <title>{% block title %}Resources manager{% endblock %}</title>
{% block stylesheets %}
<link href="{{ asset('/css/style.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
</head> </head>
<body> <body>
<header>{% block header %}<h1>Resources booking manager</h1>{% endblock %}</header> <header>{% block header %}<h1>Resources booking manager</h1>{% endblock %}</header>
{% block body %}{% endblock %} <nav></nav>
{% block overcontent %}
<section id="main">
{% block content %}{% endblock %}
</section>
{% endblock %}
<footer></footer>
{% block javascripts %}{% endblock %} {% block javascripts %}{% endblock %}
</body> </body>
</html> </html>

View File

@ -0,0 +1,453 @@
{# Widgets #}
{%- block form_widget -%}
{% if compound %}
{{- block('form_widget_compound') -}}
{% else %}
{{- block('form_widget_simple') -}}
{% endif %}
{%- endblock form_widget -%}
{%- block form_widget_simple -%}
{%- set type = type|default('text') -%}
{%- if type == 'range' or type == 'color' -%}
{# Attribute "required" is not supported #}
{%- set required = false -%}
{%- endif -%}
<input type="{{ type }}" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
{%- endblock form_widget_simple -%}
{%- block form_widget_compound -%}
{%- if form is rootform -%}
{{ form_errors(form) }}
{%- endif -%}
{{- block('form_rows') -}}
{{- form_rest(form) -}}
{%- endblock form_widget_compound -%}
{%- block collection_widget -%}
{% if prototype is defined and not prototype.rendered %}
{%- set attr = attr|merge({'data-prototype': form_row(prototype) }) -%}
{% endif %}
{{- block('form_widget') -}}
{%- endblock collection_widget -%}
{%- block textarea_widget -%}
<textarea {{ block('widget_attributes') }}>{{ value }}</textarea>
{%- endblock textarea_widget -%}
{%- block choice_widget -%}
{% if expanded %}
{{- block('choice_widget_expanded') -}}
{% else %}
{{- block('choice_widget_collapsed') -}}
{% endif %}
{%- endblock choice_widget -%}
{%- block choice_widget_expanded -%}
{%- for child in form %}
{{- form_widget(child) -}}
{{- form_label(child, null, {translation_domain: choice_translation_domain}) -}}
{% endfor -%}
{%- endblock choice_widget_expanded -%}
{%- block choice_widget_collapsed -%}
{%- if required and placeholder is none and not placeholder_in_choices and not multiple and (attr.size is not defined or attr.size <= 1) -%}
{% set required = false %}
{%- endif -%}
<select {{ block('widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}>
{%- if placeholder is not none -%}
<option value=""{% if required and value is empty %} selected="selected"{% endif %}>{{ placeholder != '' ? (translation_domain is same as(false) ? placeholder : placeholder|trans({}, translation_domain)) }}</option>
{%- endif -%}
{%- if preferred_choices|length > 0 -%}
{% set options = preferred_choices %}
{{- block('choice_widget_options') -}}
{%- if choices|length > 0 and separator is not none -%}
<option disabled="disabled">{{ separator }}</option>
{%- endif -%}
{%- endif -%}
{%- set options = choices -%}
{{- block('choice_widget_options') -}}
</select>
{%- endblock choice_widget_collapsed -%}
{%- block choice_widget_options -%}
{% for group_label, choice in options %}
{%- if choice is iterable -%}
<optgroup label="{{ choice_translation_domain is same as(false) ? group_label : group_label|trans({}, choice_translation_domain) }}">
{% set options = choice %}
{{- block('choice_widget_options') -}}
</optgroup>
{%- else -%}
<option value="{{ choice.value }}"{% if choice.attr %}{% with { attr: choice.attr } %}{{ block('attributes') }}{% endwith %}{% endif %}{% if choice is selectedchoice(value) %} selected="selected"{% endif %}>{{ choice_translation_domain is same as(false) ? choice.label : choice.label|trans({}, choice_translation_domain) }}</option>
{%- endif -%}
{% endfor %}
{%- endblock choice_widget_options -%}
{%- block checkbox_widget -%}
<input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
{%- endblock checkbox_widget -%}
{%- block radio_widget -%}
<input type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
{%- endblock radio_widget -%}
{%- block datetime_widget -%}
{% if widget == 'single_text' %}
{{- block('form_widget_simple') -}}
{%- else -%}
{{- form_errors(form.date) -}}
{{- form_errors(form.time) -}}
{{- form_widget(form.date) -}}
{{- form_widget(form.time) -}}
{%- endif -%}
{%- endblock datetime_widget -%}
{%- block date_widget -%}
{%- if widget == 'single_text' -%}
{{ block('form_widget_simple') }}
{%- else -%}
{{- date_pattern|replace({
'{{ year }}': form_widget(form.year),
'{{ month }}': form_widget(form.month),
'{{ day }}': form_widget(form.day),
})|raw -}}
{%- endif -%}
{%- endblock date_widget -%}
{%- block time_widget -%}
{%- if widget == 'single_text' -%}
{{ block('form_widget_simple') }}
{%- else -%}
{%- set vars = widget == 'text' ? { 'attr': { 'size': 1 }} : {} -%}
{{ form_widget(form.hour, vars) }}{% if with_minutes %}:{{ form_widget(form.minute, vars) }}{% endif %}{% if with_seconds %}:{{ form_widget(form.second, vars) }}{% endif %}
{%- endif -%}
{%- endblock time_widget -%}
{%- block dateinterval_widget -%}
{%- if widget == 'single_text' -%}
{{- block('form_widget_simple') -}}
{%- else -%}
{{- form_errors(form) -}}
<table class="{{ table_class|default('') }}" role="presentation">
<thead>
<tr>
{%- if with_years %}<th>{{ form_label(form.years) }}</th>{% endif -%}
{%- if with_months %}<th>{{ form_label(form.months) }}</th>{% endif -%}
{%- if with_weeks %}<th>{{ form_label(form.weeks) }}</th>{% endif -%}
{%- if with_days %}<th>{{ form_label(form.days) }}</th>{% endif -%}
{%- if with_hours %}<th>{{ form_label(form.hours) }}</th>{% endif -%}
{%- if with_minutes %}<th>{{ form_label(form.minutes) }}</th>{% endif -%}
{%- if with_seconds %}<th>{{ form_label(form.seconds) }}</th>{% endif -%}
</tr>
</thead>
<tbody>
<tr>
{%- if with_years %}<td>{{ form_widget(form.years) }}</td>{% endif -%}
{%- if with_months %}<td>{{ form_widget(form.months) }}</td>{% endif -%}
{%- if with_weeks %}<td>{{ form_widget(form.weeks) }}</td>{% endif -%}
{%- if with_days %}<td>{{ form_widget(form.days) }}</td>{% endif -%}
{%- if with_hours %}<td>{{ form_widget(form.hours) }}</td>{% endif -%}
{%- if with_minutes %}<td>{{ form_widget(form.minutes) }}</td>{% endif -%}
{%- if with_seconds %}<td>{{ form_widget(form.seconds) }}</td>{% endif -%}
</tr>
</tbody>
</table>
{%- if with_invert %}{{ form_widget(form.invert) }}{% endif -%}
{%- endif -%}
{%- endblock dateinterval_widget -%}
{%- block number_widget -%}
{# type="number" doesn't work with floats in localized formats #}
{%- set type = type|default('text') -%}
{{ block('form_widget_simple') }}
{%- endblock number_widget -%}
{%- block integer_widget -%}
{%- set type = type|default('number') -%}
{{ block('form_widget_simple') }}
{%- endblock integer_widget -%}
{%- block money_widget -%}
{{ money_pattern|form_encode_currency(block('form_widget_simple')) }}
{%- endblock money_widget -%}
{%- block url_widget -%}
{%- set type = type|default('url') -%}
{{ block('form_widget_simple') }}
{%- endblock url_widget -%}
{%- block search_widget -%}
{%- set type = type|default('search') -%}
{{ block('form_widget_simple') }}
{%- endblock search_widget -%}
{%- block percent_widget -%}
{%- set type = type|default('text') -%}
{{ block('form_widget_simple') }}{% if symbol %} {{ symbol|default('%') }}{% endif %}
{%- endblock percent_widget -%}
{%- block password_widget -%}
{%- set type = type|default('password') -%}
{{ block('form_widget_simple') }}
{%- endblock password_widget -%}
{%- block hidden_widget -%}
{%- set type = type|default('hidden') -%}
{{ block('form_widget_simple') }}
{%- endblock hidden_widget -%}
{%- block email_widget -%}
{%- set type = type|default('email') -%}
{{ block('form_widget_simple') }}
{%- endblock email_widget -%}
{%- block range_widget -%}
{% set type = type|default('range') %}
{{- block('form_widget_simple') -}}
{%- endblock range_widget %}
{%- block button_widget -%}
{%- if label is empty -%}
{%- if label_format is not empty -%}
{% set label = label_format|replace({
'%name%': name,
'%id%': id,
}) %}
{%- elseif label is same as(false) -%}
{% set translation_domain = false %}
{%- else -%}
{% set label = name|humanize %}
{%- endif -%}
{%- endif -%}
<button type="{{ type|default('button') }}" {{ block('button_attributes') }}>{{ translation_domain is same as(false) ? label : label|trans(label_translation_parameters, translation_domain) }}</button>
{%- endblock button_widget -%}
{%- block submit_widget -%}
{%- set type = type|default('submit') -%}
{{ block('button_widget') }}
{%- endblock submit_widget -%}
{%- block reset_widget -%}
{%- set type = type|default('reset') -%}
{{ block('button_widget') }}
{%- endblock reset_widget -%}
{%- block tel_widget -%}
{%- set type = type|default('tel') -%}
{{ block('form_widget_simple') }}
{%- endblock tel_widget -%}
{%- block color_widget -%}
{%- set type = type|default('color') -%}
{{ block('form_widget_simple') }}
{%- endblock color_widget -%}
{%- block week_widget -%}
{%- if widget == 'single_text' -%}
{{ block('form_widget_simple') }}
{%- else -%}
{%- set vars = widget == 'text' ? { 'attr': { 'size': 1 }} : {} -%}
{{ form_widget(form.year, vars) }}-{{ form_widget(form.week, vars) }}
{%- endif -%}
{%- endblock week_widget -%}
{# Labels #}
{%- block form_label -%}
{% if label is not same as(false) -%}
{% if not compound -%}
{% set label_attr = label_attr|merge({'for': id}) %}
{%- endif -%}
{% if required -%}
{% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' required')|trim}) %}
{%- endif -%}
{% if label is empty -%}
{%- if label_format is not empty -%}
{% set label = label_format|replace({
'%name%': name,
'%id%': id,
}) %}
{%- else -%}
{% set label = name|humanize %}
{%- endif -%}
{%- endif -%}
<{{ element|default('label') }}{% if label_attr %}{% with { attr: label_attr } %}{{ block('attributes') }}{% endwith %}{% endif %}>
{%- if translation_domain is same as(false) -%}
{{- label -}}
{%- else -%}
{{- label|trans(label_translation_parameters, translation_domain) -}}
{%- endif -%}
</{{ element|default('label') }}>
{%- endif -%}
{%- endblock form_label -%}
{%- block button_label -%}{%- endblock -%}
{# Help #}
{% block form_help -%}
{%- if help is not empty -%}
{%- set help_attr = help_attr|merge({class: (help_attr.class|default('') ~ ' help-text')|trim}) -%}
<p id="{{ id }}_help"{% with { attr: help_attr } %}{{ block('attributes') }}{% endwith %}>
{%- if translation_domain is same as(false) -%}
{%- if help_html is same as(false) -%}
{{- help -}}
{%- else -%}
{{- help|raw -}}
{%- endif -%}
{%- else -%}
{%- if help_html is same as(false) -%}
{{- help|trans(help_translation_parameters, translation_domain) -}}
{%- else -%}
{{- help|trans(help_translation_parameters, translation_domain)|raw -}}
{%- endif -%}
{%- endif -%}
</p>
{%- endif -%}
{%- endblock form_help %}
{# Rows #}
{%- block repeated_row -%}
{#
No need to render the errors here, as all errors are mapped
to the first child (see RepeatedTypeValidatorExtension).
#}
{{- block('form_rows') -}}
{%- endblock repeated_row -%}
{%- block form_row -%}
{%- set widget_attr = {} -%}
{%- if help is not empty -%}
{%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
{%- endif -%}
{{- form_label(form) -}}
{{- form_errors(form) -}}
{{- form_widget(form, widget_attr) -}}
{{- form_help(form) -}}
{%- endblock form_row -%}
{%- block button_row -%}
{{- form_widget(form) -}}
{%- endblock button_row -%}
{%- block hidden_row -%}
{{ form_widget(form) }}
{%- endblock hidden_row -%}
{# Misc #}
{%- block form -%}
{{ form_start(form) }}
{{- form_widget(form) -}}
{{ form_end(form) }}
{%- endblock form -%}
{%- block form_start -%}
{%- do form.setMethodRendered() -%}
{% set method = method|upper %}
{%- if method in ["GET", "POST"] -%}
{% set form_method = method %}
{%- else -%}
{% set form_method = "POST" %}
{%- endif -%}
<form{% if name != '' %} name="{{ name }}"{% endif %} method="{{ form_method|lower }}"{% if action != '' %} action="{{ action }}"{% endif %}{{ block('attributes') }}{% if multipart %} enctype="multipart/form-data"{% endif %}>
{%- if form_method != method -%}
<input type="hidden" name="_method" value="{{ method }}" />
{%- endif -%}
{%- endblock form_start -%}
{%- block form_end -%}
{%- if not render_rest is defined or render_rest -%}
{{ form_rest(form) }}
{%- endif -%}
</form>
{%- endblock form_end -%}
{%- block form_errors -%}
{%- if errors|length > 0 -%}
<ul>
{%- for error in errors -%}
<li>{{ error.message }}</li>
{%- endfor -%}
</ul>
{%- endif -%}
{%- endblock form_errors -%}
{%- block form_rest -%}
{% for child in form -%}
{% if not child.rendered %}
{{- form_row(child) -}}
{% endif %}
{%- endfor -%}
{% if not form.methodRendered and form is rootform %}
{%- do form.setMethodRendered() -%}
{% set method = method|upper %}
{%- if method in ["GET", "POST"] -%}
{% set form_method = method %}
{%- else -%}
{% set form_method = "POST" %}
{%- endif -%}
{%- if form_method != method -%}
<input type="hidden" name="_method" value="{{ method }}" />
{%- endif -%}
{% endif -%}
{% endblock form_rest %}
{# Support #}
{%- block form_rows -%}
{% for child in form|filter(child => not child.rendered) %}
{{- form_row(child) -}}
{% endfor %}
{%- endblock form_rows -%}
{%- block widget_attributes -%}
id="{{ id }}" name="{{ full_name }}"
{%- if disabled %} disabled="disabled"{% endif -%}
{%- if required %} required="required"{% endif -%}
{{ block('attributes') }}
{%- endblock widget_attributes -%}
{%- block widget_container_attributes -%}
{%- if id is not empty %}id="{{ id }}"{% endif -%}
{{ block('attributes') }}
{%- endblock widget_container_attributes -%}
{%- block button_attributes -%}
id="{{ id }}" name="{{ full_name }}"{% if disabled %} disabled="disabled"{% endif -%}
{{ block('attributes') }}
{%- endblock button_attributes -%}
{% block attributes -%}
{%- for attrname, attrvalue in attr -%}
{{- " " -}}
{%- if attrname in ['placeholder', 'title'] -%}
{{- attrname }}="{{ translation_domain is same as(false) ? attrvalue : attrvalue|trans(attr_translation_parameters, translation_domain) }}"
{%- elseif attrvalue is same as(true) -%}
{{- attrname }}="{{ attrname }}"
{%- elseif attrvalue is not same as(false) -%}
{{- attrname }}="{{ attrvalue }}"
{%- endif -%}
{%- endfor -%}
{%- endblock attributes -%}

View File

@ -1,42 +1,15 @@
{% extends 'base.html.twig' %} {% extends 'base.html.twig' %}
{% block title %}Log in!{% endblock %} {% block title %}Log in{% endblock %}
{% block body %} {% block overcontent %}
<form method="post"> <section class="overnav">
{% if error %} <form method="post">
<div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div> <h2>Please sign in</h2>
{% endif %} <label for="inputEmail">Email</label> <input type="email" value="{{ last_username }}" name="email" id="inputEmail" required autofocus>
<label for="inputPassword">Password</label> <input type="password" name="password" id="inputPassword" required>
{% if app.user %} <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}"/>
<div class="mb-3"> <input type="submit" value="Sign in"/>
You are logged in as {{ app.user.username }}, <a href="{{ path('app_logout') }}">Logout</a> </form>
</div> </section>
{% endif %}
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail">Email</label>
<input type="email" value="{{ last_username }}" name="email" id="inputEmail" class="form-control" required autofocus>
<label for="inputPassword">Password</label>
<input type="password" name="password" id="inputPassword" class="form-control" required>
<input type="hidden" name="_csrf_token"
value="{{ csrf_token('authenticate') }}"
>
{#
Uncomment this section and add a remember_me option below your firewall to activate remember me functionality.
See https://symfony.com/doc/current/security/remember_me.html
<div class="checkbox mb-3">
<label>
<input type="checkbox" name="_remember_me"> Remember me
</label>
</div>
#}
<button class="btn btn-lg btn-primary" type="submit">
Sign in
</button>
</form>
{% endblock %} {% endblock %}

View File

@ -1,8 +1,8 @@
{% extends 'base.html.twig' %} {% extends 'base.html.twig' %}
{% block title %}Register{% endblock %} {% block title %}Register{% endblock %}
{% block header %}<h1>Register a new user</h1>{% endblock %} {% block header %}<h1>Register a new user</h1>{% endblock %}
{% block body %} {% block overcontent %}
<section class="overnav">
{{ form(form) }} {{ form(form) }}
</section>
{% endblock %} {% endblock %}