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

Improved content search style

Browse Source 
Update content.php, index.json, and 8 more files...
This commit is contained in:
Herwin Bozet (NibblePoker)
2022-04-14 08:19:19 +02:00
parent a04c63e8bb
commit ccf4134cff
10 changed files with 110 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
commons/content.php
View File

@@ -163,13 +163,6 @@ content_end:
$content_error_message = localize($_content_error_message_key);
// These function are placed here to prevent the main file from becoming impossible to read.
function printErrorCard($title, $content) {
echo('<div class="card p-0 mx-0"><div class="px-card py-10 border-bottom px-20"><div class="container-fluid">'.
'<div class="row"><h2 class="card-title font-size-18 m-0"><i class="fad fa-exclamation-triangle"></i>&nbsp;&nbsp;'.
$title.'</h2></div></div></div><div class="px-card py-20 bg-light-lm bg-very-dark-dm rounded-bottom px-20">'.
'<h3 class="m-0 font-size-20 text-center font-weight-semi-bold">'.$content.'</h3></div></div>');
}
function startMainCard($iconClasses, $title, $subTitle) {
echo('<div class="card p-0 mx-0"><div class="px-card py-10 border-bottom px-20"><div class="container-fluid">'.
'<div class="row"><div class="col-4"><h2 class="card-title font-size-18 m-0"><i class="'.$iconClasses.

15
content/index.json
View File

@@ -28,5 +28,20 @@
"tags": [
"programming", "docker"
]
},
{
"id": "test03",
"title": {
"en": "ListComPort - COM port enumerator",
"fr": "ListComPort - Enumérateur de port COM"
},
"preamble": {
"en": "A simple cli tool that can list COM ports with their full name easily and cleanly.<br>This tool is intended to replace the tedious task of having to use the <code>mode</code> command, and the <i>Device Manager</i> to find a newly plugged-in device that provides a COM port.",
"fr": "..."
},
"image": "/resources/Azias/imgs/lscom-v2-text-01.png",
"tags": [
"programming", "docker"
]
}
]

50
content/index.php
View File

@@ -28,7 +28,7 @@ if($content_has_error) {
}
}
// TODO: Check if it went well, else 503 or something like - Done above ?.
// TODO: Check if it went well, else 503 or something like - Done above ?. - What is this shit supposed to mean ?!?
?>
<!DOCTYPE html>
<html lang="<?php echo($user_language); ?>">
@@ -86,38 +86,46 @@ if($content_has_error) {
// Checking if an error occurred.
if($content_error_code != 200) {
printErrorCard(localize('error.content.title.generic'), $content_error_message);
startMainCard("fad fa-exclamation-triangle", localize('error.content.title.generic'), "");
echo('<div class="py-20 bg-light-lm rounded-bottom px-0 bg-very-dark title-bkgd">');
echo('<h3 class="m-0 font-size-20 text-center font-weight-semi-bold">'.$content_error_message.'</h3>');
echo('</div>');
echo('<div class="px-card py-10 bg-light-lm bg-dark-dm rounded-bottom border-top">'.
'<p class="font-size-12 m-0">'.
'Card footer here.'.
'</p></div>');
endMainCard();
goto content_printing_end;
}
// Printing the containers
if($requested_content_display_type == ContentDisplayType::SEARCH) {
startMainCard("fad fa-file-search", localize("content.title.search"),
strval(count($filtered_content_index_data)) . " " .
(count($filtered_content_index_data) > 1 ?
localize("content.search.count.multiple") :
localize("content.search.count.single")));
// Creating the start of the card, only a "</div>" should be required afterward.
startMainCard(
"fad fa-file-search",
localize("content.title.search"),
strval(count($filtered_content_index_data)) . " " .
(count($filtered_content_index_data) > 1 ?
localize("content.search.count.multiple") :
localize("content.search.count.single")));
echo('<div class="py-20 bg-light-lm rounded-bottom px-0 bg-very-dark title-bkgd">');
for($i = 0; $i < count($filtered_content_index_data); $i++) {
if($i > 0) {
echo('<div class="sidebar-divider m-20 mx-0"></div>');
}
echo('<div class="content m-0 mx-20">');
echo('<div class="d-flex flex-wrap">');
echo('<div class="">');
echo('<img class="content-search-image" src="'.$filtered_content_index_data[$i]["image"].'">');
// https://css-tricks.com/float-an-element-to-the-bottom-corner/
echo('<div class="content-presentation-container">');
echo('<a href="#"><div>');
echo('<div class="content-search-image-container">');
echo('<img class="content-search-image" src="'.$filtered_content_index_data[$i]["image"].'">');
echo('</div>');
echo('<h3 class="font-size-18 mb-5 font-weight-semi-bold content-search-title">'.$filtered_content_index_data[$i]["title"][$user_language].'</h3>');
echo($filtered_content_index_data[$i]["preamble"][$user_language]);
echo('</div></a>');
echo('</div>');
echo('<div class="ml-md-15">');
echo('<h3 class="font-size-18 font-weight-semi-bold m-0 flex-fill">'.$filtered_content_index_data[$i]["title"][$user_language].'</h3>');
echo('<p class="text-break text-justify my-5 mb-0">'.$filtered_content_index_data[$i]["preamble"][$user_language].'</p>');
echo('</div>');
echo('</div>');
echo('<hr class="subtle">');
echo('<div class="d-flex flex-wrap">');

1
index.php
View File

@@ -29,6 +29,7 @@ include_once 'langs.php';
<?php include 'header-lang.php'; ?>
</div>
<div class="row mx-auto w-95">
<!-- The "content mx-auto w-lg-p90" do not work for the parent, the cards are different ! -->
<div class="col-12 d-block">
<div class="content mb-0">
<div class="card p-0 m-0 card-bkgd">

32
resources/Azias/css/nibblepoker.lu.css
View File

@@ -111,8 +111,40 @@ hr, hr.dark-mde, hr.subtle {
margin-bottom: 5px;
}
div.content-presentation-container {
margin-bottom: 10px;
min-height: 128px;
display: flex;
}
div.content-presentation-container > a {
width: 100%;
min-height: 128px;
text-align: justify;
color: var(--dm-card-text-color);
}
div.content-presentation-container > a:hover {
color: var(--dm-card-text-color);
text-decoration: none;
}
div.content-search-image-container {
background: var(--dm-card-bg-color) url("/resources/Azias/imgs/3px-tile-0.2.png") repeat fixed center center;
box-shadow: inset 0 0 25px 1px rgba(255,255,255,0.05);
border-radius: 8px;
width: 128px;
height: 128px;
margin-right: 10px;
float: left;
}
img.content-search-image {
max-width: 128px;
max-height: 128px;
border-radius: 8px;
box-shadow: 0 0 5px 1px rgba(0,0,0,0.3);
}
h3.content-search-title {
float: none;
margin: 0;
text-align: left;
}
div.content-tag-container a:not(:first-child) {
margin-left: 10px;

BIN
resources/Azias/imgs/icon-maker.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
resources/Azias/imgs/lscom-v1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
resources/Azias/imgs/lscom-v2-numbers-01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
resources/Azias/imgs/lscom-v2-text-01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

41
sitemap.txt
View File

@@ -1,17 +1,42 @@
https://nibblepoker.lu/
https://nibblepoker.lu/blog/
https://nibblepoker.lu/programming/
https://nibblepoker.lu/programming/purebasic/
https://nibblepoker.lu/programming/java/
https://nibblepoker.lu/programming/python/
https://nibblepoker.lu/programming/applications/
https://nibblepoker.lu/programming/tools/
https://nibblepoker.lu/programming/tutorials/
https://nibblepoker.lu/electronics/
https://nibblepoker.lu/electronics/iot/
https://nibblepoker.lu/electronics/experiments/
https://nibblepoker.lu/electronics/ham/
https://nibblepoker.lu/programming/tools/
https://nibblepoker.lu/programming/purebasic/
https://nibblepoker.lu/programming/python/
https://nibblepoker.lu/programming/docker/
https://nibblepoker.lu/programming/java/
https://nibblepoker.lu/links/
https://nibblepoker.lu/about/
https://nibblepoker.lu/contact/
https://nibblepoker.lu/privacy/
https://nibblepoker.lu/en/
https://nibblepoker.lu/en/blog/
https://nibblepoker.lu/en/programming/
https://nibblepoker.lu/en/programming/applications/
https://nibblepoker.lu/en/programming/tutorials/
https://nibblepoker.lu/en/programming/tools/
https://nibblepoker.lu/en/programming/purebasic/
https://nibblepoker.lu/en/programming/python/
https://nibblepoker.lu/en/programming/docker/
https://nibblepoker.lu/en/programming/java/
https://nibblepoker.lu/en/links/
https://nibblepoker.lu/en/about/
https://nibblepoker.lu/en/contact/
https://nibblepoker.lu/en/privacy/
https://nibblepoker.lu/fr/
https://nibblepoker.lu/fr/blog/
https://nibblepoker.lu/fr/programming/
https://nibblepoker.lu/fr/programming/applications/
https://nibblepoker.lu/fr/programming/tutorials/
https://nibblepoker.lu/fr/programming/tools/
https://nibblepoker.lu/fr/programming/purebasic/
https://nibblepoker.lu/fr/programming/python/
https://nibblepoker.lu/fr/programming/docker/
https://nibblepoker.lu/fr/programming/java/
https://nibblepoker.lu/fr/links/
https://nibblepoker.lu/fr/about/
https://nibblepoker.lu/fr/contact/
https://nibblepoker.lu/fr/privacy/