From 163e56d2f20aed75fd0b1155b0db93a001d000ee Mon Sep 17 00:00:00 2001 From: vincent Date: Fri, 3 Dec 2021 18:25:25 +0100 Subject: [PATCH] Add minor style adjustments for the demo --- .../src/javascript/directives/directives.js | 4 +- .../src/stylesheets/app.components.scss | 7 +- app/frontend/src/stylesheets/app.layout.scss | 115 +++++++++++++++++- .../modules/machines/machine-card.scss | 16 +-- app/frontend/src/stylesheets/overrides.scss | 17 +++ .../templates/admin/settings/general.html | 6 +- .../admin/settings/reservations.html | 8 +- app/frontend/templates/events/index.html | 58 ++++----- app/frontend/templates/events/show.html | 2 +- app/frontend/templates/home/events.html | 98 +++++++-------- app/frontend/templates/trainings/index.html | 2 +- 11 files changed, 224 insertions(+), 109 deletions(-) diff --git a/app/frontend/src/javascript/directives/directives.js b/app/frontend/src/javascript/directives/directives.js index a32131965..9082905a2 100644 --- a/app/frontend/src/javascript/directives/directives.js +++ b/app/frontend/src/javascript/directives/directives.js @@ -34,8 +34,8 @@ Application.Directives.directive('fileread', [() => Application.Directives.directive('bsHolder', [() => ({ link (scope, element, attrs) { - Holder.addTheme('icon', { background: 'white', foreground: '#e9e9e9', size: 80, font: 'FontAwesome' }) - .addTheme('icon-xs', { background: 'white', foreground: '#e0e0e0', size: 20, font: 'FontAwesome' }) + Holder.addTheme('icon', { background: 'white', foreground: '#ebebeb', size: 60, font: 'FontAwesome' }) + .addTheme('icon-xs', { background: 'white', foreground: '#ebebeb', size: 20, font: 'FontAwesome' }) .addTheme('icon-black-xs', { background: 'black', foreground: 'white', size: 20, font: 'FontAwesome' }) .addTheme('avatar', { background: '#eeeeee', foreground: '#555555', size: 16, font: 'FontAwesome' }) .run(element[0]); diff --git a/app/frontend/src/stylesheets/app.components.scss b/app/frontend/src/stylesheets/app.components.scss index c25d488de..544ff38cd 100644 --- a/app/frontend/src/stylesheets/app.components.scss +++ b/app/frontend/src/stylesheets/app.components.scss @@ -191,7 +191,9 @@ overflow: hidden; img { - max-height: 400px; + aspect-ratio: 16/9; + object-fit: cover; + object-position: center; } } @@ -243,7 +245,7 @@ &.picture { height: 250px; - background-size: contain; + background-size: cover; background-position: center; background-repeat: no-repeat; background-color: transparent; @@ -304,6 +306,7 @@ &.avatar-block { white-space: inherit; + width: 100%; height: 76px; .user-name { diff --git a/app/frontend/src/stylesheets/app.layout.scss b/app/frontend/src/stylesheets/app.layout.scss index 549bda911..b5eb89389 100644 --- a/app/frontend/src/stylesheets/app.layout.scss +++ b/app/frontend/src/stylesheets/app.layout.scss @@ -661,8 +661,121 @@ body.container { } .home-events { - .event-description { + h4 { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + column-gap: 1rem; + i { margin-right: 1rem;} + } +} + +.home-events-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); + gap: 30px; + margin-bottom: 5rem; + @media (max-width: 480px) { + grid-template-columns: 1fr; + } + + .Event { + display: flex; + flex-direction: column; + border: 1px solid #ddd; + border-radius: 5px; overflow: hidden; + &:hover { + cursor: pointer; + & .Event-picture {opacity: 0.7;} + } + + &-picture { + height: 250px; + background-color: #fff; + border-bottom: 1px solid #ebebeb; + transition: opacity 0.4s ease-out; + img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + + &-desc { + position: relative; + padding: 15px; + h3 { + max-width: 75%; + margin-top: 0; + font-size: 2rem; + font-weight: 900; + line-height: 1.3; + text-transform: uppercase; + color: #000 !important; + } + span { + position: absolute; + right: 15px; + top: 15px; + } + } + + &-info { + display: grid; + grid-template-rows: repeat(2, max-content); + grid-template-columns: repeat(2, 1fr); + gap: 15px; + margin-top: auto; + padding: 15px 30px 30px; + border-top: 1px solid #eee; + &-item { + height: 20px; + display: flex; + align-items: center; + i { + width: 16px; + height: 16px; + font-size: 16px; + text-align: center; + color: #cb1117; + } + h6 { margin: 0 0 0 15px;} + } + } + } +} + +.month-events-list { + display: grid; + grid-template-columns: 1fr; + gap: 15px; + margin-bottom: 2rem; + @media (min-width: 768px) { + grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); + } + + .Event { + display: flex; + border: 1px solid #ddd; + border-radius: 5px; + overflow: hidden; + + &-desc { + flex: 1; + padding: 10px 15px 15px; + } + &-picture { + width: 33%; + img { + width: 100%; + height: 100%; + object-fit: cover; + } + @media (max-width: 500px) { + display: none; + } + } } } diff --git a/app/frontend/src/stylesheets/modules/machines/machine-card.scss b/app/frontend/src/stylesheets/modules/machines/machine-card.scss index 4b0033439..540bcd77f 100644 --- a/app/frontend/src/stylesheets/modules/machines/machine-card.scss +++ b/app/frontend/src/stylesheets/modules/machines/machine-card.scss @@ -51,28 +51,30 @@ .machine-picture { height: 250px; - background-size: contain; + background-size: cover; background-position: center; background-repeat: no-repeat; transition: opacity 0.5s ease; cursor: pointer; padding: 0; color: #333333; - border-color: #ddd; - border-bottom: 1px solid transparent; + border-bottom: 1px solid #ebebeb; border-top-left-radius: 5px; border-top-right-radius: 5px; position: relative; &.no-picture::before { position: absolute; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; content: '\f03e'; font-family: 'Font Awesome 5 Free' !important; font-weight: 900; - font-size: 4em; - width: 100%; - text-align: center; - padding-top: 84px; + font-size: 80px; + color: #ebebeb; } } diff --git a/app/frontend/src/stylesheets/overrides.scss b/app/frontend/src/stylesheets/overrides.scss index 1d1466f06..3dfa11c0c 100644 --- a/app/frontend/src/stylesheets/overrides.scss +++ b/app/frontend/src/stylesheets/overrides.scss @@ -1,4 +1,21 @@ .carousel { + position: relative; + border-radius: 5px; + overflow: hidden; + &::before { + position: absolute; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + content: '\f03e'; + font-family: 'Font Awesome 5 Free' !important; + font-weight: 900; + font-size: 80px; + color: #ebebeb; + } + &-inner { aspect-ratio: 16/9; } diff --git a/app/frontend/templates/admin/settings/general.html b/app/frontend/templates/admin/settings/general.html index 0de4db60f..da132eeb5 100644 --- a/app/frontend/templates/admin/settings/general.html +++ b/app/frontend/templates/admin/settings/general.html @@ -202,7 +202,7 @@

{{ 'app.admin.settings.logo_white_background' }}