Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mobile responsive layout #289

Draft
wants to merge 6 commits into
base: staging
Choose a base branch
from
Draft

Mobile responsive layout #289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9e8e547
When loading "loginAfterlinkSent" and user LoggedIn, try redirect to …
paaton Aug 5, 2024
3d075a5
Added leaveDate to "All data export"
paaton Aug 9, 2024
9a0ae4c
changed handling of logoUrls;
paaton Aug 21, 2024
f9ef933
Fixed running static getFullLogoUrl method dynamically
paaton Aug 21, 2024
e9a9921
dont try to show event logo on landing page;
paaton Aug 21, 2024
2e8abbb
two-card now switches to vertical layout when screen is too small
paaton Aug 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 public/SKAUT_horizontalni_logo_250.png → ...ic/assets/SKAUT_horizontalni_logo_250.png
View file
Open in desktop
File renamed without changes
0 public/ZNAK_EN_Scouting_Slovakia_500.png → .../assets/ZNAK_EN_Scouting_Slovakia_500.png
View file
Open in desktop
File renamed without changes
0 public/favicon-16x16.png → public/assets/favicon-16x16.png
View file
Open in desktop
File renamed without changes
0 public/logo_aqua23_168.png → public/assets/logo_aqua23_168.png
View file
Open in desktop
File renamed without changes
0 public/logo_aqua_zelene_168.png → public/assets/logo_aqua_zelene_168.png
View file
Open in desktop
File renamed without changes
0 public/logo_cej22_200.png → public/assets/logo_cej22_200.png
View file
Open in desktop
File renamed without changes
0 public/logo_cej24_color_160.png → public/assets/logo_cej24_color_160.png
View file
Open in desktop
File renamed without changes
0 public/logo_korbo_89.png → public/assets/logo_korbo_89.png
View file
Open in desktop
File renamed without changes
0 public/logo_navigamus21_cerna_200.png → public/assets/logo_navigamus21_cerna_200.png
View file
Open in desktop
File renamed without changes
0 public/logo_navigamus21_modra_200.png → public/assets/logo_navigamus21_modra_200.png
View file
Open in desktop
File renamed without changes
0 public/logo_obrok23_200.png → public/assets/logo_obrok23_200.png
View file
Open in desktop
File renamed without changes
0 public/logo_obrok24.png → public/assets/logo_obrok24.png
View file
Open in desktop
File renamed without changes
0 public/logo_wsj23_220.png → public/assets/logo_wsj23_220.png
View file
Open in desktop
File renamed without changes
137 changes: 33 additions & 104 deletions public/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,103 +1,3 @@
@font-face {
font-family: 'themix';
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400.eot');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400.eot? #iefix') format('embedded-opentype');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400.woff') format('woff'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_400.woff2') format('woff2'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_400.otf') format('opentype'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_400.svg#themix') format('svg');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'themix';
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.eot');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.eot? #iefix') format('embedded-opentype');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.woff') format('woff'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.woff2') format('woff2'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.otf') format('opentype'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.svg#themix') format('svg');
font-weight: 400;
font-style: italic;
}

@font-face {
font-family: 'themix';
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700.eot');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700.eot? #iefix') format('embedded-opentype');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700.woff') format('woff'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_700.woff2') format('woff2'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_700.otf') format('opentype'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_700.svg#themix') format('svg');
font-weight: 700;
font-style: normal;
}

@font-face {
font-family: 'themix';
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.eot');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.eot? #iefix') format('embedded-opentype');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.woff') format('woff'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.woff2') format('woff2'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.otf') format('opentype'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.svg#themix') format('svg');
font-weight: 700;
font-style: italic;
}

@font-face {
font-family: 'skautbold';
src: url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.eot');
src: url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.eot? #iefix') format('embedded-opentype');
src: url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.woff') format('woff'),
url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.otf') format('opentype'),
url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.svg#skautbold') format('svg');
font-weight: normal;
font-style: normal;
}

:root {
background: var(--color-background);
--border-radius: 6px;
font-family: 'themix', sans-serif;
box-sizing: border-box;
color: var(--color-main);
color-scheme: light dark;
accent-color: var(--color-main);
}

@media (prefers-color-scheme: light) {
:root {
--color-background: #e6ebed;
--color-card-background: #f9f9f9;
--color-input-background: #ffffff;
--color-main: #0D71B9;
--color-accent: #b9550d;
--color-fading: #a6d9ff;
--color-light: #3ba5f1;
--color-dark: #06375a;
--color-grey: #636363;
--color-link: #0000ee;
--color-link-visited: #551a8b;
}
}

@media (prefers-color-scheme: dark) {
:root {
--color-background: #212121;
--color-card-background: #252525;
--color-input-background: #2f2f2f;
--color-main: #85A2D5;
--color-accent: #d5b885;
--color-fading: #1f2e3d;
--color-light: #3e6ab5;
--color-dark: #d1dcef;
--color-grey: #888888;
--color-link: lightskyblue;
--color-link-visited: #ad76de;
}
}

*, *::before, *::after {
box-sizing: inherit;
Expand Down Expand Up @@ -138,9 +38,16 @@ h1 {
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
background-color: var(--color-card-background);
border-radius: var(--border-radius);
padding: 35px 44px;
margin-bottom: 11px;
padding: 25px;
text-align: center;
margin: 10px;
}

@media (min-width: 768px) {
.card {
padding: 35px 44px;
margin: 0 0 11px;
}
}

.card-half {
Expand All @@ -166,6 +73,15 @@ h1 {
h2, h3 {
margin-top: 0;
}
h2 {
font-size: 1.25rem; /* Smaller font for mobile */
}

@media (min-width: 768px) {
h2 {
font-size: 1.75rem;
}
}

a {
color: var(--color-link);
Expand Down Expand Up @@ -209,10 +125,17 @@ a:visited {

.two-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: 1fr;
grid-gap: 13px;
}

@media (min-width: 768px) {
.two-cards {
grid-template-columns: repeat(2, 1fr)
}
}


.login-card {
margin: 0 auto;
max-width: 400px;
Expand All @@ -230,16 +153,22 @@ ul.steps {
padding: 0;
flex-direction: row;
}
@media (max-width: 250px) {
ul.steps {
display: none;
}
}

li.step {
width: 33%;
position: relative;
text-align: center;
font-size: 1.25rem;
font-size: clamp(0.75rem, 4vw, 1.25rem);
font-weight: bolder;
color: var(--color-light);
}


li.step::before {
content: " ";
line-height: 30px;
Expand Down
100 changes: 100 additions & 0 deletions public/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
@font-face {
font-family: 'themix';
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400.eot');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400.eot? #iefix') format('embedded-opentype');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400.woff') format('woff'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_400.woff2') format('woff2'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_400.otf') format('opentype'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_400.svg#themix') format('svg');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'themix';
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.eot');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.eot? #iefix') format('embedded-opentype');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.woff') format('woff'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.woff2') format('woff2'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.otf') format('opentype'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.svg#themix') format('svg');
font-weight: 400;
font-style: italic;
}

@font-face {
font-family: 'themix';
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700.eot');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700.eot? #iefix') format('embedded-opentype');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700.woff') format('woff'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_700.woff2') format('woff2'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_700.otf') format('opentype'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_700.svg#themix') format('svg');
font-weight: 700;
font-style: normal;
}

@font-face {
font-family: 'themix';
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.eot');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.eot? #iefix') format('embedded-opentype');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.woff') format('woff'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.woff2') format('woff2'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.otf') format('opentype'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.svg#themix') format('svg');
font-weight: 700;
font-style: italic;
}

@font-face {
font-family: 'skautbold';
src: url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.eot');
src: url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.eot? #iefix') format('embedded-opentype');
src: url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.woff') format('woff'),
url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.otf') format('opentype'),
url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.svg#skautbold') format('svg');
font-weight: normal;
font-style: normal;
}

:root {
background: var(--color-background);
--border-radius: 6px;
font-family: 'themix', sans-serif;
box-sizing: border-box;
color: var(--color-main);
color-scheme: light dark;
accent-color: var(--color-main);
}

@media (prefers-color-scheme: light) {
:root {
--color-background: #e6ebed;
--color-card-background: #f9f9f9;
--color-input-background: #ffffff;
--color-main: #0D71B9;
--color-accent: #b9550d;
--color-fading: #a6d9ff;
--color-light: #3ba5f1;
--color-dark: #06375a;
--color-grey: #636363;
--color-link: #0000ee;
--color-link-visited: #551a8b;
}
}

@media (prefers-color-scheme: dark) {
:root {
--color-background: #212121;
--color-card-background: #252525;
--color-input-background: #2f2f2f;
--color-main: #85A2D5;
--color-accent: #d5b885;
--color-fading: #1f2e3d;
--color-light: #3e6ab5;
--color-dark: #d1dcef;
--color-grey: #888888;
--color-link: lightskyblue;
--color-link-visited: #ad76de;
}
}
8 changes: 7 additions & 1 deletion src/Event/Event.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,13 @@ public function getAvailableRoles(): array

public function getLogoInBase64(): string
{
return ImageUtils::getLocalImageInBase64($this->logoUrl);
return ImageUtils::getLocalImageInBase64(self::getFullLogoUrl($this->logoUrl));
}

public static function getFullLogoUrl(?string $logoUrl): string
{
if ($logoUrl === null) { return "";}
return "/assets" . $logoUrl;
}

public function getMinimalPpCount(Participant $participant): int
Expand Down
2 changes: 1 addition & 1 deletion src/Event/EventType/EventType.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,7 @@ public function showIban(): bool

public function getSkautLogoPath(Participant $participant): string
{
return '/SKAUT_horizontalni_logo_250.png';
return '/assets/SKAUT_horizontalni_logo_250.png';
}

public function getSkautStampSignPath(Participant $participant): string
Expand Down
3 changes: 3 additions & 0 deletions src/Export/ExportService.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,7 @@ public function allRegistrationDataToCSV(Event $event, User $adminUser): array
'registrationApproveDate',
'registrationPayDate', // 35
'entryDate',
'leaveDate',
'patrolOrTroopLeaderId',
'patrolName',
'patrolParticipantCount',
Expand Down Expand Up @@ -286,6 +287,8 @@ public function allRegistrationDataToCSV(Event $event, User $adminUser): array
$participant->registrationApproveDate !== null ? $participant->registrationApproveDate->format('d. m. Y H:i:s') : '', // 35
$participant->registrationPayDate !== null ? $participant->registrationPayDate->format('d. m. Y H:i:s') : '',
$participant->entryDate !== null ? $participant->entryDate->format('d. m. Y H:i:s') : '',
$participant->leaveDate !== null ? $participant->leaveDate->format('d. m. Y H:i:s') : '',

],
$ptPart,
$istPart
Expand Down
3 changes: 2 additions & 1 deletion src/Mailer/Mailer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

namespace kissj\Mailer;

use kissj\Event\Event;
use kissj\Participant\Participant;
use kissj\Payment\Payment;
use kissj\Payment\QrCodeService;
Expand Down Expand Up @@ -224,7 +225,7 @@ private function sendMailFromTemplate(
$email->htmlTemplate('emails/' . $templateName . '.twig');
$email->context(array_merge($parameters, [
'fullRegistrationLink' => $this->settings->getFullUrlLink(),
'eventImageExists' => is_file(__DIR__ . '/../../public/' . $event->logoUrl),
'eventImageExists' => is_file(__DIR__ . '/../../public/' . Event::getFullLogoUrl($event->logoUrl)),
]));
array_map(fn (string $attachment) => $email->attach($attachment), $attachments);
foreach ($embeds as $embed) {
Expand Down
12 changes: 12 additions & 0 deletions src/Settings/TwigExtension.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,23 @@
use kissj\Participant\Troop\TroopLeader;
use kissj\Participant\Troop\TroopParticipant;
use kissj\User\UserStatus;
use kissj\Event\Event;
use Twig\Extension\AbstractExtension;
use Twig\TwigTest;
use Twig\TwigFunction;

class TwigExtension extends AbstractExtension
{
/**
* @return TwigFunction[]
*/
public function getFunctions() :array
{
return [
new TwigFunction('eventLogo', [Event::class, 'getFullLogoUrl']),
];
}

/**
* @return TwigTest[]
*/
Expand Down
Loading
Loading