From 9758c246ad2c942d8597aed4086c86bfba643018 Mon Sep 17 00:00:00 2001 From: rand0mdev Date: Wed, 23 Dec 2020 23:27:50 +0000 Subject: [PATCH] Upgraded to bootswatch 4.5.3 --- assets/admin.js | 29 ++- assets/app.js | 11 +- assets/styles/admin.scss | 13 +- assets/styles/app.scss | 237 ++++++++++++++---- assets/styles/bootstrap-tagsinput.scss | 7 +- package.json | 9 +- templates/admin/blog/index.html.twig | 2 +- templates/admin/blog/show.html.twig | 2 +- templates/admin/layout.html.twig | 8 +- templates/base.html.twig | 80 +++--- templates/blog/_comment_form.html.twig | 2 +- .../blog/_delete_post_confirmation.html.twig | 2 +- templates/blog/_post_tags.html.twig | 2 +- templates/blog/about.html.twig | 2 +- templates/blog/comment_form_error.html.twig | 2 +- templates/blog/index.html.twig | 31 ++- templates/blog/post_show.html.twig | 2 +- templates/debug/source_code.html.twig | 8 +- templates/form/fields.html.twig | 16 +- templates/form/layout.html.twig | 6 +- templates/security/login.html.twig | 6 +- tests/Controller/Admin/BlogControllerTest.php | 4 +- 22 files changed, 319 insertions(+), 162 deletions(-) diff --git a/assets/admin.js b/assets/admin.js index f47fab787..58d08002d 100644 --- a/assets/admin.js +++ b/assets/admin.js @@ -1,5 +1,4 @@ import './styles/admin.scss'; -import 'eonasdan-bootstrap-datetimepicker'; import 'typeahead.js'; import Bloodhound from "bloodhound-js"; import 'bootstrap-tagsinput'; @@ -7,19 +6,19 @@ import 'bootstrap-tagsinput'; $(function() { // Datetime picker initialization. // See https://eonasdan.github.io/bootstrap-datetimepicker/ - $('[data-toggle="datetimepicker"]').datetimepicker({ - icons: { - time: 'fa fa-clock-o', - date: 'fa fa-calendar', - up: 'fa fa-chevron-up', - down: 'fa fa-chevron-down', - previous: 'fa fa-chevron-left', - next: 'fa fa-chevron-right', - today: 'fa fa-check-circle-o', - clear: 'fa fa-trash', - close: 'fa fa-remove' - } - }); + // $('[data-toggle="datetimepicker"]').datetimepicker({ + // icons: { + // time: 'fa fa-clock-o', + // date: 'fa fa-calendar', + // up: 'fa fa-chevron-up', + // down: 'fa fa-chevron-down', + // previous: 'fa fa-chevron-left', + // next: 'fa fa-chevron-right', + // today: 'fa fa-check-circle-o', + // clear: 'fa fa-trash', + // close: 'fa fa-remove' + // } + // }); // Bootstrap-tagsinput initialization // https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/ @@ -57,7 +56,7 @@ $(document).on('submit', 'form[data-confirmation]', function (event) { .on('click', '#btnYes', function () { $confirm.data('result', 'yes'); $form.find('input[type="submit"]').attr('disabled', 'disabled'); - $form.submit(); + $form.trigger('submit'); }) .modal('show'); } diff --git a/assets/app.js b/assets/app.js index 80bbef864..636cc96a5 100644 --- a/assets/app.js +++ b/assets/app.js @@ -1,11 +1,12 @@ import './styles/app.scss'; // loads the Bootstrap jQuery plugins -import 'bootstrap-sass/assets/javascripts/bootstrap/transition.js'; -import 'bootstrap-sass/assets/javascripts/bootstrap/alert.js'; -import 'bootstrap-sass/assets/javascripts/bootstrap/collapse.js'; -import 'bootstrap-sass/assets/javascripts/bootstrap/dropdown.js'; -import 'bootstrap-sass/assets/javascripts/bootstrap/modal.js'; +// import 'bootstrap-sass/assets/javascripts/bootstrap/transition.js'; +import 'bootstrap/js/dist/alert'; +import 'bootstrap/js/dist/alert'; +import 'bootstrap/js/dist/collapse'; +import 'bootstrap/js/dist/dropdown'; +import 'bootstrap/js/dist/modal'; import 'jquery' // loads the code syntax highlighting library diff --git a/assets/styles/admin.scss b/assets/styles/admin.scss index c145f454f..5df24a4a9 100644 --- a/assets/styles/admin.scss +++ b/assets/styles/admin.scss @@ -1,5 +1,5 @@ -@import "~bootswatch/flatly/variables"; -@import "~eonasdan-bootstrap-datetimepicker/src/sass/bootstrap-datetimepicker-build.scss"; +@import "variables"; +// @import "~eonasdan-bootstrap-datetimepicker/src/sass/bootstrap-datetimepicker-build.scss"; @import "bootstrap-tagsinput.scss"; /* Page: 'Backend post index' @@ -24,3 +24,12 @@ body#admin_post_show .post-tags .label-default { body#admin_post_show .post-tags .label-default i { color: #95A6A7; } + +.form-control { + border-width: .125rem; + + &:focus { + color: $blue; + box-shadow: none; + } +} \ No newline at end of file diff --git a/assets/styles/app.scss b/assets/styles/app.scss index 8c8d90f92..1c8d6ed55 100644 --- a/assets/styles/app.scss +++ b/assets/styles/app.scss @@ -7,9 +7,57 @@ $web-font-path: 'data:text/css;base64,'; $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"; $lato-font-path: '~lato-font/fonts'; -@import "~bootswatch/flatly/variables"; +$font-default: 17px; +$font-heading: 2.5rem; +$font-title: 1.85rem; + +$secondary-color: #ecf0f1; +$gray-7500: #e9ecec; + +@import "~bootswatch/dist/flatly/variables"; + +// @import "~bootstrap/scss/bootstrap.scss"; +@import "~bootstrap/scss/functions"; +@import "~bootstrap/scss/variables"; +@import "~bootstrap/scss/mixins"; +@import "~bootstrap/scss/root"; +@import "~bootstrap/scss/reboot"; +@import "~bootstrap/scss/type"; +// @import "~bootstrap/scss/images"; +@import "~bootstrap/scss/code"; +@import "~bootstrap/scss/grid"; +@import "~bootstrap/scss/tables"; +@import "~bootstrap/scss/forms"; +@import "~bootstrap/scss/buttons"; +@import "~bootstrap/scss/transitions"; +@import "~bootstrap/scss/dropdown"; +@import "~bootstrap/scss/button-group"; +@import "~bootstrap/scss/input-group"; +// @import "~bootstrap/scss/custom-forms"; +// @import "~bootstrap/scss/nav"; +@import "~bootstrap/scss/navbar"; +// @import "~bootstrap/scss/card"; +@import "~bootstrap/scss/breadcrumb"; +@import "~bootstrap/scss/pagination"; +@import "~bootstrap/scss/badge"; +@import "~bootstrap/scss/jumbotron"; +@import "~bootstrap/scss/alert"; +// @import "~bootstrap/scss/progress"; +// @import "~bootstrap/scss/media"; +// @import "~bootstrap/scss/list-group"; +@import "~bootstrap/scss/close"; +// @import "~bootstrap/scss/toasts"; +@import "~bootstrap/scss/modal"; +// @import "~bootstrap/scss/tooltip"; +// @import "~bootstrap/scss/popover"; +// @import "~bootstrap/scss/carousel"; +// @import "~bootstrap/scss/spinners"; +@import "~bootstrap/scss/utilities"; +// @import "~bootstrap/scss/print"; + @import "~bootstrap-sass/assets/stylesheets/bootstrap"; -@import "~bootswatch/flatly/bootswatch"; + +@import "~bootswatch/dist/flatly/bootswatch"; @import "~@fortawesome/fontawesome-free/css/all.css"; @import "~@fortawesome/fontawesome-free/css/v4-shims.css"; @import "~highlight.js/styles/github-dark-dimmed.css"; @@ -21,22 +69,30 @@ $lato-font-path: '~lato-font/fonts'; /* Basic styles ------------------------------------------------------------------------- */ +h1 { + font-size: $font-heading; +} + p, ul, ol { - font-size: 19px; + font-size: $font-default; margin-bottom: 1.5em } +strong { + font-weight: bold; +} + li { margin-bottom: 0.5em } code { - background: #ecf0f1; - color: #2c3e50 + background: $secondary-color; + color: $blue; } .text-danger, .text-danger:hover { - color: #e74c3c + color: $red } i { @@ -52,6 +108,18 @@ i { color: inherit } +a:hover { + text-decoration: none; +} + +.help-block { + display: block; +} + +.alert-danger ul { + margin-bottom: 0; +} + /* Utilities ------------------------------------------------------------------------- */ .m-b-0 { margin-bottom: 0 } @@ -64,46 +132,71 @@ i { .modal-xl { width: $screen-lg-min - 60px; } } +.badge{ + padding: 0.25em 0.4em 0.27em 0.4em +} + +.jumbotron { + padding: 1.5rem 1rem +} + /* Page elements ------------------------------------------------------------------------- */ body { display: flex; flex-direction: column; - min-height: 100vh + min-height: 100vh; + + &:not(#homepage) { + padding-top: 120px + } } header { - margin-bottom: 2em + margin-bottom: 2em; } -header ul.nav li { - margin-bottom: 0 -} -header .locales { - min-width: 200px; -} -header .locales a { - color: #212529; - padding: 3px 15px; -} -header .locales a small { - border-radius: 4px; - border: 2px solid #dee2e6; - color: #7b8a8b; - float: left; - font-size: 12px; - line-height: 1.1; - margin: 2px 10px 0 0; - min-width: 26px; - padding: 0px 3px; - text-align: center; - text-transform: uppercase; -} -header .locales .active small, -header .locales a:hover small { - color: inherit; -} + .nav-link { + padding: 0 2rem; + } + + .locales { + min-width: 190px; + max-height: 320px; + overflow-y: scroll; + + .dropdown-item { + padding: 0.25rem 1rem; + margin-bottom: 0; + + &.active a, + &.active small, + &:hover a, + &:hover small, + a:hover{ + color: inherit; + } + + a { + color: $gray-900; + + small { + border-radius: 4px; + border: 2px solid $gray-300; + color: $gray-700; + float: left; + font-size: 12px; + line-height: 1.1; + margin: 2px 10px 0 0; + min-width: 26px; + padding: 0px 3px; + text-align: center; + text-transform: uppercase; + } + } + } + } .body-container { flex: 1; @@ -128,14 +221,14 @@ header .locales a:hover small { } footer { - background: #ecf0f1; + background: $secondary-color; margin-top: 2em; padding-top: 2em; padding-bottom: 2em } footer p { - color: #7b8a8b; + color: $gray-700; font-size: 13px; margin-bottom: 0.25em } @@ -145,18 +238,18 @@ footer #footer-resources { } footer #footer-resources i { - color: #7b8a8b; + color: $gray-700; font-size: 28.5px; margin-left: 0.5em } #sourceCodeModal h3 { - font-size: 19px; + font-size: $font-default; margin-top: 0 } #sourceCodeModal h3 small { - color: #7b8a8b; + color: $gray-700; font-size: 80% } @@ -176,23 +269,23 @@ footer #footer-resources i { /* Misc. elements ------------------------------------------------------------------------- */ .section.rss a { - color: #f39c12; + color: $yellow; font-size: 21px; } /* Forms ------------------------------------------------------------------------- */ .form-group.has-error .form-control { - border-color: #e74c3c + border-color: $red } .form-group.has-error .control-label { - color: #e74c3c + color: $red } .form-group.has-error .help-block { - background-color: #e74c3c; - color: #fff; + background-color: $red; + color: $white; font-size: 15px; padding: 1em } @@ -229,7 +322,35 @@ body#requirements_checker .panel li { /* Page: 'Homepage' ------------------------------------------------------------------------- */ body#homepage { - text-align: center + text-align: center; + + .page-header { + padding-bottom: 9.5px; + margin: 42px 0px 21px; + + h1 { + font-size: 39px; + margin-top: 21px; + margin-bottom: 10.5px + } + } + + .jumbotron { + padding: 48px 60px!important; + + .btn { + font-size: 19px; + line-height: 1.33333; + padding: 18px 27px; + border-radius: 6px; + } + + P { + margin-bottom: 15px; + font-size: 23px; + font-weight: 200 + } + } } /* Page: 'Login' @@ -271,17 +392,31 @@ body#login .form-group-password { /* Common Blog page elements ------------------------------------------------------------------------- */ +.post { + h2 { + font-size: $font-title; + } +} + .post-metadata { - color: #95a5a6; - font-size: 19px; + color: $gray-500; + font-size: $font-default; margin-bottom: 16px; } .post-metadata .metadata { margin-right: 1.5em; } -.post-tags .label { +.post-tags .badge { margin-right: 5px; + color: $gray-700; + padding: .5rem .75rem; + background-color: $gray-200; + + &.badge-success { + background-color: $success; + color: $white; + } } /* Page: 'Blog index' @@ -301,7 +436,7 @@ body#blog_index .post-metadata { } body#blog_index .post-tags .label-default { - background-color: #e9ecec; + background-color: $gray-7500; color: #6d8283; } body#blog_index .post-tags .label-default i { @@ -315,7 +450,7 @@ body#blog_post_show #main h3 { } body#blog_post_show .post-tags .label-default { - background-color: #e9ecec; + background-color: $gray-7500; color: #6D8283; font-size: 16px; margin-right: 10px; diff --git a/assets/styles/bootstrap-tagsinput.scss b/assets/styles/bootstrap-tagsinput.scss index 1af0e95ac..281f97950 100644 --- a/assets/styles/bootstrap-tagsinput.scss +++ b/assets/styles/bootstrap-tagsinput.scss @@ -87,11 +87,10 @@ * * ---------------------------------------------------------------------------- */ .bootstrap-tagsinput { - display: table-cell; - vertical-align: middle; - width: 100%; + flex: 1 1; + width: 1%; height: 45px; - padding: 0; + padding: 00.125rem 0 0 0; font-size: 15px; line-height: 1.42857143; color: #2c3e50; diff --git a/package.json b/package.json index 96fd417ba..e16aeb520 100644 --- a/package.json +++ b/package.json @@ -8,12 +8,10 @@ "@symfony/ux-live-component": "file:vendor/symfony/ux-live-component/assets", "@symfony/webpack-encore": "^4.0", "bloodhound-js": "^1.2.3", - "bootstrap": "^3.3", - "bootstrap-sass": "^3.3.7", + "bootstrap": "^4.5.3", "bootstrap-tagsinput": "^0.7.1", - "bootswatch": "^3.3.7", + "bootswatch": "^4.5.3", "core-js": "^3.23.0", - "eonasdan-bootstrap-datetimepicker": "^4.17.47", "highlight.js": "^11.5.1", "imports-loader": "^0.8.0", "jquery": "^3.5.1", @@ -24,6 +22,7 @@ "sass": "^1.53.0", "sass-loader": "^13.2", "stimulus": "^2.0.0", + "tempusdominus-bootstrap-4": "^5.39.0", "typeahead.js": "^0.11.1", "webpack": "^5.72", "webpack-cli": "^4.9.1", @@ -36,5 +35,5 @@ "dev": "encore dev", "watch": "encore dev --watch", "build": "encore production --progress" - } + } } diff --git a/templates/admin/blog/index.html.twig b/templates/admin/blog/index.html.twig index ddcefb9a4..c73205f6c 100644 --- a/templates/admin/blog/index.html.twig +++ b/templates/admin/blog/index.html.twig @@ -23,7 +23,7 @@ {{ post.publishedAt|format_datetime('medium', 'short', '', 'UTC') }}
- + {{ 'action.show'|trans }} diff --git a/templates/admin/blog/show.html.twig b/templates/admin/blog/show.html.twig index c891e17ce..4e2560a67 100644 --- a/templates/admin/blog/show.html.twig +++ b/templates/admin/blog/show.html.twig @@ -10,7 +10,7 @@ {{ post.author.fullName }}

-
+

{{ 'label.summary'|trans }}: {{ post.summary }}

diff --git a/templates/admin/layout.html.twig b/templates/admin/layout.html.twig index 92e55c10c..aa5f8a376 100644 --- a/templates/admin/layout.html.twig +++ b/templates/admin/layout.html.twig @@ -13,13 +13,13 @@ {% endblock %} {% block header_navigation_links %} -
  • - +
  • + {{ 'menu.post_list'|trans }}
    • -
  • - +
  • + {{ 'menu.back_to_blog'|trans }}
    • diff --git a/templates/base.html.twig b/templates/base.html.twig index 3bbec549c..4c8426161 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -3,6 +3,9 @@ common elements and decorates all the other templates. See https://symfony.com/doc/current/templates.html#template-inheritance-and-layouts #} + +{% set route = app.request.get('_route') %} + @@ -29,84 +32,75 @@ {% block header %}
    -
    {% endblock %} diff --git a/templates/blog/_comment_form.html.twig b/templates/blog/_comment_form.html.twig index 5a91e491d..68bc015b8 100644 --- a/templates/blog/_comment_form.html.twig +++ b/templates/blog/_comment_form.html.twig @@ -32,7 +32,7 @@
    -
    diff --git a/templates/blog/_delete_post_confirmation.html.twig b/templates/blog/_delete_post_confirmation.html.twig index 3832c5e37..e26bb2a40 100644 --- a/templates/blog/_delete_post_confirmation.html.twig +++ b/templates/blog/_delete_post_confirmation.html.twig @@ -7,7 +7,7 @@

    {{ 'delete_post_modal.body'|trans }}

    - @@ -11,22 +11,22 @@
    +

    {{ 'title.source_code'|trans }}

    -

    {{ 'title.source_code'|trans }}

    {% if controller %} -

    {{ 'title.controller_code'|trans }}{{ controller.file_path|format_file(controller.starting_line) }}

    +

    {{ 'title.controller_code'|trans }}{{ controller.file_path|format_file(controller.starting_line) }}

    {{ controller.source_code }}
    {% else %}

    {{ 'title.controller_code'|trans }}

    {{ 'not_available'|trans }}
    {% endif %} -

    {{ 'title.twig_template_code'|trans }}{{ template.file_path|format_file(template.starting_line) }}

    +

    {{ 'title.twig_template_code'|trans }}{{ template.file_path|format_file(template.starting_line) }}

    {{ template.source_code }}
    diff --git a/templates/form/fields.html.twig b/templates/form/fields.html.twig index f66070c17..acbc85ae1 100644 --- a/templates/form/fields.html.twig +++ b/templates/form/fields.html.twig @@ -10,17 +10,21 @@ {% block date_time_picker_widget %}
    {{ block('datetime_widget') }} - - - +
    + +
    {% endblock %} {% block tags_input_widget %}
    {{ form_widget(form, {'attr': {'data-toggle': 'tagsinput', 'data-tags': tags|json_encode}}) }} - - - +
    + + + +
    {% endblock %} diff --git a/templates/form/layout.html.twig b/templates/form/layout.html.twig index 272bc28aa..e5032c0a3 100644 --- a/templates/form/layout.html.twig +++ b/templates/form/layout.html.twig @@ -1,16 +1,18 @@ -{% extends 'bootstrap_3_layout.html.twig' %} +{% extends 'bootstrap_4_layout.html.twig' %} {# Errors #} +{# {% block form_errors -%} {% if errors|length > 0 -%} {% if form is not rootform %}{% else %}
    {% endif %}
      {%- for error in errors -%} - {# use font-awesome icon library #} + {# use font-awesome icon library # }
    • {{ error.message }}
      • {%- endfor -%}
    {% if form is not rootform %}{% else %}
    {% endif %} {%- endif %} {%- endblock form_errors %} +#} diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig index 5f3eb3bfa..26472ec34 100644 --- a/templates/security/login.html.twig +++ b/templates/security/login.html.twig @@ -17,7 +17,7 @@ #}
    -
    +
    {{ 'title.login'|trans }} @@ -86,14 +86,14 @@

    - {{ 'note'|trans }} + {{ 'note'|trans }} {{ 'help.reload_fixtures'|trans }}
    $ php bin/console doctrine:fixtures:load

    - {{ 'tip'|trans }} + {{ 'tip'|trans }} {{ 'help.add_user'|trans }}
    $ php bin/console app:add-user diff --git a/tests/Controller/Admin/BlogControllerTest.php b/tests/Controller/Admin/BlogControllerTest.php index 1b7f70b49..d86368c2a 100644 --- a/tests/Controller/Admin/BlogControllerTest.php +++ b/tests/Controller/Admin/BlogControllerTest.php @@ -135,8 +135,8 @@ public function testAdminNewDuplicatedPost(): void // post titles must be unique, so trying to create the same post twice should result in an error $this->client->submit($form); - $this->assertSelectorTextSame('form .form-group.has-error label', 'Title'); - $this->assertSelectorTextContains('form .form-group.has-error .help-block', 'This title was already used in another blog post, but they must be unique.'); + $this->assertSelectorTextContains('form .invalid-feedback .form-error-message', 'This title was already used in another blog post, but they must be unique.'); + $this->assertSelectorExists('form #post_title.is-invalid'); } public function testAdminShowPost(): void