aziascreations/Web-NibblePoker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finished basic showcase for homepage, Improved grid CSS styles

Browse Source 
Update index.php, grid.scss, and 3 more files...
This commit is contained in:
Herwin Bozet (NibblePoker)
2023-12-09 01:39:24 +01:00
parent 38740d3bdb
commit df853485fd
5 changed files with 85 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
index.php
View File

@@ -16,6 +16,11 @@ include_once 'commons/langs.php';
<meta property="og:image" content="<?php echo($host_uri); ?>/resources/NibblePoker/images/logos/v2_opengraph.png"/> <meta property="og:image" content="<?php echo($host_uri); ?>/resources/NibblePoker/images/logos/v2_opengraph.png"/>
<meta property="og:image:type" content="image/png"/> <meta property="og:image:type" content="image/png"/>
<meta property="og:description" content="<?php print(localize('home.og.description')); ?>"/> <meta property="og:description" content="<?php print(localize('home.og.description')); ?>"/>
<style>
#showcase-grid article > img {
height: 96px;
}
</style>
</head> </head>
<body> <body>
<?php <?php
@@ -35,9 +40,66 @@ include 'commons/DOM/sidebar.php';
<p class="mt-xs mx-s"><?php print(localize("home.intro.text.1")); ?></p> <p class="mt-xs mx-s"><?php print(localize("home.intro.text.1")); ?></p>
<p class="mt-xs mx-s"><?php print(localize("home.intro.text.2")); ?></p> <p class="mt-xs mx-s"><?php print(localize("home.intro.text.2")); ?></p>
<?php
// Loading the "index.json" file for later use in the showcase.
include_once 'commons/config.php';
include_once 'commons/content.php';
$contentManager = getContentManager($config_dir_content);
$content = NULL;
if(!$contentManager->hasError && $contentManager->displayType == ContentDisplayType::CONTENT) {
$content = load_content_by_file_path($contentManager->contentFilepath);
if(is_null($content)) {
$contentManager->hasError = true;
$contentManager->errorMessageKey = "content.error.message.cannot.load";
}
}
$content_error_message = localize($contentManager->errorMessageKey);
<?php printMainHeader(localize("home.showcase.title")); ?> // Preparing the array of IDs
<p class="mt-xs mx-s t-bold">TODO</p> $shown_projects = ["lscom-cli-dotnet", "youtube-auto-archiver",
"excel-worksheet-password-remover", "dotnet-arguments"];
shuffle($shown_projects);
$shown_projects = array_slice($shown_projects, 0, 4);
sort($shown_projects);
// Printing the generic header
printMainHeader(localize("home.showcase.title"));
// Handling the printing.
if($contentManager->hasError) {
echo('<p class="mt-xs ml-s t-bold">' . $content_error_message . '</p>');
} else {
//col-mobile-1
echo('<div id="showcase-grid" class="grid col-2 col-medium-1 mt-xs mx-s gap-s">');
foreach($shown_projects as $shown_project_id) {
/** @var ?ContentIndexEntry $shown_project */
$shown_project = null;
foreach($contentManager->rootIndexEntries as $current_content) {
/** @var ContentIndexEntry $current_content */
if(strcmp($current_content->id, $shown_project_id) == 0) {
$shown_project = $current_content;
break;
}
}
if(is_null($shown_project)) {
continue;
}
echo('<a href="'.l10n_url_abs("/content/".$current_content->id).'" class="bland-link">');
echo('<article class="">');
echo('<img src="' . $shown_project->image . '" class="f-left r-l border mr-xs" alt="' .
$shown_project->title[$user_language] . ' logo">');
echo('<h3 class="mt-xxs">' . $shown_project->title[$user_language] . '</h3>');
echo('<p>' . preg_replace('/<br>.*/', '', $current_content->preamble[$user_language]) . '</p>');
echo('</article>');
echo('</a>');
}
echo('</div>');
}
?>
<?php printMainHeader(localize("home.updates.title")); ?> <?php printMainHeader(localize("home.updates.title")); ?>
<p class="mt-xs ml-s t-w-600"><i class="fad fa-calendar-alt mr-xs"></i><?php print(localize("home.updates.4.date")); ?></p> <p class="mt-xs ml-s t-w-600"><i class="fad fa-calendar-alt mr-xs"></i><?php print(localize("home.updates.4.date")); ?></p>
@@ -47,7 +109,7 @@ include 'commons/DOM/sidebar.php';
<?php print(localize("home.updates.4.text.3")); ?><br> <?php print(localize("home.updates.4.text.3")); ?><br>
<?php print(localize("home.updates.text.privacy")); ?> <?php print(localize("home.updates.text.privacy")); ?>
</p> </p>
<p class="mt-xs ml-s t-w-600"><i class="fad fa-calendar-alt mr-xs"></i><?php print(localize("home.updates.3.date")); ?></p> <p class="mt-s ml-s t-w-600"><i class="fad fa-calendar-alt mr-xs"></i><?php print(localize("home.updates.3.date")); ?></p>
<p class="mt-xxs ml-m"> <p class="mt-xxs ml-m">
<?php print(localize("home.updates.3.text.1")); ?><br> <?php print(localize("home.updates.3.text.1")); ?><br>
<?php print(localize("home.updates.3.text.2")); ?><br> <?php print(localize("home.updates.3.text.2")); ?><br>

18
resources/NibblePoker/scss/core/grid.scss
View File

@@ -10,6 +10,12 @@
} }
} }
@mixin grid-gap-maker($gap-size-key, $gap-size-value) {
.gap-#{$gap-size-key} {
grid-gap: #{$gap-size-value};
}
}
// Defining rules for all devices. // Defining rules for all devices.
@include grid-col-maker("1", ""); @include grid-col-maker("1", "");
@include grid-col-maker("2", ""); @include grid-col-maker("2", "");
@@ -18,6 +24,18 @@
@include grid-col-maker("6", ""); @include grid-col-maker("6", "");
@include grid-col-maker("8", ""); @include grid-col-maker("8", "");
@include grid-gap-maker("xs", calc(#{$grid-gap-base-size} * 0.5));
@include grid-gap-maker("s", calc(#{$grid-gap-base-size} * 0.75));
@include grid-gap-maker("m", #{$grid-gap-base-size});
@include grid-gap-maker("l", calc(#{$grid-gap-base-size} * 1.5));
@include grid-gap-maker("xl", calc(#{$grid-gap-base-size} * 2.0));
@media only screen and (max-width: 992px) {
@include grid-col-maker("1", "medium-");
@include grid-col-maker("2", "medium-");
@include grid-col-maker("3", "medium-");
}
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
@include grid-col-maker("1", "mobile-"); @include grid-col-maker("1", "mobile-");
@include grid-col-maker("2", "mobile-"); @include grid-col-maker("2", "mobile-");

3
resources/NibblePoker/scss/css/borders.css
View File

@@ -1,3 +0,0 @@
/*# sourceMappingURL=borders.css.map */

1
resources/NibblePoker/scss/css/borders.min.css vendored
View File

@@ -1 +0,0 @@
/*# sourceMappingURL=borders.min.css.map */

2
resources/NibblePoker/scss/variables.scss
View File

@@ -293,6 +293,8 @@ $border-base-radius: 5px;
$margin-base-size: 1rem; $margin-base-size: 1rem;
$grid-gap-base-size: 1rem;
$text-header-weight: 600; $text-header-weight: 600;
$size-sidebar: 15rem; $size-sidebar: 15rem;